chore(release): bump version [skip ci]

Co-authored-by: @HommeSauvage

.eslintrc.js

@@ -1,21 +1,20 @@
-// @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",
-  },
   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"),
@@ -24,44 +23,19 @@ 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",
-      },
-    },
   ],
+  extends: ["prettier"],
+  globals: {
+    localStorage: "readonly",
+    location: "readonly",
+    fetch: "readonly",
+  },
+  rules: {
+    camelcase: "off",
+  },
   plugins: ["jest"],
-  ignorePatterns: [
-    "**/dist/**",
-    "**/node_modules/**",
-    ".eslintrc.js",
-    "**/.turbo/**",
-    "**/coverage/**",
-    "**/build/**",
-  ],
+  env: {
+    "jest/globals": true,
+  },
+  ignorePatterns: [".eslintrc.js"],
 }

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

@@ -4,8 +4,11 @@ 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 {{
@@ -70,7 +73,7 @@ async function run() {
         }),
         client.issues.createComment({
           ...issueCommon,
-          body: readFileSync("repro.md", "utf8"),
+          body: readFileSync(join(__dirname, "repro.md"), "utf8"),
         }),
       ])
       return core.info(

.github/sync.yml

@@ -1,14 +1,6 @@
-# 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
+# This is a legacy example pushed from the v4 branch
+nextauthjs/next-auth-example:
+  - source: apps/example-nextjs
     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 /home/runner/work/next-auth/next-auth/.github/actions/issue-validator/index.mjs
+      - name: 'Run issue validator'
+        run: node ./.github/actions/issue-validator/index.mjs
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -7,6 +7,7 @@ on:
       - "beta"
       - "next"
       - "3.x"
+      - "v4"
   pull_request:
 
 jobs:
@@ -29,6 +30,8 @@ jobs:
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
+      - name: Build
+        run: pnpm build
       - name: Run tests
         run: pnpm test
         env:
@@ -62,11 +65,15 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Publish to npm and GitHub
-        run: pnpm release
+        run: |
+          git config --global user.email "balazsorban44@users.noreply.github.com"
+          git config --global user.name "Balázs Orbán"
+          pnpm release
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NO_VERIFY: 1
+          RELEASE_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          NPM_TOKEN_PKG: ${{ secrets.NPM_TOKEN_PKG }}
+          NPM_TOKEN_ORG: ${{ secrets.NPM_TOKEN_ORG }}
   release-pr:
     name: Publish PR
     runs-on: ubuntu-latest
@@ -94,20 +101,19 @@ jobs:
           PR_NUMBER: ${{ github.event.number }}
       - name: Publish to npm
         run: |
-          cd packages/core
+          cd packages/next-auth
           echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
           pnpm publish --no-git-checks --access public --tag experimental
         env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN_PKG }}
       - name: Comment version on PR
         uses: NejcZdovc/comment-pr@v2
         with:
           message:
-            "🎉 Experimental release [published 📦️ on npm](https://npmjs.com/package/@auth/core/v/${{ env.VERSION }})!\n \
-            ```sh\npnpm add @auth/core@${{ env.VERSION }}\n```\n \
-            ```sh\nyarn add @auth/core@${{ env.VERSION }}\n```\n \
-            ```sh\nnpm i @auth/core@${{ env.VERSION }}\n```"
+            "🎉 Experimental release [published 📦️ on npm](https://npmjs.com/package/next-auth/v/${{ env.VERSION }})!\n \
+            ```sh\npnpm add next-auth@${{ env.VERSION }}\n```\n \
+            ```sh\nyarn add next-auth@${{ env.VERSION }}\n```\n \
+            ```sh\nnpm i next-auth@${{ env.VERSION }}\n```"
         env:
           VERSION: ${{ steps.determine-version.outputs.version }}
-          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
-
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sync-examples.yml

@@ -2,7 +2,7 @@ name: Sync Example Repositories
 on:
   push:
     branches:
-      - main
+      - v4
   workflow_dispatch:
 jobs:
   sync:
