fix(docs): clean up v5 migration intro

Fixes #7426

.eslintignore

@@ -1,70 +0,0 @@
-.eslintrc.js
-.cache-loader
-.DS_Store
-.pnpm-debug.log
-.turbo
-.vscode/generated*
-/_work
-/actions-runner
-node_modules
-patches
-pnpm-lock.yaml
-.github/actions/issue-validator/index.mjs
-*.cjs
-*.js
-*.d.ts
-*.d.ts.map
-
-.svelte-kit
-.next
-.nuxt
-
-# --------------- Docs ---------------
-
-.docusaurus
-build
-docs/docs/reference/03-core
-docs/docs/reference/04-sveltekit
-static
-
-# --------------- Packages ---------------
-
-coverage
-dist
-
-# @auth/core
-packages/core/src/providers/oauth-types.ts
-packages/core/src/lib/pages/styles.ts
-
-# @auth/sveltekit
-packages/frameworks-sveltekit/package
-packages/frameworks-sveltekit/vite.config.{js,ts}.timestamp-*
-
-# next-auth
-packages/next-auth/src/providers/oauth-types.ts
-packages/next-auth/css/index.css
-
-
-# Adapters
-.branches
-db.sqlite
-dev.db
-dynamodblocal-bin
-firebase-debug.log
-firestore-debug.log
-migrations
-test.schema.gql
-
-# --------------- Apps ---------------
-
-
-# Examples should have their own Prettier config since they are templates too
-apps/example-sveltekit
-
-# Development app
-apps
-
-
-# --------------- Tests ---------------
-# TODO: these should be linted
-packages/**/*test*

.eslintrc.js

@@ -1,75 +0,0 @@
-// @ts-check
-
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-  env: { browser: true, es2022: true, node: true },
-  extends: ["eslint:recommended", "prettier"],
-  overrides: [
-    {
-      files: ["*.ts", "*.tsx"],
-      parser: "@typescript-eslint/parser",
-      parserOptions: {
-        project: ["./packages/**/tsconfig.json", "./apps/**/tsconfig.json"],
-      },
-      settings: { react: { version: "18" } },
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "standard-with-typescript",
-        "prettier",
-      ],
-      rules: {
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/method-signature-style": "off",
-        "@typescript-eslint/naming-convention": "off",
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/restrict-template-expressions": "off",
-        "@typescript-eslint/strict-boolean-expressions": "off",
-        "react/prop-types": "off",
-        "react/no-unescaped-entities": "off",
-      },
-    },
-    {
-      files: ["*.test.ts", "*.test.js"],
-      extends: ["plugin:jest/recommended"],
-      env: { jest: true },
-    },
-    {
-      files: ["docs/**"],
-      plugins: ["@docusaurus"],
-      extends: ["plugin:@docusaurus/recommended"],
-    },
-    {
-      // TODO: Expand to all packages
-      files: ["packages/{core,sveltekit}/*.ts"],
-      plugins: ["jsdoc"],
-      extends: ["plugin:jsdoc/recommended"],
-      rules: {
-        "jsdoc/require-param": "off",
-        "jsdoc/require-returns": "off",
-        "jsdoc/require-jsdoc": [
-          "warn",
-          { publicOnly: true, enableFixer: false },
-        ],
-        "jsdoc/no-multi-asterisks": ["warn", { allowWhitespace: true }],
-        "jsdoc/tag-lines": "off",
-      },
-    },
-    {
-      files: ["packages/frameworks-sveltekit"],
-      plugins: ["svelte3"],
-      overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
-      settings: {
-        "svelte3/typescript": () => require("typescript"),
-      },
-      parserOptions: { sourceType: "module", ecmaVersion: 2020 },
-      env: { browser: true, es2017: true, node: true },
-    },
-  ],
-  parserOptions: {
-    sourceType: "module",
-    ecmaVersion: "latest",
-    ecmaFeatures: { jsx: true },
-  },
-  root: true,
-}

.github/ISSUE_TEMPLATE/1_bug_framework.yml

@@ -30,7 +30,7 @@ body:
         Run this command in your project's root folder and paste the result:
 
         ```sh
-        npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth"
+        npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth,@auth/*"
         ```
         Alternatively, you can manually gather the version information from your package.json for these packages: "next", "react" and "next-auth". Please also mention your OS and Node.js version, as well as the browser you are using.
     validations:

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -32,6 +32,7 @@ body:
         - "Azure Active Directory"
         - "Azure Active Directory B2C"
         - "Battlenet"
+        - "Beyond Identity"
         - "Box"
         - "Bungie"
         - "Cognito"
@@ -58,6 +59,7 @@ body:
         - "Medium"
         - "Naver"
         - "Netlify"
+        - "Notion"
         - "Okta"
         - "OneLogin"
         - "Osso"
@@ -88,7 +90,7 @@ body:
         Run this command in your project's root folder and paste the result:
 
         ```sh
-        npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth"
+        npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth,@auth/*"
         ```
         Alternatively, you can manually gather the version information from your package.json for these packages: "next", "react" and "next-auth". Please also mention your OS and Node.js version, as well as the browser you are using.
     validations:

.github/ISSUE_TEMPLATE/3_bug_adapter.yml

@@ -44,7 +44,7 @@ body:
         Run this command in your project's root folder and paste the result:
 
         ```sh
-        npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth" && npx envinfo --npmPackages "@next-auth/*"
+        npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth,@auth/*" && npx envinfo --npmPackages "@next-auth/*"
         ```
         Alternatively, if the above command did not work, we need the version of the following packages from your package.json: "next", "react", "next-auth" and your adapter. Please also mention your OS and Node.js version, as well as the browser you are using.
     validations:

.github/actions/issue-validator/repro.md

