add timeout for test step

fix import

chore: more docs update

.eslintignore

@@ -0,0 +1,12 @@
+../core/adapters.*
+../core/index.*
+../core/jwt
+../core/lib
+../core/providers
+.gitignore
+
+../frameworks-sveltekit/*.cjs
+../frameworks-sveltekit/client.*
+../frameworks-sveltekit/index.*
+../frameworks-sveltekit/tests
+../frameworks-sveltekit/.svelte-kit

.eslintrc.js

@@ -1,20 +1,23 @@
+// @ts-check
 const path = require("path")
 
+/** @type {import("eslint").ESLint.ConfigData} */
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
+  extends: ["standard-with-typescript", "prettier"],
+  rules: {
+    camelcase: "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/promise-function-async": "off",
+  },
   overrides: [
     {
       files: ["*.ts", "*.tsx"],
-      extends: ["standard-with-typescript", "prettier"],
-      rules: {
-        camelcase: "off",
-        "@typescript-eslint/naming-convention": "off",
-        "@typescript-eslint/strict-boolean-expressions": "off",
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/restrict-template-expressions": "off",
-      },
-
       parserOptions: {
         project: [
           path.resolve(__dirname, "./packages/**/tsconfig.eslint.json"),
@@ -23,19 +26,57 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ["*.test.ts", "*.test.js"],
+      env: { jest: true },
+    },
+    {
+      files: ["docs"],
+      plugins: ["@docusaurus"],
+      extends: ["plugin:@docusaurus/recommended"],
+    },
+    {
+      files: ["packages/core/src/**/*"],
+      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/core/src/adapters.ts"],
+      rules: {
+        "@typescript-eslint/method-signature-style": "off",
+      },
+    },
+    {
+      files: ["packages/frameworks-sveltekit/**/*"],
+      plugins: ["svelte3", "@typescript-eslint"],
+      parserOptions: {
+        sourceType: "module",
+        ecmaVersion: 2020,
+      },
+      env: {
+        browser: true,
+        es2017: true,
+        node: true,
+      },
+    },
   ],
-  extends: ["prettier"],
-  globals: {
-    localStorage: "readonly",
-    location: "readonly",
-    fetch: "readonly",
-  },
-  rules: {
-    camelcase: "off",
-  },
   plugins: ["jest"],
-  env: {
-    "jest/globals": true,
-  },
-  ignorePatterns: [".eslintrc.js"],
+  ignorePatterns: [
+    "**/dist/**",
+    "**/node_modules/**",
+    ".eslintrc.js",
+    "**/.turbo/**",
+    "**/coverage/**",
+    "**/build/**",
+  ],
 }

.github/actions/issue-validator/src/index.mjs

@@ -4,11 +4,8 @@ import * as github from "@actions/github"
 // @ts-expect-error
 import * as core from "@actions/core"
 import { readFileSync } from "node:fs"
-import { join } from "node:path"
 
 const addReproductionLabel = "incomplete"
-const __dirname =
-  "/home/runner/work/nextauthjs/next-auth/.github/actions/issue-validator"
 
 /**
  * @typedef {{
@@ -73,7 +70,7 @@ async function run() {
         }),
         client.issues.createComment({
           ...issueCommon,
-          body: readFileSync(join(__dirname, "repro.md"), "utf8"),
+          body: readFileSync("repro.md", "utf8"),
         }),
       ])
       return core.info(

.github/sync.yml

@@ -1,6 +1,14 @@
-# This is a legacy example pushed from the v4 branch
-nextauthjs/next-auth-example:
-  - source: apps/example-nextjs
+# Note that nextauthjs/next-auth-example syncs from the v4 branch
+
+nextauthjs/sveltekit-auth-example:
+  - source: apps/example-sveltekit
+    dest: .
+    deleteOrphaned: true
+  - .github/FUNDING.yml
+  - LICENSE
+
+nextauthjs/next-auth-gatsby-example:
+  - source: apps/playground-gatsby
     dest: .
     deleteOrphaned: true
   - .github/FUNDING.yml

.github/workflows/issue-validator.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - name: 'Run issue validator'
-        run: node ./.github/actions/issue-validator/index.mjs
+      - 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_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -7,7 +7,6 @@ on:
       - "beta"
       - "next"
       - "3.x"
-      - "v4"
   pull_request:
 
 jobs:
@@ -34,9 +33,12 @@ jobs:
         run: pnpm build
       - name: Run tests
         run: pnpm test
+        timeout-minutes: 15
         env:
           UPSTASH_REDIS_URL: ${{ secrets.UPSTASH_REDIS_URL }}
           UPSTASH_REDIS_KEY: ${{ secrets.UPSTASH_REDIS_KEY }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       # - name: Coverage
       #   uses: codecov/codecov-action@v1
       #   with:

.github/workflows/sync-examples.yml

@@ -2,7 +2,7 @@ name: Sync Example Repositories
 on:
   push:
     branches:
-      - v4
+      - main
   workflow_dispatch:
 jobs:
   sync:

.gitignore

@@ -51,7 +51,7 @@ apps/dev/typeorm
 /.vs/slnx.sqlite-journal
 /.vs/slnx.sqlite
 /.vs
-.vscode
+.vscode/generated*
 
 # Jetbrains
 .idea
@@ -86,6 +86,8 @@ packages/core/index.*
 packages/core/jwt
 packages/core/lib
 packages/core/providers
+packages/core/docs
+docs/docs/reference/03-core
 
 
 # SvelteKit

.prettierignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+.turbo
+
+# apps/example-* should have their standalonw config
+# as they might be cloned via a template like https://github.com/nextauthjs/next-auth-example
+# Note: The root is inside the package
+
+# packages
+dist
+
+# docs
+.docusaurus
+build
+static
+
+# @auth/core
+**/lib/styles/index.ts
+**/providers/oauth-types.ts
+
+# @auth/sveltekit
+package
+index.*
+client.*
+.svelte-kit

.prettierrc.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+/** @type {import("prettier").Config} */
+module.exports = {
+  semi: false,
+  singleQuote: false,
+  overrides: [
+    {
+      files: "apps/dev/pages/api/auth/[...nextauth].ts",
+      options: {
+        printWidth: 150,
+      },
+    },
+  ],
+}

.vscode/settings.json

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

.vscode/snippets.code-snippets

@@ -0,0 +1,18 @@
+{
+  "oauth2-spec": {
+    "description": "Markdown link to OAuth 2 specification",
+    "scope": "typescript",
+    "prefix": "oauth2",
+    "body": [
+      "[OAuth 2](https://datatracker.ietf.org/doc/html/rfc6749)"
+    ]
+  },
+  "oidc-spec": {
+    "description": "Markdown link to OpenID Connect specification",
+    "scope": "typescript",
+    "prefix": "oidc",
+    "body": [
+      "[OIDC](https://openid.net/specs/openid-connect-core-1_0.html)"
+    ]
+  },
+}

apps/dev/.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/package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "clean": "rm -rf .next",
     "dev": "next dev",
-    "lint": "next lint",
     "build": "next build",
     "start": "next start",
     "email": "fake-smtp-server",
@@ -23,6 +22,7 @@
     "faunadb": "^4",
     "next": "13.0.6",
     "next-auth": "workspace:*",
+    "@auth/core": "workspace:*",
     "nodemailer": "^6",
     "react": "^18",
     "react-dom": "^18"

apps/dev/pages/api/auth/[...nextauth].ts

@@ -1,39 +1,39 @@
-import NextAuth, { NextAuthOptions } from "next-auth"
+import { AuthHandler, type AuthOptions } from "@auth/core"
 
 // 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"
+import Apple from "@auth/core/providers/apple"
+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 BoxyHQSAML from "@auth/core/providers/boxyhq-saml"
+// import Cognito from "@auth/core/providers/cognito"
+import Credentials from "@auth/core/providers/credentials"
+import Discord from "@auth/core/providers/discord"
+import DuendeIDS6 from "@auth/core/providers/duende-identity-server6"
+// import Email from "@auth/core/providers/email"
+import Facebook from "@auth/core/providers/facebook"
+import Foursquare from "@auth/core/providers/foursquare"
+import Freshbooks from "@auth/core/providers/freshbooks"
+import GitHub from "@auth/core/providers/github"
+import Gitlab from "@auth/core/providers/gitlab"
+import Google from "@auth/core/providers/google"
+// import IDS4 from "@auth/core/providers/identity-server4"
+import Instagram from "@auth/core/providers/instagram"
+// import Keycloak from "@auth/core/providers/keycloak"
+import Line from "@auth/core/providers/line"
+import LinkedIn from "@auth/core/providers/linkedin"
+import Mailchimp from "@auth/core/providers/mailchimp"
+// import Okta from "@auth/core/providers/okta"
+import Osu from "@auth/core/providers/osu"
+import Patreon from "@auth/core/providers/patreon"
+import Slack from "@auth/core/providers/slack"
+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 Vk from "@auth/core/providers/vk"
+import Wikimedia from "@auth/core/providers/wikimedia"
+import WorkOS from "@auth/core/providers/workos"
 
 // // Prisma
 // import { PrismaClient } from "@prisma/client"
@@ -66,7 +66,7 @@ import WorkOS from "next-auth/providers/workos"
 //   secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
 // })
 
-export const authOptions: NextAuthOptions = {
+export const authOptions: AuthOptions = {
   // adapter,
   // debug: process.env.NODE_ENV !== "production",
   theme: {
@@ -129,4 +129,26 @@ if (authOptions.adapter) {
   // )
 }
 
-export default NextAuth(authOptions)
+// TODO: move to next-auth/edge
+function Auth(...args: any[]) {
+  const envSecret = process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET
+  const envTrustHost = !!(process.env.NEXTAUTH_URL ?? process.env.AUTH_TRUST_HOST ?? process.env.VERCEL ?? process.env.NODE_ENV !== "production")
+  if (args.length === 1) {
+    return async (req: Request) => {
+      args[0].secret ??= envSecret
+      args[0].trustHost ??= envTrustHost
+      return await AuthHandler(req, args[0])
+    }
+  }
+  args[1].secret ??= envSecret
+  args[1].trustHost ??= envTrustHost
+  return AuthHandler(args[0], args[1])
+}
+
+// export default Auth(authOptions)
+
+export default function handle(request: Request) {
+  return Auth(request, authOptions)
+}
+
+export const config = { runtime: "experimental-edge" }

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

@@ -9,7 +9,6 @@ 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/example-nextjs/README.md

@@ -9,16 +9,16 @@
    </p>
    <p align="center" style="align: center;">
       <a href="https://npm.im/next-auth">
-        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth">
+        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth&style=flat-square">
       </a>
       <a href="https://bundlephobia.com/result?p=next-auth-example">
-        <img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=next-auth" alt="Bundle Size"/>
+        <img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=size&style=flat-square" alt="Bundle Size"/>
       </a>
       <a href="https://www.npmtrends.com/next-auth">
-        <img src="https://img.shields.io/npm/dm/next-auth?label=next-auth%20downloads" alt="Downloads" />
+        <img src="https://img.shields.io/npm/dm/next-auth?label=downloads&style=flat-square" alt="Downloads" />
       </a>
       <a href="https://npm.im/next-auth">
-        <img src="https://img.shields.io/badge/npm-TypeScript-blue" alt="TypeScript" />
+        <img src="https://img.shields.io/badge/TypeScript-blue?style=flat-square" alt="TypeScript" />
       </a>
    </p>
 </p>

apps/example-sveltekit/.env.example

@@ -0,0 +1,5 @@
+GITHUB_ID=
+GITHUB_SECRET=
+# On UNIX systems you can use `openssl rand -hex 32` or 
+# https://generate-secret.vercel.app/32 to generate a secret.
+AUTH_SECRET=

apps/example-sveltekit/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/example-sveltekit/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

apps/example-sveltekit/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/example-sveltekit/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/example-sveltekit/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

apps/example-sveltekit/README.md

@@ -0,0 +1,28 @@
+> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/example-sveltekit). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
+
+<p align="center">
+   <br/>
+   <a href="https://next-auth.js.org" target="_blank"><img width="150px" src="https://next-auth.js.org/img/logo/logo-sm.png" /></a>
+   <h3 align="center">Auth.js Example App with <a href="https://kit.svelte.dev">SvelteKit</a></h3>
+   <p align="center">
+   Open Source. Full Stack. Own Your Data.
+   </p>
+   <p align="center" style="align: center;">
+      <a href="https://npm.im/@auth/sveltekit">
+        <img alt="npm" src="https://img.shields.io/npm/v/@auth/sveltekit?color=green&label=@auth/sveltekit&style=flat-square">
+      </a>
+      <a href="https://bundlephobia.com/result?p=sveltekit-auth-example">
+        <img src="https://img.shields.io/bundlephobia/minzip/@auth/sveltekit?label=size&style=flat-square" alt="Bundle Size"/>
+      </a>
+      <a href="https://www.npmtrends.com/@auth/sveltekit">
+        <img src="https://img.shields.io/npm/dm/@auth/sveltekit?label=%20downloads&style=flat-square" alt="Downloads" />
+      </a>
+      <a href="https://npm.im/next-auth">
+        <img src="https://img.shields.io/badge/TypeScript-blue?style=flat-square" alt="TypeScript" />
+      </a>
+   </p>
+</p>
+
+# Documentation
+
+- [sveltekit.authjs.dev](https://sveltekit.authjs.dev)

apps/example-sveltekit/package.json

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "svelte": "3.55.0",
+    "svelte-check": "2.10.2",
+    "typescript": "4.9.4",
+    "vite": "4.0.1"
+  },
+  "dependencies": {
+    "@auth/core": "latest",
+    "@auth/sveltekit": "latest"
+  },
+  "type": "module"
+}

apps/example-sveltekit/src/app.d.ts

@@ -0,0 +1 @@
+/// <reference types="@auth/sveltekit" />

apps/example-sveltekit/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>

apps/example-sveltekit/src/hooks.server.ts

@@ -0,0 +1,7 @@
+import SvelteKitAuth from "@auth/sveltekit"
+import GitHub from "@auth/core/providers/github"
+import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"
+
+export const handle = SvelteKitAuth({
+  providers: [GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET })],
+})

