feat(nextjs): introduce next-auth v5

.github/version-pr/index.js

@@ -5,14 +5,15 @@ const core = require("@actions/core")
 try {
   const packageJSONPath = path.join(
     process.cwd(),
-    "packages/next-auth/package.json"
+    `packages/${process.env.PACKAGE_PATH || "next-auth"}/package.json`
   )
   const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, "utf8"))
 
   const sha8 = process.env.GITHUB_SHA.substring(0, 8)
-  const prNumber = process.env.PR_NUMBER
-
-  const packageVersion = `0.0.0-pr.${prNumber}.${sha8}`
+  const prefix = "0.0.0-"
+  const pr = process.env.PR_NUMBER
+  const source = pr ? `pr.${pr}` : "manual"
+  const packageVersion = `${prefix}${source}.${sha8}`
   packageJSON.version = packageVersion
   core.setOutput("version", packageVersion)
   fs.writeFileSync(packageJSONPath, JSON.stringify(packageJSON))

.github/workflows/release.yml

@@ -8,6 +8,24 @@ on:
       - next
       - 3.x
   pull_request:
+  # TODO: Support latest releases
+  workflow_dispatch:
+    inputs:
+      name: 
+        type: choice
+        description: Package name (npm)
+        options:
+        - "@auth/nextjs"
+        - "@auth/core"
+        - "next-auth"
+      # TODO: Infer from package name
+      path:
+        type: choice
+        description: Directory name (packages/*)
+        options:
+        - "frameworks-nextjs"
+        - "core"
+        - "next-auth"
 
 jobs:
   test:
@@ -122,3 +140,35 @@ jobs:
         env:
           VERSION: ${{ steps.determine-version.outputs.version }}
           GITHUB_TOKEN: ${{ secrets.GH_PAT }}
+  release-manual:
+    name: Publish manually
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'workflow_dispatch' }}
+    steps:
+      - name: Init
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: pnpm install
+      - name: Determine version
+        uses: ./.github/version-pr
+        id: determine-version
+        env:
+          PACKAGE_PATH: ${{ github.event.inputs.path }}
+      - name: Publish to npm
+        run: |
+          pnpm build
+          cd packages/$PACKAGE_PATH
+          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
+          pnpm publish --no-git-checks --access public --tag experimental
+          echo "🎉 Experimental release published 📦️ on npm: https://npmjs.com/package/${{ github.event.inputs.name }}/v/${{ env.VERSION }}"
+          echo "Install via: pnpm add ${{ github.event.inputs.name }}@${{ env.VERSION }}"
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          PACKAGE_PATH: ${{ github.event.inputs.path }}
+          VERSION: ${{ steps.determine-version.outputs.version }}

.gitignore

@@ -85,7 +85,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/frameworks-nextjs/lib
+packages/frameworks-nextjs/providers
+# copied from @auth/core
+packages/frameworks-nextjs/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

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,14 @@
+import { GET as AuthGET } from "auth"
+export { POST } from "auth"
+
+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 "@auth/nextjs/client"
+
+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,60 @@
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+import { auth, CSRF_experimental } from "auth"
+import Footer from "components/footer"
+import { Header } from "components/header"
+import Link from "next/link"
+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>
+        {/* @ts-expect-error */}
+        <AppHeader />
+        <main>{props.children}</main>
+        <Footer />
+      </body>
     </html>
   )
 }
+
+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} />
+}
+
+async function SignOut(props: JSX.IntrinsicElements["button"]) {
+  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>}
+    />
+  )
+}

apps/dev/nextjs/app/page.tsx

@@ -0,0 +1,23 @@
+import { SessionProvider } from "@auth/nextjs/client"
+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>
+    </>
+  )
+}

apps/examples/nextjs/pages/styles.css → apps/dev/nextjs/app/styles.css

@@ -6,7 +6,7 @@ body {
   max-width: 680px;
   margin: 0 auto;
   background: #fff;
-  color: #333;
+  color: var(--color-text);
 }
 
 li,

apps/dev/nextjs/auth.config.ts

@@ -0,0 +1,40 @@
+import { NextAuthConfig } from "@auth/nextjs"
+import Auth0 from "@auth/nextjs/providers/auth0"
+import Credentials from "@auth/nextjs/providers/credentials"
+import Facebook from "@auth/nextjs/providers/facebook"
+import GitHub from "@auth/nextjs/providers/github"
+import Google from "@auth/nextjs/providers/google"
+import Twitter from "@auth/nextjs/providers/twitter"
+
+export default {
+  debug: true,
+  providers: [
+    GitHub({
+      clientId: process.env.AUTH_GITHUB_ID,
+      clientSecret: process.env.AUTH_GITHUB_SECRET,
+      account() {},
+    }),
+    Auth0,
+    Facebook,
+    Google,
+    Twitter,
+    Credentials({
+      credentials: { password: { label: "Password", type: "password" } },
+      authorize(c) {
+        if (c.password !== "password") return null
+        return { id: "test", name: "Test User", email: "[email protected]" }
+      },
+    }),
+  ],
+  callbacks: {
+    jwt({ token, trigger, session }) {
+      if (trigger === "update" && session) token.name = session
+      return token
+    },
+    authorized({ request, auth }) {
+      const url = new URL(request.url)
+      if (url.pathname === "/dashboard") return !!auth.user
+      return true
+    },
+  },
+} satisfies NextAuthConfig

apps/dev/nextjs/auth.ts

@@ -0,0 +1,24 @@
+import NextAuth from "@auth/nextjs"
+import Email from "@auth/nextjs/providers/email"
+import authConfig from "auth.config"
+import { PrismaClient } from "@prisma/client"
+import { PrismaAdapter } from "@next-auth/prisma-adapter"
+
+const prisma = new PrismaClient()
+
+authConfig.providers.push(
+  // Start server with `pnpm email`
+  // @ts-expect-error
+  Email({ server: "smtp://127.0.0.1:1025?tls.rejectUnauthorized=false" })
+)
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  CSRF_experimental,
+} = NextAuth({
+  // @ts-expect-error https://auth-docs-git-feat-nextjs-auth-authjs.vercel.app/guides/upgrade-to-v5#adapter-type
+  adapter: PrismaAdapter(prisma),
+  session: { strategy: "jwt" },
+  ...authConfig,
+})

apps/dev/nextjs/components/access-denied.js → apps/dev/nextjs/components/access-denied.tsx

@@ -1,4 +1,4 @@
-import { signIn } from "next-auth/react"
+import { signIn } from "@auth/nextjs/client"
 
 export default function AccessDenied() {
   return (

apps/dev/nextjs/components/footer.js → apps/dev/nextjs/components/footer.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link"
 import styles from "./footer.module.css"
-import packageJSON from "package.json"
+import packageJSON from "@auth/nextjs/package.json"
 
 export default function Footer() {
   return (
@@ -11,7 +11,7 @@ export default function Footer() {
           <a href="https://authjs.dev">Documentation</a>
         </li>
         <li className={styles.navItem}>
-          <a href="https://www.npmjs.com/package/@auth/core">NPM</a>
+          <a href="https://www.npmjs.com/package/next-auth">NPM</a>
         </li>
         <li className={styles.navItem}>
           <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>