feat: Update dependencies and fix environment variables references

.env.local.example

@@ -2,9 +2,9 @@ AUTH_SECRET= # `npx auth secret` or `openssl rand -hex 32`
 
 # highlight-start
 # You can find the Ory SDK URL under **API endpoints** in https://console.ory.sh/projects/current/settings
-AUTH_ORY_SDK_URL= # https://{slug}.projects.oryapis.com
-AUTH_ORY_CLIENT_ID= # The OAuth2 client ID
-AUTH_ORY_CLIENT_SECRET= # The OAuth2 client secret
+ORY_SDK_URL= # https://{slug}.projects.oryapis.com
+ORY_CLIENT_ID= # The OAuth2 client ID
+ORY_CLIENT_SECRET= # The OAuth2 client secret
 # highlight-end
 
 # THIRD_PARTY_API_EXAMPLE_BACKEND= # Read more at https://authjs.dev/guides/integrating-third-party-backends

README.md

@@ -27,6 +27,7 @@ ORY_SDK_URL=https://your-ory-project.projects.oryapis.com
 ORY_CLIENT_ID=your-client-id
 ORY_CLIENT_SECRET=your-client-secret
 
+AUTH_SECRET=your-auth-secret
 AUTH_KV_REST_API_URL=your-vercel-kv-url (optional)
 AUTH_KV_REST_API_TOKEN=your-vercel-kv-token (optional)
 AUTH_DEBUG=true (optional)

app/middleware-example/page.tsx

@@ -3,15 +3,15 @@ import CustomLink from "@/components/custom-link"
 export default function Page() {
   return (
     <div className="space-y-2">
-      <h1 className="text-3xl font-bold">Middleware usage</h1>
+      <h1 className="text-3xl font-bold">Proxy usage</h1>
       <p>
         This page is protected by using the universal{" "}
         <CustomLink href="https://nextjs.authjs.dev#auth">
           <code>auth()</code>
         </CustomLink>{" "}
         method in{" "}
-        <CustomLink href="https://nextjs.org/docs/app/building-your-application/routing/middleware">
-          Next.js Middleware
+        <CustomLink href="https://nextjs.org/docs/app/building-your-application/routing/proxy">
+          Next.js Proxy
         </CustomLink>
         .
       </p>

auth.ts

@@ -17,27 +17,28 @@ const storage = createStorage({
 })
 
 export const { handlers, auth, signIn, signOut } = NextAuth({
+  secret: process.env.AUTH_SECRET,
   debug: !!process.env.AUTH_DEBUG,
   theme: { logo: "https://authjs.dev/img/logo-sm.png" },
   adapter: UnstorageAdapter(storage),
   providers: [
-    // highlight-start
-    {
-      id: "ory",
-      name: "Ory",
-      type: "oidc",
-      style: {
-        logo: "/ory.svg",
-      },
-      issuer: process.env.ORY_SDK_URL,
-      clientId: process.env.ORY_CLIENT_ID,
-      clientSecret: process.env.ORY_CLIENT_SECRET,
-      checks: ["pkce" as never, "state" as never],
-      token: {
-        idToken: true,
-      },
+   // highlight-start
+   {
+    id: "ory",
+    name: "Ory",
+    type: "oidc",
+    style: {
+      logo: "/ory.svg",
+    },
+    issuer: process.env.ORY_SDK_URL,
+    clientId: process.env.ORY_CLIENT_ID,
+    clientSecret: process.env.ORY_CLIENT_SECRET,
+    checks: ["pkce" as never, "state" as never],
+    token: {
+      idToken: true,
     },
-    // highlight-eng
+  },
+  // highlight-end
   ],
   basePath: "/auth",
   session: { strategy: "jwt" },

components/main-nav.tsx

@@ -41,8 +41,8 @@ export function MainNav() {
                 <ListItem href="/server-example" title="RSC Example">
                   Protecting React Server Component.
                 </ListItem>
-                <ListItem href="/middleware-example" title="Middleware Example">
-                  Using Middleware to protect pages & APIs.
+                <ListItem href="/middleware-example" title="Proxy Example">
+                  Using Proxy to protect pages & APIs.
                 </ListItem>
                 <ListItem href="/api-example" title="Route Handler Example">
                   Getting the session inside an API Route.

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.