feat(nextjs): introduce next-auth v5 (#7443)

Next.js 13.4 [is out](https://nextjs.org/blog/next-13-4).

For discussing project-related issues, please use #8487

The new version of NextAuth.js is based on `@auth/core`.

If you want to test it out, you can do so already, installing `next-auth@experimental`:

- **Documentation**: https://authjs.dev/reference/nextjs
- **Migration guide**: https://authjs.dev/guides/upgrade-to-v5

BREAKING CHANGE:
Follow the [migration guide](https://authjs.dev/guides/upgrade-to-v5)

Author: balazsorban44

.github/pr-labeler.yml

@@ -13,10 +13,10 @@ fauna: ["packages/adapter-fauna/**/*"]
 firebase: ["packages/adapter-firebase/**/*"]
 hasura: ["packages/adapter-hasura/**/*"]
 frameworks: ["packages/frameworks-*/**/*"]
-legacy: ["packages/next-auth/**/*"]
 mikro-orm: ["packages/adapter-mikro-orm/**/*"]
 mongodb: ["packages/adapter-mongodb/**/*"]
 neo4j: ["packages/adapter-neo4j/**/*"]
+next-auth: ["packages/next-auth/**/*"]
 pg: ["packages/adapter-pg/**/*"]
 playgrounds: ["apps/playgrounds/**/*"]
 pouchdb: ["packages/adapter-pouchdb/**/*"]

.gitignore

@@ -30,13 +30,6 @@ dist
 .cache-loader
 packages/next-auth/providers
 packages/next-auth/src/providers/oauth-types.ts
-packages/next-auth/client
-packages/next-auth/css
-packages/next-auth/utils
-packages/next-auth/core
-packages/next-auth/jwt
-packages/next-auth/react
-packages/next-auth/next
 packages/*/*.js
 packages/*/*.d.ts
 packages/*/*.d.ts.map
@@ -90,7 +83,13 @@ packages/core/providers
 packages/core/src/lib/pages/styles.ts
 docs/docs/reference/core
 docs/docs/reference/sveltekit
+docs/docs/reference/nextjs
 
+# Next.js
+packages/next-auth/lib
+packages/next-auth/providers
+# copied from @auth/core
+packages/next-auth/src/providers
 
 # SvelteKit
 packages/frameworks-sveltekit/index.*

.prettierignore

@@ -31,6 +31,7 @@ coverage
 dist
 packages/**/*.cjs
 packages/**/*.js
+!packages/*/scripts/*.js
 
 # @auth/core
 packages/core/src/providers/oauth-types.ts

.vscode/settings.json

@@ -1,8 +1,7 @@
 {
   "files.exclude": {
     "packages/core/{lib,providers,*.js,*.d.ts,*.d.ts.map}": true,
-    "packages/next-auth/{client,core,css,jwt,next,providers,react,utils,*.js,*.d.ts}": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "openInGitHub.remote.branch": "main"
-}
+}

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

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

apps/dev/nextjs/app/auth/[...nextauth]/route.ts

@@ -0,0 +1,15 @@
+import { handlers } from "auth"
+const { GET: AuthGET, POST } = handlers
+export { POST }
+
+import type { NextRequest } from "next/server"
+
+// 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
+}
+
+// export const runtime = "edge"

apps/dev/nextjs/app/client.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { signIn, useSession } from "next-auth/react"
+
+export default function Client() {
+  const { data: session, update, status } = useSession()
+  return (
+    <div>
+      <pre>
+        {status === "loading" ? "Loading..." : JSON.stringify(session, null, 2)}
+      </pre>
+      <button onClick={() => signIn("github")}>Sign in</button>
+      <button onClick={() => update(`New Name`)}>Update session</button>
+    </div>
+  )
+}

apps/dev/nextjs/app/dashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>This page is protected.</h1>
+}

apps/dev/nextjs/app/layout.tsx

@@ -1,12 +1,56 @@
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+import { auth, signIn, signOut, update } from "auth"
+import Footer from "components/footer"
+import { Header } from "components/header"
+import styles from "components/header.module.css"
+import "./styles.css"
+
+export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html>
-      <head></head>
-      <body>{children}</body>
+      <body>
+        <AppHeader />
+        <main>{props.children}</main>
+        <div>
+          <form
+            action={async () => {
+              "use server"
+              update({ user: { name: "New Name" } })
+            }}
+          >
+            <button>Update name</button>
+          </form>
+        </div>
+        <Footer />
+      </body>
     </html>
   )
 }
+
+export async function AppHeader() {
+  const session = await auth()
+  return (
+    <Header
+      session={session}
+      signIn={
+        <form
+          action={async () => {
+            "use server"
+            await signIn("github")
+          }}
+        >
+          <button className={styles.buttonPrimary}>Sign in</button>
+        </form>
+      }
+      signOut={
+        <form
+          action={async () => {
+            "use server"
+            await signOut()
+          }}
+        >
+          <button className={styles.button}>Sign out</button>
+        </form>
+      }
+    />
+  )
+}

apps/dev/nextjs/app/page.tsx

@@ -0,0 +1,23 @@
+import { SessionProvider } from "next-auth/react"
+import { auth } from "auth"
+import Client from "./client"
+
+export default async function Page() {
+  const session = await auth()
+  return (
+    <>
+      {/* 
+       NOTE: The `auth()` result is not run through the `session` callback, be careful passing down data
+       to a client component, this will be exposed via the /api/auth/session endpoint
+      */}
+      <SessionProvider session={session} basePath="/auth">
+        <Client />
+      </SessionProvider>
+      <h1>NextAuth.js Example</h1>
+      <p>
+        This is an example site to demonstrate how to use{" "}
+        <a href="https://nextjs.authjs.dev">NextAuth.js</a> for authentication.
+      </p>
+    </>
+  )
+}