chore(release): bump version

.eslintrc.js

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

@@ -1,11 +1,4 @@
-# Learn how to add code owners here:
-# https://help.github.com/en/articles/about-code-owners
-
-*                     @balazsorban44
-.github               @ThangHuuVu
-/apps/                @lluia @ndom91 @ThangHuuVu
-/docs/                @lluia @ndom91
-/packages/            @ThangHuuVu
-/packages/adapter-*/  @ndom91
-/**/*test*            @lluia
-/**/*type*            @lluia
+/types/ @balazsorban44 @lluia
+/docs/ @balazsorban44 @ndom91
+/adapters/ @balazsorban44 @ndom91
+/__tests__/ @lluia

.github/ISSUE_TEMPLATE/1_bug_framework.yml

@@ -5,7 +5,6 @@ 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,7 +5,6 @@ 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
 
@@ -68,7 +67,6 @@ body:
         - "Slack"
         - "Spotify"
         - "Strava"
-        - "Todoist"
         - "Trakt"
         - "Twitch"
         - "Twitter"

.github/ISSUE_TEMPLATE/3_bug_adapter.yml

@@ -5,7 +5,6 @@ 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
 
@@ -31,10 +30,8 @@ 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,7 +9,6 @@ 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,7 +17,6 @@ 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,7 +9,6 @@ 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

@@ -1,34 +1,48 @@
 <!--
 Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!
 
+Please make sure that you are familiar with and follow the Code of Conduct for
+this project (found in the CODE_OF_CONDUCT.md file).
+
+Also, please make sure you're familiar with and follow the instructions in the
+contributing guidelines (found in the CONTRIBUTING.md file).
+
+If you're new to contributing to open source projects, you might find this free
+video course helpful: https://kcd.im/pull-request
+
 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.
+<!-- What changes are being made? (What feature/bug is being fixed here?) -->
 
-## ☕️ Reasoning
+## Reasoning 💡
 
 <!-- What changes are being made? What feature/bug is being fixed here? -->
 
-## 🧢 Checklist
+## Checklist 🧢
+
+<!-- Feel free cross items ( like this `~[] item~` ) if they're irrelevant to your changes.
+
+To check an item, place an `x` in the box like so: `- [x] Documentation`. -->
 
 - [ ] Documentation
 - [ ] Tests
 - [ ] Ready to be merged
 
-## 🎫 Affected issues
+<!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
 