apps/example-sveltekit/src/lib/SignInButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let provider: any
+</script>
+
+<form action={provider.signinUrl} method="POST">
+  {#if provider.callbackUrl}
+    <input type="hidden" name="callbackUrl" value={provider.callbackUrl} />
+  {/if}
+  <button type="submit" class="button">
+    <slot>Sign in with {provider.name}</slot>
+  </button>
+</form>

apps/example-sveltekit/src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from "./$types"
+
+export const load: LayoutServerLoad = async (event) => {
+  return {
+    session: await event.locals.getSession(),
+  }
+}

apps/example-sveltekit/src/routes/+layout.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+</script>
+
+<div>
+  <header>
+    <div class="signedInStatus">
+      <p class="nojs-show loaded">
+        {#if $page.data.session}
+          {#if $page.data.session.user?.image}
+            <span
+              style="background-image: url('{$page.data.session.user.image}')"
+              class="avatar"
+            />
+          {/if}
+          <span class="signedInText">
+            <small>Signed in as</small><br />
+            <strong
+              >{$page.data.session.user?.email ??
+                $page.data.session.user?.name}</strong
+            >
+          </span>
+          <a href="/auth/signout" class="button">Sign out</a>
+        {:else}
+          <span class="notSignedInText">You are not signed in</span>
+          <a href="/auth/signin" class="buttonPrimary">Sign in</a>
+        {/if}
+      </p>
+    </div>
+    <nav>
+      <ul class="navItems">
+        <li class="navItem"><a href="/">Home</a></li>
+        <li class="navItem"><a href="/protected">Protected</a></li>
+      </ul>
+    </nav>
+  </header>
+  <slot />
+</div>
+
+<style>
+  :global(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: #333;
+  }
+  :global(li),
+  :global(p) {
+    line-height: 1.5rem;
+  }
+  :global(a) {
+    font-weight: 500;
+  }
+  :global(hr) {
+    border: 1px solid #ddd;
+  }
+  :global(iframe) {
+    background: #ccc;
+    border: 1px solid #ccc;
+    height: 10rem;
+    width: 100%;
+    border-radius: 0.5rem;
+    filter: invert(1);
+  }
+
+  .nojs-show {
+    opacity: 1;
+    top: 0;
+  }
+  .signedInStatus {
+    display: block;
+    min-height: 4rem;
+    width: 100%;
+  }
+  .loaded {
+    position: relative;
+    top: 0;
+    opacity: 1;
+    overflow: hidden;
+    border-radius: 0 0 0.6rem 0.6rem;
+    padding: 0.6rem 1rem;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease-in;
+  }
+  .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;
+  }
+  .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: -0.4rem;
+    font-weight: 500;
+    border-radius: 0.3rem;
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1.4rem;
+    padding: 0.7rem 0.8rem;
+    position: relative;
+    z-index: 10;
+    background-color: transparent;
+    color: #555;
+  }
+  .buttonPrimary {
+    background-color: #346df1;
+    border-color: #346df1;
+    color: #fff;
+    text-decoration: none;
+    padding: 0.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;
+  }
+</style>

apps/example-sveltekit/src/routes/+page.svelte

@@ -0,0 +1,7 @@
+<h1>SvelteKit Auth Example</h1>
+<p>
+  This is an example site to demonstrate how to use <a
+    href="https://kit.svelte.dev/">SvelteKit</a
+  >
+  with <a href="https://sveltekit.authjs.dev">SvelteKit Auth</a> for authentication.
+</p>

apps/example-sveltekit/src/routes/protected/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+</script>
+
+<h1>Protected page</h1>
+<p>
+  This is a protected content. You can access this content because you are
+  signed in.
+</p>
+<p>Session expiry: {$page.data.session?.expires}</p>

apps/example-sveltekit/src/routes/protected/+page.ts

@@ -0,0 +1,10 @@
+import { redirect } from "@sveltejs/kit"
+import type { PageLoad } from "./$types"
+
+export const load: PageLoad = async ({ parent }) => {
+  const { session } = await parent()
+  if (!session?.user) {
+    throw redirect(302, "/")
+  }
+  return {}
+}

apps/example-sveltekit/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

apps/example-sveltekit/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

apps/example-sveltekit/vite.config.js

@@ -0,0 +1,8 @@
+import { sveltekit } from "@sveltejs/kit/vite"
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [sveltekit()],
+}
+
+export default config

apps/playground-gatsby/README.md

@@ -9,13 +9,13 @@
    </p>
    <p align="center" style="align: center;">
       <a href="https://npm.im/next-auth">
-        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth">
+        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth&style=flat-square">
       </a>
       <a href="https://bundlephobia.com/result?p=next-auth-example">
-        <img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=next-auth" alt="Bundle Size"/>
+        <img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=bundle&style=flat-square" alt="Bundle Size"/>
       </a>
       <a href="https://www.npmtrends.com/next-auth">
-        <img src="https://img.shields.io/npm/dm/next-auth?label=next-auth%20downloads" alt="Downloads" />
+        <img src="https://img.shields.io/npm/dm/next-auth?label=20downloads&style=flat-square" alt="Downloads" />
       </a>
    </p>
 </p>

apps/playground-nuxt/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_size = 2
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

apps/playground-nuxt/.eslintignore

@@ -1,4 +0,0 @@
-dist
-node_modules
-tsconfig.json
-package.json

apps/playground-nuxt/.eslintrc

@@ -1,10 +0,0 @@
-{
-  "extends": [
-    "@nuxtjs/eslint-config-typescript"
-  ],
-  "rules": {
-    "@typescript-eslint/no-unused-vars": [
-      "off"
-    ]
-  }
-}

apps/playground-nuxt/.eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}

apps/playground-nuxt/.gitignore

@@ -1,52 +1,4 @@
-# Dependencies
 node_modules
