feat: update v5 example

apps/examples/nextjs/README.md

@@ -2,41 +2,44 @@
 
 <p align="center">
    <br/>
-   <a href="https://authjs.dev" target="_blank">
-   <img height="64" src="https://authjs.dev/img/logo/logo-sm.png" />
-   </a>
-   <a href="https://nextjs.org" target="_blank">
-   <img height="64" src="https://nextjs.org/static/favicon/android-chrome-192x192.png" />
-   </a>
-   <h3 align="center"><b>next-auth</b> - Example App</h3>
+   <a href="https://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/img/logo/logo-sm.png" /></a>
+   <h3 align="center">NextAuth.js Example App</h3>
    <p align="center">
    Open Source. Full Stack. Own Your Data.
    </p>
    <p align="center" style="align: center;">
       <a href="https://npm.im/next-auth">
-        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth&style=flat-square">
+        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth">
       </a>
       <a href="https://bundlephobia.com/result?p=next-auth-example">
-        <img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=size&style=flat-square" alt="Bundle Size"/>
+        <img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=next-auth" alt="Bundle Size"/>
       </a>
       <a href="https://www.npmtrends.com/next-auth">
-        <img src="https://img.shields.io/npm/dm/next-auth?label=downloads&style=flat-square" alt="Downloads" />
+        <img src="https://img.shields.io/npm/dm/next-auth?label=next-auth%20downloads" alt="Downloads" />
       </a>
       <a href="https://npm.im/next-auth">
-        <img src="https://img.shields.io/badge/TypeScript-blue?style=flat-square" alt="TypeScript" />
+        <img src="https://img.shields.io/badge/npm-TypeScript-blue" alt="TypeScript" />
       </a>
    </p>
 </p>
 
 ## Overview
 
-NextAuth.js is a complete open-source authentication solution.
+NextAuth.js is a complete open source authentication solution.
 
 This is an example application that shows how `next-auth` is applied to a basic Next.js app.
 
