chore(release): bump package version(s) [skip ci]

* Add Supabase adapter

* Add Supabase adapter

* Add schema setup to docs

* supabase config changes

* chore: update to supabase-js v2.

* chore: migrate to next_auth schema.

* feat: add supabase examples.

* chore: update docs.

* chore: add telemetry.

* fix: resolve issues after merge.

* chore: extend session type.

* typo

* chore: remove unnecessary grants.

* fix: schema constraints.

Co-authored-by: thorwebdev <thor@supabase.io>
Co-authored-by: Thor 雷神 Schaeff <5748289+thorwebdev@users.noreply.github.com>
Co-authored-by: Thang Vu <hi@thvu.dev>

.eslintrc.js

@@ -0,0 +1,40 @@
+const path = require("path")
+
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  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"),
+          path.resolve(__dirname, "./apps/**/tsconfig.json"),
+        ],
+      },
+    },
+  ],
+  extends: ["prettier"],
+  globals: {
+    localStorage: "readonly",
+    location: "readonly",
+    fetch: "readonly",
+  },
+  rules: {
+    camelcase: "off",
+  },
+  plugins: ["jest"],
+  env: {
+    "jest/globals": true,
+  },
+  ignorePatterns: [".eslintrc.js"],
+}

.github/ISSUE_TEMPLATE/1_bug_framework.yml

@@ -5,6 +5,7 @@ body:
   - type: markdown
     attributes:
       value: |