-
-# Logs
-*.log*
-
-# Temp directories
-.temp
-.tmp
-.cache
-
-# Yarn
-**/.yarn/cache
-**/.yarn/*state*
-
-# Generated dirs
-dist
-
-# Nuxt
 .nuxt
-.output
-.vercel_build_output
-.build-*
-.env
-.netlify
-
-# Env
-.env
-
-# Testing
-reports
-coverage
-*.lcov
-.nyc_output
-
-# VSCode
-.vscode
-
-# Intellij idea
-*.iml
-.idea
-
-# OSX
-.DS_Store
-.AppleDouble
-.LSOverride
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
-.vercel
+dist
+output

apps/playground-nuxt/.nuxtrc

@@ -1 +0,0 @@
-imports.autoImport=false

apps/playground-nuxt/README.md

@@ -1,21 +1,13 @@
-# NextAuth + Nuxt 3 Playground
+> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/playground-nuxt). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
 
-NextAuth.js is committed to bringing easy authentication to other frameworks. [#2294](https://github.com/nextauthjs/next-auth/issues/2294)
-
-Nuxt 3 support with NextAuth.js is currently experimental. This directory contains a minimal, proof-of-concept application. Parts of this is expected to be abstracted away into a package like` @next-auth/nuxt.`
-
-This package uses Nuxt's [module starter](https://github.com/nuxt/starter/tree/module).
-
-Demo: https://next-auth-nuxt-demo.vercel.app
+Nuxt 3 support with Auth.js is currently experimental. This directory contains a minimal, proof-of-concept application. Parts of this is expected to be abstracted away into a package like `@auth/nuxt`.
 
 ## Getting Started
 
-### Add the module to the modules section of `nuxt.config.ts`:
+1. Setup your environment variables in `nuxt.config.ts`:
 
 ```ts
 export default defineNuxtConfig({
-  // temporary module name.
-  modules: ['next-auth-nuxt'],
   // https://v3.nuxtjs.org/migration/runtime-config#runtime-config
   runtimeConfig: {
     secret: process.env.NEXTAUTH_SECRET
@@ -23,86 +15,36 @@ export default defineNuxtConfig({
       clientId: process.env.GITHUB_CLIENT_ID,
       clientSecret: process.env.GITHUB_CLIENT_SECRET
     }
-  },
-  // https://v3.nuxtjs.org/guide/concepts/esm#aliasing-libraries
-  // Fix for GithubProvider (or whichever provider you choose) is not a function error in Vite
-  alias: {
-    'next-auth/providers/github': 'node_modules/next-auth/providers/github.js'
   }
 })
 ```
 
-### Add API route
+2. Set up Auth.js options
 
-To add `NextAuth.js` to a project create a file called `[...].ts` in `server/api/auth`. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
+Go to the API handler file (`server/api/auth/[...].ts`) and setup your providers. This file contains the dynamic route handler for Auth.js which will also contain all of your global Auth.js configurations.
+
+Here's an example of what it looks like:
 
 ```ts
-// ~/server/api/auth/[...].ts
-import { NextAuthNuxtHandler } from 'next-auth-nuxt/handler'
-import GithubProvider from 'next-auth/providers/github'
+// server/api/auth/[...].ts
+
+import { NuxtAuthHandler } from '@/lib/auth/server'
+import GithubProvider from '@auth/core/providers/github'
+import type { AuthOptions } from '@auth/core'
 
 const runtimeConfig = useRuntimeConfig()
 
-export const authOptions = {
+export const authOptions: AuthOptions = {
   secret: runtimeConfig.secret,
   providers: [
     GithubProvider({
       clientId: runtimeConfig.github.clientId,
       clientSecret: runtimeConfig.github.clientSecret
-    }),
-  ],
+    })
+  ]
 }
 
-export default NextAuthNuxtHandler(authOptions)
+export default NuxtAuthHandler(authOptions)
 ```
 
-All requests to `/api/auth/*` (`signIn`, `callback`, `signOut`, etc.) will automatically be handled by NextAuth.js.
-
-### Frontend - Add Vue Composable
-
-The `useSession()` Vue Composable is the easiest way to check if someone is signed in.
-
-```html
-<script setup lang="ts">
-const { data: session } = useSession()
-</script>
-
-<template>
-  <div v-if="session">
-    Signed in as {{ session.user.email }} <br />
-    <button @click="signOut">Sign out</button>
-  </div>
-  <div v-else>
-    Not signed in <br />
-    <button @click="signIn">Sign in</button>
-  </div>
-</template>
-```
-
-### Backend - API Route
-
-To protect an API Route, you can use the `getServerSession()` method.
-
-```ts
-import { getServerSession } from 'next-auth-nuxt/handler'
-import { authOptions } from '~/server/api/auth/[...]'
-
-export default defineEventHandler(async (event) => {
-  const session = await getServerSession(event, authOptions)
-
-  if (session) {
-    return {
-      content: 'This is protected content. You can access this content because you are signed in.'
-    }
-  }
-
-  return {
-    error: 'You must be signed in to view the protected content on this page.'
-  }
-})
-```
-
-## Development
-
-- Run `pnpm dev:generate` to generate type stubs.
-- Use `pnpm dev` to start `playground` in development mode.
+All requests to `/api/auth/*` (`signIn`, `callback`, `signOut`, etc.) will automatically be handled by Auth.js.

apps/playground-nuxt/app.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <Header />
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+body {
+  font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  padding: 0 1rem 1rem 1rem;
+  max-width: 680px;
+  margin: 0 auto;
+  background: #fff;
+  color: #333;
+}
+
+li,
+p {
+  line-height: 1.5rem;
+}
+
+a {
+  font-weight: 500;
+}
+
+hr {
+  border: 1px solid #ddd;
+}
+</style>

apps/playground-nuxt/client.d.ts

@@ -1 +0,0 @@
-export * from './dist/runtime/client'

apps/playground-nuxt/components/Header.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { signIn, signOut } from '@/lib/auth/client'
+
+const session = useSession()
+</script>
+
+<template>
+  <header>
+    <div class="signedInStatus">
+      <p :class="['nojs-show', 'loaded']">
+        <template v-if="session">
+          <span v-if="session.user?.image" :style="{ backgroundImage: `url(${session.user.image})` }" class="avatar" />
+          <span class="signedInText">
+            <small>Signed in as</small><br>
+            <strong>{{ session.user?.email || session.user?.name }}</strong>
+          </span>
+          <a href="/api/auth/signout" class="button" @click.prevent="signOut">Sign out</a>
+        </template>
+        <template v-else>
+          <span class="notSignedInText">You are not signed in</span>
+          <a href="/api/auth/signin" class="buttonPrimary" @click.prevent="signIn">Sign in</a>
+        </template>
+      </p>
+    </div>
+    <nav>
+      <ul class="navItems">
+        <li class="navItem">
+          <NuxtLink to="/">
+            Home
+          </NuxtLink>
+        </li>
+        <li class="navItem">
+          <NuxtLink to="/protected">
+            Protected
+          </NuxtLink>
+        </li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<style>
+.nojs-show {
+  opacity: 1;
+  top: 0;
+}
+
+.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;
+}
+</style>

apps/playground-nuxt/composables/useSession.ts

@@ -0,0 +1,5 @@
+import { Session } from '@auth/core'
+
+export default function useSession() {
+  return useState<Session | null>('session', () => null)
+}

apps/playground-nuxt/handler.d.ts

@@ -1 +0,0 @@
-export * from './dist/runtime/server/handler'

apps/playground-nuxt/lib/auth/client.ts

@@ -0,0 +1,107 @@
+import type {
+  LiteralUnion,
+  SignInOptions,
+  SignInAuthorizationParams,
+  SignOutParams,
+} from './types'
+import type {
+  BuiltInProviderType,
+  RedirectableProviderType,
+} from '@auth/core/providers'
+
+/**
+ * Client-side method to initiate a signin flow
+ * or send the user to the signin page listing all possible providers.
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signin)
+ */
+export async function signIn<
+  P extends RedirectableProviderType | undefined = undefined
+>(
+  providerId?: LiteralUnion<
+    P extends RedirectableProviderType
+      ? P | BuiltInProviderType
+      : BuiltInProviderType
+  >,
+  options?: SignInOptions,
+  authorizationParams?: SignInAuthorizationParams
+) {
+  const { callbackUrl = window.location.href, redirect = true } = options ?? {}
+
+  // TODO: Support custom providers
+  const isCredentials = providerId === "credentials"
+  const isEmail = providerId === "email"
+  const isSupportingReturn = isCredentials || isEmail
+
+  // TODO: Handle custom base path
+  const signInUrl = `/api/auth/${
+    isCredentials ? "callback" : "signin"
+  }/${providerId}`
+
+  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
+
+  // TODO: Handle custom base path
+  // TODO: Remove this since Sveltekit offers the CSRF protection via origin check
+  const { csrfToken } = await $fetch("/api/auth/csrf")
+
+  console.log(_signInUrl)
+
+  const res = await fetch(_signInUrl, {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      "X-Auth-Return-Redirect": "1",
+    },
+    // @ts-expect-error -- ignore
+    body: new URLSearchParams({
+      ...options,
+      csrfToken,
+      callbackUrl,
+    }),
+  })
+
+  const data = await res.clone().json()
+  const error = new URL(data.url).searchParams.get("error")
+
+  if (redirect || !isSupportingReturn || !error) {
+    // TODO: Do not redirect for Credentials and Email providers by default in next major
+    window.location.href = data.url ?? callbackUrl
+    // If url contains a hash, the browser does not reload the page. We reload manually
+    if (data.url.includes("#")) window.location.reload()
+    return
+  }
+
+  return res
+}
+
+/**
+ * Signs the user out, by removing the session cookie.
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signout)
+ */
+export async function signOut(options?: SignOutParams) {
+  const { callbackUrl = window.location.href } = options ?? {}
+  // TODO: Custom base path
+  // TODO: Remove this since Sveltekit offers the CSRF protection via origin check
+  const csrfTokenResponse = await fetch("/api/auth/csrf")
+  const { csrfToken } = await csrfTokenResponse.json()
+  const res = await fetch(`/api/auth/signout`, {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      "X-Auth-Return-Redirect": "1",
+    },
+    body: new URLSearchParams({
+      csrfToken,
+      callbackUrl,
+    }),
+  })
+  const data = await res.json()
+
+  const url = data.url ?? callbackUrl
+  window.location.href = url
+  // If url contains a hash, the browser does not reload the page. We reload manually
+  if (url.includes("#")) window.location.reload()
+}

apps/playground-nuxt/lib/auth/server.ts

@@ -0,0 +1,45 @@
+import { AuthHandler, AuthOptions, Session } from '@auth/core'
+import { fromNodeMiddleware, H3Event } from 'h3'
+import getURL from 'requrl'
+import { createMiddleware } from "@hattip/adapter-node";
+
+export function NuxtAuthHandler (options: AuthOptions) {
+  async function handler(ctx: { request: Request }) {
+    options.trustHost ??= true
+
+    return AuthHandler(ctx.request, options)
+  }
+
+  const middleware = createMiddleware(handler)
+
+  return fromNodeMiddleware(middleware)
+}
+
+export async function getSession(
+  event: H3Event,
+  options: AuthOptions
+): Promise<Session | null> {
+  options.trustHost ??= true
+
+  const headers = getRequestHeaders(event)
+  const nodeHeaders = new Headers()
+
+  const url = new URL('/api/auth/session', getURL(event.node.req))
+
+  Object.keys(headers).forEach((key) => {
+    nodeHeaders.append(key, headers[key] as any)
+  })
+
+  const response = await AuthHandler(
+    new Request(url, { headers: nodeHeaders }),
+    options
+  )
+
+  const { status = 200 } = response
+
+  const data = await response.json()
+
+  if (!data || !Object.keys(data).length) return null
+  if (status === 200) return data
+  throw new Error(data.message)
+}

apps/playground-nuxt/lib/auth/types.ts

