🔄 Synced local '.' with remote 'apps/examples/nextjs'

Author: balazsorban44

app/api-example/page.tsx

@@ -5,14 +5,14 @@ import { useEffect, useState } from "react"
 export default function Page() {
   const [data, setData] = useState()
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       const res = await fetch("/api/protected")
       const json = await res.json()
       setData(json)
     })()
   }, [])
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-6">
       <h1 className="text-3xl font-bold">Route Handler Usage</h1>
       <p>
         This page fetches data from an API{" "}
@@ -25,10 +25,14 @@ export default function Page() {
         </CustomLink>{" "}
         method.
       </p>
-      <h2 className="text-xl font-bold">Data from API Route:</h2>
-      <pre>
-        <code>{JSON.stringify(data, null, 2)}</code>
-      </pre>
+      <div className="flex flex-col rounded-md bg-neutral-100">
+        <div className="p-4 font-bold rounded-t-md bg-neutral-200">
+          Data from API Route
+        </div>
+        <pre className="py-6 px-4 whitespace-pre-wrap break-all">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      </div>
     </div>
   )
 }

app/client-example/page.tsx

@@ -5,7 +5,7 @@ import { SessionProvider } from "next-auth/react"
 export default async function ClientPage() {
   const session = await auth()
   if (session?.user) {
-    // @ts-expect-error TODO: Look into https://react.dev/reference/react/experimental_taintObjectReference
+    // TODO: Look into https://react.dev/reference/react/experimental_taintObjectReference
     // filter out sensitive data before passing to client.
     session.user = {
       name: session.user.name,
@@ -15,7 +15,7 @@ export default async function ClientPage() {
   }
 
   return (
-    <SessionProvider session={session}>
+    <SessionProvider basePath={"/auth"} session={session}>
       <ClientExample />
     </SessionProvider>
   )

app/globals.css

@@ -34,42 +34,13 @@
 
     --radius: 0.5rem;
   }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

app/page.tsx

@@ -1,11 +1,13 @@
 import CustomLink from "@/components/custom-link"
-import packageJSON from "../package.json"
+import { auth } from "auth"
+
+export default async function Index() {
+  const session = await auth()
 
-export default function Index() {
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-6">
       <h1 className="text-3xl font-bold">NextAuth.js Example</h1>
-      <p>
+      <div>
         This is an example site to demonstrate how to use{" "}
         <CustomLink href="https://nextjs.authjs.dev">NextAuth.js</CustomLink>{" "}
         for authentication. Check out the{" "}
@@ -17,12 +19,15 @@ export default function Index() {
           Client
         </CustomLink>{" "}
         examples to see how to secure pages and get session data.
-      </p>
-      <p>
-        Current{" "}
-        <CustomLink href="https://nextjs.authjs.dev">NextAuth.js</CustomLink>{" "}
-        version: <em>next-auth@{packageJSON.dependencies["next-auth"]}</em>
-      </p>
+      </div>
+      <div className="flex flex-col rounded-md bg-neutral-100">
+        <div className="p-4 font-bold rounded-t-md bg-neutral-200">
+          Current Session
+        </div>
+        <pre className="py-6 px-4 whitespace-pre-wrap break-all">
+          {JSON.stringify(session, null, 2)}
+        </pre>
+      </div>
     </div>
   )
 }

auth.ts

@@ -140,6 +140,10 @@ export const config = {
       if (pathname === "/middleware-example") return !!auth
       return true
     },
+    jwt({ token, trigger, session }) {
+      if (trigger === "update") token.name = session.user.name
+      return token
+    },
   },
 } satisfies NextAuthConfig
 

components/client-example.tsx

@@ -9,7 +9,7 @@ import CustomLink from "./custom-link"
 
 const UpdateForm = () => {
   const { data: session, update } = useSession()
-  const [name, setName] = useState(session?.user?.name ?? "")
+  const [name, setName] = useState(`New ${session?.user?.name}` ?? "")
 
   if (!session?.user) return null
   return (
@@ -25,11 +25,11 @@ const UpdateForm = () => {
             console.log({ newSession })
           }
         }}
-        className="flex items-center w-full max-w-sm space-x-2"
+        className="flex items-center space-x-2 w-full max-w-sm"
       >
         <Input
           type="text"
-          placeholder={session.user.name ?? ""}
+          placeholder="New name"
           value={name}
           onChange={(e) => {
             setName(e.target.value)
@@ -43,9 +43,10 @@ const UpdateForm = () => {
 
 export default function ClientExample() {
   const { data: session, status } = useSession()
+
   return (
-    <div className="space-y-2">
-      <h1 className="text-3xl font-bold">Client Side Rendering Usage</h1>
+    <div className="flex flex-col gap-4">
+      <h1 className="text-3xl font-bold">Client Side Rendering</h1>
       <p>
         This page fetches session data client side using the{" "}
         <CustomLink href="https://nextjs.authjs.dev/react#usesession">

components/custom-link.tsx

@@ -28,11 +28,14 @@ const CustomLink = ({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={cn("items-center underline", className)}
+      className={cn(
+        "inline-flex align-baseline gap-1 items-center underline underline-offset-4",
+        className
+      )}
       {...rest}
     >
-      {children}
-      <ExternalLink className=" ml-0.5 h-4 w-4 inline-block" />
+      <span>{children}</span>
+      <ExternalLink className="inline-block ml-0.5 w-4 h-4" />
     </Link>
   )
 }

components/footer.tsx

@@ -1,16 +1,29 @@
 import CustomLink from "./custom-link"
+import packageJSON from "next-auth/package.json"
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col w-full px-4 mx-0 my-4 space-y-1 text-sm md:max-w-3xl md:my-12 md:mx-auto sm:px-6 md:h-5 md:items-center md:space-y-0 md:space-x-4 md:flex-row">
-      <CustomLink href="https://nextjs.authjs.dev">Documentation</CustomLink>
-      <CustomLink href="https://www.npmjs.com/package/next-auth">
-        NPM
-      </CustomLink>
-      <CustomLink href="https://github.com/nextauthjs/next-auth/tree/main/apps/examples/nextjs">
-        Source on GitHub
-      </CustomLink>
-      <CustomLink href="/policy">Policy</CustomLink>
+    <footer className="flex flex-col gap-4 px-4 my-4 mx-0 w-full text-sm sm:flex-row sm:justify-between sm:items-center sm:px-6 sm:my-12 sm:mx-auto sm:max-w-3xl sm:h-5">
+      <div className="flex flex-col gap-4 sm:flex-row">
+        <CustomLink href="https://nextjs.authjs.dev">Documentation</CustomLink>
+        <CustomLink href="https://www.npmjs.com/package/next-auth">
+          NPM
+        </CustomLink>
+        <CustomLink href="https://github.com/nextauthjs/next-auth/tree/main/apps/examples/nextjs">
+          Source on GitHub
+        </CustomLink>
+        <CustomLink href="/policy">Policy</CustomLink>
+      </div>
+      <div className="flex gap-2 justify-start items-center">
+        <img
+          className="size-5"
+          src="https://authjs.dev/img/logo/logo-sm.webp"
+          alt="Auth.js Logo"
+        />
+        <CustomLink href="https://npmjs.org/package/next-auth">
+          {packageJSON.version}
+        </CustomLink>
+      </div>
     </footer>
   )
 }

components/main-nav.tsx

@@ -18,16 +18,24 @@ import { Button } from "./ui/button"
 
 export function MainNav() {
   return (
-    <div className="flex items-center space-x-2 lg:space-x-6">
+    <div className="flex gap-4 items-center">
       <CustomLink href="/">
         <Button variant="ghost" className="p-0">
-          <Image src="/logo.png" alt="Home" width="32" height="32" />
+          <Image
+            src="/logo.png"
+            alt="Home"
+            width="32"
+            height="32"
+            className="min-w-8"
+          />
         </Button>
       </CustomLink>
       <NavigationMenu>
         <NavigationMenuList>
           <NavigationMenuItem>
-            <NavigationMenuTrigger>Server Side</NavigationMenuTrigger>
+            <NavigationMenuTrigger className="px-2">
+              Server Side
+            </NavigationMenuTrigger>
             <NavigationMenuContent>
               <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                 <ListItem href="/server-example" title="RSC Example">

components/session-data.tsx

@@ -3,7 +3,7 @@ import type { Session } from "next-auth"
 export default function SessionData({ session }: { session: Session | null }) {
   if (session?.user) {
     return (
-      <div className="w-full space-y-2 overflow-auto">
+      <div className="flex flex-col gap-4 w-full">
         <h2 className="text-xl font-bold">Current Session Data</h2>
         {Object.keys(session.user).length > 3 ? (
           <p>
@@ -18,7 +18,14 @@ export default function SessionData({ session }: { session: Session | null }) {
             the page to avoid exposing sensitive information.
           </p>
         )}
-        <pre>{JSON.stringify(session, null, 2)}</pre>
+        <div className="flex flex-col rounded-md bg-neutral-100">
+          <div className="p-4 font-bold rounded-t-md bg-neutral-200">
+            Session
+          </div>
+          <pre className="py-6 px-4 whitespace-pre-wrap break-all">
+            {JSON.stringify(session, null, 2)}
+          </pre>
+        </div>
       </div>
     )
   }