+## Affected issues 🎟
+
+<!--
 Please [scout and link issues](https://github.com/nextauthjs/next-auth/issues) that might be solved by this PR.
 
-Fixes: INSERT_ISSUE_LINK_HERE
+If you write `"Fixes"` or `"Closes"` before the issue link like so:
 
-## 📌 Resources
+```
+Fixes #359
+```
 
-- [Security guidelines](../Security.md)
-- [Contributing guidelines](../CONTRIBUTING.md)
-- [Code of conduct](../CODE_OF_CONDUCT.md)
-- [Contributing to Open Source](https://kcd.im/pull-request)
+the connected issue will be automatically closed once the PR is merged and hence help with maintenance of the library 😊
+
+-->

.github/issue-labeler.yml

@@ -30,14 +30,8 @@ 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

@@ -10,7 +10,7 @@ providers:
 
 adapters:
   - packages/next-auth/src/adapters.ts
-  - packages/adapter-*/**
+  - packages/*-adapter/**
 
 dgraph:
   - packages/adapter-dgraph/**
@@ -42,18 +42,12 @@ 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/version-pr/action.yml

@@ -4,5 +4,5 @@ outputs:
   version:
     description: "npm package version"
 runs:
-  using: "node16"
+  using: "node12"
   main: "index.js"

.github/workflows/codeql-analysis.yml

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

.github/workflows/release.yml

@@ -16,23 +16,26 @@ jobs:
     steps:
       - name: Init
         uses: actions/checkout@v2
-        with:
-          fetch-depth: 2
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
-        with:
-          version: 7.5.1
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
-          node-version: 18
-          cache: "pnpm"
+          node-version: 16
+          cache: "yarn"
+      - name: Cache Node Modules
+        id: cache-node
+        uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: |
+            cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+            cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
       - name: Install dependencies
-        run: pnpm install
+        run: yarn --prefer-offline --frozen-lockfile
       - name: Build
-        run: pnpm build
+        run: yarn build
       - name: Run tests
-        run: pnpm test
+        run: yarn test
         env:
           UPSTASH_REDIS_URL: ${{ secrets.UPSTASH_REDIS_URL }}
           UPSTASH_REDIS_KEY: ${{ secrets.UPSTASH_REDIS_KEY }}
@@ -52,25 +55,29 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
-        with:
-          version: 7.5.1
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
-          node-version: 18
-          cache: "pnpm"
+          node-version: 16
+          cache: "yarn"
+      - name: Cache Node Modules
+        id: cache-node
+        uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: |
+            cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+            cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
       - name: Install dependencies
-        run: pnpm install
+        run: yarn --prefer-offline --frozen-lockfile
       - name: Publish to npm and GitHub
         run: |
           git config --global user.email "balazsorban44@users.noreply.github.com"
           git config --global user.name "Balázs Orbán"
-          pnpm release
+          yarn release
         env:
-          RELEASE_TOKEN: ${{ secrets.RELEASE_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN_PKG: ${{ secrets.NPM_TOKEN_PKG }}
           NPM_TOKEN_ORG: ${{ secrets.NPM_TOKEN_ORG }}
   release-pr:
@@ -82,17 +89,22 @@ jobs:
     steps:
       - name: Init
         uses: actions/checkout@v2
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
-        with:
-          version: 7.5.1
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
-          node-version: 18
-          cache: "pnpm"
+          node-version: 16
+          cache: "yarn"
+      - name: Cache Node Modules
+        id: cache-node
+        uses: actions/cache@v2
+        with:
+          path: "**/node_modules"
+          key: cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: |
+            cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+            cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
       - name: Install dependencies
-        run: pnpm install
+        run: yarn --prefer-offline --frozen-lockfile
       - name: Determine version
         uses: ./.github/version-pr
         id: determine-version
@@ -102,17 +114,13 @@ jobs:
         run: |
           cd packages/next-auth
           echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
-          pnpm publish --no-git-checks --access public --tag experimental
+          npm publish --access public --tag experimental
         env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN_PKG }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Comment version on PR
         uses: NejcZdovc/comment-pr@v1
         with:
-          message:
-            "🎉 Experimental release [published 📦️ on npm](https://npmjs.com/package/next-auth/v/${{ env.VERSION }})!\n \
-            ```sh\npnpm add next-auth@${{ env.VERSION }}\n```\n \
-            ```sh\nyarn add next-auth@${{ env.VERSION }}\n```\n \
-            ```sh\nnpm i next-auth@${{ env.VERSION }}\n```"
+          message: "🎉 Experimental release [published on npm](https://www.npmjs.com/package/next-auth/v/${{ env.VERSION }})!\n\n```sh\nnpm i next-auth@${{ env.VERSION }}\n```\n```sh\nyarn add next-auth@${{ env.VERSION }}\n```"
         env:
           VERSION: ${{ steps.determine-version.outputs.version }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -12,7 +12,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 firebase-debug.log
-.pnpm-debug.log
 
 
 # Dependencies
@@ -30,12 +29,11 @@ packages/next-auth/providers
 packages/next-auth/src/providers/oauth-types.ts
 packages/next-auth/client
 packages/next-auth/css
-packages/next-auth/utils
+packages/next-auth/lib
 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
@@ -45,7 +43,6 @@ packages/next-auth/middleware.js
 # Development app
 apps/dev/src/css
 apps/dev/prisma/migrations
-apps/dev/typeorm
 
 # VS
 /.vs/slnx.sqlite-journal
@@ -65,7 +62,6 @@ 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 @@
-18
+16

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 hi@thvu.dev, info@balazsorban.com, yo@ndo.dev and me@iaincollins.com.
+reported by contacting me@iaincollins.com or info@balazsorban.com and yo@ndo.dev.
 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,14 +12,12 @@ 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.
 - Pull Requests should be raised for any change
 - Pull Requests need approval of a [core contributor](https://next-auth.js.org/contributors#core-team) before merging
-- We use ESLint/Prettier for linting/formatting, so please run `pnpm lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [this Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to fix lint and formatting issues in development)
+- We use ESLint/Prettier for linting/formatting, so please run `yarn lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [this Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to fix lint and formatting issues in development)
 - We encourage you to test your changes, and if you have the opportunity, please make those tests part of the Pull Request
 - If you add new functionality, please provide the corresponding documentation as well and make it part of the Pull Request
 
@@ -28,6 +26,7 @@ Before contributing, we recommend you read the [Tour de Source: NextAuth.js](htt
 
 A quick guide on how to setup _next-auth_ locally to work on it and test out any changes:
 
+
 1. Clone the repo:
 
 ```sh
@@ -35,21 +34,13 @@ git clone git@github.com:nextauthjs/next-auth.git
 cd next-auth
 ```
 
-2. Set up the correct pnpm version, using [Corepack](https://nodejs.org/api/corepack.html). Run the following in the project'a root:
+1. Install packages. Developing requires Node.js v16:
 
 ```sh
-corepack enable pnpm
+yarn
 ```
 
-(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
-```
-
-4. Populate `.env.local`:
+3. 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.
 
@@ -61,12 +52,11 @@ 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`.
 
-5. Start the developer application/server:
+4. Start the developer application/server:
 
 ```sh
-pnpm dev
+yarn dev:app
 ```
-
 Your developer application will be available on `http://localhost:3000`
 
 That's it! 🎉
@@ -75,7 +65,7 @@ If you need an example project to link to, you can use [next-auth-example](https
 
 #### Hot reloading
 
-When running `pnpm dev`, you start a Next.js developer server on `http://localhost:3000`, which includes hot reloading out-of-the-box. Make changes on any of the files in `src` and see the changes immediately.
+When running `yarn dev:app`, you start a Next.js developer server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
 
 > NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered (using API routes). (Improving this through a PR is very welcome!)
 
@@ -85,7 +75,7 @@ When running `pnpm dev`, you start a Next.js developer server on `http://localho
 
 If you think your custom provider might be useful to others, we encourage you to open a PR and add it to the built-in list so others can discover it much more easily! You only need to add two changes:
 
-1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
+1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
 2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
 
 That's it! 🎉 Others will be able to discover this provider much more easily now!
@@ -98,13 +88,13 @@ If you would like to contribute to an existing database adapter or help create a
 
 #### Testing
 
-Tests can be run with `pnpm test`.
+Tests can be run with `yarn test`.
 
 Automated tests are currently crude and limited in functionality, but improvements are in development.
 
 ## For maintainers
 
-We use [a custom script](https://github.com/nextauthjs/next-auth/blob/main/scripts/release/index.ts) together with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) to automate releases. This makes the maintenance process easier and less error-prone. Please study the "Conventional Commits" site to understand how to write a good commit message.
+We use [a custom script](https://github.com/nextauthjs/next-auth/tree/main/scripts/index.ts) together with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) to automate releases. This makes the maintenance process easier and less error-prone. Please study the "Conventional Commits" site to understand how to write a good commit message.
 
 When accepting Pull Requests, make sure the following:
 
@@ -113,9 +103,9 @@ When accepting Pull Requests, make sure the following:
 - Rewrite the commit message to conform to the `Conventional Commits` style.
   - Using `fix` releases a patch (x.x.1)
   - Using `feat` releases a minor (x.1.x)
-  - Using `feat` when `BREAKING CHANGE` is present in the commit message releases a major (1.x.x)
+  - Using `feat` when `BREAKING CHANGE` is present in the commit messgae releases a major (1.x.x)
 - Optionally link issues the PR will resolve (You can add "close" in front of the issue numbers to close the issues automatically, when the PR is merged. `semantic-release` will also comment back to connected issues and PRs, notifying the users that a feature is added/bug fixed, etc.)
 
 ### 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 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 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.)
+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.)
 
-> 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.
+> 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.
 
 ## Supported Versions
 

apps/dev/.env.local.example

@@ -47,12 +47,6 @@ EMAIL_FROM=user@gmail.com
 # MongoDB:  DATABASE_URL=mongodb://nextauth:password@127.0.0.1:27017/nextauth?synchronize=true
 DATABASE_URL=
 
-WIKIMEDIA_ID=
-WIKIMEDIA_SECRET=
-
-# Supabase Example Configuration
-# Supabase Example Configuration
-# NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
-# SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSJ9.vI9obAHOGyVVKa3pD--kJlyxp-Z2zV9UUMAhKpNLAcU
-# SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
-# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs
+BOXYHQSAML_ISSUER="https://jackson-demo.boxyhq.com"
+BOXYHQSAML_ID="tenant=boxyhq.com&product=saml-demo.boxyhq.com"
+BOXYHQSAML_SECRET="dummy"

apps/dev/app/layout.tsx

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

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

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

apps/dev/components/footer.js

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

apps/dev/components/header.js

@@ -64,37 +64,49 @@ export default function Header() {
       <nav>
         <ul className={styles.navItems}>
           <li className={styles.navItem}>
-            <Link href="/">Home</Link>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/client">Client</Link>
+            <Link href="/client">
+              <a>Client</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/server">Server</Link>
+            <Link href="/server">
+              <a>Server</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/protected">Protected</Link>
+            <Link href="/protected">
+              <a>Protected</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/protected-ssr">Protected(SSR)</Link>
+            <Link href="/protected-ssr">
+              <a>Protected(SSR)</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/api-example">API</Link>
+            <Link href="/api-example">
+              <a>API</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/credentials">Credentials</Link>
+            <Link href="/credentials">
+              <a>Credentials</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href="/email">Email</Link>
+            <Link href="/email">
+              <a>Email</a>
+            </Link>
           </li>
           <li className={styles.navItem}>
-            <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>
+            <Link href="/middleware-protected">
+              <a>Middleware protected</a>
+            </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,37 +5,30 @@
   "private": true,
   "scripts": {
     "clean": "rm -rf .next",
-    "dev": "next dev",
-    "lint": "next lint",
-    "build": "next build",
+    "copy:css": "cpx \"../../packages/next-auth/css/**/*\" src/css --watch",
+    "watch:css": "cd ../../packages/next-auth && npm run watch:css",
+    "dev": "npm-run-all --parallel dev:next watch:css copy:css",
+    "dev:next": "npx next dev",
+    "build": "npx next build",
     "start": "next start",
-    "email": "fake-smtp-server",
-    "start:email": "pnpm email"
+    "email": "npx fake-smtp-server",
+    "start:email": "npm run email"
   },
   "license": "ISC",
   "dependencies": {
-    "@next-auth/fauna-adapter": "workspace:*",
-    "@next-auth/prisma-adapter": "workspace:*",
-    "@next-auth/supabase-adapter": "workspace:*",
-    "@next-auth/typeorm-legacy-adapter": "workspace:*",
-    "@prisma/client": "^3",
-    "@supabase/supabase-js": "^2.0.5",
-    "faunadb": "^4",
-    "jsonwebtoken": "^8.5.1",
-    "next": "13.0.2",
-    "next-auth": "workspace:*",
-    "nodemailer": "^6",
-    "react": "^18",
-    "react-dom": "^18"
+    "@next-auth/fauna-adapter": "^1.0.1",
+    "@next-auth/prisma-adapter": "^1.0.1",
+    "@prisma/client": "^3.10.0",
+    "fake-smtp-server": "^0.8.0",
+    "faunadb": "^4.4.1",
+    "next": "^12.1.0",
+    "nodemailer": "^6.7.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/jsonwebtoken": "^8.5.5",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "fake-smtp-server": "^0.8.0",
-    "pg": "^8.7.3",
-    "prisma": "^3",
-    "sqlite3": "^5.0.8",
-    "typeorm": "0.3.7"
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "prisma": "^3.10.0"
   }
-}
+}

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

@@ -1,159 +1,218 @@
-import NextAuth from "next-auth"
-import type { NextAuthOptions } from "next-auth"
-import jwt from "jsonwebtoken"
-
-// Providers
-import Apple from "next-auth/providers/apple"
-import Auth0 from "next-auth/providers/auth0"
-import AzureAD from "next-auth/providers/azure-ad"
-import AzureB2C from "next-auth/providers/azure-ad-b2c"
-import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
-import Cognito from "next-auth/providers/cognito"
-import Credentials from "next-auth/providers/credentials"
-import Discord from "next-auth/providers/discord"
-import DuendeIDS6 from "next-auth/providers/duende-identity-server6"
-import Email from "next-auth/providers/email"
-import Facebook from "next-auth/providers/facebook"
-import Foursquare from "next-auth/providers/foursquare"
-import Freshbooks from "next-auth/providers/freshbooks"
-import GitHub from "next-auth/providers/github"
-import Gitlab from "next-auth/providers/gitlab"
-import Google from "next-auth/providers/google"
-import IDS4 from "next-auth/providers/identity-server4"
-import Instagram from "next-auth/providers/instagram"
-import Keycloak from "next-auth/providers/keycloak"
-import Line from "next-auth/providers/line"
-import LinkedIn from "next-auth/providers/linkedin"
-import Mailchimp from "next-auth/providers/mailchimp"
-import Okta from "next-auth/providers/okta"
-import Osu from "next-auth/providers/osu"
-import Patreon from "next-auth/providers/patreon"
-import Slack from "next-auth/providers/slack"
-import Spotify from "next-auth/providers/spotify"
-import Trakt from "next-auth/providers/trakt"
+import NextAuth, { NextAuthOptions } from "next-auth"
+// import EmailProvider from "next-auth/providers/email"
+import GitHubProvider from "next-auth/providers/github"
+import Auth0Provider from "next-auth/providers/auth0"
+import KeycloakProvider from "next-auth/providers/keycloak"
+import TwitterProvider, {
+  TwitterLegacy as TwitterLegacyProvider,
+} from "next-auth/providers/twitter"
+import CredentialsProvider from "next-auth/providers/credentials"
+import IDS4Provider from "next-auth/providers/identity-server4"
 import Twitch from "next-auth/providers/twitch"
-import Twitter, { TwitterLegacy } from "next-auth/providers/twitter"
-import Vk from "next-auth/providers/vk"
-import Wikimedia from "next-auth/providers/wikimedia"
-import WorkOS from "next-auth/providers/workos"
+import GoogleProvider from "next-auth/providers/google"
+import FacebookProvider from "next-auth/providers/facebook"
+import FoursquareProvider from "next-auth/providers/foursquare"
+// import FreshbooksProvider from "next-auth/providers/freshbooks"
+import GitlabProvider from "next-auth/providers/gitlab"
+import InstagramProvider from "next-auth/providers/instagram"
+import LineProvider from "next-auth/providers/line"
+import LinkedInProvider from "next-auth/providers/linkedin"
+import MailchimpProvider from "next-auth/providers/mailchimp"
+import DiscordProvider from "next-auth/providers/discord"
+import AzureADProvider from "next-auth/providers/azure-ad"
+import SpotifyProvider from "next-auth/providers/spotify"
+import CognitoProvider from "next-auth/providers/cognito"
+import SlackProvider from "next-auth/providers/slack"
+import Okta from "next-auth/providers/okta"
+import AzureB2C from "next-auth/providers/azure-ad-b2c"
+import OsuProvider from "next-auth/providers/osu"
+import AppleProvider from "next-auth/providers/apple"
+import PatreonProvider from "next-auth/providers/patreon"
+import TraktProvider from "next-auth/providers/trakt"
+import WorkOSProvider from "next-auth/providers/workos"
+import BoxyHQSAMLProvider from "next-auth/providers/boxyhq-saml"
 
-// Adapters
-import { PrismaClient } from "@prisma/client"
-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"
+// import { PrismaAdapter } from "@next-auth/prisma-adapter"
+// import { PrismaClient } from "@prisma/client"
+// const prisma = new PrismaClient()
+// const adapter = PrismaAdapter(prisma)
 
-// Add an adapter you want to test here.
-const adapters = {
-  prisma() {
-    const client = globalThis.prisma || new PrismaClient()
-    if (process.env.NODE_ENV !== "production") globalThis.prisma = client
-    return PrismaAdapter(client)
-  },
-  typeorm() {
-    return TypeORMLegacyAdapter({
-      type: "sqlite",
-      name: "next-auth-test-memory",
-      database: "./typeorm/dev.db",
-      synchronize: true,
-    })
-  },
-  fauna() {
-    const client =
-      globalThis.fauna ||
-      new FaunaClient({
-        secret: process.env.FAUNA_SECRET,
-        domain: process.env.FAUNA_DOMAIN,
-      })
-    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
-  },
-}
+// import { Client as FaunaClient } from "faunadb"
+// import { FaunaAdapter } from "@next-auth/fauna-adapter"
 
+// const client = new FaunaClient({
+//   secret: process.env.FAUNA_SECRET,
+//   domain: process.env.FAUNA_DOMAIN,
+// })
+// const adapter = FaunaAdapter(client)
 export const authOptions: NextAuthOptions = {
-  adapter: adapters.noop(),
-  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",
+  // adapter,
+  providers: [
+    // E-mail
+    // Start fake e-mail server with `npm run start:email`
+    // EmailProvider({
+    //   server: {
+    //     host: "127.0.0.1",
+    //     auth: null,
+    //     secure: false,
+    //     port: 1025,
+    //     tls: { rejectUnauthorized: false },
+    //   },
+    // }),
+    // Credentials
+    CredentialsProvider({
+      name: "Credentials",
+      credentials: {
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        if (credentials.password === "pw") {
+          return {
+            name: "Fill Murray",
+            email: "bill@fillmurray.com",
+            image: "https://www.fillmurray.com/64/64",
+          }
         }
-        session.supabaseAccessToken = jwt.sign(payload, signingSecret)
-      }
-      return session
-    },
-  },
-  debug: process.env.NODE_ENV !== "production",
+        return null
+      },
+    }),
+    // OAuth 1
+    // TwitterLegacyProvider({
+    //   clientId: process.env.TWITTER_LEGACY_ID,
+    //   clientSecret: process.env.TWITTER_LEGACY_SECRET,
+    // }),
+    // OAuth 2 / OIDC
+    TwitterProvider({
+      // Opt-in to the new Twitter API for now. Should be default in the future.
+      version: "2.0",
+      clientId: process.env.TWITTER_ID,
+      clientSecret: process.env.TWITTER_SECRET,
+    }),
+    GitHubProvider({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+    Auth0Provider({
+      clientId: process.env.AUTH0_ID,
+      clientSecret: process.env.AUTH0_SECRET,
+      issuer: process.env.AUTH0_ISSUER,
+    }),
+    KeycloakProvider({
+      clientId: process.env.KEYCLOAK_ID,
+      clientSecret: process.env.KEYCLOAK_SECRET,
+      issuer: process.env.KEYCLOAK_ISSUER,
+    }),
+    Twitch({
+      clientId: process.env.TWITCH_ID,
+      clientSecret: process.env.TWITCH_SECRET,
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+    FacebookProvider({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET,
+    }),
+    FoursquareProvider({
+      clientId: process.env.FOURSQUARE_ID,
+      clientSecret: process.env.FOURSQUARE_SECRET,
+    }),
+    // FreshbooksProvider({
+    //   clientId: process.env.FRESHBOOKS_ID,
+    //   clientSecret: process.env.FRESHBOOKS_SECRET,
+    // }),
+    GitlabProvider({
+      clientId: process.env.GITLAB_ID,
+      clientSecret: process.env.GITLAB_SECRET,
+    }),
+    InstagramProvider({
+      clientId: process.env.INSTAGRAM_ID,
+      clientSecret: process.env.INSTAGRAM_SECRET,
+    }),
+    LineProvider({
+      clientId: process.env.LINE_ID,
+      clientSecret: process.env.LINE_SECRET,
+    }),
+    LinkedInProvider({
+      clientId: process.env.LINKEDIN_ID,
+      clientSecret: process.env.LINKEDIN_SECRET,
+    }),
+    MailchimpProvider({
+      clientId: process.env.MAILCHIMP_ID,
+      clientSecret: process.env.MAILCHIMP_SECRET,
+    }),
+    IDS4Provider({
+      clientId: process.env.IDS4_ID,
+      clientSecret: process.env.IDS4_SECRET,
+      issuer: process.env.IDS4_ISSUER,
+    }),
+    DiscordProvider({
+      clientId: process.env.DISCORD_ID,
+      clientSecret: process.env.DISCORD_SECRET,
+    }),
+    AzureADProvider({
+      clientId: process.env.AZURE_AD_CLIENT_ID,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+      profilePhotoSize: 48,
+    }),
+    SpotifyProvider({
+      clientId: process.env.SPOTIFY_ID,
+      clientSecret: process.env.SPOTIFY_SECRET,
+    }),
+    CognitoProvider({
+      clientId: process.env.COGNITO_ID,
+      clientSecret: process.env.COGNITO_SECRET,
+      issuer: process.env.COGNITO_ISSUER,
+    }),
+    Okta({
+      clientId: process.env.OKTA_ID,
+      clientSecret: process.env.OKTA_SECRET,
+      issuer: process.env.OKTA_ISSUER,
+    }),
+    SlackProvider({
+      clientId: process.env.SLACK_ID,
+      clientSecret: process.env.SLACK_SECRET,
+    }),
+    AzureB2C({
+      clientId: process.env.AZURE_B2C_ID,
+      clientSecret: process.env.AZURE_B2C_SECRET,
+      tenantId: process.env.AZURE_B2C_TENANT_ID,
+      primaryUserFlow: process.env.AZURE_B2C_PRIMARY_USER_FLOW,
+    }),
+    OsuProvider({
+      clientId: process.env.OSU_CLIENT_ID,
+      clientSecret: process.env.OSU_CLIENT_SECRET,
+    }),
+    AppleProvider({
+      clientId: process.env.APPLE_ID,
+      clientSecret: process.env.APPLE_SECRET,
+    }),
+    PatreonProvider({
+      clientId: process.env.PATREON_ID,
+      clientSecret: process.env.PATREON_SECRET,
+    }),
+    TraktProvider({
+      clientId: process.env.TRAKT_ID,
+      clientSecret: process.env.TRAKT_SECRET,
+    }),
+    WorkOSProvider({
+      clientId: process.env.WORKOS_ID,
+      clientSecret: process.env.WORKOS_SECRET,
+    }),
+    BoxyHQSAMLProvider({
+      issuer: process.env.BOXYHQSAML_ISSUER,
+      clientId: process.env.BOXYHQSAML_ID,
+      clientSecret: process.env.BOXYHQSAML_SECRET,
+    }),
+  ],
+  debug: true,
   theme: {
+    colorScheme: "auto",
     logo: "https://next-auth.js.org/img/logo/logo-sm.png",
     brandColor: "#1786fb",
   },
-  providers: [
-    Credentials({
-      credentials: { password: { label: "Password", type: "password" } },
-      async authorize(credentials) {
-        if (credentials.password !== "pw") return null
-        return { name: "Fill Murray", email: "bill@fillmurray.com", image: "https://www.fillmurray.com/64/64" }
-      },
-    }),
-    Apple({ clientId: process.env.APPLE_ID, clientSecret: process.env.APPLE_SECRET }),
-    Auth0({ clientId: process.env.AUTH0_ID, clientSecret: process.env.AUTH0_SECRET, issuer: process.env.AUTH0_ISSUER }),
-    AzureAD({ clientId: process.env.AZURE_AD_CLIENT_ID, clientSecret: process.env.AZURE_AD_CLIENT_SECRET, tenantId: process.env.AZURE_AD_TENANT_ID }),
-    AzureB2C({ clientId: process.env.AZURE_B2C_ID, clientSecret: process.env.AZURE_B2C_SECRET, issuer: process.env.AZURE_B2C_ISSUER }),
-    BoxyHQSAML({ issuer: "https://jackson-demo.boxyhq.com", clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com", clientSecret: "dummy" }),
-    Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
-    Discord({ clientId: process.env.DISCORD_ID, clientSecret: process.env.DISCORD_SECRET }),
-    DuendeIDS6({ clientId: "interactive.confidential", clientSecret: "secret", issuer: "https://demo.duendesoftware.com" }),
-    Facebook({ clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET }),
-    Foursquare({ clientId: process.env.FOURSQUARE_ID, clientSecret: process.env.FOURSQUARE_SECRET }),
-    Freshbooks({ clientId: process.env.FRESHBOOKS_ID, clientSecret: process.env.FRESHBOOKS_SECRET }),
-    GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }),
-    Gitlab({ clientId: process.env.GITLAB_ID, clientSecret: process.env.GITLAB_SECRET }),
-    Google({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }),
-    IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
-    Instagram({ clientId: process.env.INSTAGRAM_ID, clientSecret: process.env.INSTAGRAM_SECRET }),
-    Keycloak({ clientId: process.env.KEYCLOAK_ID, clientSecret: process.env.KEYCLOAK_SECRET, issuer: process.env.KEYCLOAK_ISSUER }),
-    Line({ clientId: process.env.LINE_ID, clientSecret: process.env.LINE_SECRET }),
-    LinkedIn({ clientId: process.env.LINKEDIN_ID, clientSecret: process.env.LINKEDIN_SECRET }),
-    Mailchimp({ clientId: process.env.MAILCHIMP_ID, clientSecret: process.env.MAILCHIMP_SECRET }),
-    Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
-    Osu({ clientId: process.env.OSU_CLIENT_ID, clientSecret: process.env.OSU_CLIENT_SECRET }),
-    Patreon({ clientId: process.env.PATREON_ID, clientSecret: process.env.PATREON_SECRET }),
-    Slack({ clientId: process.env.SLACK_ID, clientSecret: process.env.SLACK_SECRET }),
-    Spotify({ clientId: process.env.SPOTIFY_ID, clientSecret: process.env.SPOTIFY_SECRET }),
-    Trakt({ clientId: process.env.TRAKT_ID, clientSecret: process.env.TRAKT_SECRET }),
-    Twitch({ clientId: process.env.TWITCH_ID, clientSecret: process.env.TWITCH_SECRET }),
-    Twitter({ version: "2.0", clientId: process.env.TWITTER_ID, clientSecret: process.env.TWITTER_SECRET }),
-    TwitterLegacy({ clientId: process.env.TWITTER_LEGACY_ID, clientSecret: process.env.TWITTER_LEGACY_SECRET }),
-    Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
-    Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
-    WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
-  ],
-}
-
-if (authOptions.adapter) {
-  authOptions.providers.unshift(
-    // NOTE: You can start a fake e-mail server with `pnpm email`
-    // and then go to `http://localhost:1080` in the browser
-    Email({ server: "smtp://127.0.0.1:1025?tls.rejectUnauthorized=false" })
-  )
 }
 
 export default NextAuth(authOptions)

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

@@ -2,6 +2,6 @@
 import { getToken } from "next-auth/jwt"
 
 export default async (req, res) => {
-  const token = await getToken({ req })
+  const token = await getToken({ req, secret: process.env.SECRET })
   res.send(JSON.stringify(token, null, 2))
 }

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

@@ -1,15 +1,13 @@
 // This is an example of to protect an API route
-import { unstable_getServerSession } from "next-auth/next"
-import { authOptions } from "../auth/[...nextauth]"
+import { getSession } from "next-auth/react"
 
 export default async (req, res) => {
-  const session = await unstable_getServerSession(req, res, authOptions)
+  const session = await getSession({ req })
 
   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,8 +1,7 @@
 // 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]"
+import { getSession } from "next-auth/react"
 
 export default async (req, res) => {
-  const session = await unstable_getServerSession(req, res, authOptions)
-  res.json(session)
+  const session = await getSession({ req })
+  res.send(JSON.stringify(session, null, 2))
 }

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

@@ -1,30 +0,0 @@
-// 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/middleware-protected/_middleware.js

@@ -1,7 +1,5 @@
 export { default } from "next-auth/middleware"
 
-export const config = { matcher: ["/middleware-protected"] }
-
 // Other ways to use this middleware
 
 // import withAuth from "next-auth/middleware"
@@ -30,11 +28,12 @@ export const config = { matcher: ["/middleware-protected"] }
 // export default withAuth(
 //   function middleware(req, ev) {
 //     console.log(req, ev)
+//     return undefined // NOTE: `NextMiddleware` should allow returning `void`
 //   },
 //   {
 //     callbacks: {
 //       authorized: ({ token }) => token.name === "Balázs Orbán",
-//     },
+//     }
 //   }
 // )
 

apps/dev/pages/protected-ssr.js

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

apps/dev/pages/server.js

@@ -1,6 +1,5 @@
-import { unstable_getServerSession } from "next-auth/next"
+import { getSession } from "next-auth/react"
 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
@@ -12,17 +11,13 @@ export default function Page() {
     <Layout>
       <h1>Server Side Rendering</h1>
       <p>
-        This page uses the <strong>unstable_getServerSession()</strong> method
-        in <strong>getServerSideProps()</strong>.
+        This page uses the universal <strong>getSession()</strong> method in{" "}
+        <strong>getServerSideProps()</strong>.
       </p>
       <p>
-        Using <strong>unstable_getServerSession()</strong> in{" "}
-        <strong>getServerSideProps()</strong> is currently the recommended
-        approach, although the API may still change, if you need to support
-        Server Side Rendering with authentication.
-      </p>
-      <p>
-        Using <strong>getSession()</strong> is still recommended on the client.
+        Using <strong>getSession()</strong> in{" "}
+        <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
@@ -40,11 +35,7 @@ export default function Page() {
 export async function getServerSideProps(context) {
   return {
     props: {
-      session: await unstable_getServerSession(
-        context.req,
-        context.res,
-        authOptions
-      ),
+      session: await getSession(context),
     },
   }
 }

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

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

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

apps/dev/types/nextauth.d.ts

@@ -1,20 +0,0 @@
-// 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-gatsby/README.md

@@ -65,6 +65,7 @@ You **can** skip configuring a database and come back to it later if you want.
 For more information about setting up a database, please check out the following links:
 
 * Docs: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
+* Adapters Repo: [nextauthjs/adapters](https://github.com/nextauthjs/adapters)
 
 ### 3. Configure Authentication Providers
 

apps/example-gatsby/package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "dotenv": "^16.0.0",
     "gatsby": "next",
-    "next-auth": "latest",
-    "react": "^18",
-    "react-dom": "^18"
+    "next-auth": "^4.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "vercel": "^23.1.2"

apps/example-nextjs/.gitignore

@@ -1,20 +1,110 @@
-.DS_Store
-
-node_modules/
+# Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
-.yarn-integrity
+
+# 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
 .npm
 
+# Optional eslint cache
 .eslintcache
 
-*.tsbuildinfo
-next-env.d.ts
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
 
+# 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
-.env*.local
+.now
+.env.local
+
+.DS_Store

apps/example-nextjs/README.md

@@ -68,6 +68,7 @@ You **can** skip configuring a database and come back to it later if you want.
 For more information about setting up a database, please check out the following links:
 
 * Docs: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
+* Adapters Repo: [nextauthjs/adapters](https://github.com/nextauthjs/adapters)
 
 ### 3. Configure Authentication Providers
 

apps/example-nextjs/components/footer.tsx

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

apps/example-nextjs/components/header.tsx

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

apps/example-nextjs/components/layout.tsx

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

apps/example-nextjs/middleware.ts

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

apps/example-nextjs/package.json

@@ -1,15 +1,19 @@
 {
+  "name": "next-auth-example",
+  "version": "0.0.0",
   "private": true,
-  "description": "An example project for NextAuth.js with Next.js",
+  "description": "An example project for NextAuth.js",
   "repository": "https://github.com/nextauthjs/next-auth-example.git",
   "bugs": {
     "url": "https://github.com/nextauthjs/next-auth/issues"
   },
   "homepage": "https://next-auth-example.vercel.app",
+  "main": "",
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "types": "tsc --noEmit"
   },
   "author": "Iain Collins <me@iaincollins.com>",
   "contributors": [
@@ -17,16 +21,20 @@
     "Nico Domino <yo@ndo.dev>",
     "Lluis Agusti <hi@llu.lu>"
   ],
+  "license": "ISC",
   "dependencies": {
-    "next": "latest",
+    "next": "^12.0.11-canary.4",
     "next-auth": "latest",
-    "nodemailer": "^6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "nodemailer": "^6.6.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/node": "^17",
-    "@types/react": "^18.0.15",
-    "typescript": "^4"
+    "@types/node": "^17.0.14",
+    "@types/react": "^17.0.39",
+    "typescript": "^4.5.5"
+  },
+  "prettier": {
+    "semi": false
   }
 }

apps/example-nextjs/pages/_app.tsx

@@ -1,17 +1,12 @@
 import { SessionProvider } from "next-auth/react"
-import "./styles.css"
-
 import type { AppProps } from "next/app"
-import type { Session } from "next-auth"
+import "./styles.css"
 
 // 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: { session, ...pageProps },
-}: AppProps<{ session: Session }>) {
+export default function App({ Component, pageProps }: AppProps) {
   return (
-    <SessionProvider session={session}>
+    <SessionProvider session={pageProps.session} refetchInterval={0}>
       <Component {...pageProps} />
     </SessionProvider>
   )

apps/example-nextjs/pages/admin/_middleware.ts

@@ -0,0 +1,8 @@
+import { withAuth } from "next-auth/middleware"
+
+// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
+export default withAuth({
+  callbacks: {
+    authorized: ({ token }) => token?.userRole === "admin",
+  },
+})

apps/example-nextjs/pages/admin/index.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/layout"
+import Layout from "../../components/layout"
 
 export default function Page() {
   return (

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

@@ -1,4 +1,4 @@
-import NextAuth, { NextAuthOptions } from "next-auth"
+import NextAuth from "next-auth"
 import GoogleProvider from "next-auth/providers/google"
 import FacebookProvider from "next-auth/providers/facebook"
 import GithubProvider from "next-auth/providers/github"
@@ -9,7 +9,7 @@ import Auth0Provider from "next-auth/providers/auth0"
 
 // For more information on each option (and a full list of options) go to
 // https://next-auth.js.org/configuration/options
-export const authOptions: NextAuthOptions = {
+export default NextAuth({
   // https://next-auth.js.org/configuration/providers/oauth
   providers: [
     /* EmailProvider({
@@ -18,7 +18,7 @@ export const authOptions: NextAuthOptions = {
        }),
     // Temporarily removing the Apple provider from the demo site as the
     // callback URL for it needs updating due to Vercel changing domains
-
+      
     Providers.Apple({
       clientId: process.env.APPLE_ID,
       clientSecret: {
@@ -60,6 +60,4 @@ export const authOptions: NextAuthOptions = {
       return token
     },
   },
-}
-
-export default NextAuth(authOptions)
+})

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

@@ -1,14 +1,10 @@
 // This is an example of how to read a JSON Web Token from an API route
 import { getToken } from "next-auth/jwt"
-
 import type { NextApiRequest, NextApiResponse } from "next"
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  // If you don't have the NEXTAUTH_SECRET environment variable set,
-  // you will have to pass your secret as `secret` to `getToken`
-  const token = await getToken({ req })
+const secret = process.env.NEXTAUTH_SECRET
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const token = await getToken({ req, secret })
   res.send(JSON.stringify(token, null, 2))
 }

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

@@ -1,23 +1,18 @@
 // This is an example of to protect an API route
-import { unstable_getServerSession } from "next-auth/next"
-import { authOptions } from "../auth/[...nextauth]"
-
+import { getSession } from "next-auth/react"
 import type { NextApiRequest, NextApiResponse } from "next"
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const session = await unstable_getServerSession(req, res, authOptions)
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const session = await getSession({ req })
 
   if (session) {
-    return res.send({
+    res.send({
       content:
         "This is protected content. You can access this content because you are signed in.",
     })
+  } else {
+    res.send({
+      error: "You must be signed in to view the protected content on this page.",
+    })
   }
-
-  res.send({
-    error: "You must be signed in to view the protected content on this page.",
-  })
 }

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

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

apps/example-nextjs/pages/me/_middleware.ts

@@ -0,0 +1,2 @@
+// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
+export { default } from "next-auth/middleware"

apps/example-nextjs/pages/me/index.tsx

@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react"
-import Layout from "../components/layout"
+import Layout from "../../components/layout"
 
 export default function MePage() {
   const { data } = useSession()

apps/example-nextjs/pages/protected.tsx

@@ -4,7 +4,8 @@ import Layout from "../components/layout"
 import AccessDenied from "../components/access-denied"
 
 export default function ProtectedPage() {
-  const { data: session } = useSession()
+  const { data: session, status } = useSession()
+  const loading = status === "loading"
   const [content, setContent] = useState()
 
   // Fetch content from protected route
@@ -18,7 +19,9 @@ 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

@@ -1,22 +1,24 @@
-import { unstable_getServerSession } from "next-auth/next"
-import { authOptions } from "./api/auth/[...nextauth]"
+import { useSession, getSession } from "next-auth/react"
 import Layout from "../components/layout"
+import type { NextPageContext } from "next"
 
-import type { GetServerSidePropsContext } from "next"
-import type { Session } from "next-auth"
-
-export default function ServerSidePage({ session }: { session: Session }) {
+export default function ServerSidePage() {
   // As this page uses Server Side Rendering, the `session` will be already
   // populated on render without needing to go through a loading stage.
+  // This is possible because of the shared context configured in `_app.js` that
+  // is used by `useSession()`.
+  const { data: session, status } = useSession()
+  const loading = status === "loading"
+
   return (
     <Layout>
       <h1>Server Side Rendering</h1>
       <p>
-        This page uses the <strong>unstable_getServerSession()</strong> method
-        in <strong>getServerSideProps()</strong>.
+        This page uses the universal <strong>getSession()</strong> method in{" "}
+        <strong>getServerSideProps()</strong>.
       </p>
       <p>
-        Using <strong>unstable_getServerSession()</strong> in{" "}
+        Using <strong>getSession()</strong> in{" "}
         <strong>getServerSideProps()</strong> is the recommended approach if you
         need to support Server Side Rendering with authentication.
       </p>
@@ -28,20 +30,15 @@ export default function ServerSidePage({ session }: { session: Session }) {
         The disadvantage of Server Side Rendering is that this page is slower to
         render.
       </p>
-      <pre>{JSON.stringify(session, null, 2)}</pre>
     </Layout>
   )
 }
 
 // Export the `session` prop to use sessions with Server Side Rendering
-export async function getServerSideProps(context: GetServerSidePropsContext) {
+export async function getServerSideProps(context: NextPageContext) {
   return {
     props: {
-      session: await unstable_getServerSession(
-        context.req,
-        context.res,
-        authOptions
-      ),
+      session: await getSession(context),
     },
   }
 }

apps/playground-nuxt/.editorconfig

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

apps/playground-nuxt/.eslintignore

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

apps/playground-nuxt/.eslintrc

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

apps/playground-nuxt/.gitignore

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

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

apps/playground-nuxt/README.md

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

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

apps/playground-nuxt/handler.d.ts

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

apps/playground-nuxt/package.json

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

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

apps/playground-nuxt/playground/app.vue

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

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

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

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

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

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

@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { useSession, signIn, signOut, computed } from '#imports'
-
-const { data: session, status } = useSession()
-const loading = computed(() => status.value === 'loading')
-</script>
-
-<template>
-  <header>
-    <div class="signedInStatus">
-      <p :class="['nojs-show', !session && loading ? 'loading' : 'loaded']">
-        <template v-if="session">
-          <span v-if="session.user?.image" :style="{ backgroundImage: `url(${session.user.image})` }" class="avatar" />
-          <span class="signedInText">
-            <small>Signed in as</small><br>
-            <strong>{{ session.user?.email || session.user?.name }}</strong>
-          </span>
-          <a href="/api/auth/signout" class="button" @click.prevent="signOut">Sign out</a>
-        </template>
-        <template v-else>
-          <span class="notSignedInText">You are not signed in</span>
-          <a href="/api/auth/signin" class="buttonPrimary" @click.prevent="signIn">Sign in</a>
-        </template>
-      </p>
-    </div>
-    <nav>
-      <ul class="navItems">
-        <li class="navItem">
-          <NuxtLink to="/">
-            Home
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/client">
-            Client
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/server">
-            Server
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/protected">
-            Protected
-          </NuxtLink>
-        </li>
-        <li class="navItem">
-          <NuxtLink to="/api-example">
-            API
-          </NuxtLink>
-        </li>
-      </ul>
-    </nav>
-  </header>
-</template>
-
-<style>
-.nojs-show {
-  opacity: 1;
-  top: 0;
-}
-
-.signedInStatus {
-display: block;
-min-height: 4rem;
-width: 100%;
-}
-
-.loading,
-.loaded {
-position: relative;
-top: 0;
-opacity: 1;
-overflow: hidden;
-border-radius: 0 0 .6rem .6rem;
-padding: .6rem 1rem;
-margin: 0;
-background-color: rgba(0,0,0,.05);
-transition: all 0.2s ease-in;
-}
-
-.loading {
-top: -2rem;
-opacity: 0;
-}
-
-.signedInText,
-.notSignedInText {
-position: absolute;
-padding-top: .8rem;
-left: 1rem;
-right: 6.5rem;
-white-space: nowrap;
-text-overflow: ellipsis;
-overflow: hidden;
-display: inherit;
-z-index: 1;
-line-height: 1.3rem;
-}
-
-.signedInText {
-padding-top: 0rem;
-left: 4.6rem;
-}
-
-.avatar {
-border-radius: 2rem;
-float: left;
-height: 2.8rem;
-width: 2.8rem;
-background-color: white;
-background-size: cover;
-background-repeat: no-repeat;
-}
-
-.button,
-.buttonPrimary {
-float: right;
-margin-right: -.4rem;
-font-weight: 500;
-border-radius: .3rem;
-cursor: pointer;
-font-size: 1rem;
-line-height: 1.4rem;
-padding: .7rem .8rem;
-position: relative;
-z-index: 10;
-background-color: transparent;
-color: #555;
-}
-
-.buttonPrimary {
-background-color: #346df1;
-border-color: #346df1;
-color: #fff;
-text-decoration: none;
-padding: .7rem 1.4rem;
-}
-
-.buttonPrimary:hover {
-box-shadow: inset 0 0 5rem rgba(0,0,0,0.2)
-}
-
-.navItems {
-margin-bottom: 2rem;
-padding: 0;
-list-style: none;
-}
-
-.navItem {
-display: inline-block;
-margin-right: 1rem;
-}
-</style>

apps/playground-nuxt/playground/nuxt.config.ts

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

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

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

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <h1>API Example</h1>
-    <p>The examples below show responses from the example API endpoints.</p>
-    <p>
-      <em>You must be signed in to see responses.</em>
-    </p>
-    <h2>Session</h2>
-    <p>/api/examples/session</p>
-    <iframe src="/api/examples/session" />
-    <h2>JSON Web Token</h2>
-    <p>/api/examples/jwt</p>
-    <iframe src="/api/examples/jwt" />
-  </div>
-</template>

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

@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <h1>Client Side Rendering</h1>
-    <p>
-      This page uses the <strong>useSession()</strong> Vue Composable in the <strong>&lt;Header/&gt;</strong> component.
-    </p>
-    <p>
-      The <strong>useSession()</strong> Vue Composable is easy to use and allows pages to render very quickly.
-    </p>
-    <p>
-      The advantage of this approach is that session state is shared between pages by using a provided session via <strong>Vue Plugin</strong> so
-      that navigation between pages using <strong>useSession()</strong> is very fast.
-    </p>
-    <p>
-      The disadvantage of <strong>useSession()</strong> is that it requires client side JavaScript.
-    </p>
-  </div>
-</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/playground-nuxt/pnpm-workspace.yaml

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

apps/playground-nuxt/src/module.ts

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

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

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

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

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

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

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

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

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

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

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

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

apps/playground-nuxt/tsconfig.json

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

apps/playground-sveltekit/.env.example

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

apps/playground-sveltekit/.eslintrc.cjs

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

apps/playground-sveltekit/README.md

@@ -4,71 +4,84 @@ 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]/+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.
+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.
 
 ```ts
-import { NextAuth, options } from "$lib/next-auth"
+import NextAuth from "$lib"
+import GithubProvider from "next-auth/providers/github"
 
-export const { GET, POST } = NextAuth(options)
+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)
 ```
 
 ### Add [hook](https://kit.svelte.dev/docs/hooks)
 
 ```ts
-import type { Handle } from "@sveltejs/kit"
-import { getServerSession, options as nextAuthOptions } from "$lib/next-auth"
+import { getServerSession } from "$lib"
+import GithubProvider from "next-auth/providers/github"
 
-export const handle: Handle = async function handle({
-  event,
-  resolve,
-}): Promise<Response> {
+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 }) {
   const session = await getServerSession(event.request, nextAuthOptions)
   event.locals.session = session
 
   return resolve(event)
 }
-```
 
-### 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,
-  }
+export function getSession(event) {
+  return event.locals.session || {}
 }
 ```
 
-### Protecting a Route
+### Protecting a route
 
-```ts
-// src/lib/routes/protected/+page.ts
-import { redirect } from "@sveltejs/kit"
-import type { PageLoad } from "./$types"
+```html
+<script context="module">
+  export async function load({ session }) {
+    const { user } = session
 
-export const load: PageLoad = async ({ parent }) => {
-  const { session } = await parent()
-  if (!session?.user) {
-    throw redirect(302, "/")
+    if (!user) {
+      return {
+        status: 302,
+        redirect: "/",
+      }
+    }
+
+    return {
+      props: {
+        session,
+      },
+    }
   }
-  return {}
-}
+</script>
+
+<script>
+  export let session
+</script>
+
+<p>Session expiry: {session.expires}</p>
 ```
 
 ## Packaging lib

apps/playground-sveltekit/package.json

@@ -1,40 +1,36 @@
 {
   "name": "sveltekit-nextauth",
-  "private": true,
   "version": "0.0.1",
   "scripts": {
-    "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 ."
+    "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=. ."
   },
   "devDependencies": {
-    "@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.8.1",
-    "svelte-preprocess": "^4.10.7",
-    "tslib": "^2.4.0",
-    "typescript": "~4.8.2",
-    "vite": "^3.1.0"
+    "@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",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.10.1",
+    "tslib": "^2.3.1",
+    "typescript": "~4.5.4"
   },
   "type": "module",
   "dependencies": {
-    "cookie": "0.5.0",
-    "next-auth": "latest"
+    "cookie": "0.4.1",
+    "next-auth": "^4.2.1"
   },
   "prettier": {
     "semi": false,

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

@@ -1,30 +1,13 @@
 /// <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 global {
-  declare namespace App {
-    interface Locals {
-      session: AppSession
-    }
+declare namespace App {
+  interface Locals {}
 
-    interface Platform {}
+  interface Platform {}
 
-    interface Session extends AppSession {}
+  interface Session {}
 
-    interface Stuff {}
-  }
+  interface Stuff {}
 }

apps/playground-sveltekit/src/app.html

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