@@ -0,0 +1,42 @@
+// Taken from next-auth/react
+import type { BuiltInProviderType, ProviderType } from '@auth/core/providers'
+/**
+ * Util type that matches some strings literally, but allows any other string as well.
+ * @source https://github.com/microsoft/TypeScript/issues/29729#issuecomment-832522611
+ */
+export declare type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+export interface ClientSafeProvider {
+    id: LiteralUnion<BuiltInProviderType>;
+    name: string;
+    type: ProviderType;
+    signinUrl: string;
+    callbackUrl: string;
+}
+export interface SignInOptions extends Record<string, unknown> {
+    /**
+     * Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.
+     *
+     * [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl)
+     */
+    callbackUrl?: string;
+    /** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option) */
+    redirect?: boolean;
+}
+export interface SignInResponse {
+    error: string | undefined;
+    status: number;
+    ok: boolean;
+    url: string | null;
+}
+/** Match `inputType` of `new URLSearchParams(inputType)` */
+export declare type SignInAuthorizationParams = string | string[][] | Record<string, string> | URLSearchParams;
+/** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1) */
+export interface SignOutResponse {
+    url: string;
+}
+export interface SignOutParams<R extends boolean = true> {
+    /** [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1) */
+    callbackUrl?: string;
+    /** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
+    redirect?: R;
+}

apps/playground-nuxt/nuxt.config.ts

@@ -1,9 +1,4 @@
-import MyModule from '../src/module'
-
 export default defineNuxtConfig({
-  modules: [
-    MyModule
-  ],
   // https://v3.nuxtjs.org/migration/runtime-config#runtime-config
   runtimeConfig: {
     secret: process.env.NEXTAUTH_SECRET,
@@ -12,9 +7,11 @@ export default defineNuxtConfig({
       clientSecret: process.env.GITHUB_CLIENT_SECRET
     }
   },
-  // https://v3.nuxtjs.org/guide/concepts/esm#aliasing-libraries
-  // Fix for GithubProvider is not a function error in Vite
-  alias: {
-    'next-auth/providers/github': 'node_modules/next-auth/providers/github.js'
+  vite: {
+    define: {
+      'process.env.NEXTAUTH_URL': JSON.stringify(process.env.NEXTAUTH_URL),
+      'process.env.AUTH_TRUST_HOST': JSON.stringify(process.env.AUTH_TRUST_HOST),
+      'process.env.VERCEL_URL': JSON.stringify(process.env.VERCEL_URL),
+    }
   }
 })

apps/playground-nuxt/package.json

@@ -1,49 +1,22 @@
 {
-  "name": "next-auth-nuxt",
-  "type": "module",
-  "version": "0.0.0",
-  "packageManager": "pnpm@7.1.1",
-  "license": "MIT",
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
-    },
-    "./handler": {
-      "import": "./dist/runtime/server/handler.mjs",
-      "types": "./dist/runtime/server/handler.d.ts"
-    },
-    "./client": {
-      "import": "./dist/runtime/client/index.mjs",
-      "types": "./dist/runtime/client/index.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "handler.d.ts",
-    "client.d.ts"
-  ],
+  "name": "playground-nuxt",
+  "private": true,
   "scripts": {
-    "prepack": "nuxt-module-build",
-    "dev": "pnpm prepack && nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:build:vercel": "NITRO_PRESET=vercel nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
-  },
-  "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.13",
-    "h3": "^0.8.6",
-    "next-auth": "^4.16.2",
-    "pathe": "^0.3.9"
+    "build": "nuxt build",
+    "dev": "export NODE_OPTIONS='--no-experimental-fetch' && nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.2.0",
-    "@nuxt/schema": "^3.0.0-rc.12",
-    "@nuxtjs/eslint-config-typescript": "^11.0.0",
-    "eslint": "^8.26.0",
-    "nuxt": "^3.0.0-rc.13",
-    "next-auth-nuxt": "workspace:*"
+    "@nuxt/eslint-config": "^0.1.1",
+    "eslint": "^8.29.0",
+    "h3": "1.0.2",
+    "nuxt": "3.0.0"
+  },
+  "dependencies": {
+    "@auth/core": "workspace:*",
+    "@hattip/adapter-node": "^0.0.22",
+    "requrl": "^3.0.2"
   }
 }

apps/playground-nuxt/pages/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <h1>Nuxt Auth Example</h1>
+    <p>
+      This is an example site to demonstrate how to use <a href="https://v3.nuxtjs.org/">Nuxt 3</a> with <a href="https://authjs.dev/">Auth.js</a> for authentication.
+    </p>
+  </div>
+</template>

apps/playground-nuxt/pages/protected.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const session = useSession()
+
+definePageMeta({
+  middleware: 'auth'
+})
+</script>
+
+<template>
+  <div>
+    <h1>Protected Page</h1>
+    <p>
+      This is a protected content. You can access this content because you are
+      signed in.
+    </p>
+    <p>Session expiry: {{ session?.expires }}</p>
+  </div>
+</template>

apps/playground-nuxt/playground/app.vue

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <Header />
-    <NuxtPage />
-    <Footer />
-  </div>
-</template>
-
-<style>
-body {
-font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-padding: 0 1rem 1rem 1rem;
-max-width: 680px;
-margin: 0 auto;
-background: #fff;
-color: #333;
-}
-
-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);
-}
-</style>

apps/playground-nuxt/playground/components/AccessDenied.vue

@@ -1,8 +0,0 @@
-<template>
-  <div>
-    <h1>Access Denied</h1>
-    <p>
-      <a href="/api/auth/signin">You must be signed in to view this page</a>
-    </p>
-  </div>
-</template>

apps/playground-nuxt/playground/components/Footer.vue

@@ -1,30 +0,0 @@
-<template>
-  <footer class="fotter">
-    <hr>
-    <ul class="navItems">
-      <li class="navItem">
-        <a href="https://github.com/nextauthjs/next-auth/tree/main/apps/playground-nuxt">Demo GitHub</a>
-      </li>
-      <li class="navItem">
-        <a href="https://next-auth.js.org">Next.js Documentation</a>
-      </li>
-    </ul>
-  </footer>
-</template>
-
-<style>
-.footer {
-margin-top: 2rem;
-}
-
-.navItems {
-margin-bottom: 1rem;
-padding: 0;
-list-style: none;
-}
-
-.navItem {
-display: inline-block;
-margin-right: 1rem;
-}
-</style>

apps/playground-nuxt/playground/components/Header.vue

@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { useSession, signIn, signOut, computed } from '#imports'
-
-const { data: session, status } = useSession()
-const loading = computed(() => status.value === 'loading')
-</script>
-
-<template>
-  <header>
-    <div class="signedInStatus">
-      <p :class="['nojs-show', !session && loading ? 'loading' : 'loaded']">
-        <template v-if="session">
-          <span v-if="session.user?.image" :style="{ backgroundImage: `url(${session.user.image})` }" class="avatar" />
-          <span class="signedInText">
-            <small>Signed in as</small><br>
-            <strong>{{ session.user?.email || session.user?.name }}</strong>
-          </span>
-          <a href="/api/auth/signout" class="button" @click.prevent="signOut">Sign out</a>
-        </template>
-        <template v-else>
-          <span class="notSignedInText">You are not signed in</span>
-          <a href="/api/auth/signin" class="buttonPrimary" @click.prevent="signIn">Sign in</a>
-        </template>
-      </p>
-    </div>
-    <nav>
-      <ul class="navItems">
-        <li class="navItem">
-          <NuxtLink to="/">
-            Home
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/client">
-            Client
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/server">
-            Server
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/protected">
-            Protected
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/api-example">
-            API
-          </NuxtLink>
-        </li>
-      </ul>
-    </nav>
-  </header>
-</template>
-
-<style>
-.nojs-show {
-  opacity: 1;
-  top: 0;
-}
-
-.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;
-}
-</style>

apps/playground-nuxt/playground/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "playground",
-  "private": true
-}

apps/playground-nuxt/playground/pages/api-example.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <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>
-    <h2>Session</h2>
-    <p>/api/examples/session</p>
-    <iframe src="/api/examples/session" />
-    <h2>JSON Web Token</h2>
-    <p>/api/examples/jwt</p>
-    <iframe src="/api/examples/jwt" />
-  </div>
-</template>

apps/playground-nuxt/playground/pages/client.vue

@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <h1>Client Side Rendering</h1>
-    <p>
-      This page uses the <strong>useSession()</strong> Vue Composable in the <strong>&lt;Header/&gt;</strong> component.
-    </p>
-    <p>
-      The <strong>useSession()</strong> Vue Composable is 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 a provided session via <strong>Vue Plugin</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>
-  </div>
-</template>

apps/playground-nuxt/playground/pages/index.vue

@@ -1,8 +0,0 @@
-<template>
-  <div>
-    <h1>Nuxt 3 + NextAuth.js Example</h1>
-    <p>
-      This is an example site to demonstrate how to use <a href="https://v3.nuxtjs.org/">Nuxt 3</a> with <a href="https://next-auth.js.org">NextAuth.js</a> for authentication.
-    </p>
-  </div>
-</template>

apps/playground-nuxt/playground/pages/protected.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { useSession, useFetch, useLazyFetch } from '#imports'
-import AccessDenied from '~/components/AccessDenied.vue'
-
-const { data: session } = useSession()
-const { data } = await useLazyFetch('/api/examples/protected', {
-  server: false
-})
-</script>
-
-<template>
-  <div>
-    <AccessDenied v-if="!session" />
-    <template v-else>
-      <h1>Protected Page</h1>
-      <p><strong>{{ data?.content || "\u00a0" }}</strong></p>
-    </template>
-  </div>
-</template>

apps/playground-nuxt/playground/pages/server.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { useFetch } from '#imports'
-
-await useFetch('/api/examples/session')
-</script>
-
-<template>
-  <div>
-    <h1>Server Side Rendering</h1>
-    <p>
-      This page uses the <strong>getServerSession()</strong> method inside an api route and is fetched using the <strong>useFetch()</strong> composable.
-    </p>
-    <p>
-      Using <strong>getServerSession()</strong> is the recommended approach if you need to
-      support Server Side Rendering with authentication.
-    </p>
-    <p>
-      The advantage of Server Side Rendering is this page does not require client side JavaScript.
-    </p>
-    <p>
-      The disadvantage of Server Side Rendering is that this page is slower to render.
-    </p>
-  </div>
-</template>

apps/playground-nuxt/playground/server/api/auth/[...].ts

@@ -1,17 +0,0 @@
-import { NextAuthNuxtHandler } from 'next-auth-nuxt/handler'
-import GithubProvider from 'next-auth/providers/github'
-import type { NextAuthOptions } from 'next-auth'
-
-const runtimeConfig = useRuntimeConfig()
-
-export const authOptions: NextAuthOptions = {
-  secret: runtimeConfig.secret,
-  providers: [
-    GithubProvider({
-      clientId: runtimeConfig.github.clientId,
-      clientSecret: runtimeConfig.github.clientSecret
-    })
-  ]
-}
-
-export default NextAuthNuxtHandler(authOptions)

apps/playground-nuxt/playground/server/api/examples/jwt.ts

@@ -1,10 +0,0 @@
-import { getToken } from 'next-auth/jwt'
-
-export default defineEventHandler(async (event) => {
-  // @ts-expect-error: cookies property is not present in h3
-  event.req.cookies = parseCookies(event)
-  const token = await getToken({
-    req: event.req
-  })
-  return token
-})

apps/playground-nuxt/playground/server/api/examples/protected.ts

@@ -1,16 +0,0 @@
-import { getServerSession } from 'next-auth-nuxt/handler'
-import { authOptions } from '../auth/[...]'
-
-export default defineEventHandler(async (event) => {
-  const session = await getServerSession(event, authOptions)
-
-  if (session) {
-    return {
-      content: 'This is protected content. You can access this content because you are signed in.'
-    }
-  }
-
-  return {
-    error: 'You must be signed in to view the protected content on this page.'
-  }
-})

apps/playground-nuxt/playground/server/api/examples/session.ts

@@ -1,7 +0,0 @@
-import { getServerSession } from 'next-auth-nuxt/handler'
-import { authOptions } from '../auth/[...]'
-
-export default defineEventHandler(async (event) => {
-  const session = await getServerSession(event, authOptions)
-  return session
-})

apps/playground-nuxt/plugins/auth.ts

@@ -0,0 +1,19 @@
+import { Session } from '@auth/core'
+
+export default defineNuxtPlugin(async () => {
+  const session = useSession()
+
+  addRouteMiddleware('auth', () => {
+    if (!session.value) return navigateTo('/')
+  })
+
+  if (process.server) {
+    const data = await $fetch<Session>('/api/auth/session', {
+      headers: useRequestHeaders() as any
+    })
+  
+    const hasSession = data && Object.keys(data).length
+
+    session.value = hasSession ? data : null
+  }
+})

apps/playground-nuxt/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-packages:
-  - playground

apps/playground-nuxt/server/api/auth/[...].ts

@@ -0,0 +1,17 @@
+import { NuxtAuthHandler } from '@/lib/auth/server'
+import GithubProvider from '@auth/core/providers/github'
+import type { AuthOptions } from '@auth/core'
+
+const runtimeConfig = useRuntimeConfig()
+
+export const authOptions: AuthOptions = {
+  secret: runtimeConfig.secret,
+  providers: [
+    GithubProvider({
+      clientId: runtimeConfig.github.clientId,
+      clientSecret: runtimeConfig.github.clientSecret
+    })
+  ]
+}
+
+export default NuxtAuthHandler(authOptions)

apps/playground-nuxt/src/module.ts

@@ -1,40 +0,0 @@
-import { fileURLToPath } from 'url'
-import { addImports, addPlugin, defineNuxtModule, extendViteConfig } from '@nuxt/kit'
-import { resolve } from 'pathe'
-
-export interface ModuleOptions {
-}
-
-export default defineNuxtModule<ModuleOptions>({
-  meta: {
-    name: 'next-auth-nuxt',
-    configKey: 'auth'
-  },
-  defaults: {
-  },
-  async setup (_options, nuxt) {
-    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-    nuxt.options.build.transpile.push(runtimeDir)
-
-    addPlugin(resolve(runtimeDir, 'plugin.client'))
-
-    // Composables are auto-imported in client.
-    const client = resolve(runtimeDir, 'client')
-    await addImports([
-      { name: 'getSession', from: client },
-      { name: 'getCsrfToken', from: client },
-      { name: 'getProviders', from: client },
-      { name: 'signIn', from: client },
-      { name: 'signOut', from: client },
-      { name: 'useSession', from: client }
-    ])
-
-    // We can safely expose this to client.
-    extendViteConfig((config) => {
-      config.define = config.define || {}
-      config.define['process.env.NEXTAUTH_URL'] = JSON.stringify(process.env.NEXTAUTH_URL)
-      config.define['process.env.NEXTAUTH_URL_INTERNAL'] = JSON.stringify(process.env.NEXTAUTH_URL_INTERNAL)
-      config.define['process.env.VERCEL_URL'] = JSON.stringify(process.env.VERCEL_URL)
-    })
-  }
-})

apps/playground-nuxt/src/runtime/client/index.ts

@@ -1,369 +0,0 @@
-import type { NextAuthClientConfig } from 'next-auth/client/_utils'
-import type { Plugin, Ref } from 'vue'
-import { ref, reactive, computed, inject, toRefs } from 'vue'
-import { BroadcastChannel, apiBaseUrl, fetchData, now } from 'next-auth/client/_utils'
-import type { Session } from 'next-auth'
-import type {
-  BuiltInProviderType,
-  RedirectableProviderType
-} from 'next-auth/providers'
-import type { H3EventContext } from 'h3'
-import parseUrl from '../lib/parse-url'
-import _logger, { proxyLogger } from '../lib/logger'
-import type {
-  ClientSafeProvider,
-  LiteralUnion,
-  SessionProviderProps,
-  SignInAuthorizationParams,
-  SignInOptions,
-  SignInResponse,
-  SignOutParams,
-  SignOutResponse
-} from '../types'
-
-// This behaviour mirrors the default behaviour for getting the site name that
-// happens server side in server/index.js
-// 1. An empty value is legitimate when the code is being invoked client side as
-//    relative URLs are valid in that context and so defaults to empty.
-// 2. When invoked server side the value is picked up from an environment
-//    variable and defaults to 'http://localhost:3000'.
-const __NEXTAUTH: NextAuthClientConfig = {
-  baseUrl: parseUrl(process.env.NEXTAUTH_URL ?? process.env.VERCEL_URL).origin,
-  basePath: parseUrl(process.env.NEXTAUTH_URL).path,
-  baseUrlServer: parseUrl(
-    process.env.NEXTAUTH_URL_INTERNAL ??
-      process.env.NEXTAUTH_URL ??
-      process.env.VERCEL_URL
-  ).origin,
-  basePathServer: parseUrl(
-    process.env.NEXTAUTH_URL_INTERNAL ?? process.env.NEXTAUTH_URL
-  ).path,
-  _lastSync: 0,
-  _session: undefined,
-  _getSession: () => {}
-}
-
-export interface CtxOrReq {
-  req?: H3EventContext['req']
-  event?: { req: H3EventContext['req'] }
-}
-
-export type GetSessionParams = CtxOrReq & {
-  event?: 'storage' | 'timer' | 'hidden' | string
-  triggerEvent?: boolean
-  broadcast?: boolean
-}
-
-const logger = proxyLogger(_logger, __NEXTAUTH.basePath)
-
-const broadcast = BroadcastChannel()
-
-function isServer () {
-  return (process as any).server
-}
-
-export async function getSession (params?: GetSessionParams) {
-  const session = await fetchData<Session>(
-    'session',
-    __NEXTAUTH,
-    logger,
-    params
-  )
-  if (params?.broadcast ?? true) { broadcast.post({ event: 'session', data: { trigger: 'getSession' } }) }
-
-  return session
-}
-
-/**
- * Returns the current Cross Site Request Forgery Token (CSRF Token)
- * required to make POST requests (e.g. for signing in and signing out).
- * You likely only need to use this if you are not using the built-in
- * `signIn()` and `signOut()` methods.
- *
- * [Documentation](https://next-auth.js.org/getting-started/client#getcsrftoken)
- */
-export async function getCsrfToken (params?: CtxOrReq) {
-  const response = await fetchData<{ csrfToken: string }>(
-    'csrf',
-    __NEXTAUTH,
-    logger,
-    params
-  )
-  return response?.csrfToken
-}
-
-/**
- * It calls `/api/auth/providers` and returns
- * a list of the currently configured authentication providers.
- * It can be useful if you are creating a dynamic custom sign in page.
- *
- * [Documentation](https://next-auth.js.org/getting-started/client#getproviders)
- */
-export async function getProviders () {
-  return await fetchData<
-    Record<LiteralUnion<BuiltInProviderType>, ClientSafeProvider>
-  >('providers', __NEXTAUTH, logger)
-}
-
-/**
- * Client-side method to initiate a signin flow
- * or send the user to the signin page listing all possible providers.
- * Automatically adds the CSRF token to the request.
- *
- * [Documentation](https://next-auth.js.org/getting-started/client#signin)
- */
-export async function signIn<
- P extends RedirectableProviderType | undefined = undefined,
-> (
-  provider?: LiteralUnion<BuiltInProviderType>,
-  options?: SignInOptions,
-  authorizationParams?: SignInAuthorizationParams
-): Promise<
- P extends RedirectableProviderType ? SignInResponse | undefined : undefined
-> {
-  const { callbackUrl = window.location.href, redirect = true } = options ?? {}
-
-  const baseUrl = apiBaseUrl(__NEXTAUTH)
-  const providers = await getProviders()
-
-  if (!providers) {
-    window.location.href = `${baseUrl}/error`
-    return
-  }
-
-  if (!provider || !(provider in providers)) {
-    window.location.href = `${baseUrl}/signin?${new URLSearchParams({
-     callbackUrl
-   })}`
-    return
-  }
-
-  const isCredentials = providers[provider].type === 'credentials'
-  const isEmail = providers[provider].type === 'email'
-  const isSupportingReturn = isCredentials || isEmail
-
-  const signInUrl = `${baseUrl}/${
-   isCredentials ? 'callback' : 'signin'
- }/${provider}`
-
-  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
-
-  const res = await fetch(_signInUrl, {
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
-    // @ts-expect-error: Internal
-    body: new URLSearchParams({
-      ...options,
-      csrfToken: await getCsrfToken(),
-      callbackUrl,
-      json: true
-    })
-  })
-
-  const data = await res.json()
-
-  if (redirect || !isSupportingReturn) {
-    const url = data.url ?? callbackUrl
-    window.location.href = url
-    // If url contains a hash, the browser does not reload the page. We reload manually
-    if (url.includes('#')) { window.location.reload() }
-    return
-  }
-
-  const error = new URL(data.url).searchParams.get('error')
-
-  if (res.ok) { await __NEXTAUTH._getSession({ event: 'storage' }) }
-
-  return {
-    error,
-    status: res.status,
-    ok: res.ok,
-    url: error ? null : data.url
-  } as any
-}
-
-/**
- * Signs the user out, by removing the session cookie.
- * Automatically adds the CSRF token to the request.
- *
- * [Documentation](https://next-auth.js.org/getting-started/client#signout)
- */
-export async function signOut<R extends boolean = true> (
-  options?: SignOutParams<R>
-): Promise<R extends true ? undefined : SignOutResponse> {
-  const { callbackUrl = window.location.href } = options ?? {}
-  const baseUrl = apiBaseUrl(__NEXTAUTH)
-  const fetchOptions = {
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
-    // @ts-expect-error: Internal
-    body: new URLSearchParams({
-      csrfToken: await getCsrfToken(),
-      callbackUrl,
-      json: true
-    })
-  }
-  const res = await fetch(`${baseUrl}/signout`, fetchOptions)
-  const data = await res.json()
-
-  broadcast.post({ event: 'session', data: { trigger: 'signout' } })
-
-  if (options?.redirect ?? true) {
-    const url = data.url ?? callbackUrl
-    window.location.href = url
-    // If url contains a hash, the browser does not reload the page. We reload manually
-    if (url.includes('#')) { window.location.reload() }
-    // @ts-expect-error: Internal
-    return
-  }
-
-  await __NEXTAUTH._getSession({ event: 'storage' })
-
-  return data
-}
-
-export function SessionProviderPlugin (options: SessionProviderProps): Plugin {
-  return {
-    install (app) {
-      const { basePath } = options
-
-      if (basePath) { __NEXTAUTH.basePath = basePath }
-
-      /**
-       * If session was `null`, there was an attempt to fetch it,
-       * but it failed, but we still treat it as a valid initial value.
-       */
-      const hasInitialSession = options.session !== undefined
-
-      /** If session was passed, initialize as already synced */
-      __NEXTAUTH._lastSync = hasInitialSession ? now() : 0
-
-      if (hasInitialSession) { __NEXTAUTH._session = options.session }
-
-      const session = ref(options.session)
-
-      /** If session was passed, initialize as not loading */
-      const loading = ref(!hasInitialSession)
-
-      __NEXTAUTH._getSession = async ({ event } = {}) => {
-        try {
-          const storageEvent = event === 'storage'
-          // We should always update if we don't have a client session yet
-          // or if there are events from other tabs/windows
-          if (storageEvent || __NEXTAUTH._session === undefined) {
-            __NEXTAUTH._lastSync = now()
-            __NEXTAUTH._session = await getSession({
-              broadcast: !storageEvent
-            })
-            session.value = __NEXTAUTH._session
-            return
-          }
-
-          if (
-            // If there is no time defined for when a session should be considered
-            // stale, then it's okay to use the value we have until an event is
-            // triggered which updates it
-            !event ||
-          // If the client doesn't have a session then we don't need to call
-          // the server to check if it does (if they have signed in via another
-          // tab or window that will come through as a "stroage" event
-          // event anyway)
-          __NEXTAUTH._session === null ||
-          // Bail out early if the client session is not stale yet
-          now() < __NEXTAUTH._lastSync
-          ) { return }
-
-          // An event or session staleness occurred, update the client session.
-          __NEXTAUTH._lastSync = now()
-          __NEXTAUTH._session = await getSession()
-          session.value = __NEXTAUTH._session
-        } catch (error) {
-          logger.error('CLIENT_SESSION_ERROR', error as Error)
-        } finally {
-          loading.value = false
-        }
-      }
-
-      __NEXTAUTH._getSession()
-
-      const { refetchOnWindowFocus = true } = options
-
-      // Listen for when the page is visible, if the user switches tabs
-      // and makes our tab visible again, re-fetch the session, but only if
-      // this feature is not disabled.
-      const visibilityHandler = () => {
-        if (refetchOnWindowFocus && document.visibilityState === 'visible') { __NEXTAUTH._getSession({ event: 'visibilitychange' }) }
-      }
-
-      document.addEventListener('visibilitychange', visibilityHandler, false)
-
-      const unsubscribeFromBroadcast = broadcast.receive(() =>
-        __NEXTAUTH._getSession({ event: 'storage' })
-      )
-
-      const { refetchInterval } = options
-      let refetchIntervalTimer: NodeJS.Timer
-
-      if (refetchInterval) {
-        refetchIntervalTimer = setInterval(() => {
-          if (__NEXTAUTH._session) { __NEXTAUTH._getSession({ event: 'poll' }) }
-        }, refetchInterval * 1000)
-      }
-
-      const originalUnmount = app.unmount
-      app.unmount = function nextAuthUnmount () {
-        document.removeEventListener('visibilitychange', visibilityHandler, false)
-        unsubscribeFromBroadcast?.()
-        clearInterval(refetchIntervalTimer)
-        __NEXTAUTH._lastSync = 0
-        __NEXTAUTH._session = undefined
-        __NEXTAUTH._getSession = () => {}
-        originalUnmount()
-      }
-
-      const status = computed(() => loading.value ? 'loading' : session.value ? 'authenticated' : 'unauthenticated')
-      const value = reactive({
-        data: session,
-        status
-      })
-
-      app.provide('SessionKey', value)
-    }
-  }
-}
-
-/**
- * Vue Composable that gives you access
- * to the logged in user's session data.
- *
- * [Documentation](https://next-auth.js.org/getting-started/client#usesession)
- */
-export function useSession (): {
-  data: Ref<SessionProviderProps['session']>;
-  status: Ref<string>;
-  } {
-  if (typeof window === 'undefined') {
-    return {
-      data: ref(null),
-      status: ref('loading')
-    }
-  }
-
-  const value = inject<{
-    data: SessionProviderProps['session']
-    status: string
-  }>('SessionKey')
-  if (!value) {
-    throw new Error('Could not resolve provided session value')
-  }
-  const { data, status } = toRefs(value)
-
-  return {
-    data,
-    status
-  }
-}

apps/playground-nuxt/src/runtime/plugin.client.ts

@@ -1,7 +0,0 @@
-// @ts-expect-error: Nuxt auto-import
-import { defineNuxtPlugin } from '#app'
-import { SessionProviderPlugin } from './client'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(SessionProviderPlugin({}))
-})