@@ -14,6 +14,5 @@ jobs:
         # Can update to v1 when https://github.com/BetaHuhn/repo-file-sync-action/issues/168 is resolved
         uses: BetaHuhn/repo-file-sync-action@v1.16.5
         with:
-          GH_PAT: ${{ secrets.SYNC_EXAMPLE_PAT }}
+          GH_PAT: ${{ secrets.GH_PAT_CLASSIC }}
           SKIP_PR: true
-          ORIGINAL_MESSAGE: true

.gitignore

@@ -51,7 +51,7 @@ apps/dev/typeorm
 /.vs/slnx.sqlite-journal
 /.vs/slnx.sqlite
 /.vs
-.vscode/generated*
+.vscode
 
 # Jetbrains
 .idea
@@ -81,13 +81,11 @@ docs/.docusaurus
 docs/providers.json
 
 # Core
-packages/core/*.js
-packages/core/*.d.ts
-packages/core/*.d.ts.map
+packages/core/adapters.*
+packages/core/index.*
+packages/core/jwt
 packages/core/lib
 packages/core/providers
-docs/docs/reference/03-core
-docs/docs/reference/04-sveltekit
 
 
 # SvelteKit

.prettierrc.js

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

.vscode/settings.json

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

.vscode/snippets.code-snippets

@@ -1,18 +0,0 @@
-{
-  "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)"
-    ]
-  },
-}

LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2022-2023, Balázs Orbán
+Copyright (c) 2018-2021, Iain Collins
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

apps/dev/.vscode/settings.json

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

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

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

apps/dev/components/footer.js

@@ -8,10 +8,10 @@ export default function Footer() {
       <hr />
       <ul className={styles.navItems}>
         <li className={styles.navItem}>
-          <a href="https://authjs.dev">Documentation</a>
+          <a href="https://next-auth.js.org">Documentation</a>
         </li>
         <li className={styles.navItem}>
-          <a href="https://www.npmjs.com/package/@auth/core">NPM</a>
+          <a href="https://www.npmjs.com/package/next-auth">NPM</a>
         </li>
         <li className={styles.navItem}>
           <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>

apps/dev/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "clean": "rm -rf .next",
     "dev": "next dev",
+    "lint": "next lint",
     "build": "next build",
     "start": "next start",
     "email": "fake-smtp-server",
@@ -22,7 +23,6 @@
     "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 { Auth, type AuthConfig } from "@auth/core"
+import NextAuth, { NextAuthOptions } from "next-auth"
 
 // Providers
-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"
+import Apple from "next-auth/providers/apple"
+import Auth0 from "next-auth/providers/auth0"
+import AzureAD from "next-auth/providers/azure-ad"
+import AzureB2C from "next-auth/providers/azure-ad-b2c"
+import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
+// import Cognito from "next-auth/providers/cognito"
+import Credentials from "next-auth/providers/credentials"
+import Discord from "next-auth/providers/discord"
+import DuendeIDS6 from "next-auth/providers/duende-identity-server6"
+// import Email from "next-auth/providers/email"
+import Facebook from "next-auth/providers/facebook"
+import Foursquare from "next-auth/providers/foursquare"
+import Freshbooks from "next-auth/providers/freshbooks"
+import GitHub from "next-auth/providers/github"
+import Gitlab from "next-auth/providers/gitlab"
+import Google from "next-auth/providers/google"
+// import IDS4 from "next-auth/providers/identity-server4"
+import Instagram from "next-auth/providers/instagram"
+// import Keycloak from "next-auth/providers/keycloak"
+import Line from "next-auth/providers/line"
+import LinkedIn from "next-auth/providers/linkedin"
+import Mailchimp from "next-auth/providers/mailchimp"
+// import Okta from "next-auth/providers/okta"
+import Osu from "next-auth/providers/osu"
+import Patreon from "next-auth/providers/patreon"
+import Slack from "next-auth/providers/slack"
+import Spotify from "next-auth/providers/spotify"
+import Trakt from "next-auth/providers/trakt"
+import Twitch from "next-auth/providers/twitch"
+import Twitter from "next-auth/providers/twitter"
+import Vk from "next-auth/providers/vk"
+import Wikimedia from "next-auth/providers/wikimedia"
+import WorkOS from "next-auth/providers/workos"
 
 // // Prisma
 // import { PrismaClient } from "@prisma/client"
@@ -66,7 +66,7 @@ import WorkOS from "@auth/core/providers/workos"
 //   secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
 // })
 
-export const authConfig: AuthConfig = {
+export const authOptions: NextAuthOptions = {
   // adapter,
   // debug: process.env.NODE_ENV !== "production",
   theme: {
@@ -118,10 +118,9 @@ export const authConfig: AuthConfig = {
     Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
     WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
   ],
-  // debug: process.env.NODE_ENV !== "production",
 }
 
-if (authConfig.adapter) {
+if (authOptions.adapter) {
   // TODO:
   // authOptions.providers.unshift(
   //   // NOTE: You can start a fake e-mail server with `pnpm email`
@@ -130,22 +129,4 @@ if (authConfig.adapter) {
   // )
 }
 
-// TODO: move to next-auth/edge
-function AuthHandler(...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 Auth(req, args[0])
-    }
-  }
-  args[1].secret ??= envSecret
-  args[1].trustHost ??= envTrustHost
-  return Auth(args[0], args[1])
-}
-
-export default AuthHandler(authConfig)
-
-export const config = { runtime: "experimental-edge" }
+export default NextAuth(authOptions)

apps/dev/pages/api/examples/protected.js

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

apps/dev/pages/api/examples/session.js

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

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

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

apps/dev/pages/index.js

@@ -5,8 +5,7 @@ export default function Page () {
     <Layout>
       <h1>NextAuth.js Example</h1>
       <p>
-        This is an example site to demonstrate how to use{' '}
-        <a href="https://authjs.dev">NextAuth.js</a> for authentication.
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
       </p>
     </Layout>
   )

apps/dev/pages/policy.js

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

apps/dev/pages/protected-ssr.js

@@ -1,5 +1,5 @@
 // This is an example of how to protect content using server rendering
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import { authOptions } from "./api/auth/[...nextauth]"
 import Layout from "../components/layout"
 import AccessDenied from "../components/access-denied"
@@ -26,11 +26,7 @@ export default function Page({ content, session }) {
 }
 
 export async function getServerSideProps(context) {
-  const session = await unstable_getServerSession(
-    context.req,
-    context.res,
-    authOptions
-  )
+  const session = await getServerSession(context.req, context.res, authOptions)
   let content = null
 
   if (session) {

apps/dev/pages/server.js

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

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

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

apps/dev/pages/supabase-ssr.js

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

apps/example-gatsby/README.md

@@ -0,0 +1,110 @@
+> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/example-gatsby). 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">NextAuth.js Example App</h3>
+   <p align="center">
+   Open Source. Full Stack. Own Your Data.
+   </p>
+   <p align="center" style="align: center;">
+      <a href="https://npm.im/next-auth">
+        <img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth">
+      </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"/>
+      </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" />
+      </a>
+   </p>
+</p>
+
+## Overview
+
+NextAuth.js is a complete open source authentication solution.
+
+This is an example application that shows how `next-auth` is applied to a basic Gatsby app. We are showing how to configure the backend both as a [Vercel Function](https://vercel.com/docs/concepts/functions/introduction) for deployment to Vercel, and also for [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions) for other platforms.
+
+The deployed version can be found at [`next-auth-gatsby-example.vercel.app`](https://next-auth-gatsby-example.vercel.app)
+
+### About NextAuth.js
+
+NextAuth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for [Next.js](https://nextjs.org) and [Serverless](https://vercel.com), but this example shows how to use it in a Gatsby project. Our goal is to [support even more frameworks](https://github.com/nextauthjs/next-auth/issues/2294) in the future.
+
+Go to [next-auth.js.org](https://next-auth.js.org) for more information and documentation.
+
+> *NextAuth.js is not officially associated with Vercel or Next.js.*
+
+## Getting Started
+
+### 1. Clone the repository and install dependencies
+
+```
+git clone https://github.com/nextauthjs/next-auth-gatsby-example.git
+cd next-auth-gatsby-example
+npm install
+```
+
+### 2. Configure your local environment
+
+Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):
+
+```
+cp .env.local.example .env.local
+```
+
+Add details for one or more providers (e.g. Google, Twitter, GitHub, Email, etc).
+
+#### Database
+
+A database is needed to persist user accounts and to support email sign in. However, you can still use NextAuth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, [JSON Web Tokens](https://jwt.io/introduction) will be enabled by default.
+
+You **can** skip configuring a database and come back to it later if you want.
+
+For more information about setting up a database, please check out the following links:
+
+* Docs: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
+
+### 3. Configure Authentication Providers
+
+1. Review and update options in `nextauth.config.js` as needed.
+
+2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of `{server}/api/auth/callback/{provider}`.
+
+  e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
+
+  A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at https://next-auth.js.org/configuration/providers/oauth
+
+3. You can also choose to specify an SMTP server for passwordless sign in via email.
+
+### 4. Start the application
+
+To run your site locally, use:
+
+```
+npm run dev
+```
+
+To run it in production mode, use:
+
+```
+npm run build
+npm run start
+```
+
+### 5. Preparing for Production
+
+Follow the [Deployment documentation](https://next-auth.js.org/deployment)
+
+## Acknowledgements
+
+<a href="https://vercel.com?utm_source=nextauthjs&utm_campaign=oss">
+<img width="170px" src="https://raw.githubusercontent.com/nextauthjs/next-auth/canary/www/static/img/powered-by-vercel.svg" alt="Powered By Vercel" />
+</a>
+<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire NextAuth.js Team</p>
+
+## License
+
+ISC
+

apps/example-gatsby/api/auth/[nextauth].js

@@ -1,5 +1,5 @@
 // Gatsby Functions are not yet supported on Vercel, so you'll need to use the root `api` folder.
-import NextAuth from "next-auth"
+import NextAuth from "next-auth/next"
 import { authConfig } from "../../nextauth.config"
 
 export default async function handler(req, res) {

apps/example-gatsby/src/api/[...nextauth].js

@@ -1,6 +1,6 @@
 // If your deployment environment supports Gatsby Functions, you won't need the root `api` folder, only this.
 
-import NextAuth from "next-auth"
+import NextAuth from "next-auth/next"
 import { authConfig } from "../../nextauth.config"
 
 export default async function handler(req, res) {

apps/example-gatsby/src/pages/index.js

@@ -11,7 +11,8 @@ export default function Home() {
       <h1>NextAuth.js Example</h1>
       <p>
         An example site to demonstrate how to use{" "}
-        <a href="https://authjs.dev">Auth.js</a> for authentication in Gatsby.
+        <a href="https://next-auth.js.org">NextAuth.js</a> for authentication in
+        Gatsby.
       </p>
       {
         {

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

apps/example-nextjs/pages/api/examples/protected.ts

@@ -1,5 +1,5 @@
 // This is an example of to protect an API route
-import { unstable_getServerSession } from "next-auth/next"
+import { getServerSession } from "next-auth/next"
 import { authOptions } from "../auth/[...nextauth]"
 
 import type { NextApiRequest, NextApiResponse } from "next"
@@ -8,7 +8,7 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const session = await unstable_getServerSession(req, res, authOptions)
+  const session = await getServerSession(req, res, authOptions)
 
   if (session) {
     return res.send({

apps/example-nextjs/pages/api/examples/session.ts

@@ -1,5 +1,5 @@
 // This is an example of how to access a session from an API route
-import { unstable_getServerSession } from "next-auth"
+import { getServerSession } from "next-auth"
 import { authOptions } from "../auth/[...nextauth]"
 
 import type { NextApiRequest, NextApiResponse } from "next"
@@ -8,6 +8,6 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const session = await unstable_getServerSession(req, res, authOptions)
+  const session = await getServerSession(req, res, authOptions)
   res.send(JSON.stringify(session, null, 2))
 }

apps/example-nextjs/pages/server.tsx

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

apps/example-sveltekit/.env.example

@@ -1,5 +0,0 @@
-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

@@ -1,13 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,13 +0,0 @@
-.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

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

apps/example-sveltekit/README.md

@@ -1,28 +0,0 @@
-> 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://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/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

@@ -1,22 +0,0 @@
-{
-  "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

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

apps/example-sveltekit/src/app.html

@@ -1,13 +0,0 @@
-<!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

@@ -1,7 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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

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

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

@@ -1,151 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,17 +0,0 @@
-{
-	"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

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

apps/playground-gatsby/README.md

@@ -1,109 +0,0 @@
-> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/playground-gatsby). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
-
-<p align="center">
-   <br/>
-   <a href="https://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/img/logo/logo-sm.png" /></a>
-   <h3 align="center">Auth.js Example App</h3>
-   <p align="center">
-   Open Source. Full Stack. Own Your Data.
-   </p>
-   <p align="center" style="align: center;">
-      <a href="https://npm.im/next-auth">
-        <img alt="npm" src="https://img.shields.io/npm/v/@auth/core?color=green&label=@auth/core&style=flat-square">
-      </a>
-      <a href="https://bundlephobia.com/result?p=@auth/core">
-        <img src="https://img.shields.io/bundlephobia/minzip/@auth/core?label=bundle&style=flat-square" alt="Bundle Size"/>
-      </a>
-      <a href="https://www.npmtrends.com/@auth/core">
-        <img src="https://img.shields.io/npm/dm/@auth/core?label=downloads&style=flat-square" alt="Downloads" />
-      </a>
-   </p>
-</p>
-
-## Overview
-
-Auth.js is a complete open source authentication solution.
-
-This is an example application that shows how `@auth/core` is applied to a basic Gatsby app. We are showing how to configure the backend both as a [Vercel Function](https://vercel.com/docs/concepts/functions/introduction) for deployment to Vercel, and also for [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions) for other platforms.
-
-The deployed version can be found at [`next-auth-gatsby-example.vercel.app`](https://next-auth-gatsby-example.vercel.app)
-
-### About Auth.js
-
-Auth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for [Next.js](https://nextjs.org) and [Serverless](https://vercel.com), but this example shows how to use it in a Gatsby project. Our goal is to [support even more frameworks](https://github.com/nextauthjs/next-auth/issues/2294) in the future.
-
-Go to [authjs.dev](https://authjs.dev) for more information and documentation.
-
-> Auth.js is not officially associated with Vercel or Next.js._
-
-## Getting Started
-
-### 1. Clone the repository and install dependencies
-
-```
-git clone https://github.com/nextauthjs/next-auth-gatsby-example.git
-cd next-auth-gatsby-example
-npm install
-```
-
-### 2. Configure your local environment
-
-Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):
-
-```
-cp .env.local.example .env.local
-```
-
-Add details for one or more providers (e.g. Google, Twitter, GitHub, Email, etc).
-
-#### Database
-
-A database is needed to persist user accounts and to support email sign in. However, you can still use Auth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, [JSON Web Tokens](https://jwt.io/introduction) will be enabled by default.
-
-You **can** skip configuring a database and come back to it later if you want.
-
-For more information about setting up a database, please check out the following links:
-
-- Docs: [authjs.dev/reference/adapters/overview](https://authjs.dev/reference/adapters/overview)
-
-### 3. Configure Authentication Providers
-
-1. Review and update options in `nextauth.config.js` as needed.
-
-2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of `{server}/api/auth/callback/{provider}`.
-
-e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
-
-A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at [authjs.dev/reference/providers/oauth-builtin](https://authjs.dev/reference/providers/oauth-builtin).
-
-3. You can also choose to specify an SMTP server for passwordless sign in via email.
-
-### 4. Start the application
-
-To run your site locally, use:
-
-```
-npm run dev
-```
-
-To run it in production mode, use:
-
-```
-npm run build
-npm run start
-```
-
-### 5. Preparing for Production
-
-Follow the [Deployment documentation](https://authjs.dev/guides/basics/deployment)
-
-## Acknowledgements
-
-<a href="https://vercel.com?utm_source=authjs&utm_campaign=oss">
-<img width="170px" src="https://powered-by-vercel.api.soraharu.com/powered-by-vercel.svg" alt="Powered By Vercel" />
-</a>
-<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire Auth.js Team</p>
-
-## License
-
-ISC

apps/playground-nuxt/.editorconfig

@@ -0,0 +1,12 @@
+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

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

apps/playground-nuxt/.eslintrc

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

apps/playground-nuxt/.eslintrc.cjs

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

apps/playground-nuxt/.gitignore

@@ -1,4 +1,52 @@
+# Dependencies
 node_modules
-.nuxt
+
+# Logs
+*.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
 dist
-output
+
+# 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

apps/playground-nuxt/.nuxtrc

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

apps/playground-nuxt/README.md

@@ -1,13 +1,21 @@
-> 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 + Nuxt 3 Playground
 
-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`.
+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
 
 ## Getting Started
 
-1. Setup your environment variables in `nuxt.config.ts`:
+### Add the module to the modules section of `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
@@ -15,36 +23,86 @@ 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'
   }
 })
 ```
 
-2. Set up Auth.js options
+### Add API route
 
-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:
+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.
 
 ```ts
-// server/api/auth/[...].ts
-
-import { NuxtAuthHandler } from '@/lib/auth/server'
-import GithubProvider from '@auth/core/providers/github'
-import type { AuthOptions } from '@auth/core'
+// ~/server/api/auth/[...].ts
+import { NextAuthNuxtHandler } from 'next-auth-nuxt/handler'
+import GithubProvider from 'next-auth/providers/github'
 
 const runtimeConfig = useRuntimeConfig()
 
-export const authOptions: AuthOptions = {
+export const authOptions = {
   secret: runtimeConfig.secret,
   providers: [
     GithubProvider({
       clientId: runtimeConfig.github.clientId,
       clientSecret: runtimeConfig.github.clientSecret
-    })
-  ]
+    }),
+  ],
 }
 
-export default NuxtAuthHandler(authOptions)
+export default NextAuthNuxtHandler(authOptions)
 ```
 
-All requests to `/api/auth/*` (`signIn`, `callback`, `signOut`, etc.) will automatically be handled by Auth.js.
+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.

apps/playground-nuxt/app.vue

@@ -1,30 +0,0 @@
-<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

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

apps/playground-nuxt/components/Header.vue

@@ -1,139 +0,0 @@
-<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

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

apps/playground-nuxt/handler.d.ts

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

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

@@ -1,107 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,42 +0,0 @@
-// 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/package.json

@@ -1,22 +1,49 @@
 {
-  "name": "playground-nuxt",
-  "private": true,
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "export NODE_OPTIONS='--no-experimental-fetch' && nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+  "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"
+    }
   },
-  "devDependencies": {
-    "@nuxt/eslint-config": "^0.1.1",
-    "eslint": "^8.29.0",
-    "h3": "1.0.2",
-    "nuxt": "3.0.0"
+  "files": [
+    "dist",
+    "handler.d.ts",
+    "client.d.ts"
+  ],
+  "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": {
-    "@auth/core": "workspace:*",
-    "@hattip/adapter-node": "^0.0.22",
-    "requrl": "^3.0.2"
+    "@nuxt/kit": "^3.0.0-rc.13",
+    "h3": "^0.8.6",
+    "next-auth": "^4.16.2",
+    "pathe": "^0.3.9"
+  },
+  "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:*"
   }
 }

apps/playground-nuxt/pages/index.vue

@@ -1,8 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,155 @@
+<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/nuxt.config.ts

@@ -1,4 +1,9 @@
+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,
@@ -7,11 +12,9 @@ export default defineNuxtConfig({
       clientSecret: process.env.GITHUB_CLIENT_SECRET
     }
   },
-  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),
-    }
+  // 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'
   }
 })

apps/playground-nuxt/playground/package.json

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

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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -1,19 +0,0 @@
-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
-  }
-})