-The deployed version can be found at [`next-auth-example.vercel.app`](https://next-auth-example.vercel.app)
+<!-- TODO: Remove v5 when merged -->
 
-Go to [authjs.dev](https://authjs.dev) for more information and documentation.
+The deployed version can be found at [`next-auth-v5-example.vercel.app`](https://next-auth-v5-example.vercel.app)
+
+### About NextAuth.js
+
+NextAuth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for [Next.js](https://nextjs.org) and [Serverless](https://vercel.com). Our goal is to [support even more frameworks](https://github.com/nextauthjs/next-auth/issues/2294) in the future.
+
+Go to [next-auth.js.org](https://authjs.dev) for more information and documentation.
+
+> _NextAuth.js is not officially associated with Vercel or Next.js._
 
 ## Getting Started
 
@@ -66,19 +69,19 @@ You **can** skip configuring a database and come back to it later if you want.
 
 For more information about setting up a database, please check out the following links:
 
-- Docs: [authjs.dev/reference/adapters](https://authjs.dev/reference/adapters)
+- Docs: [authjs.dev/reference/adapters](https://authjs.dev/reference/core/adapters)
 
 ### 3. Configure Authentication Providers
 
-1. Review and update options in `pages/api/auth/[...nextauth].js` as needed.
+1. Review and update options in `auth.ts` as needed.
 
 2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of `{server}/api/auth/callback/{provider}`.
 
 e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
 
-A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at [authjs.dev/getting-started/oauth-tutorial](https://authjs.dev/getting-started/oauth-tutorial)
+A list of configured providers and their callback URLs is available from the endpoint `api/auth/providers`. You can find more information at https://authjs.dev/getting-started/oauth-tutorial
 
-3. You can also choose to specify an SMTP server for passwordless sign in via email.
+1. You can also choose to specify an SMTP server for passwordless sign in via email.
 
 ### 4. Start the application
 
@@ -97,13 +100,15 @@ npm run start
 
 ### 5. Preparing for Production
 
-Follow the [Deployment documentation](https://authjs.dev/guides/basics/deployment) or deploy the example instantly using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-auth-example)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/nextauthjs/next-auth-example&project-name=next-auth-example&repository-name=next-auth-example)
+Follow the [Deployment documentation](https://authjs.dev/guides/basics/deployment)
 
 ## Acknowledgements
 
 <a href="https://vercel.com?utm_source=nextauthjs&utm_campaign=oss">
 <img width="170px" src="https://raw.githubusercontent.com/nextauthjs/next-auth/main/docs/static/img/powered-by-vercel.svg" alt="Powered By Vercel" />
 </a>
-<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire Auth.js Team</p>
+<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire NextAuth.js Team</p>
+
+## License
+
+ISC

apps/examples/nextjs/app/api-example/page.tsx

@@ -0,0 +1,34 @@
+"use client"
+import CustomLink from "@/components/custom-link"
+import { useEffect, useState } from "react"
+
+export default function Page() {
+  const [data, setData] = useState()
+  useEffect(() => {
+    ;(async () => {
+      const res = await fetch("/api/protected")
+      const json = await res.json()
+      setData(json)
+    })()
+  }, [])
+  return (
+    <div className="space-y-2">
+      <h1 className="text-3xl font-bold">Route Handler Usage</h1>
+      <p>
+        This page fetches data from an API{" "}
+        <CustomLink href="https://nextjs.org/docs/app/building-your-application/routing/route-handlers">
+          Route Handler
+        </CustomLink>
+        . The API is protected using the universal{" "}
+        <CustomLink href="https://auth-docs-git-feat-nextjs-auth-authjs.vercel.app/reference/nextjs#auth">
+          <code>auth()</code>
+        </CustomLink>{" "}
+        method.
+      </p>
+      <h2 className="text-xl font-bold">Data from API Route:</h2>
+      <pre>
+        <code>{JSON.stringify(data, null, 2)}</code>
+      </pre>
+    </div>
+  )
+}

apps/examples/nextjs/app/api/[...nextauth]/route.ts

@@ -0,0 +1,13 @@
+import { handlers } from "auth"
+import type { NextRequest } from "next/server"
+
+const { GET: AuthGET, POST } = handlers
+export { POST }
+
+// Showcasing advanced initialization in Route Handlers
+export async function GET(request: NextRequest) {
+  // Do something with request
+  const response = await AuthGET(request)
+  // Do something with response
+  return response
+}

apps/examples/nextjs/app/api/protected/route.ts

@@ -1,9 +1,7 @@
-import { auth } from "@/auth"
+import { auth } from "auth"
 import { NextResponse } from "next/server"
 
 export const GET = auth(function GET(req) {
-  if (req.auth) {
-    return NextResponse.json(req.auth)
-  }
+  if (req.auth.user) return NextResponse.json({ data: "Protected data" })
   return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
 })

apps/examples/nextjs/app/client-example/page.tsx

@@ -0,0 +1,19 @@
+import { auth } from "auth"
+import ClientExample from "@/components/client-example"
+import { Providers } from "@/components/providers"
+
+export default async function ClientPage() {
+  const session = await auth()
+  if (session?.user)
+    session.user = {
+      name: session.user.name,
+      email: session.user.email,
+      picture: session.user.picture,
+    } // filter out sensitive data
+
+  return (
+    <Providers session={session}>
+      <ClientExample />
+    </Providers>
+  )
+}

apps/examples/nextjs/app/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --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;
+  }
+}

apps/examples/nextjs/app/layout.tsx

@@ -1,60 +1,29 @@
-import Link from "next/link"
-import { auth, CSRF_experimental } from "@/auth"
+import "./globals.css"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
 import Footer from "@/components/footer"
-import { Header } from "@/components/header"
-import styles from "@/components/header.module.css"
-import "./styles.css"
+import Header from "@/components/header"
 
-export default function RootLayout(props: { children: React.ReactNode }) {
-  return (
-    <html>
-      <head></head>
-      <body>
-        {/* @ts-expect-error */}
-        <AppHeader />
-        <main>{props.children}</main>
-        <Footer />
-      </body>
-    </html>
-  )
-}
+const inter = Inter({ subsets: ["latin"] })
 
-async function SignIn({ id, ...props }: { id?: string } & any) {
-  if (id) {
-    return (
-      <form action={`/auth/signin/${id}`} method="post">
-        {/* @ts-expect-error */}
-        <CSRF_experimental />
-        <button {...props} />
-      </form>
-    )
-  }
-  return <Link href="/auth/signin" {...props} />
+export const metadata: Metadata = {
+  title: "NextAuth.js v5 Example",
+  description:
+    "This is an example site to demonstrate how to use NextAuth.js v5 for authentication",
 }
 
-async function SignOut(props: JSX.IntrinsicElements["button"]) {
+export default function RootLayout({ children }: React.PropsWithChildren) {
   return (
-    <form action="/auth/signout" method="post">
-      <button {...props} />
-      {/* @ts-expect-error */}
-      <CSRF_experimental />
-    </form>
-  )
-}
-
-export async function AppHeader() {
-  const session = await auth()
-  return (
-    <Header
-      session={session}
-      signIn={
-        // @ts-expect-error
-        <SignIn id="github" className={styles.buttonPrimary}>
-          Sign in
-        </SignIn>
-      }
-      // @ts-expect-error
-      signOut={<SignOut className={styles.button}>Sign out</SignOut>}
-    />
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="flex flex-col justify-between w-full h-full min-h-screen">
+          <Header />
+          <main className="flex-auto w-full max-w-3xl px-4 py-4 mx-auto sm:px-6 md:py-6">
+            {children}
+          </main>
+          <Footer />
+        </div>
+      </body>
+    </html>
   )
 }

apps/examples/nextjs/app/middleware-example/page.tsx

@@ -0,0 +1,20 @@
+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>
+      <p>
+        This page is protected by using the universal{" "}
+        <CustomLink href="https://auth-docs-git-feat-nextjs-auth-authjs.vercel.app/reference/nextjs#auth">
+          <code>auth()</code>
+        </CustomLink>{" "}
+        method in{" "}
+        <CustomLink href="https://nextjs.org/docs/app/building-your-application/routing/middleware">
+          Next.js middleware
+        </CustomLink>
+        .
+      </p>
+    </div>
+  )
+}