apps/playground-nuxt/src/runtime/server/handler.ts

@@ -1,93 +0,0 @@
-import type { NextAuthAction, NextAuthOptions, Session } from 'next-auth'
-import type { RequestInternal } from 'next-auth/core'
-import { NextAuthHandler } from 'next-auth/core'
-import {
-  appendHeader,
-  defineEventHandler,
-  isMethod,
-  sendRedirect,
-  setCookie,
-  readBody,
-  parseCookies,
-  getQuery
-} from 'h3'
-import type { H3Event } from 'h3'
-
-export function NextAuthNuxtHandler (options: NextAuthOptions) {
-  return defineEventHandler(async (event) => {
-    // Catch-all route params in Nuxt goes to the underscore property
-    const nextauth = event.context.params._.split('/')
-
-    const req: RequestInternal | Request = {
-      host: process.env.NEXTAUTH_URL,
-      body: undefined,
-      query: getQuery(event),
-      headers: event.req.headers,
-      method: event.req.method,
-      cookies: parseCookies(event),
-      action: nextauth[0] as NextAuthAction,
-      providerId: nextauth[1],
-      error: nextauth[1]
-    }
-
-    if (isMethod(event, 'POST')) {
-      req.body = await readBody(event)
-    }
-
-    const response = await NextAuthHandler({
-      req,
-      options
-    })
-
-    const { headers, cookies, body, redirect, status = 200 } = response
-    event.res.statusCode = status
-
-    headers?.forEach((header) => {
-      appendHeader(event, header.key, header.value)
-    })
-
-    cookies?.forEach((cookie) => {
-      setCookie(event, cookie.name, cookie.value, cookie.options)
-    })
-
-    if (redirect) {
-      if (isMethod(event, 'POST')) {
-        const body = await readBody(event)
-        if (body?.json !== 'true') { await sendRedirect(event, redirect, 302) }
-
-        return {
-          url: redirect
-        }
-      } else {
-        await sendRedirect(event, redirect, 302)
-      }
-    }
-
-    return body
-  })
-}
-
-export async function getServerSession (
-  event: H3Event,
-  options: NextAuthOptions
-): Promise<Session | null> {
-  options.secret = process.env.NEXTAUTH_SECRET
-
-  const session = await NextAuthHandler<Session>({
-    req: {
-      host: process.env.NEXTAUTH_URL,
-      action: 'session',
-      method: 'GET',
-      cookies: parseCookies(event),
-      headers: event.req.headers
-    },
-    options
-  })
-
-  const { body } = session
-
-  if (body && Object.keys(body).length) {
-    return body
-  }
-  return null
-}