@@ -14,9 +14,9 @@ Ensure the link is pointing to a codebase that is accessible (e.g. not a private
 
 ### **What happens if I don't provide a sufficient minimal reproduction?**
 
-Issues with the `incomplete` label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.
+Issues with the `incomplete` label that receives no meaningful activity (e.g. new comments with a reproduction link) are closed after 7 days.
 
-If your issue has _not_ been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.
+If your issue has _not_ been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction. (It's less likely that we check back on already closed issues.)
 
 ### **I did not open this issue, but it is relevant to me, what can I do to help?**
 

.github/sync.yml

@@ -1,5 +1,3 @@
-# Note that nextauthjs/next-auth-example syncs from the v4 branch
-
 nextauthjs/sveltekit-auth-example:
   - source: apps/examples/sveltekit
     dest: .
@@ -20,3 +18,10 @@ nextauthjs/next-auth-gatsby-example:
     deleteOrphaned: true
   - .github/FUNDING.yml
   - LICENSE
+
+nextauthjs/next-auth-example:
+  - source: apps/examples/nextjs
+    dest: .
+    deleteOrphaned: true
+  - .github/FUNDING.yml
+  - LICENSE

.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/issue-validator.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - name: "Run issue validator"
+      - name: Run issue validator
         run: node /home/runner/work/next-auth/next-auth/.github/actions/issue-validator/index.mjs
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -3,11 +3,29 @@ name: Release
 on:
   push:
     branches:
-      - "main"
-      - "beta"
-      - "next"
-      - "3.x"
+      - main
+      - beta
+      - 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:
@@ -24,7 +42,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
       - name: Run tests
@@ -74,7 +91,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
       - name: Publish to npm and GitHub
@@ -99,7 +115,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
       - name: Determine version
@@ -125,3 +140,34 @@ 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/action-setup@v2.2.4
+      - 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: |
+          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

@@ -1,6 +1,5 @@
 # Misc
 .DS_Store
-.npmrc
 .eslintcache
 .env
 .env.local
@@ -12,8 +11,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 firebase-debug.log
+ui-debug.log
 .pnpm-debug.log
-
+.husky
 
 # Dependencies
 node_modules
@@ -34,18 +34,16 @@ packages/next-auth/utils
 packages/next-auth/core
 packages/next-auth/jwt
 packages/next-auth/react
-packages/next-auth/adapters.d.ts
-packages/next-auth/adapters.js
-packages/next-auth/index.d.ts
-packages/next-auth/index.js
 packages/next-auth/next
-packages/next-auth/middleware.d.ts
-packages/next-auth/middleware.js
+packages/*/*.js
+packages/*/*.d.ts
+packages/*/*.d.ts.map
 
 # Development app
 apps/dev/src/css
 apps/dev/prisma/migrations
 apps/dev/typeorm
+apps/dev/nextjs-2
 
 # VS
 /.vs/slnx.sqlite-journal
@@ -81,15 +79,16 @@ docs/.docusaurus
 docs/providers.json
 
 # Core
-packages/core/*.js
-packages/core/*.d.ts
-packages/core/*.d.ts.map
+packages/core/src/providers/oauth-types.ts
 packages/core/lib
 packages/core/providers
 packages/core/src/lib/pages/styles.ts
-docs/docs/reference/03-core
-docs/docs/reference/04-sveltekit
+docs/docs/reference/core
+docs/docs/reference/sveltekit
+docs/docs/reference/nextjs
 
+# Next.js
+packages/frameworks-nextjs/lib
 
 # SvelteKit
 packages/frameworks-sveltekit/index.*
@@ -98,3 +97,7 @@ packages/frameworks-sveltekit/.svelte-kit
 packages/frameworks-sveltekit/package
 packages/frameworks-sveltekit/vite.config.js.timestamp-*
 packages/frameworks-sveltekit/vite.config.ts.timestamp-*
+
+# Adapters
+
+docs/docs/reference/adapter

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*prisma*

.prettierignore

@@ -20,8 +20,8 @@ pnpm-lock.yaml
 
 .docusaurus
 build
-docs/docs/reference/03-core
-docs/docs/reference/04-sveltekit
+docs/docs/reference/core
+docs/docs/reference/sveltekit
 static
 docs/providers.json
 

.prettierrc.js

@@ -1,22 +0,0 @@
-// @ts-check
-
-/** @type {import("prettier").Config} */
-module.exports = {
-  semi: false,
-  singleQuote: false,
-  overrides: [
-    {
-      files: [
-        "apps/dev/nextjs/pages/api/auth/[...nextauth].ts",
-        "docs/{sidebars,docusaurus.config}.js",
-      ],
-      options: { printWidth: 150 },
-    },
-    {
-      files: ["**/*package.json"],
-      options: {
-        trailingComma: "none",
-      },
-    },
-  ],
-}

apps/dev/nextjs-v4/.env.local.example

@@ -0,0 +1,58 @@
+# Rename file to .env.local (or .env) and populate values
+# to be able to run the dev app
+
+NEXTAUTH_URL=http://localhost:3000
+
+# You can use `openssl rand -hex 32` or 
+# https://generate-secret.vercel.app/32 to generate a secret.
+# Note: Changing a secret may invalidate existing sessions
+# and/or verification tokens.
+NEXTAUTH_SECRET=secret
+
+AUTH0_ID=
+AUTH0_SECRET=
+AUTH0_ISSUER=
+
+KEYCLOAK_ID=
+KEYCLOAK_SECRET=
+KEYCLOAK_ISSUER=
+
+IDS4_ID=
+IDS4_SECRET=
+IDS4_ISSUER=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+TWITCH_ID=
+TWITCH_SECRET=
+
+TWITTER_ID=
+TWITTER_SECRET=
+
+LINE_ID=
+LINE_SECRET=
+
+TRAKT_ID=
+TRAKT_SECRET=
+
+# Example configuration for a Gmail account (will need SMTP enabled)
+EMAIL_SERVER=smtps://user@gmail.com:password@smtp.gmail.com:465
+EMAIL_FROM=user@gmail.com
+
+# Note: If using with Prisma adapter, you need to use a `.env`
+# file rather than a `.env.local` file to configure env vars.
+# Postgres: DATABASE_URL=postgres://nextauth:password@127.0.0.1:5432/nextauth?synchronize=true
+# MySQL:    DATABASE_URL=mysql://nextauth:password@127.0.0.1:3306/nextauth?synchronize=true
+# MongoDB:  DATABASE_URL=mongodb://nextauth:password@127.0.0.1:27017/nextauth?synchronize=true
+DATABASE_URL=
+
+WIKIMEDIA_ID=
+WIKIMEDIA_SECRET=
+
+# Supabase Example Configuration
+# Supabase Example Configuration
+# NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+# SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSJ9.vI9obAHOGyVVKa3pD--kJlyxp-Z2zV9UUMAhKpNLAcU
+# SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
+# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs

apps/dev/nextjs-v4/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.8.4/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/dev/nextjs-v4/README.md

@@ -0,0 +1,6 @@
+# NextAuth.js Development App
+
+This folder contains a Next.js app using NextAuth.js for local development. See the following section on how to start:
+
+[Setting up local environment
+](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md#setting-up-local-environment)

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

@@ -0,0 +1,14 @@
+import NextAuth, { type NextAuthOptions } from "next-auth"
+import GitHub from "next-auth/providers/github"
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    GitHub({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+  ],
+}
+
+const handler = NextAuth(authOptions)
+export { handler as GET, handler as POST }

apps/dev/nextjs-v4/app/layout.tsx

@@ -0,0 +1,12 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}

apps/dev/nextjs-v4/app/server-component/page.tsx

@@ -0,0 +1,6 @@
+import { getServerSession } from "next-auth/next"
+
+export default async function Page() {
+  const session = await getServerSession()
+  return <pre>{JSON.stringify(session, null, 2)}</pre>
+}

apps/dev/nextjs-v4/components/footer.js

@@ -8,10 +8,10 @@ export default function Footer() {
       <hr />
       <ul className={styles.navItems}>
         <li className={styles.navItem}>
-          <a href="https://authjs.dev">Documentation</a>
+          <a href="https://next-auth.js.org">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>

apps/dev/nextjs-v4/components/footer.module.css

@@ -0,0 +1,14 @@
+.footer {
+  margin-top: 2rem;
+}
+
+.navItems {
+  margin-bottom: 1rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

apps/dev/nextjs-v4/components/header.js

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { useSession } from "next-auth/react"
+import { signIn, signOut, useSession } from "next-auth/react"
 import styles from "./header.module.css"
 
 // The approach used in this component shows how to built a sign in and sign out
@@ -24,7 +24,14 @@ export default function Header() {
               <span className={styles.notSignedInText}>
                 You are not signed in
               </span>
-              <a href="/api/auth/signin" className={styles.buttonPrimary}>
+              <a
+                href="/api/auth/signin"
+                className={styles.buttonPrimary}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signIn()
+                }}
+              >
                 Sign in
               </a>
             </>
@@ -40,7 +47,14 @@ export default function Header() {
                 <strong>{session.user.email} </strong>
                 {session.user.name ? `(${session.user.name})` : null}
               </span>
-              <a href="/api/auth/signout" className={styles.button}>
+              <a
+                href="/api/auth/signout"
+                className={styles.button}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signOut()
+                }}
+              >
                 Sign out
               </a>
             </>

apps/dev/nextjs-v4/components/header.module.css

@@ -0,0 +1,92 @@
+/* Set min-height to avoid page reflow while session loading */
+.signedInStatus {
+  display: block;
+  min-height: 4rem;
+  width: 100%;
+}
+
+.loading,
+.loaded {
+  position: relative;
+  top: 0;
+  opacity: 1;
+  overflow: hidden;
+  border-radius: 0 0 .6rem .6rem;
+  padding: .6rem 1rem;
+  margin: 0;
+  background-color: rgba(0,0,0,.05);
+  transition: all 0.2s ease-in;
+}
+
+.loading {
+  top: -2rem;
+  opacity: 0;
+}
+
+.signedInText,
+.notSignedInText {
+  position: absolute;
+  padding-top: .8rem;
+  left: 1rem;
+  right: 6.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inherit;  
+  z-index: 1;
+  line-height: 1.3rem;
+}
+
+.signedInText {
+  padding-top: 0rem;
+  left: 4.6rem;
+}
+
+.avatar {
+  border-radius: 2rem;
+  float: left;
+  height: 2.8rem;
+  width: 2.8rem;
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.button,
+.buttonPrimary {
+  float: right;
+  margin-right: -.4rem;
+  font-weight: 500;
+  border-radius: .3rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.4rem;
+  padding: .7rem .8rem;
+  position: relative;
+  z-index: 10;
+  background-color: transparent;
+  color: #555;
+}
+
+.buttonPrimary {
+  background-color: #346df1;
+  border-color: #346df1;
+  color: #fff;
+  text-decoration: none;
+  padding: .7rem 1.4rem;
+}
+
+.buttonPrimary:hover {
+  box-shadow: inset 0 0 5rem rgba(0,0,0,0.2)
+}
+
+.navItems {
+  margin-bottom: 2rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

apps/dev/nextjs-v4/components/layout.js

@@ -0,0 +1,14 @@
+import Header from 'components/header'
+import Footer from 'components/footer'
+
+export default function Layout ({ children }) {
+  return (
+    <>
+      <Header />
+      <main>
+        {children}
+      </main>
+      <Footer />
+    </>
+  )
+}

apps/dev/nextjs-v4/middleware.ts

@@ -0,0 +1,45 @@
+export { default } from "next-auth/middleware"
+
+export const config = { matcher: ["/middleware-protected"] }
+
+// Other ways to use this middleware
+
+// import withAuth from "next-auth/middleware"
+// import { withAuth } from "next-auth/middleware"
+
+// export function middleware(req, ev) {
+//   return withAuth(req)
+// }
+
+// export function middleware(req, ev) {
+//   return withAuth(req, ev)
+// }
+
+// export function middleware(req, ev) {
+//   return withAuth(req, {
+//     callbacks: {
+//       authorized: ({ token }) => !!token,
+//     },
+//   })
+// }
+
+// export default withAuth(function middleware(req, ev) {
+//   console.log(req.nextauth.token)
+// })
+
+// export default withAuth(
+//   function middleware(req, ev) {
+//     console.log(req, ev)
+//   },
+//   {
+//     callbacks: {
+//       authorized: ({ token }) => token.name === "Balázs Orbán",
+//     },
+//   }
+// )
+
+// export default withAuth({
+//   callbacks: {
+//     authorized: ({ token }) => !!token,
+//   },
+// })

apps/dev/nextjs-v4/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/dev/nextjs-v4/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import("next").NextConfig} */
+module.exports = {
+  webpack(config) {
+    config.experiments = { ...config.experiments, topLevelAwait: true }
+    return config
+  },
+  experimental: { appDir: true },
+  typescript: { ignoreBuildErrors: true },
+}

apps/dev/nextjs-v4/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "next-auth-app-v4",
+  "version": "1.0.0",
+  "description": "NextAuth.js Developer app",
+  "private": true,
+  "scripts": {
+    "clean": "rm -rf .next",
+    "dev": "next dev",
+    "lint": "next lint",
+    "build": "next build",
+    "start": "next start",
+    "email": "fake-smtp-server",
+    "start:email": "pnpm email"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@next-auth/fauna-adapter": "workspace:*",
+    "@next-auth/prisma-adapter": "workspace:*",
+    "@next-auth/supabase-adapter": "workspace:*",
+    "@next-auth/typeorm-legacy-adapter": "workspace:*",
+    "@prisma/client": "^3",
+    "@supabase/supabase-js": "^2.0.5",
+    "faunadb": "^4",
+    "next": "13.3.0",
+    "next-auth": "workspace:*",
+    "nodemailer": "^6",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^8.5.5",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.6",
+    "fake-smtp-server": "^0.8.0",
+    "pg": "^8.7.3",
+    "prisma": "^3",
+    "sqlite3": "^5.0.8",
+    "typeorm": "0.3.7"
+  }
+}

apps/dev/nextjs-v4/pages/api-example.js

@@ -1,19 +1,17 @@
-import Layout from "../components/layout"
+import Layout from '../components/layout'
 
-export default function ApiExamplePage() {
+export default function Page () {
   return (
     <Layout>
       <h1>API Example</h1>
       <p>The examples below show responses from the example API endpoints.</p>
-      <p>
-        <em>You must be signed in to see responses.</em>
-      </p>
+      <p><em>You must be signed in to see responses.</em></p>
       <h2>Session</h2>
       <p>/api/examples/session</p>
-      <iframe src="/api/examples/session" />
+      <iframe src='/api/examples/session' />
       <h2>JSON Web Token</h2>
       <p>/api/examples/jwt</p>
-      <iframe src="/api/examples/jwt" />
+      <iframe src='/api/examples/jwt' />
     </Layout>
   )
 }

apps/dev/nextjs-v4/pages/api/auth-old/[...nextauth].ts

@@ -0,0 +1,132 @@
+import NextAuth, { NextAuthOptions } from "next-auth"
+
+// Providers
+import Apple from "next-auth/providers/apple"
+import Auth0 from "next-auth/providers/auth0"
+import AzureAD from "next-auth/providers/azure-ad"
+import AzureB2C from "next-auth/providers/azure-ad-b2c"
+import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
+// import Cognito from "next-auth/providers/cognito"
+import Credentials from "next-auth/providers/credentials"
+import Discord from "next-auth/providers/discord"
+import DuendeIDS6 from "next-auth/providers/duende-identity-server6"
+// import Email from "next-auth/providers/email"
+import Facebook from "next-auth/providers/facebook"
+import Foursquare from "next-auth/providers/foursquare"
+import Freshbooks from "next-auth/providers/freshbooks"
+import GitHub from "next-auth/providers/github"
+import Gitlab from "next-auth/providers/gitlab"
+import Google from "next-auth/providers/google"
+// import IDS4 from "next-auth/providers/identity-server4"
+import Instagram from "next-auth/providers/instagram"
+// import Keycloak from "next-auth/providers/keycloak"
+import Line from "next-auth/providers/line"
+import LinkedIn from "next-auth/providers/linkedin"
+import Mailchimp from "next-auth/providers/mailchimp"
+// import Okta from "next-auth/providers/okta"
+import Osu from "next-auth/providers/osu"
+import Patreon from "next-auth/providers/patreon"
+import Slack from "next-auth/providers/slack"
+import Spotify from "next-auth/providers/spotify"
+import Trakt from "next-auth/providers/trakt"
+import Twitch from "next-auth/providers/twitch"
+import Twitter from "next-auth/providers/twitter"
+import Vk from "next-auth/providers/vk"
+import Wikimedia from "next-auth/providers/wikimedia"
+import WorkOS from "next-auth/providers/workos"
+
+// // Prisma
+// import { PrismaClient } from "@prisma/client"
+// import { PrismaAdapter } from "@next-auth/prisma-adapter"
+// const client = globalThis.prisma || new PrismaClient()
+// if (process.env.NODE_ENV !== "production") globalThis.prisma = client
+// const adapter = PrismaAdapter(client)
+
+// // Fauna
+// import { Client as FaunaClient } from "faunadb"
+// import { FaunaAdapter } from "@next-auth/fauna-adapter"
+// const opts = { secret: process.env.FAUNA_SECRET, domain: process.env.FAUNA_DOMAIN }
+// const client = globalThis.fauna || new FaunaClient(opts)
+// if (process.env.NODE_ENV !== "production") globalThis.fauna = client
+// const adapter = FaunaAdapter(client)
+
+// // TypeORM
+// import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
+// const adapter = TypeORMLegacyAdapter({
+//   type: "sqlite",
+//   name: "next-auth-test-memory",
+//   database: "./typeorm/dev.db",
+//   synchronize: true,
+// })
+
+// // Supabase
+// import { SupabaseAdapter } from "@next-auth/supabase-adapter"
+// const adapter = SupabaseAdapter({
+//   url: process.env.NEXT_PUBLIC_SUPABASE_URL,
+//   secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
+// })
+
+export const authOptions: NextAuthOptions = {
+  // adapter,
+  // debug: process.env.NODE_ENV !== "production",
+  theme: {
+    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
+    brandColor: "#1786fb",
+  },
+  providers: [
+    Credentials({
+      credentials: { password: { label: "Password", type: "password" } },
+      async authorize(credentials) {
+        if (credentials.password !== "pw") return null
+        return { name: "Fill Murray", email: "bill@fillmurray.com", image: "https://www.fillmurray.com/64/64", id: "1", foo: "" }
+      },
+    }),
+    Apple({ clientId: process.env.APPLE_ID, clientSecret: process.env.APPLE_SECRET }),
+    Auth0({ clientId: process.env.AUTH0_ID, clientSecret: process.env.AUTH0_SECRET, issuer: process.env.AUTH0_ISSUER }),
+    AzureAD({
+      clientId: process.env.AZURE_AD_CLIENT_ID,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+    }),
+    AzureB2C({ clientId: process.env.AZURE_B2C_ID, clientSecret: process.env.AZURE_B2C_SECRET, issuer: process.env.AZURE_B2C_ISSUER }),
+    BoxyHQSAML({ issuer: "https://jackson-demo.boxyhq.com", clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com", clientSecret: "dummy" }),
+    // Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
+    Discord({ clientId: process.env.DISCORD_ID, clientSecret: process.env.DISCORD_SECRET }),
+    DuendeIDS6({ clientId: "interactive.confidential", clientSecret: "secret", issuer: "https://demo.duendesoftware.com" }),
+    Facebook({ clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET }),
+    Foursquare({ clientId: process.env.FOURSQUARE_ID, clientSecret: process.env.FOURSQUARE_SECRET }),
+    Freshbooks({ clientId: process.env.FRESHBOOKS_ID, clientSecret: process.env.FRESHBOOKS_SECRET }),
+    GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }),
+    Gitlab({ clientId: process.env.GITLAB_ID, clientSecret: process.env.GITLAB_SECRET }),
+    Google({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }),
+    // IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
+    Instagram({ clientId: process.env.INSTAGRAM_ID, clientSecret: process.env.INSTAGRAM_SECRET }),
+    // Keycloak({ clientId: process.env.KEYCLOAK_ID, clientSecret: process.env.KEYCLOAK_SECRET, issuer: process.env.KEYCLOAK_ISSUER }),
+    Line({ clientId: process.env.LINE_ID, clientSecret: process.env.LINE_SECRET }),
+    LinkedIn({ clientId: process.env.LINKEDIN_ID, clientSecret: process.env.LINKEDIN_SECRET }),
+    Mailchimp({ clientId: process.env.MAILCHIMP_ID, clientSecret: process.env.MAILCHIMP_SECRET }),
+    // Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
+    Osu({ clientId: process.env.OSU_CLIENT_ID, clientSecret: process.env.OSU_CLIENT_SECRET }),
+    Patreon({ clientId: process.env.PATREON_ID, clientSecret: process.env.PATREON_SECRET }),
+    Slack({ clientId: process.env.SLACK_ID, clientSecret: process.env.SLACK_SECRET }),
+    Spotify({ clientId: process.env.SPOTIFY_ID, clientSecret: process.env.SPOTIFY_SECRET }),
+    Trakt({ clientId: process.env.TRAKT_ID, clientSecret: process.env.TRAKT_SECRET }),
+    Twitch({ clientId: process.env.TWITCH_ID, clientSecret: process.env.TWITCH_SECRET }),
+    Twitter({ clientId: process.env.TWITTER_ID, clientSecret: process.env.TWITTER_SECRET }),
+    // TwitterLegacy({ clientId: process.env.TWITTER_LEGACY_ID, clientSecret: process.env.TWITTER_LEGACY_SECRET }),
+    Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
+    Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
+    WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
+  ],
+}
+
+if (authOptions.adapter) {
+  // TODO:
+  // authOptions.providers.unshift(
+  //   // NOTE: You can start a fake e-mail server with `pnpm email`
+  //   // and then go to `http://localhost:1080` in the browser
+  //   Email({ server: "smtp://127.0.0.1:1025?tls.rejectUnauthorized=false" })
+  // )
+}
+
+export default NextAuth(authOptions)

apps/dev/nextjs-v4/pages/api/examples/jwt.js

@@ -0,0 +1,7 @@
+// This is an example of how to read a JSON Web Token from an API route
+import { getToken } from "next-auth/jwt"
+
+export default async (req, res) => {
+  const token = await getToken({ req })
+  res.send(JSON.stringify(token, null, 2))
+}

apps/dev/nextjs-v4/pages/api/examples/protected.js

@@ -1,9 +1,9 @@
 // This is an example of to protect an API route
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import { authOptions } from "../auth/[...nextauth]"
 
 export default async (req, res) => {
-  const session = await unstable_getServerSession(req, res, authOptions)
+  const session = await getServerSession(req, res, authOptions)
 
   if (session) {
     res.send({

apps/dev/nextjs-v4/pages/api/examples/session.js

@@ -1,8 +1,8 @@
 // This is an example of how to access a session from an API route
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import { authOptions } from "../auth/[...nextauth]"
 
 export default async (req, res) => {
-  const session = await unstable_getServerSession(req, res, authOptions)
+  const session = await getServerSession(req, res, authOptions)
   res.json(session)
 }

apps/dev/nextjs-v4/pages/api/examples/supabase-rls.js

@@ -1,11 +1,11 @@
 // This is an example of how to query data from Supabase with RLS.
 // Learn more about Row Levele Security (RLS): https://supabase.com/docs/guides/auth/row-level-security
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import { authOptions } from "../auth/[...nextauth]"
 import { createClient } from "@supabase/supabase-js"
 
 export default async (req, res) => {
-  const session = await unstable_getServerSession(req, res, authOptions)
+  const session = await getServerSession(req, res, authOptions)
 
   if (!session)
     return res.send(JSON.stringify({ error: "No session!" }, null, 2))

apps/dev/nextjs-v4/pages/client.js

@@ -0,0 +1,22 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>Client Side Rendering</h1>
+      <p>
+        This page uses the <strong>useSession()</strong> React Hook in the <strong>&lt;/Header&gt;</strong> component.
+      </p>
+      <p>
+        The <strong>useSession()</strong> React Hook easy to use and allows pages to render very quickly.
+      </p>
+      <p>
+        The advantage of this approach is that session state is shared between pages by using the <strong>Provider</strong> in <strong>_app.js</strong> so
+        that navigation between pages using <strong>useSession()</strong> is very fast.
+      </p>
+      <p>
+        The disadvantage of <strong>useSession()</strong> is that it requires client side JavaScript.
+      </p>
+    </Layout>
+  )
+}

apps/dev/nextjs-v4/pages/email.js

@@ -0,0 +1,80 @@
+// eslint-disable-next-line no-use-before-define
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
+
+export default function Page() {
+  const [response, setResponse] = React.useState(null)
+  const [email, setEmail] = React.useState("")
+
+  const handleChange = (event) => {
+    setEmail(event.target.value)
+  }
+
+  const handleLogin = (options) => async (event) => {
+    event.preventDefault()
+
+    if (options.redirect) {
+      return signIn("email", options)
+    }
+    const response = await signIn("email", options)
+    setResponse(response)
+  }
+
+  const handleLogout = (options) => async (event) => {
+    if (options.redirect) {
+      return signOut(options)
+    }
+    const response = await signOut(options)
+    setResponse(response)
+  }
+
+  const { data: session } = useSession()
+
+  if (session) {
+    return (
+      <Layout>
+        <h1>Test different flows for Email logout</h1>
+        <span className="spacing">Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button>
+        <br />
+        <span className="spacing">No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button>
+        <br />
+        <p>Response:</p>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout>
+      <h1>Test different flows for Email login</h1>
+      <label className="spacing">
+        Email address:{" "}
+        <input
+          type="text"
+          id="email"
+          name="email"
+          value={email}
+          onChange={handleChange}
+        />
+      </label>
+      <br />
+      <form onSubmit={handleLogin({ redirect: true, email })}>
+        <span className="spacing">Default:</span>
+        <button type="submit">Sign in with Email</button>
+      </form>
+      <form onSubmit={handleLogin({ redirect: false, email })}>
+        <span className="spacing">No redirect:</span>
+        <button type="submit">Sign in with Email</button>
+      </form>
+      <p>Response:</p>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
+    </Layout>
+  )
+}

apps/dev/nextjs-v4/pages/index.js

@@ -0,0 +1,12 @@
+import Layout from 'components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>NextAuth.js Example</h1>
+      <p>
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
+      </p>
+    </Layout>
+  )
+}

apps/dev/nextjs-v4/pages/policy.js

@@ -0,0 +1,30 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <p>
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
+      </p>
+      <h2>Terms of Service</h2>
+      <p>
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+      </p>
+      <h2>Privacy Policy</h2>
+      <p>
+        This site uses JSON Web Tokens and an in-memory database which resets every ~2 hours.
+      </p>
+      <p>
+        Data provided to this site is exclusively used to support signing in
+        and is not passed to any third party services, other than via SMTP or OAuth for the
+        purposes of authentication.
+      </p>
+    </Layout>
+  )
+}

apps/dev/nextjs-v4/pages/protected-ssr.js

@@ -0,0 +1,48 @@
+// This is an example of how to protect content using server rendering
+import { getServerSession } from "next-auth/next"
+import { authOptions } from "./api/auth/[...nextauth]"
+import Layout from "../components/layout"
+import AccessDenied from "../components/access-denied"
+
+export default function Page({ content, session }) {
+  // If no session exists, display access denied message
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p>
+        <strong>{content}</strong>
+      </p>
+    </Layout>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const session = await getServerSession(context.req, context.res, authOptions)
+  let content = null
+
+  if (session) {
+    const hostname = process.env.NEXTAUTH_URL || "http://localhost:3000"
+    const options = { headers: { cookie: context.req.headers.cookie } }
+    const res = await fetch(`${hostname}/api/examples/protected`, options)
+    const json = await res.json()
+    if (json.content) {
+      content = json.content
+    }
+  }
+
+  return {
+    props: {
+      session,
+      content,
+    },
+  }
+}

apps/dev/nextjs-v4/pages/protected.js

@@ -1,14 +1,16 @@
 import { useState, useEffect } from "react"
 import { useSession } from "next-auth/react"
 import Layout from "../components/layout"
-import AccessDenied from "../components/access-denied"
 
-export default function ProtectedPage() {
-  const { data: session } = useSession()
+export default function Page() {
+  const { status } = useSession({
+    required: true,
+  })
   const [content, setContent] = useState()
 
   // Fetch content from protected route
   useEffect(() => {
+    if (status === "loading") return
     const fetchData = async () => {
       const res = await fetch("/api/examples/protected")
       const json = await res.json()
@@ -17,23 +19,16 @@ export default function ProtectedPage() {
       }
     }
     fetchData()
-  }, [session])
+  }, [status])
 
-  // If no session exists, display access denied message
-  if (!session) {
-    return (
-      <Layout>
-        <AccessDenied />
-      </Layout>
-    )
-  }
+  if (status === "loading") return <Layout>Loading...</Layout>
 
   // If session exists, display content
   return (
     <Layout>
       <h1>Protected Page</h1>
       <p>
-        <strong>{content ?? "\u00a0"}</strong>
+        <strong>{content}</strong>
       </p>
     </Layout>
   )

apps/dev/nextjs-v4/pages/server.js

@@ -1,4 +1,4 @@
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import Layout from "../components/layout"
 import { authOptions } from "./api/auth/[...nextauth]"
 
@@ -12,11 +12,11 @@ export default function Page() {
     <Layout>
       <h1>Server Side Rendering</h1>
       <p>
-        This page uses the <strong>unstable_getServerSession()</strong> method
-        in <strong>getServerSideProps()</strong>.
+        This page uses the <strong>getServerSession()</strong> method in{" "}
+        <strong>getServerSideProps()</strong>.
       </p>
       <p>
-        Using <strong>unstable_getServerSession()</strong> in{" "}
+        Using <strong>getServerSession()</strong> in{" "}
         <strong>getServerSideProps()</strong> is currently the recommended
         approach, although the API may still change, if you need to support
         Server Side Rendering with authentication.
@@ -40,11 +40,7 @@ export default function Page() {
 export async function getServerSideProps(context) {
   return {
     props: {
-      session: await unstable_getServerSession(
-        context.req,
-        context.res,
-        authOptions
-      ),
+      session: await getServerSession(context.req, context.res, authOptions),
     },
   }
 }

apps/dev/nextjs-v4/pages/styles.css

@@ -0,0 +1,32 @@
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  padding: 0 1rem 1rem 1rem;
+  max-width: 680px;
+  margin: 0 auto;
+  background: #fff;
+  color: var(--color-text);
+}
+
+li,
+p {
+  line-height: 1.5rem;
+}
+
+a {
+  font-weight: 500;
+}
+
+hr {
+  border: 1px solid #ddd;
+}
+
+iframe {
+  background: #ccc;
+  border: 1px solid #ccc;
+  height: 10rem;
+  width: 100%;
+  border-radius: .5rem;
+  filter: invert(1);
+}

apps/dev/nextjs-v4/pages/supabase-client-rls.js

@@ -9,6 +9,7 @@ export default function Page() {
 
   useEffect(() => {
     if (session) {
+      console.log(session)
       // User is logged in, let's fetch their data.
       const { supabaseAccessToken } = session
       const supabase = createClient(

apps/dev/nextjs-v4/pages/supabase-ssr.js

@@ -1,6 +1,6 @@
 // This is an example of how to protect content using server rendering
 // and fetching data from Supabase with RLS enabled.
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import { authOptions } from "./api/auth/[...nextauth]"
 import { createClient } from "@supabase/supabase-js"
 import Layout from "../components/layout"
@@ -27,11 +27,7 @@ export default function Page({ data, session }) {
 }
 
 export async function getServerSideProps(context) {
-  const session = await unstable_getServerSession(
-    context.req,
-    context.res,
-    authOptions
-  )
+  const session = await getServerSession(context.req, context.res, authOptions)
 
   if (!session)
     return {

apps/dev/nextjs-v4/prisma/migrations/20230325081057_test/migration.sql

@@ -0,0 +1,60 @@
+-- CreateTable
+CREATE TABLE "Account" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "refresh_token" TEXT,
+    "access_token" TEXT,
+    "expires_at" INTEGER,
+    "token_type" TEXT,
+    "scope" TEXT,
+    "id_token" TEXT,
+    "session_state" TEXT,
+    "oauth_token_secret" TEXT,
+    "oauth_token" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "sessionToken" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expires" DATETIME NOT NULL,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT,
+    "email" TEXT,
+    "emailVerified" DATETIME,
+    "image" TEXT
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" DATETIME NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");

apps/dev/nextjs-v4/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

apps/dev/nextjs-v4/prisma/schema.prisma

@@ -0,0 +1,57 @@
+datasource db {
+  provider = "sqlite"
+  url      = "file:./dev.db"
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+model Account {
+  id                 String  @id @default(cuid())
+  userId             String
+  type               String
+  provider           String
+  providerAccountId  String
+  refresh_token      String?
+  access_token       String?
+  expires_at         Int?
+  token_type         String?
+  scope              String?
+  id_token           String?
+  session_state      String?
+  oauth_token_secret String?
+  oauth_token        String?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  user      User     @relation(fields: [userId], references: [id])
+
+  @@unique([provider, providerAccountId])
+}
+
+model Session {
+  id           String   @id @default(cuid())
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id])
+}
+
+model User {
+  id            String    @id @default(cuid())
+  name          String?
+  email         String?   @unique
+  emailVerified DateTime?
+  image         String?
+  accounts      Account[]
+  sessions      Session[]
+}
+
+model VerificationToken {
+  identifier String
+  token      String   @unique
+  expires    DateTime
+
+  @@unique([identifier, token])
+}

apps/dev/nextjs-v4/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "jest.config.js"
+  ]
+}

apps/dev/nextjs-v4/types/nextauth.d.ts

@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import NextAuth from "next-auth"
+
+declare module "next-auth" {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    // A JWT which can be used as Authorization header with supabase-js for RLS.
+    supabaseAccessToken?: string
+    user: {
+      /** The user's postal address. */
+      address: string
+    } & User
+  }
+
+  interface User {
+    foo: string
+  }
+}

apps/dev/nextjs/.env.local.example

@@ -17,16 +17,31 @@ AUTH0_ID=
 AUTH0_SECRET=
 AUTH0_ISSUER=
 
-KEYCLOAK_ID=
-KEYCLOAK_SECRET=
-KEYCLOAK_ISSUER=
+# Beyond Identity Provider
+BEYOND_IDENTITY_CLIENT_ID=
+BEYOND_IDENTITY_CLIENT_SECRET=
+BEYOND_IDENTITY_ISSUER=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+NOTION_ID=
+NOTION_SECRET=
+NOTION_REDIRECT_URI=
 
 IDS4_ID=
 IDS4_SECRET=
 IDS4_ISSUER=
 
-GITHUB_ID=
-GITHUB_SECRET=
+KEYCLOAK_ID=
+KEYCLOAK_SECRET=
+KEYCLOAK_ISSUER=
+
+LINE_ID=
+LINE_SECRET=
+
+TRAKT_ID=
+TRAKT_SECRET=
 
 TWITCH_ID=
 TWITCH_SECRET=
@@ -34,11 +49,12 @@ TWITCH_SECRET=
 TWITTER_ID=
 TWITTER_SECRET=
 
-LINE_ID=
-LINE_SECRET=
+WIKIMEDIA_ID=
+WIKIMEDIA_SECRET=
 
-TRAKT_ID=
-TRAKT_SECRET=
+# Yandex OAuth. new app -> https://oauth.yandex.com/client/new/id
+YANDEX_ID=
+YANDEX_SECRET=
 
 # Example configuration for a Gmail account (will need SMTP enabled)
 EMAIL_SERVER=smtps://user@gmail.com:password@smtp.gmail.com:465
@@ -51,12 +67,9 @@ EMAIL_FROM=user@gmail.com
 # MongoDB:  DATABASE_URL=mongodb://nextauth:password@127.0.0.1:27017/nextauth?synchronize=true
 DATABASE_URL=
 
-WIKIMEDIA_ID=
-WIKIMEDIA_SECRET=
-
 # Supabase Example Configuration
 # Supabase Example Configuration
 # NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
 # SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSJ9.vI9obAHOGyVVKa3pD--kJlyxp-Z2zV9UUMAhKpNLAcU
 # SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
-# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs
+# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs

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

@@ -0,0 +1,3 @@
+import { handlers } from "auth"
+export const { GET, POST } = handlers
+export const runtime = "edge"

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

@@ -0,0 +1,10 @@
+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/client.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useEffect } from "react"
+
+export default function Client({ session }: any) {
+  useEffect(() => {
+    console.log(window.location)
+  })
+  return <div>{JSON.stringify(session)}</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,54 @@
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+import { auth } from "auth"
+import Footer from "components/footer"
+import { Header } from "components/header"
+import { cookies, headers } from "next/headers"
+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>
   )
 }
+
+function SignIn({ id, ...props }: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  const action = id ? `/api/auth/signin/${id}` : "/api/auth/signin"
+  return (
+    <form action={action} method="post">
+      <button {...props} />
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+function SignOut(props: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  return (
+    <form action="/api/auth/signout" method="post">
+      <button {...props} />
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+export async function AppHeader() {
+  const session = await auth(headers())
+  return (
+    <Header
+      session={session}
+      signIn={<SignIn className={styles.buttonPrimary}>Sign in</SignIn>}
+      signOut={<SignOut className={styles.button}>Sign out</SignOut>}
+    />
+  )
+}

apps/dev/nextjs/app/page.tsx

@@ -0,0 +1,17 @@
+import { auth } from "auth"
+import { headers } from "next/headers"
+import Client from "./client"
+
+export default async function Page() {
+  const session = await auth(headers())
+  return (
+    <>
+      <Client session={session} />
+      <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/dev/nextjs/app/server-component/page.tsx

@@ -1,6 +0,0 @@
-import { unstable_getServerSession } from "next-auth/next"
-
-export default async function Page() {
-  const session = await unstable_getServerSession()
-  return <pre>{JSON.stringify(session, null, 2)}</pre>
-}

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.ts

@@ -0,0 +1,31 @@
+import NextAuth from "@auth/nextjs"
+import Auth0 from "@auth/core/providers/auth0"
+import Facebook from "@auth/core/providers/facebook"
+import GitHub from "@auth/core/providers/github"
+import Google from "@auth/core/providers/google"
+import Twitter from "@auth/core/providers/twitter"
+import Credentials from "@auth/core/providers/credentials"
+
+export const { handlers, auth, getServerSession } = NextAuth({
+  debug: true,
+  providers: [
+    GitHub,
+    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: "test@example.com" }
+      },
+    }),
+  ],
+  callbacks: {
+    async authorized({ request: { nextUrl }, auth }) {
+      if (nextUrl.pathname === "/dashboard") return !!auth.user
+      return true
+    },
+  },
+})

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

@@ -0,0 +1,20 @@
+import { signIn } from "@auth/nextjs/react"
+
+export default function AccessDenied() {
+  return (
+    <>
+      <h1>Access Denied</h1>
+      <p>
+        <a
+          href="/api/auth/signin"
+          onClick={(e) => {
+            e.preventDefault()
+            signIn()
+          }}
+        >
+          You must be signed in to view this page
+        </a>
+      </p>
+    </>
+  )
+}

apps/dev/nextjs/components/footer.tsx

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

apps/dev/nextjs/components/header.module.css

@@ -1,6 +1,7 @@
 /* Set min-height to avoid page reflow while session loading */
 .signedInStatus {
-  display: block;
+  display: flex;
+  align-items: center;
   min-height: 4rem;
   width: 100%;
 }
@@ -25,16 +26,13 @@
 
 .signedInText,
 .notSignedInText {
-  position: absolute;
   padding-top: 0.8rem;
-  left: 1rem;
-  right: 6.5rem;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  display: inherit;
   z-index: 1;
   line-height: 1.3rem;
+  flex: 1;
 }
 
 .signedInText {
@@ -47,6 +45,7 @@
   float: left;
   height: 2.8rem;
   width: 2.8rem;
+  margin-right: 1rem;
   background-color: white;
   background-size: cover;
   background-repeat: no-repeat;
@@ -54,10 +53,11 @@
 
 .button,
 .buttonPrimary {
-  float: right;
-  margin-right: -0.4rem;
+  justify-self: end;
   font-weight: 500;
   border-radius: 0.3rem;
+  border: none;
+  font-weight: bold;
   cursor: pointer;
   font-size: 1rem;
   line-height: 1.4rem;

apps/dev/nextjs/components/header.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link"
+import styles from "./header.module.css"
+
+export function Header({ session, signIn, signOut }: any) {
+  return (
+    <header>
+      <div className={styles.signedInStatus}>
+        {!session && (
+          <>
+            <span className={styles.notSignedInText}>
+              You are not signed in
+            </span>
+            {signIn}
+          </>
+        )}
+        {session && (
+          <>
+            {session.user.picture && (
+              <img src={session.user.picture} className={styles.avatar} />
+            )}
+            <span className={styles.signedInText}>
+              <small>Signed in as</small>
+              <br />
+              <strong>{session.user.email} </strong>
+              {session.user.name ? `(${session.user.name})` : null}
+            </span>
+            {signOut}
+          </>
+        )}
+      </div>
+      <nav>
+        <ul className={styles.navItems}>
+          <li className={styles.navItem}>
+            <Link href="/">Home (app)</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/dashboard">Dashboard (app)</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/policy">Policy (pages)</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/credentials">Credentials (pages)</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/protected-ssr">getServerSideProps (pages)</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/api/examples/protected">API Route (pages)</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}

apps/dev/nextjs/components/layout.js

@@ -1,12 +0,0 @@
-import Header from "components/header"
-import Footer from "components/footer"
-
-export default function Layout({ children }) {
-  return (
-    <>
-      <Header />
-      <main>{children}</main>
-      <Footer />
-    </>
-  )
-}

apps/dev/nextjs/middleware.ts

@@ -1,45 +1 @@
-export { default } from "next-auth/middleware"
-
-export const config = { matcher: ["/middleware-protected"] }
-
-// Other ways to use this middleware
-
-// import withAuth from "next-auth/middleware"
-// import { withAuth } from "next-auth/middleware"
-
-// export function middleware(req, ev) {
-//   return withAuth(req)
-// }
-
-// export function middleware(req, ev) {
-//   return withAuth(req, ev)
-// }
-
-// export function middleware(req, ev) {
-//   return withAuth(req, {
-//     callbacks: {
-//       authorized: ({ token }) => !!token,
-//     },
-//   })
-// }
-
-// export default withAuth(function middleware(req, ev) {
-//   console.log(req.nextauth.token)
-// })
-
-// export default withAuth(
-//   function middleware(req, ev) {
-//     console.log(req, ev)
-//   },
-//   {
-//     callbacks: {
-//       authorized: ({ token }) => token.name === "Balázs Orbán",
-//     },
-//   }
-// )
-
-// export default withAuth({
-//   callbacks: {
-//     authorized: ({ token }) => !!token,
-//   },
-// })
+export { auth as default } from "auth"

apps/dev/nextjs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/dev/nextjs/package.json

@@ -15,6 +15,7 @@
   "license": "ISC",
   "dependencies": {
     "@auth/core": "workspace:*",
+    "@auth/nextjs": "workspace:*",
     "@next-auth/fauna-adapter": "workspace:*",
     "@next-auth/prisma-adapter": "workspace:*",
     "@next-auth/supabase-adapter": "workspace:*",
@@ -22,7 +23,7 @@
     "@prisma/client": "^3",
     "@supabase/supabase-js": "^2.0.5",
     "faunadb": "^4",
-    "next": "13.1.1",
+    "next": "13.4.0",
     "next-auth": "workspace:*",
     "nodemailer": "^6",
     "react": "^18",
@@ -31,7 +32,7 @@
   "devDependencies": {
     "@playwright/test": "1.29.2",
     "@types/jsonwebtoken": "^8.5.5",
-    "@types/react": "^18.0.15",
+    "@types/react": "18.0.37",
     "@types/react-dom": "^18.0.6",
     "dotenv": "^16.0.3",
     "fake-smtp-server": "^0.8.0",

apps/dev/nextjs/pages/_app.tsx

@@ -0,0 +1,39 @@
+import {
+  SessionProvider,
+  signIn,
+  signOut,
+  useSession,
+} from "@auth/nextjs/react"
+import "./styles.css"
+import { Header } from "components/header"
+import styles from "components/header.module.css"
+import Footer from "components/footer"
+
+export default function App({ Component, pageProps }) {
+  return (
+    <SessionProvider session={pageProps.session}>
+      <PagesHeader />
+      <Component {...pageProps} />
+      <Footer />
+    </SessionProvider>
+  )
+}
+
+function PagesHeader() {
+  const { data: session } = useSession()
+  return (
+    <Header
+      session={session}
+      signIn={
+        <button onClick={() => signIn()} className={styles.buttonPrimary}>
+          Sign in
+        </button>
+      }
+      signOut={
+        <button onClick={() => signOut()} className={styles.button}>
+          Sign out
+        </button>
+      }
+    />
+  )
+}

apps/dev/nextjs/pages/api/auth-old/[...nextauth].ts

@@ -6,6 +6,7 @@ import Asgardeo from "@auth/core/providers/asgardeo"
 import Auth0 from "@auth/core/providers/auth0"
 import AzureAD from "@auth/core/providers/azure-ad"
 import AzureB2C from "@auth/core/providers/azure-ad-b2c"
+import BeyondIdentity from "@auth/core/providers/beyondidentity"
 import BoxyHQSAML from "@auth/core/providers/boxyhq-saml"
 // import Cognito from "@auth/core/providers/cognito"
 import Credentials from "@auth/core/providers/credentials"
@@ -24,6 +25,7 @@ import Instagram from "@auth/core/providers/instagram"
 import Line from "@auth/core/providers/line"
 import LinkedIn from "@auth/core/providers/linkedin"
 import Mailchimp from "@auth/core/providers/mailchimp"
+import Notion from "@auth/core/providers/notion"
 // import Okta from "@auth/core/providers/okta"
 import Osu from "@auth/core/providers/osu"
 import Patreon from "@auth/core/providers/patreon"
@@ -32,6 +34,7 @@ import Spotify from "@auth/core/providers/spotify"
 import Trakt from "@auth/core/providers/trakt"
 import Twitch from "@auth/core/providers/twitch"
 import Twitter from "@auth/core/providers/twitter"
+import Yandex from "@auth/core/providers/yandex"
 import Vk from "@auth/core/providers/vk"
 import Wikimedia from "@auth/core/providers/wikimedia"
 import WorkOS from "@auth/core/providers/workos"
@@ -69,7 +72,7 @@ import WorkOS from "@auth/core/providers/workos"
 
 export const authConfig: AuthConfig = {
   // adapter,
-  // debug: process.env.NODE_ENV !== "production",
+  debug: process.env.NODE_ENV !== "production",
   theme: {
     logo: "https://next-auth.js.org/img/logo/logo-sm.png",
     brandColor: "#1786fb",
@@ -91,6 +94,11 @@ export const authConfig: AuthConfig = {
       tenantId: process.env.AZURE_AD_TENANT_ID,
     }),
     AzureB2C({ clientId: process.env.AZURE_B2C_ID, clientSecret: process.env.AZURE_B2C_SECRET, issuer: process.env.AZURE_B2C_ISSUER }),
+    BeyondIdentity({
+      clientId: process.env.BEYOND_IDENTITY_CLIENT_ID,
+      clientSecret: process.env.BEYOND_IDENTITY_CLIENT_SECRET,
+      issuer: process.env.BEYOND_IDENTITY_ISSUER,
+    }),
     BoxyHQSAML({ issuer: "https://jackson-demo.boxyhq.com", clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com", clientSecret: "dummy" }),
     // Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
     Discord({ clientId: process.env.DISCORD_ID, clientSecret: process.env.DISCORD_SECRET }),
@@ -98,7 +106,7 @@ export const authConfig: AuthConfig = {
     Facebook({ clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET }),
     Foursquare({ clientId: process.env.FOURSQUARE_ID, clientSecret: process.env.FOURSQUARE_SECRET }),
     Freshbooks({ clientId: process.env.FRESHBOOKS_ID, clientSecret: process.env.FRESHBOOKS_SECRET }),
-    GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }),
+    GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET, redirectProxy: process.env.AUTH_REDIRECT_PROXY_URL }),
     Gitlab({ clientId: process.env.GITLAB_ID, clientSecret: process.env.GITLAB_SECRET }),
     Google({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }),
     // IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
@@ -107,6 +115,7 @@ export const authConfig: AuthConfig = {
     Line({ clientId: process.env.LINE_ID, clientSecret: process.env.LINE_SECRET }),
     LinkedIn({ clientId: process.env.LINKEDIN_ID, clientSecret: process.env.LINKEDIN_SECRET }),
     Mailchimp({ clientId: process.env.MAILCHIMP_ID, clientSecret: process.env.MAILCHIMP_SECRET }),
+    Notion({ clientId: process.env.NOTION_ID, clientSecret: process.env.NOTION_SECRET, redirectUri: process.env.NOTION_REDIRECT_URI }),
     // Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
     Osu({ clientId: process.env.OSU_CLIENT_ID, clientSecret: process.env.OSU_CLIENT_SECRET }),
     Patreon({ clientId: process.env.PATREON_ID, clientSecret: process.env.PATREON_SECRET }),
@@ -116,6 +125,7 @@ export const authConfig: AuthConfig = {
     Twitch({ clientId: process.env.TWITCH_ID, clientSecret: process.env.TWITCH_SECRET }),
     Twitter({ clientId: process.env.TWITTER_ID, clientSecret: process.env.TWITTER_SECRET }),
     // TwitterLegacy({ clientId: process.env.TWITTER_LEGACY_ID, clientSecret: process.env.TWITTER_LEGACY_SECRET }),
+    Yandex({ clientId: process.env.YANDEX_ID, clientSecret: process.env.YANDEX_SECRET }),
     Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
     Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
     WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
@@ -150,4 +160,4 @@ function AuthHandler(...args: any[]) {
 
 export default AuthHandler(authConfig)
 
-export const config = { runtime: "experimental-edge" }
+export const config = { runtime: "edge" }

apps/dev/nextjs/pages/api/examples/protected.ts

@@ -0,0 +1,18 @@
+// This is an example of to protect an API route
+import { getServerSession } from "auth"
+
+export default async (req, res) => {
+  const session = await getServerSession(req, res)
+
+  if (session) {
+    res.send({
+      content:
+        "This is protected content. You can access this content because you are signed in.",
+      session,
+    })
+  } else {
+    res.send({
+      error: "You must be sign in to view the protected content on this page.",
+    })
+  }
+}

apps/dev/nextjs/pages/api/examples/session.ts

@@ -0,0 +1,8 @@
+import { authConfig } from "../auth-old/[...nextauth]"
+// This is an example of how to access a session from an API route
+import { getServerSession } from "next-auth/next"
+
+export default async (req, res) => {
+  const session = await getServerSession(req, res, authConfig as any)
+  res.json(session)
+}

apps/dev/nextjs/pages/credentials.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { signIn, signOut, useSession } from "@auth/nextjs/react"
+import { SignInResponse, SignOutResponse } from "@auth/nextjs/lib/client"
+
+export default function Page() {
+  const [response, setResponse] = React.useState<
+    SignInResponse | SignOutResponse
+  >()
+
+  const { data: session } = useSession()
+
+  if (session) {
+    return (
+      <>
+        <h1>Test different flows for Credentials logout</h1>
+        <span className="spacing">Default: </span>
+        <button onClick={() => signOut()}>Logout</button>
+        <br />
+        <span className="spacing">No redirect: </span>
+        <button onClick={() => signOut({ redirect: false }).then(setResponse)}>
+          Logout
+        </button>
+        <br />
+        <p>{response ? "Response:" : "Session:"}</p>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response ?? session, null, 2)}
+        </pre>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <h1>Test different flows for Credentials login</h1>
+      <span className="spacing">Default: </span>
+      <button onClick={() => signIn("credentials", { password: "password" })}>
+        Login
+      </button>
+      <br />
+      <span className="spacing">No redirect: </span>
+      <button
+        onClick={() =>
+          signIn("credentials", { redirect: false, password: "password" }).then(
+            setResponse
+          )
+        }
+      >
+        Login
+      </button>
+      <br />
+      <span className="spacing">No redirect, wrong password: </span>
+      <button
+        onClick={() =>
+          signIn("credentials", { redirect: false, password: "wrong" }).then(
+            setResponse
+          )
+        }
+      >
+        Login
+      </button>
+      <p>Response:</p>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
+    </>
+  )
+}

apps/dev/nextjs/pages/policy.js

@@ -1,8 +1,6 @@
-import Layout from "../components/layout"
-
 export default function Page() {
   return (
-    <Layout>
+    <>
       <p>
         This is an example site to demonstrate how to use{" "}
         <a href="https://authjs.dev">Auth.js</a> for authentication.
@@ -18,15 +16,11 @@ export default function Page() {
         SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
       </p>
       <h2>Privacy Policy</h2>
-      <p>
-        This site uses JSON Web Tokens and an in-memory database which resets
-        every ~2 hours.
-      </p>
       <p>
         Data provided to this site is exclusively used to support signing in and
         is not passed to any third party services, other than via SMTP or OAuth
         for the purposes of authentication.
       </p>
-    </Layout>
+    </>
   )
 }

apps/dev/nextjs/pages/protected-ssr.js

@@ -1,52 +1,34 @@
 // This is an example of how to protect content using server rendering
-import { unstable_getServerSession } from "next-auth/next"
-import { authOptions } from "./api/auth/[...nextauth]"
-import Layout from "../components/layout"
-import AccessDenied from "../components/access-denied"
+import { getServerSession } from "auth"
+import AccessDenied from "components/access-denied"
 
 export default function Page({ content, session }) {
   // If no session exists, display access denied message
-  if (!session) {
-    return (
-      <Layout>
-        <AccessDenied />
-      </Layout>
-    )
-  }
+  if (!session) return <AccessDenied />
 
   // If session exists, display content
   return (
-    <Layout>
+    <>
       <h1>Protected Page</h1>
       <p>
         <strong>{content}</strong>
       </p>
-    </Layout>
+    </>
   )
 }
 
 export async function getServerSideProps(context) {
-  const session = await unstable_getServerSession(
-    context.req,
-    context.res,
-    authOptions
-  )
-  let content = null
-
+  const session = await getServerSession(context.req, context.res)
   if (session) {
+    // Note usually you don't need to fetch from an API route in getServerSideProps
+    // This is done here to demonstrate how you can fetch from a third-party API
+    // with a valid session. Likely you would also not pass cookies but an `Authorization` header
     const hostname = process.env.NEXTAUTH_URL || "http://localhost:3000"
-    const options = { headers: { cookie: context.req.headers.cookie } }
-    const res = await fetch(`${hostname}/api/examples/protected`, options)
-    const json = await res.json()
-    if (json.content) {
-      content = json.content
-    }
+    const res = await fetch(`${hostname}/api/examples/protected`, {
+      headers: { cookie: context.req.headers.cookie },
+    })
+    return { props: { session, content: (await res.json()).content } }
   }
 
-  return {
-    props: {
-      session,
-      content,
-    },
-  }
+  return { props: {} }
 }

apps/dev/nextjs/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -19,8 +23,17 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", "jest.config.js"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "jest.config.js"
+  ]
+}

apps/dev/nextjs/types/nextauth.d.ts

@@ -18,3 +18,12 @@ declare module "next-auth" {
     foo: string
   }
 }
+
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string;
+    }
+  }
+}

apps/dev/sveltekit/package.json

@@ -19,8 +19,8 @@
     "vite": "4.0.1"
   },
   "dependencies": {
-    "@auth/core": "0.2.5",
-    "@auth/sveltekit": "0.1.12"
+    "@auth/core": "workspace:*",
+    "@auth/sveltekit": "workspace:*"
   },
   "type": "module"
 }

apps/examples/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import("next").NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}

apps/examples/nextjs/.env.local.example

@@ -1,28 +1,17 @@
-NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
+AUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.vercel.app/32
 
-APPLE_ID=
-APPLE_TEAM_ID=
-APPLE_PRIVATE_KEY=
-APPLE_KEY_ID=
+AUTH_AUTH0_ID=
+AUTH_AUTH0_SECRET=
+AUTH_AUTH0_ISSUER=
 
-AUTH0_ID=
-AUTH0_SECRET=
-AUTH0_ISSUER=
+AUTH_FACEBOOK_ID=
+AUTH_FACEBOOK_SECRET=
 
-FACEBOOK_ID=
-FACEBOOK_SECRET=
+AUTH_GITHUB_ID=
+AUTH_GITHUB_SECRET=
 
-GITHUB_ID=
-GITHUB_SECRET=
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
 
-GOOGLE_ID=
-GOOGLE_SECRET=
-
-TWITTER_ID=
-TWITTER_SECRET=
-
-EMAIL_SERVER=smtp://username:password@smtp.example.com:587
-EMAIL_FROM=NextAuth <noreply@example.com>
-
-DATABASE_URL=sqlite://localhost/:memory:?synchronize=true
+AUTH_TWITTER_ID=
+AUTH_TWITTER_SECRET=

apps/examples/nextjs/README.md

@@ -8,7 +8,7 @@
    <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>NextAuth.js</b> - Example App</h3>
+   <h3 align="center"><b>next-auth</b> - Example App</h3>
    <p align="center">
    Open Source. Full Stack. Own Your Data.
    </p>
@@ -36,7 +36,7 @@ This is an example application that shows how `next-auth` is applied to a basic
 
 The deployed version can be found at [`next-auth-example.vercel.app`](https://next-auth-example.vercel.app)
 
-Go to [next-auth.js.org](https://next-auth.js.org) for more information and documentation.
+Go to [authjs.dev](https://authjs.dev) for more information and documentation.
 
 ## Getting Started
 
@@ -66,7 +66,7 @@ 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: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
+- Docs: [authjs.dev/reference/adapters](https://authjs.dev/reference/adapters)
 
 ### 3. Configure Authentication Providers
 
@@ -76,7 +76,7 @@ For more information about setting up a database, please check out the following
 
 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 https://next-auth.js.org/configuration/providers/oauth
+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)
 
 3. You can also choose to specify an SMTP server for passwordless sign in via email.
 
@@ -106,4 +106,4 @@ Follow the [Deployment documentation](https://authjs.dev/guides/basics/deploymen
 <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 Auth.js Team</p>

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

@@ -0,0 +1,3 @@
+import { handlers } from "auth"
+export const { GET, POST } = handlers
+export const runtime = "edge"

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

@@ -0,0 +1,10 @@
+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/examples/nextjs/app/client/page.tsx

@@ -1,15 +1,13 @@
-import Layout from "../components/layout"
-
-export default function ClientPage() {
+export default function Page() {
   return (
-    <Layout>
+    <>
       <h1>Client Side Rendering</h1>
       <p>
         This page uses the <strong>useSession()</strong> React Hook in the{" "}
-        <strong>&lt;Header/&gt;</strong> component.
+        <strong>&lt;/Header&gt;</strong> component.
       </p>
       <p>
-        The <strong>useSession()</strong> React Hook is easy to use and allows
+        The <strong>useSession()</strong> React Hook easy to use and allows
         pages to render very quickly.
       </p>
       <p>
@@ -22,6 +20,6 @@ export default function ClientPage() {
         The disadvantage of <strong>useSession()</strong> is that it requires
         client side JavaScript.
       </p>
-    </Layout>
+    </>
   )
 }

apps/examples/nextjs/app/layout.tsx

@@ -0,0 +1,24 @@
+import Header from "components/header"
+import Footer from "components/footer"
+import './styles.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head></head>
+      <body>
+        <Header />
+        <main>
+          {children}
+        </main>
+        <Footer />
+      </body>
+    </html>
+  )
+}
+
+export const runtime = "experimental-edge"

apps/examples/nextjs/app/page.tsx

@@ -1,13 +1,13 @@
-import Layout from "components/layout"
-
 export default function Page() {
   return (
-    <Layout>
+    <>
       <h1>NextAuth.js Example</h1>
       <p>
         This is an example site to demonstrate how to use{" "}
         <a href="https://authjs.dev">NextAuth.js</a> for authentication.
       </p>
-    </Layout>
+    </>
   )
 }
+
+export const runtime = "experimental-edge"

apps/examples/nextjs/app/server-component/page.tsx

@@ -0,0 +1,39 @@
+import { auth } from "auth"
+import { cookies, headers } from "next/headers"
+
+function SignIn({ id, children, className }: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  return (
+    <form action={`/api/auth/signin/${id}`} method="post">
+      <button className={className} type="submit">{children}</button>
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+function SignOut({ children }: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  return (
+    <form action="/api/auth/signout" method="post">
+      <button type="submit">{children}</button>
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+export default async function Page() {
+  const session = await auth(headers())
+  if (session) {
+    return (
+      <>
+        <pre>{JSON.stringify(session, null, 2)}</pre>
+        <SignOut>Sign out</SignOut>
+      </>
+    )
+  }
+  return <SignIn id="github">Sign in with github</SignIn>
+}
+
+export const runtime = "experimental-edge"

apps/examples/nextjs/app/styles.css

@@ -0,0 +1,33 @@
+body {
+  color: red;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  padding: 0 1rem 1rem 1rem;
+  max-width: 680px;
+  margin: 0 auto;
+  background: #fff;
+  color: var(--color-text);
+}
+
+li,
+p {
+  line-height: 1.5rem;
+}
+
+a {
+  font-weight: 500;
+}
+
+hr {
+  border: 1px solid #ddd;
+}
+
+iframe {
+  background: #ccc;
+  border: 1px solid #ccc;
+  height: 10rem;
+  width: 100%;
+  border-radius: 0.5rem;
+  filter: invert(1);
+}

apps/examples/nextjs/auth.ts

@@ -0,0 +1,25 @@
+import NextAuth from "next-auth"
+import Auth0 from "@auth/core/providers/github"
+import Facebook from "@auth/core/providers/facebook"
+import GitHub from "@auth/core/providers/github"
+import Google from "@auth/core/providers/google"
+import Twitter from "@auth/core/providers/twitter"
+
+export const { handlers, auth } = NextAuth({
+  providers: [GitHub, Auth0, Facebook, Google, Twitter],
+  callbacks: {
+    async authorized({ request, auth }) {
+      // if (request.method === "POST") {
+      // const [, token] = request.headers.get("Authorization")?.split(" ")
+      // const valid = validateToken(token)
+      // // If the request has a valid auth token, it is authorized
+      // if (valid) return true
+      // return NextResponse.json("Invalid auth token", { status: 401 })
+      // }
+
+      // Logged in users are authorized, otherwise, will redirect to login
+      // You could also return a custom redirect instead of the sign-in page
+      return !!auth
+    },
+  },
+})

apps/examples/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 "next-auth/package.json"
 
 export default function Footer() {
   return (
@@ -8,10 +8,10 @@ export default function Footer() {
       <hr />
       <ul className={styles.navItems}>
         <li className={styles.navItem}>
-          <a href="https://next-auth.js.org">Documentation</a>
+          <a href="https://authjs.dev">Documentation</a>
         </li>
         <li className={styles.navItem}>
-          <a href="https://www.npmjs.com/package/next-auth">NPM</a>
+          <a href="https://www.npmjs.com/package/@auth/core">NPM</a>
         </li>
         <li className={styles.navItem}>
           <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>
@@ -20,7 +20,7 @@ export default function Footer() {
           <Link href="/policy">Policy</Link>
         </li>
         <li className={styles.navItem}>
-          <em>next-auth@{packageJSON.dependencies["next-auth"]}</em>
+          <em>{packageJSON.version}</em>
         </li>
       </ul>
     </footer>

apps/examples/nextjs/components/header.module.css

@@ -1,5 +1,6 @@
 /* Set min-height to avoid page reflow while session loading */
 .signedInStatus {
+  position: relative;
   display: block;
   min-height: 4rem;
   width: 100%;

apps/examples/nextjs/components/header.tsx

@@ -1,65 +1,63 @@
 import Link from "next/link"
-import { signIn, signOut, useSession } from "next-auth/react"
+import { auth } from "auth"
+import { cookies, headers } from "next/headers"
 import styles from "./header.module.css"
 
-// The approach used in this component shows how to build a sign in and sign out
+function SignIn({ id, children, className }: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  return (
+    <form action={`/api/auth/signin/${id}`} method="post">
+      <button className={className} type="submit">{children}</button>
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+function SignOut({ children, className }: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  return (
+    <form action="/api/auth/signout" method="post">
+      <button className={className} type="submit">{children}</button>
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+// The approach used in this component shows how to built a sign in and sign out
 // component that works on pages which support both client and server side
 // rendering, and avoids any flash incorrect content on initial page load.
-export default function Header() {
-  const { data: session, status } = useSession()
-  const loading = status === "loading"
+export default async function Header() {
+  const session = await auth(headers())
 
   return (
     <header>
       <noscript>
-        <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
+        <style>{".nojs-show { opacity: 1; top: 0; }"}</style>
       </noscript>
       <div className={styles.signedInStatus}>
-        <p
-          className={`nojs-show ${
-            !session && loading ? styles.loading : styles.loaded
-          }`}
-        >
+        <p className={`nojs-show ${styles.loaded}`}>
           {!session && (
             <>
               <span className={styles.notSignedInText}>
                 You are not signed in
               </span>
-              <a
-                href={`/api/auth/signin`}
-                className={styles.buttonPrimary}
-                onClick={(e) => {
-                  e.preventDefault()
-                  signIn()
-                }}
-              >
-                Sign in
-              </a>
+              <SignIn className={styles.buttonPrimary}>Sign In</SignIn>
             </>
           )}
-          {session?.user && (
+          {session && (
             <>
               {session.user.image && (
-                <span
-                  style={{ backgroundImage: `url('${session.user.image}')` }}
-                  className={styles.avatar}
-                />
+                <img src={session.user.image} className={styles.avatar} />
               )}
               <span className={styles.signedInText}>
                 <small>Signed in as</small>
                 <br />
-                <strong>{session.user.email ?? session.user.name}</strong>
+                <strong>{session.user.email} </strong>
+                {session.user.name ? `(${session.user.name})` : null}
               </span>
-              <a
-                href={`/api/auth/signout`}
-                className={styles.button}
-                onClick={(e) => {
-                  e.preventDefault()
-                  signOut()
-                }}
-              >
-                Sign out
-              </a>
+              <SignOut className={styles.button}>Sign Out</SignOut>
             </>
           )}
         </p>
@@ -73,7 +71,7 @@ export default function Header() {
             <Link href="/client">Client</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/server">Server</Link>
+            <Link href="/server-component">Server</Link>
           </li>
           <li className={styles.navItem}>
             <Link href="/protected">Protected</Link>
@@ -82,13 +80,12 @@ export default function Header() {
             <Link href="/api-example">API</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/admin">Admin</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/me">Me</Link>
+            <Link href="/middleware-protected">Middleware protected</Link>
           </li>
         </ul>
       </nav>
     </header>
   )
 }
+
+export const runtime = "experimental-edge"

apps/examples/nextjs/components/layout.tsx

@@ -1,13 +0,0 @@
-import Header from "./header"
-import Footer from "./footer"
-import type { ReactNode } from "react"
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <>
-      <Header />
-      <main>{children}</main>
-      <Footer />
-    </>
-  )
-}

apps/examples/nextjs/middleware.ts

@@ -1,17 +1,10 @@
-import { withAuth } from "next-auth/middleware"
+// export { auth as default } from "auth"
+import { auth } from "auth"
+import { NextResponse } from "next/server"
 
-// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
-export default withAuth({
-  callbacks: {
-    authorized({ req, token }) {
-      // `/admin` requires admin role
-      if (req.nextUrl.pathname === "/admin") {
-        return token?.userRole === "admin"
-      }
-      // `/me` only requires the user to be logged in
-      return !!token
-    },
-  },
+export default auth((req) => {
+  if (req.auth) return NextResponse.json(req.auth)
+  return NextResponse.json("Not authorized", { status: 401 })
 })
 
-export const config = { matcher: ["/admin", "/me"] }
+export const config = { matcher: ["/middleware-protected"] }

apps/examples/nextjs/next-auth.d.ts

@@ -1,10 +0,0 @@
-import "next-auth/jwt"
-
-// Read more at: https://next-auth.js.org/getting-started/typescript#module-augmentation
-
-declare module "next-auth/jwt" {
-  interface JWT {
-    /** The user's role. */
-    userRole?: "admin"
-  }
-}

apps/examples/nextjs/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import("next").NextConfig} */
+module.exports = {
+  webpack(config) {
+    config.experiments = { ...config.experiments, topLevelAwait: true }
+    return config
+  },
+  experimental: { appDir: true },
+  typescript: { ignoreBuildErrors: true },
+}