+        **NOTE:** Issues that are potentially security related should be reported to us by following the [Security guidelines](https://next-auth.js.org/security) rather than on GitHub.
         Thanks for taking the time to fill out this issue after reading/searching through the [documentation](https://next-auth.js.org) first!
         Is this your first time contributing? Check out this video: https://www.youtube.com/watch?v=cuoNzXFLitc
 

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -5,6 +5,7 @@ body:
   - type: markdown
     attributes:
       value: |
+        **NOTE:** Issues that are potentially security related should be reported to us by following the [Security guidelines](https://next-auth.js.org/security) rather than on GitHub.
         Thanks for taking the time to fill out this [Provider](https://next-auth.js.org/providers/overview) related issue!
         Is this your first time contributing? Check out this video: https://www.youtube.com/watch?v=cuoNzXFLitc
 
@@ -67,6 +68,7 @@ body:
         - "Slack"
         - "Spotify"
         - "Strava"
+        - "Todoist"
         - "Trakt"
         - "Twitch"
         - "Twitter"

.github/ISSUE_TEMPLATE/3_bug_adapter.yml

@@ -5,6 +5,7 @@ body:
   - type: markdown
     attributes:
       value: |
+        **NOTE:** Issues that are potentially security related should be reported to us by following the [Security guidelines](https://next-auth.js.org/security) rather than on GitHub.
         Thanks for taking the time to fill out this [Adapter](https://next-auth.js.org/adapters/overview) related issue!
         Is this your first time contributing? Check out this video: https://www.youtube.com/watch?v=cuoNzXFLitc
 
@@ -30,8 +31,10 @@ body:
         - "@next-auth/pouchdb-adapter"
         - "@next-auth/prisma-adapter"
         - "@next-auth/sequelize-adapter"
+        - "@next-auth/supabase-adapter"
         - "@next-auth/typeorm-legacy-adapter"
         - "@next-auth/upstash-redis-adapter"
+        - "@next-auth/xata-adapter"
     validations:
       required: true
   - type: textarea

.github/ISSUE_TEMPLATE/5_feature_request.yml

@@ -9,6 +9,7 @@ body:
   - type: markdown
     attributes:
       value: |
+        **NOTE:** Issues that are potentially security related should be reported to us by following the [Security guidelines](https://next-auth.js.org/security) rather than on GitHub.
         Thank you very much for reaching out to us regarding the awesome feature that you believe should be included in the NextAuth.js library.
 
         _NOTE: Feature requests are converted to [discussions (Ideas 💡)](https://github.com/nextauthjs/next-auth/discussions/categories/ideas). Make sure your idea hasn't been asked yet, and upvote the existing one before opening a new instead._

.github/ISSUE_TEMPLATE/6_typescript.yml

@@ -17,6 +17,7 @@ body:
   - type: markdown
     attributes:
       value: |
+        **NOTE:** Issues that are potentially security related should be reported to us by following the [Security guidelines](https://next-auth.js.org/security) rather than on GitHub.
         Make sure you [link]() to external documentation if necessary and provide inline code examples like so:
 
         ```js

.github/ISSUE_TEMPLATE/7_question.yml

@@ -9,6 +9,7 @@ body:
   - type: markdown
     attributes:
       value: |
+        **NOTE:** Issues that are potentially security related should be reported to us by following the [Security guidelines](https://next-auth.js.org/security) rather than on GitHub.
         We are glad that you have a question about this library. Please provide the following information:
 
   - type: textarea

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,9 +5,14 @@ Please fill out the information below to expedite the review and (hopefully)
 merge of your pull request!
 -->
 
+> _NOTE_:
+>
+> - It's a good idea to open an issue first to discuss potential changes.
+> - Please make sure that you are _NOT_ opening a PR to fix a potential security vulnerability. Instead, please follow the [Security guidelines](../Security.md) to disclose the issue to us confidentially.
+
 ## ☕️ Reasoning
 
-What changes are being made? What feature/bug is being fixed here?
+<!-- What changes are being made? What feature/bug is being fixed here? -->
 
 ## 🧢 Checklist
 
@@ -23,6 +28,7 @@ Fixes: INSERT_ISSUE_LINK_HERE
 
 ## 📌 Resources
 
-- [Contributing guidelines](./CONTRIBUTING.md)
-- [Code of conduct](./CODE_OF_CONDUCT.md)
+- [Security guidelines](../Security.md)
+- [Contributing guidelines](../CONTRIBUTING.md)
+- [Code of conduct](../CODE_OF_CONDUCT.md)
 - [Contributing to Open Source](https://kcd.im/pull-request)

.github/issue-labeler.yml

@@ -30,8 +30,14 @@ prisma:
 sequelize:
   - "@next-auth/sequelize-adapter"
 
+supabase:
+  - "@next-auth/supabase-adapter"
+
 typeorm-legacy:
   - "@next-auth/typeorm-legacy-adapter"
 
 upstash-redis:
   - "@next-auth/upstash-redis-adapter"
+
+xata:
+  - "@next-auth/xata-adapter"

.github/pr-labeler.yml

@@ -42,12 +42,18 @@ prisma:
 sequelize:
   - packages/adapter-sequelize/**
 
+supabase:
+  - packages/adapter-supabase/**
+
 typeorm-legacy:
   - packages/adapter-typeorm-legacy/**
 
 upstash-redis:
   - packages/adapter-upstash-redis/**
 
+xata:
+  - packages/adapter-xata/**
+
 core:
   - packages/next-auth/src/**/*
 

.github/workflows/codeql-analysis.yml

@@ -2,7 +2,7 @@ name: Code Analysis
 
 on:
   push:
-    branches: [main, beta, next]
+    branches: [beta, next]
   pull_request:
     branches: [main]
   schedule:

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
@@ -59,7 +59,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
@@ -89,7 +89,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install

.gitignore

@@ -35,6 +35,7 @@ packages/next-auth/core
 packages/next-auth/jwt
 packages/next-auth/react
 packages/next-auth/adapters.d.ts
+packages/next-auth/adapters.js
 packages/next-auth/index.d.ts
 packages/next-auth/index.js
 packages/next-auth/next
@@ -64,6 +65,7 @@ dev.db*
 packages/adapter-prisma/prisma/dev.db
 packages/adapter-prisma/prisma/migrations
 db.sqlite
+packages/adapter-supabase/supabase/.branches
 
 # Tests
 coverage

.nvmrc

@@ -1 +1 @@
-16
+18

CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting me@iaincollins.com or info@balazsorban.com and yo@ndo.dev.
+reported by contacting hi@thvu.dev, info@balazsorban.com, yo@ndo.dev and me@iaincollins.com.
 All complaints will be reviewed and investigated and will result in a response
 that is deemed necessary and appropriate to the circumstances. The project team
 is obligated to maintain confidentiality with regard to the reporter of an

CONTRIBUTING.md

@@ -12,6 +12,8 @@ Please raise any significant new functionality or breaking change an issue for d
 
 Anyone can be a contributor. Either you found a typo, or you have an awesome feature request you could implement, we encourage you to create a Pull Request.
 
+Before contributing, we recommend you read the [Tour de Source: NextAuth.js](https://sourcegraph.com/notebooks/Tm90ZWJvb2s6MTc2MQ==) post to become more familiar with the libraries inner workings.
+
 ### Pull Requests
 
 - The latest changes are always in `main`, so please make your Pull Request against that branch.
@@ -26,7 +28,6 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea
 
 A quick guide on how to setup _next-auth_ locally to work on it and test out any changes:
 
-
 1. Clone the repo:
 
 ```sh
@@ -34,13 +35,21 @@ git clone git@github.com:nextauthjs/next-auth.git
 cd next-auth
 ```
 
-1. Install packages. Developing requires Node.js v16:
+2. Set up the correct pnpm version, using [Corepack](https://nodejs.org/api/corepack.html). Run the following in the project'a root:
+
+```sh
+corepack enable pnpm
+```
+
+(Now, if you run `pnpm --version`, it should print the same verion as the `packageManager` property in the [`package.json` file](https://github.com/nextauthjs/next-auth/blob/main/package.json))
+
+3. Install packages. Developing requires Node.js v18:
 
 ```sh
 pnpm install
 ```
 
-3. Populate `.env.local`:
+4. Populate `.env.local`:
 
 Copy `apps/dev/.env.local.example` to `apps/dev/.env.local`, and add your env variables for each provider you want to test.
 
@@ -52,11 +61,12 @@ cp .env.local.example .env.local
 > NOTE: You can add any environment variables to .env.local that you would like to use in your dev app.
 > You can find the next-auth config under`apps/dev/pages/api/auth/[...nextauth].js`.
 
-4. Start the developer application/server:
+5. Start the developer application/server:
 
 ```sh
 pnpm dev
 ```
+
 Your developer application will be available on `http://localhost:3000`
 
 That's it! 🎉
@@ -108,4 +118,4 @@ When accepting Pull Requests, make sure the following:
 
 ### Skipping a release
 
-If a commit contains `[skip release]` in their message, it will be excluded from the commit analysis and won't participate in the release type determination. This is useful, if the PR being merged should not trigger a new `npm` release.
+If a commit contains `[skip release]` in their message, it will be excluded from the commit analysis and won't participate in the release type determination. This is useful, if the PR being merged should not trigger a new `npm` release.

SECURITY.md

@@ -13,9 +13,9 @@ If you contact us regarding a serious issue:
 - We will disclose the issue (and credit you, with your consent) once a fix to resolve the issue has been released.
 - If 90 days has elapsed and we still don't have a fix, we will disclose the issue publicly.
 
-The best way to report an issue is by contacting us via email at info@balazsorban.com or me@iaincollins.com and yo@ndo.dev, or raise a public issue requesting someone get in touch with you via whatever means you prefer for more details. (Please do not disclose sensitive details publicly at this stage.)
+The best way to report an issue is by contacting us via email at hi@thvu.dev, info@balazsorban.com, yo@ndo.dev and me@iaincollins.com, or raise a public issue requesting someone get in touch with you via whatever means you prefer for more details. (Please do not disclose sensitive details publicly at this stage.)
 
-> For less serious issues (e.g. RFC compliance for unsupported flows or potential issues that may cause a problem in the future) it is appropriate to submit these these publically as bug reports or feature requests or to raise a question to open a discussion around them.
+> For less serious issues (e.g. RFC compliance for unsupported flows or potential issues that may cause a problem in the future) it is appropriate to submit these publicly as bug reports or feature requests or to raise a question to open a discussion around them.
 
 ## Supported Versions
 

apps/dev/.env.local.example

@@ -48,4 +48,11 @@ EMAIL_FROM=user@gmail.com
 DATABASE_URL=
 
 WIKIMEDIA_ID=
-WIKIMEDIA_SECRET=
+WIKIMEDIA_SECRET=
+
+# Supabase Example Configuration
+# Supabase Example Configuration
+# NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+# SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSJ9.vI9obAHOGyVVKa3pD--kJlyxp-Z2zV9UUMAhKpNLAcU
+# SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
+# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs

apps/dev/app/layout.tsx

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

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

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

apps/dev/components/footer.js

@@ -17,9 +17,7 @@ export default function Footer() {
           <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>
         </li>
         <li className={styles.navItem}>
-          <Link href="/policy">
-            <a>Policy</a>
-          </Link>
+          <Link href="/policy">Policy</Link>
         </li>
         <li className={styles.navItem}>
           <em>{packageJSON.version}</em>

apps/dev/components/header.js

@@ -64,49 +64,37 @@ export default function Header() {
       <nav>
         <ul className={styles.navItems}>
           <li className={styles.navItem}>
-            <Link href="/">
-              <a>Home</a>
-            </Link>
+            <Link href="/">Home</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/client">
-              <a>Client</a>
-            </Link>
+            <Link href="/client">Client</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/server">
-              <a>Server</a>
-            </Link>
+            <Link href="/server">Server</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/protected">
-              <a>Protected</a>
-            </Link>
+            <Link href="/protected">Protected</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/protected-ssr">
-              <a>Protected(SSR)</a>
-            </Link>
+            <Link href="/protected-ssr">Protected(SSR)</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/api-example">
-              <a>API</a>
-            </Link>
+            <Link href="/api-example">API</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/credentials">
-              <a>Credentials</a>
-            </Link>
+            <Link href="/credentials">Credentials</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/email">
-              <a>Email</a>
-            </Link>
+            <Link href="/email">Email</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/middleware-protected">
-              <a>Middleware protected</a>
-            </Link>
+            <Link href="/middleware-protected">Middleware protected</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/supabase-client-rls">Supabase RLS</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/supabase-ssr">Supabase RLS(SSR)</Link>
           </li>
         </ul>
       </nav>

apps/dev/next.config.js

@@ -4,6 +4,6 @@ module.exports = {
     config.experiments = { ...config.experiments, topLevelAwait: true }
     return config
   },
+  experimental: { appDir: true },
   typescript: { ignoreBuildErrors: true },
-  experimental: { externalDir: true },
 }

apps/dev/package.json

@@ -5,10 +5,8 @@
   "private": true,
   "scripts": {
     "clean": "rm -rf .next",
-    "copy:css": "cpx \"../../packages/next-auth/css/**/*\" src/css --watch",
-    "watch:css": "cd ../../packages/next-auth && pnpm watch:css",
-    "dev": "concurrently \"pnpm dev:next\" \"pnpm watch:css\" \"pnpm copy:css\"",
-    "dev:next": "next dev",
+    "dev": "next dev",
+    "lint": "next lint",
     "build": "next build",
     "start": "next start",
     "email": "fake-smtp-server",
@@ -18,19 +16,22 @@
   "dependencies": {
     "@next-auth/fauna-adapter": "workspace:*",
     "@next-auth/prisma-adapter": "workspace:*",
+    "@next-auth/supabase-adapter": "workspace:*",
     "@next-auth/typeorm-legacy-adapter": "workspace:*",
     "@prisma/client": "^3",
+    "@supabase/supabase-js": "^2.0.5",
     "faunadb": "^4",
-    "next": "12.2.0",
+    "jsonwebtoken": "^8.5.1",
+    "next": "13.0.2",
+    "next-auth": "workspace:*",
     "nodemailer": "^6",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/jsonwebtoken": "^8.5.5",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "concurrently": "^7",
-    "cpx": "^1.5.0",
     "fake-smtp-server": "^0.8.0",
     "pg": "^8.7.3",
     "prisma": "^3",

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

@@ -1,5 +1,6 @@
 import NextAuth from "next-auth"
 import type { NextAuthOptions } from "next-auth"
+import jwt from "jsonwebtoken"
 
 // Providers
 import Apple from "next-auth/providers/apple"
@@ -42,6 +43,7 @@ import { PrismaAdapter } from "@next-auth/prisma-adapter"
 import { Client as FaunaClient } from "faunadb"
 import { FaunaAdapter } from "@next-auth/fauna-adapter"
 import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
+import { SupabaseAdapter } from "@next-auth/supabase-adapter"
 
 // Add an adapter you want to test here.
 const adapters = {
@@ -68,6 +70,12 @@ const adapters = {
     if (process.env.NODE_ENV !== "production") global.fauna = client
     return FaunaAdapter(client)
   },
+  supabase() {
+    return SupabaseAdapter({
+      url: process.env.NEXT_PUBLIC_SUPABASE_URL,
+      secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
+    })
+  },
   noop() {
     return undefined
   },
@@ -75,7 +83,24 @@ const adapters = {
 
 export const authOptions: NextAuthOptions = {
   adapter: adapters.noop(),
-  debug: true,
+  callbacks: {
+    async session({ session, user }) {
+      // NOTE: this is needed when using Supabase with RLS. Otherwise this callback can be removed.
+      const signingSecret = process.env.SUPABASE_JWT_SECRET
+      if (signingSecret) {
+        const payload = {
+          aud: "authenticated",
+          exp: Math.floor(new Date(session.expires).getTime() / 1000),
+          sub: user.id,
+          email: user.email,
+          role: "authenticated",
+        }
+        session.supabaseAccessToken = jwt.sign(payload, signingSecret)
+      }
+      return session
+    },
+  },
+  debug: process.env.NODE_ENV !== "production",
   theme: {
     logo: "https://next-auth.js.org/img/logo/logo-sm.png",
     brandColor: "#1786fb",

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

@@ -1,13 +1,15 @@
 // This is an example of to protect an API route
 import { unstable_getServerSession } from "next-auth/next"
+import { authOptions } from "../auth/[...nextauth]"
 
 export default async (req, res) => {
-  const session = await unstable_getServerSession(req, res, options)
+  const session = await unstable_getServerSession(req, res, authOptions)
 
   if (session) {
     res.send({
       content:
         "This is protected content. You can access this content because you are signed in.",
+      session,
     })
   } else {
     res.send({

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

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

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

@@ -0,0 +1,30 @@
+// 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 { authOptions } from "../auth/[...nextauth]"
+import { createClient } from "@supabase/supabase-js"
+
+export default async (req, res) => {
+  const session = await unstable_getServerSession(req, res, authOptions)
+
+  if (!session)
+    return res.send(JSON.stringify({ error: "No session!" }, null, 2))
+
+  const { supabaseAccessToken } = session
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    {
+      global: {
+        headers: {
+          Authorization: `Bearer ${supabaseAccessToken}`,
+        },
+      },
+    }
+  )
+  // Now you can query with RLS enabled.
+  const { data, error } = await supabase.from("users").select("*")
+
+  res.send(JSON.stringify({ supabaseAccessToken, data, error }, null, 2))
+}

apps/dev/pages/server.js

@@ -1,5 +1,6 @@
 import { unstable_getServerSession } from "next-auth/next"
 import Layout from "../components/layout"
+import { authOptions } from './api/auth/[...nextauth]';
 
 export default function Page() {
   // As this page uses Server Side Rendering, the `session` will be already
@@ -40,8 +41,8 @@ export async function getServerSideProps(context) {
   return {
     props: {
       session: await unstable_getServerSession(
-        contex.req,
-        contex.res,
+        context.req,
+        context.res,
         authOptions
       ),
     },

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

@@ -0,0 +1,49 @@
+import Layout from "../components/layout"
+import { useState, useEffect } from "react"
+import { useSession } from "next-auth/react"
+import { createClient } from "@supabase/supabase-js"
+
+export default function Page() {
+  const { data: session } = useSession()
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    if (session) {
+      console.log(session)
+      // User is logged in, let's fetch their data.
+      const { supabaseAccessToken } = session
+      const supabase = createClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+        {
+          global: {
+            headers: { Authorization: `Bearer ${supabaseAccessToken}` },
+          },
+        }
+      )
+      // Fetch data with RLS enabled.
+      supabase
+        .from("users")
+        .select("*")
+        .then(({ data }) => setData(data))
+    }
+  }, [session])
+
+  return (
+    <Layout>
+      <h1>Fetch Data from Supabase with RLS</h1>
+      <h2>Client-side data fetching with RLS:</h2>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <h2>API Example</h2>
+      <p>
+        You can also use Supabase in API routes. See the code in the
+        `/pages/api/examples/supabase-rls.js` file.
+      </p>
+      <p>
+        <em>You must be signed in to see responses.</em>
+      </p>
+      <p>/api/examples/supabase-rls</p>
+      <iframe src="/api/examples/supabase-rls" />
+    </Layout>
+  )
+}

apps/dev/pages/supabase-ssr.js

@@ -0,0 +1,68 @@
+// 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 { authOptions } from "./api/auth/[...nextauth]"
+import { createClient } from "@supabase/supabase-js"
+import Layout from "../components/layout"
+import AccessDenied from "../components/access-denied"
+
+export default function Page({ data, session }) {
+  // If no session exists, display access denied message
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p>Data fetched during SSR from Supabase with RSL enabled:</p>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </Layout>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const session = await unstable_getServerSession(
+    context.req,
+    context.res,
+    authOptions
+  )
+
+  if (!session)
+    return {
+      props: {
+        session,
+        data: null,
+        error: "No session",
+      },
+    }
+
+  const { supabaseAccessToken } = session
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    {
+      global: {
+        headers: {
+          Authorization: `Bearer ${supabaseAccessToken}`,
+        },
+      },
+    }
+  )
+  // Now you can query with RLS enabled.
+  const { data, error } = await supabase.from("users").select("*")
+
+  return {
+    props: {
+      session,
+      data,
+      error,
+    },
+  }
+}

apps/dev/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -15,11 +19,20 @@
     "incremental": true,
     "jsx": "preserve",
     "baseUrl": ".",
-    "paths": {
-      "next-auth": ["../../packages/next-auth/src"],
-      "next-auth/*": ["../../packages/next-auth/src/*"]
-    }
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "jest.config.js"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "jest.config.js"
+  ]
 }

apps/dev/types/nextauth.d.ts

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

apps/example-nextjs/.gitignore

@@ -1,110 +1,20 @@
-# Logs
+.DS_Store
+
+node_modules/
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
+.yarn-integrity
 .npm
 
-# Optional eslint cache
 .eslintcache
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+*.tsbuildinfo
+next-env.d.ts
 
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
 .next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
 .vercel
-.now
-.env.local
-
-.DS_Store
+.env*.local

apps/example-nextjs/components/footer.tsx

@@ -17,9 +17,7 @@ export default function Footer() {
           <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>
         </li>
         <li className={styles.navItem}>
-          <Link href="/policy">
-            <a>Policy</a>
-          </Link>
+          <Link href="/policy">Policy</Link>
         </li>
         <li className={styles.navItem}>
           <em>next-auth@{packageJSON.dependencies["next-auth"]}</em>

apps/example-nextjs/components/header.tsx

@@ -67,39 +67,25 @@ export default function Header() {
       <nav>
         <ul className={styles.navItems}>
           <li className={styles.navItem}>
-            <Link href="/">
-              <a>Home</a>
-            </Link>
+            <Link href="/">Home</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/client">
-              <a>Client</a>
-            </Link>
+            <Link href="/client">Client</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/server">
-              <a>Server</a>
-            </Link>
+            <Link href="/server">Server</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/protected">
-              <a>Protected</a>
-            </Link>
+            <Link href="/protected">Protected</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/api-example">
-              <a>API</a>
-            </Link>
+            <Link href="/api-example">API</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/admin">
-              <a>Admin</a>
-            </Link>
+            <Link href="/admin">Admin</Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/me">
-              <a>Me</a>
-            </Link>
+            <Link href="/me">Me</Link>
           </li>
         </ul>
       </nav>

apps/example-nextjs/components/layout.tsx

@@ -1,12 +1,8 @@
 import Header from "./header"
 import Footer from "./footer"
-import type { ReactChildren } from "react"
+import type { ReactNode } from "react"
 
-interface Props {
-  children: React.ReactNode
-}
-
-export default function Layout({ children }: Props) {
+export default function Layout({ children }: { children: ReactNode }) {
   return (
     <>
       <Header />

apps/example-nextjs/pages/_app.tsx

@@ -2,12 +2,16 @@ import { SessionProvider } from "next-auth/react"
 import "./styles.css"
 
 import type { AppProps } from "next/app"
+import type { Session } from "next-auth"
 
 // Use of the <SessionProvider> is mandatory to allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({
+  Component,
+  pageProps: { session, ...pageProps },
+}: AppProps<{ session: Session }>) {
   return (
-    <SessionProvider session={pageProps.session} refetchInterval={0}>
+    <SessionProvider session={session}>
       <Component {...pageProps} />
     </SessionProvider>
   )

apps/example-nextjs/pages/protected.tsx

@@ -4,8 +4,7 @@ import Layout from "../components/layout"
 import AccessDenied from "../components/access-denied"
 
 export default function ProtectedPage() {
-  const { data: session, status } = useSession()
-  const loading = status === "loading"
+  const { data: session } = useSession()
   const [content, setContent] = useState()
 
   // Fetch content from protected route
@@ -19,9 +18,7 @@ export default function ProtectedPage() {
     }
     fetchData()
   }, [session])
-
-  // When rendering client side don't display anything until loading is complete
-  if (typeof window !== "undefined" && loading) return null
+ 
 
   // If no session exists, display access denied message
   if (!session) {

apps/example-nextjs/pages/server.tsx

@@ -13,13 +13,12 @@ export default function ServerSidePage({ session }: { session: Session }) {
       <h1>Server Side Rendering</h1>
       <p>
         This page uses the <strong>unstable_getServerSession()</strong> method
-        in <strong>unstable_getServerSideProps()</strong>.
+        in <strong>getServerSideProps()</strong>.
       </p>
       <p>
         Using <strong>unstable_getServerSession()</strong> in{" "}
-        <strong>unstable_getServerSideProps()</strong> is the recommended
-        approach if you need to support Server Side Rendering with
-        authentication.
+        <strong>getServerSideProps()</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

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/.gitignore

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

apps/playground-nuxt/.nuxtrc

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

apps/playground-nuxt/README.md

@@ -0,0 +1,108 @@
+# NextAuth + Nuxt 3 Playground
+
+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
+
+### 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
+    github: {
+      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
+
+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 { NextAuthNuxtHandler } from 'next-auth-nuxt/handler'
+import GithubProvider from 'next-auth/providers/github'
+
+const runtimeConfig = useRuntimeConfig()
+
+export const authOptions = {
+  secret: runtimeConfig.secret,
+  providers: [
+    GithubProvider({
+      clientId: runtimeConfig.github.clientId,
+      clientSecret: runtimeConfig.github.clientSecret
+    }),
+  ],
+}
+
+export default NextAuthNuxtHandler(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.

apps/playground-nuxt/client.d.ts

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

apps/playground-nuxt/handler.d.ts

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

apps/playground-nuxt/package.json

@@ -0,0 +1,49 @@
+{
+  "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"
+  ],
+  "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"
+  },
+  "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/playground/.env.example

@@ -0,0 +1,4 @@
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+NEXTAUTH_URL=
+NEXTAUTH_SECRET=

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

@@ -0,0 +1,20 @@
+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,
+    github: {
+      clientId: process.env.GITHUB_CLIENT_ID,
+      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'
+  }
+})

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/pnpm-workspace.yaml

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

apps/playground-nuxt/src/module.ts

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

@@ -0,0 +1,369 @@
+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/lib/errors.ts

@@ -0,0 +1,115 @@
+import type { Adapter } from 'next-auth/adapters'
+import type { EventCallbacks, LoggerInstance } from 'next-auth'
+
+/**
+ * Same as the default `Error`, but it is JSON serializable.
+ * @source https://iaincollins.medium.com/error-handling-in-javascript-a6172ccdf9af
+ */
+export class UnknownError extends Error {
+  code: string
+  constructor (error: Error | string) {
+    super((error as Error)?.message ?? error)
+    this.name = 'UnknownError'
+    this.code = (error as any).code
+    if (error instanceof Error) { this.stack = error.stack }
+  }
+
+  toJSON () {
+    return {
+      name: this.name,
+      message: this.message,
+      stack: this.stack
+    }
+  }
+}
+
+export class OAuthCallbackError extends UnknownError {
+  name = 'OAuthCallbackError'
+}
+
+/**
+ * Thrown when an Email address is already associated with an account
+ * but the user is trying an OAuth account that is not linked to it.
+ */
+export class AccountNotLinkedError extends UnknownError {
+  name = 'AccountNotLinkedError'
+}
+
+export class MissingAPIRoute extends UnknownError {
+  name = 'MissingAPIRouteError'
+  code = 'MISSING_NEXTAUTH_API_ROUTE_ERROR'
+}
+
+export class MissingSecret extends UnknownError {
+  name = 'MissingSecretError'
+  code = 'NO_SECRET'
+}
+
+export class MissingAuthorize extends UnknownError {
+  name = 'MissingAuthorizeError'
+  code = 'CALLBACK_CREDENTIALS_HANDLER_ERROR'
+}
+
+export class MissingAdapter extends UnknownError {
+  name = 'MissingAdapterError'
+  code = 'EMAIL_REQUIRES_ADAPTER_ERROR'
+}
+
+export class UnsupportedStrategy extends UnknownError {
+  name = 'UnsupportedStrategyError'
+  code = 'CALLBACK_CREDENTIALS_JWT_ERROR'
+}
+
+type Method = (...args: any[]) => Promise<any>
+
+export function upperSnake (s: string) {
+  return s.replace(/([A-Z])/g, '_$1').toUpperCase()
+}
+
+export function capitalize (s: string) {
+  return `${s[0].toUpperCase()}${s.slice(1)}`
+}
+
+/**
+ * Wraps an object of methods and adds error handling.
+ */
+export function eventsErrorHandler (
+  methods: Partial<EventCallbacks>,
+  logger: LoggerInstance
+): Partial<EventCallbacks> {
+  return Object.keys(methods).reduce<any>((acc, name) => {
+    acc[name] = async (...args: any[]) => {
+      try {
+        const method: Method = methods[name as keyof Method]
+        return await method(...args)
+      } catch (e) {
+        logger.error(`${upperSnake(name)}_EVENT_ERROR`, e as Error)
+      }
+    }
+    return acc
+  }, {})
+}
+
+/** Handles adapter induced errors. */
+export function adapterErrorHandler (
+  adapter: Adapter | undefined,
+  logger: LoggerInstance
+): Adapter | undefined {
+  if (!adapter) { return }
+
+  return Object.keys(adapter).reduce<any>((acc, name) => {
+    acc[name] = async (...args: any[]) => {
+      try {
+        logger.debug(`adapter_${name}`, { args })
+        const method: Method = adapter[name as keyof Method]
+        return await method(...args)
+      } catch (error) {
+        logger.error(`adapter_error_${name}`, error as Error)
+        const e = new UnknownError(error as Error)
+        e.name = `${capitalize(name)}Error`
+        throw e
+      }
+    }
+    return acc
+  }, {})
+}

apps/playground-nuxt/src/runtime/lib/logger.ts

@@ -0,0 +1,113 @@
+import { UnknownError } from './errors'
+
+// TODO: better typing
+/** Makes sure that error is always serializable */
+function formatError (o: unknown): unknown {
+  if (o instanceof Error && !(o instanceof UnknownError)) { return { message: o.message, stack: o.stack, name: o.name } }
+
+  if (hasErrorProperty(o)) {
+    o.error = formatError(o.error) as Error
+    o.message = o.message ?? o.error.message
+  }
+  return o
+}
+
+function hasErrorProperty (
+  x: unknown
+): x is { error: Error; [key: string]: unknown } {
+  return !!(x as any)?.error
+}
+
+export type WarningCode =
+  | 'NEXTAUTH_URL'
+  | 'NO_SECRET'
+  | 'TWITTER_OAUTH_2_BETA'
+  | 'DEBUG_ENABLED'
+
+/**
+ * Override any of the methods, and the rest will use the default logger.
+ *
+ * [Documentation](https://next-auth.js.org/configuration/options#logger)
+ */
+export interface LoggerInstance extends Record<string, Function> {
+  warn: (code: WarningCode) => void
+  error: (
+    code: string,
+    /**
+     * Either an instance of (JSON serializable) Error
+     * or an object that contains some debug information.
+     * (Error is still available through `metadata.error`)
+     */
+    metadata: Error | { error: Error; [key: string]: unknown }
+  ) => void
+  debug: (code: string, metadata: unknown) => void
+}
+
+const _logger: LoggerInstance = {
+  error (code, metadata) {
+    metadata = formatError(metadata) as Error
+    console.error(
+      `[next-auth][error][${code}]`,
+      `\nhttps://next-auth.js.org/errors#${code.toLowerCase()}`,
+      metadata.message,
+      metadata
+    )
+  },
+  warn (code) {
+    console.warn(
+      `[next-auth][warn][${code}]`,
+      `\nhttps://next-auth.js.org/warnings#${code.toLowerCase()}`
+    )
+  },
+  debug (code, metadata) {
+    // eslint-disable-next-line no-console
+    console.log(`[next-auth][debug][${code}]`, metadata)
+  }
+}
+
+/**
+ * Override the built-in logger with user's implementation.
+ * Any `undefined` level will use the default logger.
+ */
+export function setLogger (
+  newLogger: Partial<LoggerInstance> = {},
+  debug?: boolean
+) {
+  // Turn off debug logging if `debug` isn't set to `true`
+  if (!debug) { _logger.debug = () => {} }
+
+  if (newLogger.error) { _logger.error = newLogger.error }
+  if (newLogger.warn) { _logger.warn = newLogger.warn }
+  if (newLogger.debug) { _logger.debug = newLogger.debug }
+}
+
+export default _logger
+
+/** Serializes client-side log messages and sends them to the server */
+export function proxyLogger (
+  logger: LoggerInstance = _logger,
+  basePath?: string
+): LoggerInstance {
+  try {
+    if (typeof window === 'undefined') { return logger }
+
+    const clientLogger: Record<string, unknown> = {}
+    for (const level in logger) {
+      clientLogger[level] = (code: string, metadata: Error) => {
+        _logger[level](code, metadata) // Logs to console
+
+        if (level === 'error') {
+          metadata = formatError(metadata) as Error
+        }(metadata as any).client = true
+        const url = `${basePath}/_log`
+        const body = new URLSearchParams({ level, code, ...(metadata as any) })
+        if (navigator.sendBeacon) { return navigator.sendBeacon(url, body) }
+
+        return fetch(url, { method: 'POST', body, keepalive: true })
+      }
+    }
+    return clientLogger as unknown as LoggerInstance
+  } catch {
+    return _logger
+  }
+}

apps/playground-nuxt/src/runtime/lib/parse-url.ts

@@ -0,0 +1,34 @@
+export interface InternalUrl {
+  /** @default "http://localhost:3000" */
+  origin: string
+  /** @default "localhost:3000" */
+  host: string
+  /** @default "/api/auth" */
+  path: string
+  /** @default "http://localhost:3000/api/auth" */
+  base: string
+  /** @default "http://localhost:3000/api/auth" */
+  toString: () => string
+}
+
+/** Returns an `URL` like object to make requests/redirects from server-side */
+export default function parseUrl (url?: string): InternalUrl {
+  const defaultUrl = new URL('http://localhost:3000/api/auth')
+
+  if (url && !url.startsWith('http')) { url = `https://${url}` }
+
+  const _url = new URL(url ?? defaultUrl)
+  const path = (_url.pathname === '/' ? defaultUrl.pathname : _url.pathname)
+    // Remove trailing slash
+    .replace(/\/$/, '')
+
+  const base = `${_url.origin}${path}`
+
+  return {
+    origin: _url.origin,
+    host: _url.host,
+    path,
+    base,
+    toString: () => base
+  }
+}

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

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

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

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

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

apps/playground-sveltekit/.env.example

@@ -1,4 +1,4 @@
-VITE_GITHUB_CLIENT_ID=
-VITE_GITHUB_CLIENT_SECRET=
-VITE_NEXTAUTH_URL=
-VITE_NEXTAUTH_SECRET=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+NEXTAUTH_SECRET=
+PUBLIC_NEXTAUTH_URL=http://localhost:5173

apps/playground-sveltekit/.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     "prettier",
   ],
   plugins: ["svelte3", "@typescript-eslint"],
-  ignorePatterns: ["*.cjs"],
+  ignorePatterns: ["*.cjs", "build/**/*"],
   overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
   settings: {
     "svelte3/typescript": () => require("typescript"),

apps/playground-sveltekit/README.md

@@ -4,84 +4,71 @@ NextAuth.js is committed to bringing easy authentication to other frameworks. ht
 
 SvelteKit 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/sveltekit`
 
+## Running this Demo
+
+- Copy `.env.example` to `.env`
+- In `.env`, set `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET`
+  - See [https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app))
+  - When creating the OAuth app, set "Homepage URL" to `http://localhost:5173` and Authorization callack URL to `http://localhost:5173/api/auth/callback/github`
+- In `.env`, set `NEXTAUTH_SECRET` to any random string
+- Build and run the application: `yarn build && yarn start`
+
 ## Existing Project
 
-### Add API route
+### Add API Route
 
-To add NextAuth.js to a project create a file called `[...nextauth].js` in routes/api/auth. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
+To add NextAuth.js to a project create a file called `[...nextauth]/+server.js` in routes/api/auth. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
 
 ```ts
-import NextAuth from "$lib"
-import GithubProvider from "next-auth/providers/github"
+import { NextAuth, options } from "$lib/next-auth"
 
-const nextAuthOptions = {
-  // Configure one or more authentication providers
-  providers: [
-    GithubProvider({
-      clientId: import.meta.env.VITE_GITHUB_CLIENT_ID,
-      clientSecret: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
-    }),
-    // ...add more providers here
-  ],
-}
-
-export const { get, post } = NextAuth(nextAuthOptions)
+export const { GET, POST } = NextAuth(options)
 ```
 
 ### Add [hook](https://kit.svelte.dev/docs/hooks)
 
 ```ts
-import { getServerSession } from "$lib"
-import GithubProvider from "next-auth/providers/github"
+import type { Handle } from "@sveltejs/kit"
+import { getServerSession, options as nextAuthOptions } from "$lib/next-auth"
 
-const nextAuthOptions = {
-  providers: [
-    GithubProvider({
-      clientId: import.meta.env.VITE_GITHUB_CLIENT_ID,
-      clientSecret: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
-    }),
-  ],
-}
-
-export async function handle({ event, resolve }) {
+export const handle: Handle = async function handle({
+  event,
+  resolve,
+}): Promise<Response> {
   const session = await getServerSession(event.request, nextAuthOptions)
   event.locals.session = session
 
   return resolve(event)
 }
+```
 
-export function getSession(event) {
-  return event.locals.session || {}
+### Load Session from Primary Layout
+
+```ts
+// src/lib/routes/+layout.server.ts
+import type { LayoutServerLoad } from "./$types"
+
+export const load: LayoutServerLoad = ({ locals }) => {
+  return {
+    session: locals.session,
+  }
 }
 ```
 
-### Protecting a route
+### Protecting a Route
 
-```html
-<script context="module">
-  export async function load({ session }) {
-    const { user } = session
+```ts
+// src/lib/routes/protected/+page.ts
+import { redirect } from "@sveltejs/kit"
+import type { PageLoad } from "./$types"
 
-    if (!user) {
-      return {
-        status: 302,
-        redirect: "/",
-      }
-    }
-
-    return {
-      props: {
-        session,
-      },
-    }
+export const load: PageLoad = async ({ parent }) => {
+  const { session } = await parent()
+  if (!session?.user) {
+    throw redirect(302, "/")
   }
-</script>
-
-<script>
-  export let session
-</script>
-
-<p>Session expiry: {session.expires}</p>
+  return {}
+}
 ```
 
 ## Packaging lib

apps/playground-sveltekit/package.json

@@ -1,36 +1,40 @@
 {
   "name": "sveltekit-nextauth",
+  "private": true,
   "version": "0.0.1",
   "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "HOST=127.0.0.1 PORT=5173 ORIGIN=http://localhost:5173 node ./build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@types/cookie": "^0.4.1",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.0",
+    "@sveltejs/adapter-auto": "^1.0.0-next.80",
+    "@sveltejs/adapter-node": "1.0.0-next.96",
+    "@sveltejs/kit": "1.0.0-next.511",
+    "@types/cookie": "^0.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.49.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.10.1",
-    "tslib": "^2.3.1",
-    "typescript": "~4.5.4"
+    "svelte-check": "^2.8.1",
+    "svelte-preprocess": "^4.10.7",
+    "tslib": "^2.4.0",
+    "typescript": "~4.8.2",
+    "vite": "^3.1.0"
   },
   "type": "module",
   "dependencies": {
-    "cookie": "0.4.1",
-    "next-auth": "workspace:*"
+    "cookie": "0.5.0",
+    "next-auth": "latest"
   },
   "prettier": {
     "semi": false,

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

@@ -1,13 +1,30 @@
 /// <reference types="@sveltejs/kit" />
+import type {
+  User as NextAuthUser,
+  Session as NextAuthSession,
+} from "next-auth"
+
+// optionally extend the `user`
+interface User extends NextAuthUser {
+  // add custom fields here
+}
+
+interface AppSession extends NextAuthSession {
+  user: User
+}
 
 // See https://kit.svelte.dev/docs/typescript
 // for information about these interfaces
-declare namespace App {
-  interface Locals {}
+declare global {
+  declare namespace App {
+    interface Locals {
+      session: AppSession
+    }
 
-  interface Platform {}
+    interface Platform {}
 
-  interface Session {}
+    interface Session extends AppSession {}
 
-  interface Stuff {}
+    interface Stuff {}
+  }
 }

apps/playground-sveltekit/src/app.html

@@ -2,12 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="description" content="" />
-    <link rel="icon" href="%svelte.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %svelte.head%
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
   </head>
   <body>
-    <div>%svelte.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>

apps/playground-sveltekit/src/global.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-
-interface ImportMetaEnv {
-  VITE_GITHUB_CLIENT_ID: string
-  VITE_GITHUB_CLIENT_SECRET: string
-  VITE_NEXTAUTH_URL: string
-  VITE_NEXTAUTH_SECRET: string
-}

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

@@ -0,0 +1,14 @@
+import type { Handle } from "@sveltejs/kit"
+import { getServerSession, options as nextAuthOptions } from "$lib/next-auth"
+
+export const handle: Handle = async function handle({
+  event,
+  resolve,
+}): Promise<Response> {
+  const session = await getServerSession(event.request, nextAuthOptions)
+  if (session) {
+    event.locals.session = session
+  }
+
+  return resolve(event)
+}

apps/playground-sveltekit/src/hooks/index.ts

@@ -1,24 +0,0 @@
-import { getServerSession } from "$lib"
-import type { Session } from "next-auth"
-import type { NextAuthOptions } from "next-auth"
-import GithubProvider from "next-auth/providers/github"
-
-const nextAuthOptions: NextAuthOptions = {
-  providers: [
-    GithubProvider({
-      clientId: import.meta.env.VITE_GITHUB_CLIENT_ID,
-      clientSecret: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
-    }),
-  ],
-}
-
-export async function handle({ event, resolve }): Promise<Response> {
-  const session = await getServerSession(event.request, nextAuthOptions)
-  event.locals.session = session
-
-  return resolve(event)
-}
-
-export function getSession(event): Session {
-  return event.locals.session || {}
-}

apps/playground-sveltekit/src/lib/index.ts

@@ -1,4 +0,0 @@
-import NextAuth, { getServerSession } from "./next-auth"
-
-export default NextAuth
-export { getServerSession }

apps/playground-sveltekit/src/lib/next-auth.ts

@@ -1,74 +1,103 @@
-import type { RequestEvent } from "@sveltejs/kit"
-import type { IncomingRequest, NextAuthOptions, Session } from "next-auth"
-import type { NextAuthAction } from "next-auth/lib/types"
-import type { OutgoingResponse } from "next-auth/core"
+import type { ServerLoadEvent } from "@sveltejs/kit"
+import type { RequestInternal } from "next-auth"
+import type { NextAuthAction, NextAuthOptions } from "next-auth/core/types"
+import type { OutgoingResponse as NextAuthResponse } from "next-auth/core"
 import { NextAuthHandler } from "next-auth/core"
+import GithubProvider from "next-auth/providers/github"
 import cookie from "cookie"
-import getFormBody from "./utils/get-form-body"
+import {
+  GITHUB_CLIENT_ID,
+  GITHUB_CLIENT_SECRET,
+  NEXTAUTH_SECRET,
+} from "$env/static/private"
+import { PUBLIC_NEXTAUTH_URL } from "$env/static/public"
 
-async function toSvelteKitResponse(
+// @ts-expect-error import is exported on .default during SSR
+const github = GithubProvider?.default || GithubProvider
+
+export const options: NextAuthOptions = {
+  providers: [
+    github({
+      clientId: GITHUB_CLIENT_ID,
+      clientSecret: GITHUB_CLIENT_SECRET,
+    }),
+  ],
+}
+
+const toSvelteKitResponse = async <
+  T extends string | any[] | Record<string, any>
+>(
   request: Request,
-  nextAuthResponse: OutgoingResponse<unknown>
-) {
-  const { headers, cookies, body, redirect, status = 200 } = nextAuthResponse
+  nextAuthResponse: NextAuthResponse<T>
+): Promise<Response> => {
+  const { cookies, redirect } = nextAuthResponse
 
-  const response = {
-    status,
-    headers: {},
+  const headers = new Headers()
+  for (const header of nextAuthResponse?.headers || []) {
+    // pass headers along from next-auth
+    headers.set(header.key, header.value)
   }
 
-  headers?.forEach((header) => {
-    response.headers[header.key] = header.value
-  })
+  // set-cookie header
+  if (cookies?.length) {
+    headers.set(
+      "set-cookie",
+      cookies
+        ?.map((item) => cookie.serialize(item.name, item.value, item.options))
+        .join(",") as string
+    )
+  }
 
-  response.headers["set-cookie"] = cookies?.map((item) => {
-    return cookie.serialize(item.name, item.value, item.options)
-  })
+  let body = undefined
+  let status = nextAuthResponse.status || 200
 
   if (redirect) {
-    let formData = null
+    let formData: FormData | null = null
     try {
       formData = await request.formData()
-      formData = getFormBody(formData)
     } catch {
       // no formData passed
     }
-    if (formData?.json !== "true") {
-      response.status = 302
-      response.headers["Location"] = redirect
+    const { json } = Object.fromEntries(formData ?? [])
+    if (json !== "true") {
+      status = 302
+      headers.set("Location", redirect)
     } else {
-      response["body"] = { url: redirect }
+      body = { url: redirect }
     }
   } else {
-    response["body"] = body
+    body = nextAuthResponse.body
   }
 
-  return response
+  // @ts-expect-error - body is a known HTML document or JSON object
+  return new Response(body, {
+    status,
+    headers,
+  })
 }
 
-async function SKNextAuthHandler(
-  { request, url, params }: RequestEvent,
+const SKNextAuthHandler = async (
+  { request, url, params }: ServerLoadEvent,
   options: NextAuthOptions
-) {
-  const nextauth = params.nextauth.split("/")
-  let body = null
+): Promise<Response> => {
+  const [action, provider] = params.nextauth!.split("/")
+  let body: FormData | undefined
   try {
     body = await request.formData()
-    body = getFormBody(body)
   } catch {
     // no formData passed
   }
-  options.secret = import.meta.env.VITE_NEXTAUTH_SECRET
-  const req: IncomingRequest = {
-    host: import.meta.env.VITE_NEXTAUTH_URL,
-    body,
+  options.secret = NEXTAUTH_SECRET
+  const req: RequestInternal = {
+    host: PUBLIC_NEXTAUTH_URL,
+    body: Object.fromEntries(body ?? []),
     query: Object.fromEntries(url.searchParams),
     headers: request.headers,
     method: request.method,
-    cookies: cookie.parse(request.headers.get("cookie") ?? ""),
-    action: nextauth[0] as NextAuthAction,
-    providerId: nextauth[1],
-    error: nextauth[1],
+    cookies: cookie.parse(request.headers.get("cookie") || ""),
+    action: action as NextAuthAction,
+    providerId: provider,
+    error: provider,
   }
 
   const response = await NextAuthHandler({
@@ -79,19 +108,18 @@ async function SKNextAuthHandler(
   return toSvelteKitResponse(request, response)
 }
 
-export async function getServerSession(
+export const getServerSession = async (
   request: Request,
   options: NextAuthOptions
-): Promise<Session | null> {
-  
-  options.secret = import.meta.env.VITE_NEXTAUTH_SECRET
-  
-  const session = await NextAuthHandler<Session>({
+): Promise<App.Session | null> => {
+  options.secret = NEXTAUTH_SECRET
+
+  const session = await NextAuthHandler<App.Session>({
     req: {
-      host: import.meta.env.VITE_NEXTAUTH_URL,
+      host: PUBLIC_NEXTAUTH_URL,
       action: "session",
       method: "GET",
-      cookies: cookie.parse(request.headers.get("cookie") ?? ""),
+      cookies: cookie.parse(request.headers.get("cookie") || ""),
       headers: request.headers,
     },
     options,
@@ -99,16 +127,18 @@ export async function getServerSession(
 
   const { body } = session
 
-  if (body && Object.keys(body).length) return body as Session
+  if (body && Object.keys(body).length) {
+    return body as App.Session
+  }
   return null
 }
 
-export default (
+export const NextAuth = (
   options: NextAuthOptions
 ): {
-  get: (req: RequestEvent) => Promise<unknown>
-  post: (req: RequestEvent) => Promise<unknown>
+  GET: (event: ServerLoadEvent) => Promise<unknown>
+  POST: (event: ServerLoadEvent) => Promise<unknown>
 } => ({
-  get: (req) => SKNextAuthHandler(req, options),
-  post: (req) => SKNextAuthHandler(req, options),
+  GET: (event) => SKNextAuthHandler(event, options),
+  POST: (event) => SKNextAuthHandler(event, options),
 })

apps/playground-sveltekit/src/lib/utils/get-form-body.ts

@@ -1,15 +0,0 @@
-// https://dev.to/danawoodman/getting-form-body-data-in-your-sveltekit-endpoints-4a85
-export default function getFormBody(
-  body: FormData | null
-): Record<string, any> {
-  if (!body) return {}
-
-  // @ts-expect-error: Entries property type missing
-  return [...body.entries()].reduce((data, [k, v]) => {
-    const value = v
-    if (k in data)
-      data[k] = Array.isArray(data[k]) ? [...data[k], value] : [data[k], value]
-    else data[k] = value
-    return data
-  }, {})
-}

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

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

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

@@ -1,21 +1,24 @@
 <script lang="ts">
-  import { session } from "$app/stores"
+  import { page } from "$app/stores"
 </script>
 
 <div>
   <header>
     <div class="signedInStatus">
       <p class="nojs-show loaded">
-        {#if Object.keys($session).length}
-          {#if $session.user.image}
+        {#if Object.keys($page.data.session || {}).length}
+          {#if $page.data.session.user.image}
             <span
-              style="background-image: url('{$session.user.image}')"
+              style="background-image: url('{$page.data.session.user.image}')"
               class="avatar"
             />
           {/if}
           <span class="signedInText">
             <small>Signed in as</small><br />
-            <strong>{$session.user.email || $session.user.name}</strong>
+            <strong
+              >{$page.data.session.user.email ||
+                $page.data.session.user.name}</strong
+            >
           </span>
           <a href="/api/auth/signout" class="button">Sign out</a>
         {:else}
@@ -38,7 +41,8 @@
   :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";
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+      "Noto Color Emoji";
     padding: 0 1rem 1rem 1rem;
     max-width: 680px;
     margin: 0 auto;

apps/playground-sveltekit/src/routes/api/auth/[...nextauth].ts

@@ -1,11 +0,0 @@
-import NextAuth from "$lib"
-import GithubProvider from "next-auth/providers/github"
-
-export const { get, post } = NextAuth({
-  providers: [
-    GithubProvider({
-      clientId: import.meta.env.VITE_GITHUB_CLIENT_ID,
-      clientSecret: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
-    }),
-  ],
-})

apps/playground-sveltekit/src/routes/api/auth/[...nextauth]/+server.ts

@@ -0,0 +1,3 @@
+import { NextAuth, options } from "$lib/next-auth"
+
+export const { GET, POST } = NextAuth(options)

apps/playground-sveltekit/src/routes/protected.svelte

@@ -1,27 +0,0 @@
-<script context="module" lang="ts">
-  export async function load({ session }) {
-    const { user } = session
-    if (!user) {
-      return {
-        status: 302,
-        redirect: "/",
-      }
-    }
-    return {
-      props: {
-        session,
-      },
-    }
-  }
-</script>
-
-<script lang="ts">
-  export let session
-</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: {session.expires}</p>

apps/playground-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/playground-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/playground-sveltekit/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-auto"
+import adapter from "@sveltejs/adapter-node" // or use https://github.com/sveltejs/kit/tree/master/packages/adapter-auto
 import preprocess from "svelte-preprocess"
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -6,7 +6,6 @@ const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
   preprocess: preprocess(),
-
   kit: {
     adapter: adapter(),
   },

apps/playground-sveltekit/tsconfig.json

@@ -1,36 +1,17 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
-    "moduleResolution": "node",
-    "module": "es2020",
-    "lib": ["es2020", "DOM"],
-    "target": "es2020",
-    /**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-		*/
-    "importsNotUsedAsValues": "error",
-    /**
-			TypeScript doesn't know about import usages in the template because it only sees the
-			script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
-		*/
-    "preserveValueImports": true,
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    /**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-		*/
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
     "allowJs": true,
     "checkJs": true,
-    "paths": {
-      "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"]
-    }
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+    "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/playground-sveltekit/vite.config.ts

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