apps/playground-nuxt/src/runtime/types.ts

@@ -1,78 +0,0 @@
-import type { Session } from 'next-auth'
-import type { BuiltInProviderType, ProviderType } from 'next-auth/providers'
-
-export interface UseSessionOptions<R extends boolean> {
-  required: R
-  /** Defaults to `signIn` */
-  onUnauthenticated?: () => void
-}
-
-/**
- * Util type that matches some strings literally, but allows any other string as well.
- * @source https://github.com/microsoft/TypeScript/issues/29729#issuecomment-832522611
- */
-export type LiteralUnion<T extends U, U = string> =
-  | T
-  | (U & Record<never, never>)
-
-export interface ClientSafeProvider {
-  id: LiteralUnion<BuiltInProviderType>
-  name: string
-  type: ProviderType
-  signinUrl: string
-  callbackUrl: string
-}
-
-export interface SignInOptions extends Record<string, unknown> {
-  /**
-   * Defaults to the current URL.
-   * @docs https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
-   */
-  callbackUrl?: string
-  /** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option */
-  redirect?: boolean
-}
-
-export interface SignInResponse {
-  error: string | undefined
-  status: number
-  ok: boolean
-  url: string | null
-}
-
-/** Match `inputType` of `new URLSearchParams(inputType)` */
-export type SignInAuthorizationParams =
-  | string
-  | string[][]
-  | Record<string, string>
-  | URLSearchParams
-
-/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
-export interface SignOutResponse {
-  url: string
-}
-
-export interface SignOutParams<R extends boolean = true> {
-  /** @docs https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1 */
-  callbackUrl?: string
-  /** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
-  redirect?: R
-}
-
-/** @docs: https://next-auth.js.org/getting-started/client#options */
-export interface SessionProviderProps {
-  // children: React.ReactNode
-  session?: Session | null
-  baseUrl?: string
-  basePath?: string
-  /**
-   * A time interval (in seconds) after which the session will be re-fetched.
-   * If set to `0` (default), the session is not polled.
-   */
-  refetchInterval?: number
-  /**
-   * `SessionProvider` automatically refetches the session when the user switches between windows.
-   * This option activates this behaviour if set to `true` (default).
-   */
-  refetchOnWindowFocus?: boolean
-}

apps/playground-nuxt/tsconfig.json

@@ -1,4 +1,4 @@
 {
   // https://v3.nuxtjs.org/concepts/typescript
-  "extends": "./playground/.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
 }

docs/.prettierignore

@@ -1,4 +0,0 @@
-versioned_sidebars
-versioned_docs
-node_modules
-.docusaurus

docs/docs/adapters/firebase.md

@@ -1,91 +0,0 @@
----
-id: firebase
-title: Firebase
----
-
-# Firebase
-
-This is the Firebase (Firestore) Adapter for [`next-auth`](https://next-auth.js.org). This package can only be used in conjunction with the primary `next-auth` package. It is not a standalone package.
-
-## Getting Started
-
-1. Install the necessary packages
-
-```bash npm2yarn2pnpm
-npm install next-auth @next-auth/firebase-adapter
-```
-
-2. Add this adapter to your `pages/api/auth/[...nextauth].js` next-auth configuration object.
-
-```javascript title="pages/api/auth/[...nextauth].js"
-import NextAuth from "next-auth"
-import GoogleProvider from "next-auth/providers/google"
-import { FirestoreAdapter } from "@next-auth/firebase-adapter"
-
-// For more information on each option (and a full list of options) go to
-// https://next-auth.js.org/configuration/options
-export default NextAuth({
-  // https://next-auth.js.org/providers
-  providers: [
-    GoogleProvider({
-      clientId: process.env.GOOGLE_ID,
-      clientSecret: process.env.GOOGLE_SECRET,
-    }),
-  ],
-  adapter: FirestoreAdapter({
-    apiKey: process.env.FIREBASE_API_KEY,
-    appId: process.env.FIREBASE_APP_ID,
-    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
-    databaseURL: process.env.FIREBASE_DATABASE_URL,
-    projectId: process.env.FIREBASE_PROJECT_ID,
-    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
-    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
-    // Optional emulator config (see below for options)
-    emulator: {},
-  }),
-  // ...
-});
-```
-
-## Options
-
-When initializing the firestore adapter, you must pass in the firebase config object with the details from your project. More details on how to obtain that config object can be found [here](https://support.google.com/firebase/answer/7015592).
-
-An example firebase config looks like this:
-
-```js
-const firebaseConfig = {
-  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
-  authDomain: "myapp-project-123.firebaseapp.com",
-  databaseURL: "https://myapp-project-123.firebaseio.com",
-  projectId: "myapp-project-123",
-  storageBucket: "myapp-project-123.appspot.com",
-  messagingSenderId: "65211879809",
-  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
-  measurementId: "G-8GSGZQ44ST",
-}
-```
-
-See [firebase.google.com/docs/web/setup](https://firebase.google.com/docs/web/setup) for more details.
-
-You can optionally pass in emulator options to automatically connect to your local Firebase emulator.
-
-```js
-FirestoreAdapter({
-  // ...
-  // Passing in an enable object will enable the emulator
-  emulator: {
-    // Optional host, defaults to `localhost`
-    host: 'localhost',
-  // Optional port, defaults to `3001`
-    port: 3001,
-  },
-}),
-```
-
-:::tip **From Firebase**
-
-**Caution**: We do not recommend manually modifying an app's Firebase config file or object. If you initialize an app with invalid or missing values for any of these required "Firebase options", then your end users may experience serious issues.
-
-For open source projects, we generally do not recommend including the app's Firebase config file or object in source control because, in most cases, your users should create their own Firebase projects and point their apps to their own Firebase resources (via their own Firebase config file or object).
-:::

docs/docs/adapters/overview.md

@@ -1,54 +0,0 @@
----
-id: overview
-title: Overview
----
-
-An **Adapter** in NextAuth.js connects your application to whatever database or backend system you want to use to store data for users, their accounts, sessions, etc. Adapters are optional, unless you need to persist user information in your own database, or you want to implement certain flows. The [Email Provider](/providers/email) requires an adapter to be able to save [Verification Tokens](/adapters/models#verification-token).
-
-:::tip
-When using a database, you can still use JWT for session handling for fast access. See the [`session.strategy`](/configuration/options#session) option. Read about the trade-offs of JWT in the [FAQ](/faq#json-web-tokens).
-:::
-
-We have a list of official adapters that are distributed as their own packages under the `@next-auth/{name}-adapter` namespace. Their source code is available in their various adapters package directories at [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth/tree/main/packages).
-
-- [`xata`](./xata)
-- [`prisma`](./prisma)
-- [`fauna`](./fauna)
-- [`dynamodb`](./dynamodb)
-- [`firebase`](./firebase)
-- [`pouchdb`](./pouchdb)
-- [`mongodb`](./mongodb)
-- [`neo4j`](./neo4j)
-- [`typeorm-legacy`](./typeorm)
-- [`sequelize`](./sequelize)
-- [`supabase`](./supabase)
-- [`dgraph`](./dgraph)
-- [`upstash-redis`](./upstash-redis)
-
-## Custom Adapter
-
-If you have a database/backend that we don't officially support, you can create your own adapter.
-See the tutorial for [creating a database Adapter](/tutorials/creating-a-database-adapter) for more information.
-
-:::tip
-If you would like to see a new adapter in the official repository, please [open a PR](https://github.com/nextauthjs/next-auth/issues/new) and we will help you to get it merged. Tell us if you are interested in becoming one of the maintainers of any of the official adapters.
-:::
-
-### Editor integration
-
-Adapters are strongly typed, and they rely on the single `Adapter` interface imported from `next-auth/adapters`.
-
-When writing your own custom Adapter in plain JavaScript, note that you can use **JSDoc** to get helpful editor hints and auto-completion like so:
-
-```js
-/** @return { import("next-auth/adapters").Adapter } */
-function MyAdapter() {
-  return {
-    // your adapter methods here
-  }
-}
-```
-
-:::note
-This will work in code editors with a strong TypeScript integration like VSCode or WebStorm. It might not work if you're using more lightweight editors like VIM or Atom.
-:::

docs/docs/concepts/faq.md

@@ -3,11 +3,11 @@ id: faq
 title: Frequently Asked Questions
 ---
 
-## About NextAuth.js
+## About Auth.js
 
-### Is NextAuth.js commercial software?
+### Is Auth.js commercial software?
 
-NextAuth.js is an open source project built by individual contributors.
+Auth.js is an open source project built by individual contributors.
 
 It is not commercial software and is not associated with a commercial organization.
 
@@ -17,29 +17,28 @@ It is not commercial software and is not associated with a commercial organizati
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>What databases does NextAuth.js support?</h3>
+  <h3 style={{display:"inline-block"}}>What databases does Auth.js support?</h3>
 </summary>
 <p>
 
-You can use NextAuth.js with MySQL, MariaDB, Postgres, MongoDB and SQLite or without a database. (See also: [Databases](/configuration/databases))
+You can use Auth.js with MySQL, MariaDB, Postgres, MongoDB and SQLite or without a database. (See our [using a database adapter guide](/guides/adapters/using-a-database-adapter)).
 
-You can use also NextAuth.js with any database using a custom database adapter, or by using a custom credentials authentication provider - e.g. to support signing in with a username and password stored in an existing database.
+You can use also Auth.js with any database using a custom database adapter, or by using a custom credentials authentication provider - e.g. to support signing in with a username and password stored in an existing database.
 
 </p>
 </details>
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>What authentication services does NextAuth.js support?</h3>
+  <h3 style={{display:"inline-block"}}>What authentication services does Auth.js support?</h3>
 </summary>
 <p>
 
-<p>NextAuth.js includes built-in support for signing in with&nbsp;
-{Object.values(require("../providers.json")).sort().join(", ")}.
-(See also: <a href="/configuration/providers/oauth">Providers</a>)
+<p>Auth.js includes built-in support for signing in with&nbsp;
+(See also: <a href="/reference/providers/oauth-builtin">Providers</a>)
 </p>
 
-NextAuth.js also supports email for passwordless sign in, which is useful for account recovery or for people who are not able to use an account with the configured OAuth services (e.g. due to service outage, account suspension or otherwise becoming locked out of an account).
+Auth.js also supports email for passwordless sign in, which is useful for account recovery or for people who are not able to use an account with the configured OAuth services (e.g. due to service outage, account suspension or otherwise becoming locked out of an account).
 
 You can also use a custom based provider to support signing in with a username and password stored in an external database and/or using two factor authentication.
 
@@ -48,58 +47,43 @@ You can also use a custom based provider to support signing in with a username a
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>Does NextAuth.js support signing in with a username and password?</h3>
+  <h3 style={{display:"inline-block"}}>Does Auth.js support signing in with a username and password?</h3>
 </summary>
 <p>
 
-NextAuth.js is designed to avoid the need to store passwords for user accounts.
+Auth.js is designed to avoid the need to store passwords for user accounts.
 
 If you have an existing database of usernames and passwords, you can use a custom credentials provider to allow signing in with a username and password stored in an existing database.
 
-_If you use a custom credentials provider user accounts will not be persisted in a database by NextAuth.js (even if one is configured). The option to use JSON Web Tokens for session tokens (which allow sign in without using a session database) must be enabled to use a custom credentials provider._
+_If you use a custom credentials provider user accounts will not be persisted in a database by Auth.js (even if one is configured). The option to use JSON Web Tokens for session tokens (which allow sign in without using a session database) must be enabled to use a custom credentials provider._
 
 </p>
 </details>
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>Can I use NextAuth.js with a framework different than Next.js?</h3>
+  <h3 style={{display:"inline-block"}}>Can I use Auth.js with a website that does not use Next.js?</h3>
 </summary>
 <p>
 
-NextAuth.js was originally designed for use with Next.js and Serverless. However, today you could use the NextAuth.js core with any other framework. Checkout the examples for <a href="https://github.com/nextauthjs/next-auth/tree/main/apps/playground-gatsby" target="_blank">Gatsby</a> and <a href="https://sveltekit.authjs.dev/" target="_blank">SvelteKit</a>. If you would add another integration with other frameworks, feel free to work on it and send a pull request. Make sure to check if there's any on-going work before open a new issue.
+Auth.js is designed for use with Next.js and Serverless.
+
+If you are using a different framework for your website, you can create a website that handles sign in with Next.js and then access those sessions on a website that does not use Next.js as long as the websites are on the same domain.
+
+If you use Auth.js on a website with a different subdomain then the rest of your website (e.g. `auth.example.com` vs `www.example.com`) you will need to set a custom cookie domain policy for the Session Token cookie. (See also: [Cookies](/reference/configuration/auth-config#cookies))
+
+Auth.js does not currently support automatically signing into sites on different top level domains (e.g. `www.example.com` vs `www.example.org`) using a single session.
 
 </p>
 </details>
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>Can session generated by NextAuth.js be used by another website?</h3>
+  <h3 style={{display:"inline-block"}}>Can I use Auth.js with React Native?</h3>
 </summary>
 <p>
 
-**Same domain**: you can create a website that handles sign-in with NextAuth.js and then access those sessions on a website that does not use NextAuth.js as long as the websites are on the same domain.
-
-**Same root domain, different subdomains**: If you use NextAuth.js on a website with a different subdomain than the rest of your website (e.g. `auth.example.com` vs. `www.example.com`) you will need to set a custom cookie domain policy for the Session Token cookie. (See also: [Cookies](/configuration/options#cookies)).
-
-:::warning
-Changing the default cookies domain policy can lead to security issues if done incorrectly. Make sure you're aware of the implications before proceeding.
-:::
-
-A working example can be found at <a href="https://github.com/vercel/examples/tree/main/solutions/subdomain-auth" target="_blank">this example repo</a>.
-
-**Different root domains**: NextAuth.js does not currently support automatically signing into sites on different top-level domains (e.g. `www.example.com` vs. `www.example.org`) using a single session.
-
-</p>
-</details>
-
-<details>
-<summary>
-  <h3 style={{display:"inline-block"}}>Can I use NextAuth.js with React Native?</h3>
-</summary>
-<p>
-
-NextAuth.js is designed as a secure, confidential client and implements a server side authentication flow.
+Auth.js is designed as a secure, confidential client and implements a server side authentication flow.
 
 It is not intended to be used in native applications on desktop or mobile applications, which typically implement public clients (e.g. with client / secrets embedded in the application).
 
@@ -108,7 +92,7 @@ It is not intended to be used in native applications on desktop or mobile applic
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>Is NextAuth.js supporting TypeScript?</h3>
+  <h3 style={{display:"inline-block"}}>Is Auth.js supporting TypeScript?</h3>
 </summary>
 <p>
 
@@ -119,11 +103,11 @@ Yes! Check out the [TypeScript docs](/getting-started/typescript)
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>Is NextAuth.js compatible with Next.js 12 Middleware?</h3>
+  <h3 style={{display:"inline-block"}}>Is Auth.js compatible with Next.js 12 Middleware?</h3>
 </summary>
 <p>
 
-[Next.js Middleware](https://nextjs.org/docs/middleware) is supported. Head over to the [this page](/configuration/nextjs#middleware)
+[Next.js Middleware](https://nextjs.org/docs/middleware) is supported. Head over to the [this page](/reference/nextjs/#middleware)
 
 </p>
 </details>
@@ -134,11 +118,11 @@ Yes! Check out the [TypeScript docs](/getting-started/typescript)
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>What databases are supported by NextAuth.js?</h3>
+  <h3 style={{display:"inline-block"}}>What databases are supported by Auth.js?</h3>
 </summary>
 <p>
 
-NextAuth.js can be used with MySQL, Postgres, MongoDB, SQLite and compatible databases (e.g. MariaDB, Amazon Aurora, Amazon DocumentDB…) or with no database.
+Auth.js can be used with MySQL, Postgres, MongoDB, SQLite and compatible databases (e.g. MariaDB, Amazon Aurora, Amazon DocumentDB…) or with no database.
 
 It also provides an Adapter API which allows you to connect it to any database.
 
@@ -147,15 +131,15 @@ It also provides an Adapter API which allows you to connect it to any database.
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>What does NextAuth.js use databases for?</h3>
+  <h3 style={{display:"inline-block"}}>What does Auth.js use databases for?</h3>
 </summary>
 <p>
 
-Databases in NextAuth.js are used for persisting users, OAuth accounts, email sign in tokens and sessions.
+Databases in Auth.js are used for persisting users, OAuth accounts, email sign in tokens and sessions.
 
 Specifying a database is optional if you don't need to persist user data or support email sign in. If you don't specify a database then JSON Web Tokens will be enabled for session storage and used to store session data.
 
-If you are using a database with NextAuth.js, you can still explicitly enable JSON Web Tokens for sessions (instead of using database sessions).
+If you are using a database with Auth.js, you can still explicitly enable JSON Web Tokens for sessions (instead of using database sessions).
 
 </p>
 </details>
@@ -166,9 +150,9 @@ If you are using a database with NextAuth.js, you can still explicitly enable JS
 </summary>
 <p>
 
-- Using NextAuth.js without a database works well for internal tools - where you need to control who is able to sign in, but when you do not need to create user accounts for them in your application.
+- Using Auth.js without a database works well for internal tools - where you need to control who is able to sign in, but when you do not need to create user accounts for them in your application.
 
-- Using NextAuth.js with a database is usually a better approach for a consumer facing application where you need to persist accounts (e.g. for billing, to contact customers, etc).
+- Using Auth.js with a database is usually a better approach for a consumer facing application where you need to persist accounts (e.g. for billing, to contact customers, etc).
 
 </p>
 </details>
@@ -190,7 +174,7 @@ If you are deploying directly to a particular cloud platform you may also want t
 
 ## Security
 
-Parts of this section has been moved to its [own page](/security).
+Parts of this section has been moved to its [own page](/getting-started/security).
 
 <details>
 <summary>
@@ -198,18 +182,18 @@ Parts of this section has been moved to its [own page](/security).
 </summary>
 <p>
 
-NextAuth.js provides a solution for authentication, session management and user account creation.
+Auth.js provides a solution for authentication, session management and user account creation.
 
-NextAuth.js records Refresh Tokens and Access Tokens on sign in (if supplied by the provider) and it will pass them, along with the User ID, Provider and Provider Account ID, to either:
+Auth.js records Refresh Tokens and Access Tokens on sign in (if supplied by the provider) and it will pass them, along with the User ID, Provider and Provider Account ID, to either:
 
 1. A database - if a database connection string is provided
 2. The JSON Web Token callback - if JWT sessions are enabled (e.g. if no database specified)
 
 You can then look them up from the database or persist them to the JSON Web Token.
 
-Note: NextAuth.js does not currently handle Access Token rotation for OAuth providers for you, however you can check out [this tutorial](/tutorials/refresh-token-rotation) if you want to implement it.
+Note: Auth.js does not currently handle Access Token rotation for OAuth providers for you, however you can check out [this tutorial](/guides/basics/refresh-token-rotation) if you want to implement it.
 
-We also have an [example repository](https://github.com/nextauthjs/next-auth-refresh-token-example) / project based upon NextAuth.js v4 where we demonstrate how to use a refresh token to refresh the provided access token.
+We also have an [example repository](https://github.com/nextauthjs/next-auth-refresh-token-example) / project based upon Auth.js v4 where we demonstrate how to use a refresh token to refresh the provided access token.
 
 </p>
 </details>
@@ -226,20 +210,16 @@ When an email address is associated with an OAuth account it does not necessaril
 
 With automatic account linking on sign in, this can be exploited by bad actors to hijack accounts by creating an OAuth account associated with the email address of another user.
 
-For this reason it is not secure to automatically link accounts between arbitrary providers on sign in, which is why this feature is generally not provided by authentication service and is not provided by NextAuth.js.
+For this reason it is not secure to automatically link accounts between arbitrary providers on sign in, which is why this feature is generally not provided by authentication service and is not provided by Auth.js.
 
 Automatic account linking is seen on some sites, sometimes insecurely. It can be technically possible to do automatic account linking securely if you trust all the providers involved to ensure they have securely verified the email address associated with the account, but requires placing trust (and transferring the risk) to those providers to handle the process securely.
 
 Examples of scenarios where this is secure include with an OAuth provider you control (e.g. that only authorizes users internal to your organization) or with a provider you explicitly trust to have verified the users email address.
 
-Automatic account linking is not a planned feature of NextAuth.js, however there is scope to improve the user experience of account linking and of handling this flow, in a secure way. Typically this involves providing a fallback option to sign in via email, which is already possible (and recommended), but the current implementation of this flow could be improved on.
+Automatic account linking is not a planned feature of Auth.js, however there is scope to improve the user experience of account linking and of handling this flow, in a secure way. Typically this involves providing a fallback option to sign in via email, which is already possible (and recommended), but the current implementation of this flow could be improved on.
 
 Providing support for secure account linking and unlinking of additional providers - which can only be done if a user is already signed in already - was originally a feature in v1.x but has not been present since v2.0, is planned to return in a future release.
 
-:::note
-If the user first signs in using Email and then tries to sign in again using an OAuth provider, NextAuth.js default behavior is to allow account linking even if the OAuth account's email address does not match the previous email address of the user.
-:::
-
 </p>
 </details>
 
@@ -249,13 +229,13 @@ If the user first signs in using Email and then tries to sign in again using an
 
 <details>
 <summary>
-  <h3 style={{display:"inline-block"}}>Why doesn't NextAuth.js support [a particular feature]?</h3>
+  <h3 style={{display:"inline-block"}}>Why doesn't Auth.js support [a particular feature]?</h3>
 </summary>
 <p>
 
-NextAuth.js is an open source project built by individual contributors who are volunteers writing code and providing support in their spare time.
+Auth.js is an open source project built by individual contributors who are volunteers writing code and providing support in their spare time.
 
-If you would like NextAuth.js to support a particular feature, the best way to help make it happen is to raise a feature request describing the feature and offer to work with other contributors to develop and test it.
+If you would like Auth.js to support a particular feature, the best way to help make it happen is to raise a feature request describing the feature and offer to work with other contributors to develop and test it.
 
 If you are not able to develop a feature yourself, you can offer to sponsor someone to work on it.
 
@@ -268,7 +248,7 @@ If you are not able to develop a feature yourself, you can offer to sponsor some
 </summary>
 <p>
 
-Product design decisions on NextAuth.js are made by core team members.
+Product design decisions on Auth.js are made by core team members.
 
 You can raise suggestions as feature requests / requests for enhancement.
 
@@ -285,11 +265,11 @@ Ultimately if your request is not accepted or is not actively in development, yo
 
 <details>
 <summary>
-  <h3>Does NextAuth.js use JSON Web Tokens?</h3>
+  <h3>Does Auth.js use JSON Web Tokens?</h3>
 </summary>
 <p>
 
-NextAuth.js by default uses JSON Web Tokens for saving the user's session. However, if you use a [database adapter](/adapters/overview), the database will be used to persist the user's session. You can force the usage of JWT when using a database [through the configuration options](/configuration/options#session). Since v4 all our JWT tokens are now encrypted by default with A256GCM.
+Auth.js by default uses JSON Web Tokens for saving the user's session. However, if you use a [database adapter](/guides/adapters/using-a-database-adapter), the database will be used to persist the user's session. You can force the usage of JWT when using a database [through the configuration options](/reference/configuration/auth-config#session). Since v4 all our JWT tokens are now encrypted by default with A256GCM.
 
 </p>
 </details>
@@ -304,7 +284,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
 
 - Advantages of using a JWT as a session token include that they do not require a database to store sessions, this can be faster and cheaper to run and easier to scale.
 
-- JSON Web Tokens in NextAuth.js are secured using cryptographic encryption (JWE) to store the included information directly in a JWT session token. You may then use the token to pass information between services and APIs on the same domain without having to contact a database to verify the included information.
+- JSON Web Tokens in Auth.js are secured using cryptographic encryption (JWE) to store the included information directly in a JWT session token. You may then use the token to pass information between services and APIs on the same domain without having to contact a database to verify the included information.
 
 - You can use JWT to securely store information you do not mind the client knowing even without encryption, as the JWT is stored in a server-readable-only cookie so data in the JWT is not accessible to third party JavaScript running on your site.
 
@@ -321,7 +301,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
 
   Shorter session expiry times are used when using JSON Web Tokens as session tokens to allow sessions to be invalidated sooner and simplify this problem.
 
-  NextAuth.js client includes advanced features to mitigate the downsides of using shorter session expiry times on the user experience, including automatic session token rotation, optionally sending keep alive messages to prevent short lived sessions from expiring if there is an window or tab open, background re-validation, and automatic tab/window syncing that keeps sessions in sync across windows any time session state changes or a window or tab gains or loses focus.
+  Auth.js client includes advanced features to mitigate the downsides of using shorter session expiry times on the user experience, including automatic session token rotation, optionally sending keep alive messages to prevent short lived sessions from expiring if there is an window or tab open, background re-validation, and automatic tab/window syncing that keeps sessions in sync across windows any time session state changes or a window or tab gains or loses focus.
 
 - As with database session tokens, JSON Web Tokens are limited in the amount of data you can store in them. There is typically a limit of around 4096 bytes per cookie, though the exact limit varies between browsers, proxies and hosting services. If you want to support most browsers, then do not exceed 4096 bytes per cookie. If you want to save more data, you will need to persist your sessions in a database (Source: [browsercookielimits.iain.guru](http://browsercookielimits.iain.guru/))
 
@@ -333,8 +313,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
 
   Avoid storing any data in a token that might be problematic if it were to be decrypted in the future.
 
-- If you do not explicitly specify a secret for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret. Since v4 this only impacts development and generating a secret is required in production.
-
+- If you do not explicitly specify a secret for for Auth.js, existing sessions will be invalidated any time your Auth.js configuration changes, as Auth.js will default to an auto-generated secret. Since v4 this only impacts development and generating a secret is required in production.
 
 </p>
 </details>
@@ -349,7 +328,7 @@ By default tokens are not signed (JWS) but are encrypted (JWE). Since v4 we have
 
 You can specify other valid algorithms - [as specified in RFC 7518](https://tools.ietf.org/html/rfc7517) - with either a secret (for symmetric encryption) or a public/private key pair (for asymmetric encryption).
 
-NextAuth.js will generate keys for you, but this will generate a warning at start up.
+Auth.js will generate keys for you, but this will generate a warning at start up.
 
 Using explicit public/private keys for signing is strongly recommended.
 
@@ -358,11 +337,11 @@ Using explicit public/private keys for signing is strongly recommended.
 
 <details>
 <summary>
-  <h3>What signing and encryption standards does NextAuth.js support?</h3>
+  <h3>What signing and encryption standards does Auth.js support?</h3>
 </summary>
 <p>
 
-NextAuth.js includes a largely complete implementation of JSON Object Signing and Encryption (JOSE):
+Auth.js includes a largely complete implementation of JSON Object Signing and Encryption (JOSE):
 
 - [RFC 7515 - JSON Web Signature (JWS)](https://tools.ietf.org/html/rfc7515)
 - [RFC 7516 - JSON Web Encryption (JWE)](https://tools.ietf.org/html/rfc7516)

docs/docs/concepts/oauth.md

@@ -0,0 +1,51 @@
+---
+title: How OAuth works
+---
+
+Authentication Providers in **Auth.js** are OAuth definitions that allow your users to sign in with their favorite preexisting logins. You can use any of our many predefined providers, or write your own custom OAuth configuration.
+
+- [Using a built-in OAuth Provider](#built-in-providers) (e.g Github, Twitter, Google, etc...)
+- [Using a custom OAuth Provider](#using-a-custom-provider)
+
+:::note
+Auth.js is designed to work with any OAuth service, it supports **OAuth 1.0**, **1.0A**, **2.0** and **OpenID Connect** and has built-in support for most popular sign-in services.
+:::
+
+Without going into too much detail, the OAuth flow generally has 6 parts:
+
+1. The application requests authorization to access service resources from the user
+2. If the user authorized the request, the application receives an authorization grant
+3. The application requests an access token from the authorization server (API) by presenting authentication of its own identity, and the authorization grant
+4. If the application identity is authenticated and the authorization grant is valid, the authorization server (API) issues an access token to the application. Authorization is complete.
+5. The application requests the resource from the resource server (API) and presents the access token for authentication
+6. If the access token is valid, the resource server (API) serves the resource to the application
+
+```mermaid
+sequenceDiagram
+    participant Browser
+    participant App Server
+    participant Auth Server (Github)
+    Note left of Browser: User clicks on "Sign in"
+    Browser->>App Server: GET<br/>"api/auth/signin"
+    App Server->>App Server: Computes the available<br/>sign in providers<br/>from the "providers" option
+    App Server->>Browser: Redirects to Sign in page
+    Note left of Browser: Sign in options<br/>are shown the user<br/>(Github, Twitter, etc...)
+    Note left of Browser: User clicks on<br/>"Sign in with Github"
+    Browser->>App Server: POST<br/>"api/auth/signin/github"
+    App Server->>App Server: Computes sign in<br/>options for Github<br/>(scopes, callback URL, etc...)
+    App Server->>Auth Server (Github): GET<br/>"github.com/login/oauth/authorize"
+    Note left of Auth Server (Github): Sign in options<br> are supplied as<br/>query params<br/>(clientId, <br/>scope, etc...)
+    Auth Server (Github)->>Browser: Shows sign in page<br/>in Github.com<br/>to the user
+    Note left of Browser: User inserts their<br/>credentials in Github
+    Browser->>Auth Server (Github): Github validates the inserted credentials
+    Auth Server (Github)->>Auth Server (Github): Generates one time access code<br/>and calls callback<br>URL defined in<br/>App settings
+    Auth Server (Github)->>App Server: GET<br/>"api/auth/github/callback?code=123"
+    App Server->>App Server: Grabs code<br/>to exchange it for<br/>access token
+    App Server->>Auth Server (Github): POST<br/>"github.com/login/oauth/access_token"<br/>{code: 123}
+    Auth Server (Github)->>Auth Server (Github): Verifies code is<br/>valid and generates<br/>access token
+    Auth Server (Github)->>App Server: { access_token: 16C7x... }
+    App Server->>App Server: Generates session token<br/>and stores session
+    App Server->>Browser: You're now logged in!
+```
+
+For more details, check out Aaron Parecki's blog post [OAuth2 Simplified](https://aaronparecki.com/oauth-2-simplified/) or Postman's blog post [OAuth 2.0: Implicit Flow is Dead, Try PKCE Instead](https://blog.postman.com/pkce-oauth-how-to/).