fix: validate provider existence before looking for protection property (#1687)

* Fix validation of provider existence before looking for protection property

* Use optional chaining

.env.local.example

@@ -1,8 +1,13 @@
-# Rename file to .env.local and populate values
+# Rename file to .env.local (or .env) and populate values
 # to be able to run the dev app
 
 NEXTAUTH_URL=http://localhost:3000
-SECRET= Linux: `openssl rand -hex 32` or https://generate-secret.now.sh/32
+
+# You can use `openssl rand -hex 32` or 
+# https://generate-secret.now.sh/32 to generate a secret.
+# Note: Changing a secret may invalidate existing sessions
+# and/or verificaion tokens.
+SECRET= 
 
 AUTH0_ID=
 AUTH0_DOMAIN=
@@ -12,4 +17,17 @@ GITHUB_ID=
 GITHUB_SECRET=
 
 TWITTER_ID=
-TWITTER_SECRET=
+TWITTER_SECRET=
+
+# Example configuration for a Gmail account (will need SMTP enabled)
+EMAIL_SERVER=smtps://user@gmail.com:password@smtp.gmail.com:465
+EMAIL_FROM=user@gmail.com
+
+# You can use any of these as the "DATABASE_URL" for
+# databases started with Docker using `npm run db:start`.
+# Note: If using with Prisma adapter, you need to use a `.env`
+# file rather than a `.env.local` file to configure env vars.
+# Postgres: DATABASE_URL=postgres://nextauth:password@127.0.0.1:5432/nextauth?synchronize=true
+# MySQL:    DATABASE_URL=mysql://nextauth:password@127.0.0.1:3306/nextauth?synchronize=true
+# MongoDB:  DATABASE_URL=mongodb://nextauth:password@127.0.0.1:27017/nextauth?synchronize=true
+DATABASE_URL=

.github/ISSUE_TEMPLATE/feature_request.md

@@ -9,7 +9,7 @@ assignees: ''
 A clear and concise description of the feature being proposed.
 
 **Purpose of proposed feature**
-A clear and concise description description of why this feature is necessary and what problems it solves.
+A clear and concise description of why this feature is necessary and what problems it solves.
 
 **Detail about proposed feature**
 A detailed description of how the proposal might work (if you have one).

.github/labeler.yml

@@ -1,5 +1,6 @@
 test:
   - test/**/*
+  - types/tests/**/*
 
 documentation:
   - www/**/*
@@ -19,3 +20,20 @@ databases:
   - test/docker/databases/**/*
   - www/docs/configuration/databases.md
   - test/fixtures/**/*
+
+core:
+  - src/**/*
+
+style:
+  - src/css/**/*
+
+client:
+  - src/client/**/*
+  - www/docs/getting-started/client.md
+
+pages:
+  - src/server/pages/**/*
+  - www/docs/configuration/pages.md
+
+TypeScript:
+  - types/**/*

.github/stale.yml

@@ -7,6 +7,7 @@ exemptLabels:
   - pinned
   - security
   - priority
+  - bug
 # Label to use when marking an issue as stale
 staleLabel: stale
 # Comment to post when marking an issue as stale. Set to `false` to disable

.github/workflows/build.yml

@@ -1,31 +1,30 @@
 # Simple check that the build is valid and no linting errors.
 # Currently is run as a seperate workflow as it's fast to fail.
-name: Build Test
+name: Lint/Build
 
 on:
   push:
     branches: 
      - main
-     - canary
+     - next
   pull_request:
-    branches: 
+    branches:
      - main
-     - canary
+     - next
 
 jobs:
-  build:
+  lint-and-build:
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
-
+        node-version: [10, 12, 14]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm run build
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
       - run: npm run lint
+      - run: npm run build

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,67 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main, next ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '43 17 * * 2'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/integration.yml

@@ -2,9 +2,10 @@ name: Integration Test
 
 on:
   push:
-    branches: [ main, canary ]
+    branches: 
+     - main
+     - next
   pull_request:
-    branches: [ main, canary ]
 
 jobs:
   test:
@@ -28,7 +29,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [10, 12, 14]
 
     steps:
       - uses: actions/checkout@v2
@@ -37,8 +38,8 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      # Install dependencies
-      - run: npm ci
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
 
       # Run tests (build library, build + start test app in Docker, run tests)
       - run: npm test

.github/workflows/labeler.yml

@@ -9,4 +9,3 @@ jobs:
     - uses: actions/labeler@main
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        sync-labels: true

.github/workflows/release.yml

@@ -2,29 +2,25 @@ name: Release
 on:
   push:
     branches:
-      - main
-      - canary
+      - 'main'
+      - 'next'
+      - '3.x'
+  pull_request:
 jobs:
   release:
-    name: Release
-    runs-on: ubuntu-20.04
+    name: 'Release'
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
       - name: Install dependencies
-        run: npm ci
-      - name: Lint  
-        run: npm run lint
-      - name: Build
-        run: npm run build
-      - name: Release
+        uses: bahmutov/npm-install@v1
+      - run: npm run build
+      - run: npx semantic-release@17
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -11,6 +11,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+yarn.lock
+
 # Dependencies
 node_modules
 
@@ -24,6 +26,7 @@ node_modules
 .docusaurus
 .cache-loader
 .next
+www/providers.json
 
 # VS
 /.vs/slnx.sqlite-journal
@@ -33,4 +36,7 @@ node_modules
 
 # GitHub Actions runner
 /actions-runner
-/_work
+/_work
+
+# Prisma migrations
+/prisma/migrations

.releaserc.json

@@ -1,39 +0,0 @@
-{
-  "branches": [
-    "main",
-    { "name": "canary", "prerelease": true }
-  ],
-  "plugins": [
-    ["@semantic-release/commit-analyzer", {
-      "preset": "conventionalcommits",
-      "releaseRules": [
-        { "breaking": true, "release": "major" },
-        { "revert": true, "release": "patch" },
-        { "type": "feat", "release": "minor" },
-        { "type": "fix", "release": "patch" },
-        { "type": "perf", "release": "patch" },
-        { "type": "docs", "release": "patch" }
-      ]
-    }],
-    ["@semantic-release/release-notes-generator", {
-      "preset": "conventionalcommits",
-      "presetConfig": {
-        "types": [
-          { "type": "feat", "section": "Features", "hidden": false },
-          { "type": "fix", "section": "Bug Fixes", "hidden": false },
-          { "type": "perf", "section": "Performance Improvements", "hidden": false },
-          { "type": "revert", "section": "Reverts", "hidden": false },
-          { "type": "docs", "section": "Documentation", "hidden": false },
-          { "type": "style", "section": "Styles", "hidden": false },
-          { "type": "chore", "section": "Miscellaneous Chores", "hidden": false },
-          { "type": "refactor", "section": "Code Refactoring", "hidden": false },
-          { "type": "test", "section": "Tests", "hidden": false },
-          { "type": "build", "section": "Build System", "hidden": false },
-          { "type": "ci", "section": "Continuous Integration", "hidden": false }
-        ]
-      }
-    }],
-    "@semantic-release/github",
-    "@semantic-release/npm"
-  ]
-}

CONTRIBUTING.md

@@ -13,10 +13,9 @@ 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.
 ### Pull Requests
 
-* The latest changes are always in `canary`, so please make your Pull Request against that branch.
+* 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
-* Rebasing in Pull Requests is preferred to keep a clean commit history (see below)
 * Run `npm run lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this extension](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs) to fix lint 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
@@ -89,7 +88,7 @@ We use [semantic-release](https://github.com/semantic-release/semantic-release)
 When accepting Pull Requests, make sure the following:
 
 * Use "Squash and merge"
-* Make sure you merge contributor PRs into `canary`
+* Make sure you merge contributor PRs into `main`
 * Rewrite the commit message to conform to the `Conventional Commits` style. Check the "Recommended Scopes" section for further advice.
 * 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.)
 

FUNDING.yml

@@ -0,0 +1,3 @@
+# https://docs.github.com/en/github/administering-a-repository/displaying-a-sponsor-button-in-your-repository
+
+github: [balazsorban44]

README.md

@@ -7,12 +7,25 @@
    Open Source. Full Stack. Own Your Data.
    </p>
    <p align="center" style="align: center;">
-      <img src="https://github.com/nextauthjs/next-auth/workflows/Build%20Test/badge.svg" alt="Build Test" />
-      <img src="https://github.com/nextauthjs/next-auth/workflows/Integration%20Test/badge.svg" alt="Integration Test" />
-      <img src="https://img.shields.io/bundlephobia/minzip/next-auth" alt="Bundle Size"/>
-      <img src="https://img.shields.io/npm/dm/next-auth" alt="Downloads" />
-      <img src="https://img.shields.io/github/stars/nextauthjs/next-auth" alt="Github Stars" />
-      <img src="https://img.shields.io/github/v/release/nextauthjs/next-auth?include_prereleases" alt="Github Release" />
+      <a href="https://github.com/nextauthjs/next-auth/actions?query=workflow%3ARelease">
+        <img src="https://github.com/nextauthjs/next-auth/workflows/Release/badge.svg" alt="Release" />
+      </a>
+      <a href="https://github.com/nextauthjs/next-auth/actions?query=workflow%3A%22Integration+Test%22">
+        <img src="https://github.com/nextauthjs/next-auth/workflows/Integration%20Test/badge.svg" alt="Integration Test" />
+      </a>
+      <a href="https://bundlephobia.com/result?p=next-auth">
+        <img src="https://img.shields.io/bundlephobia/minzip/next-auth" alt="Bundle Size"/>
+      </a>
+      <a href="https://www.npmtrends.com/next-auth">
+        <img src="https://img.shields.io/npm/dm/next-auth" alt="Downloads" />
+      </a>
+      <a href="https://github.com/nextauthjs/next-auth/stargazers">
+        <img src="https://img.shields.io/github/stars/nextauthjs/next-auth" alt="Github Stars" />
+      </a>
+      <a href="https://www.npmjs.com/package/next-auth">
+        <img src="https://img.shields.io/github/v/release/nextauthjs/next-auth?label=latest" alt="Github Stable Release" />
+      </a>
+      <img src="https://img.shields.io/github/v/release/nextauthjs/next-auth?include_prereleases&label=prerelease&sort=semver" alt="Github Prelease" />
    </p>
 </p>
 

components/access-denied.js

@@ -5,11 +5,14 @@ export default function AccessDenied () {
     <>
       <h1>Access Denied</h1>
       <p>
-        <a href="/api/auth/signin"
-           onClick={(e) => {
-           e.preventDefault()
-           signIn()
-        }}>You must be signed in to view this page</a>
+        <a
+          href='/api/auth/signin'
+          onClick={(e) => {
+            e.preventDefault()
+            signIn()
+          }}
+        >You must be signed in to view this page
+        </a>
       </p>
     </>
   )

components/header.js

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { signIn, signOut, useSession } from 'next-auth/client'
-import * as client from 'next-auth/client'
 import styles from './header.module.css'
 
 // The approach used in this component shows how to built a sign in and sign out
@@ -26,7 +25,7 @@ export default function Header () {
                 You are not signed in
               </span>
               <a
-                href="/api/auth/signin"
+                href='/api/auth/signin'
                 className={styles.buttonPrimary}
                 onClick={(e) => {
                   e.preventDefault()
@@ -51,7 +50,7 @@ export default function Header () {
                 <strong>{session.user.email || session.user.name}</strong>
               </span>
               <a
-                href="/api/auth/signout"
+                href='/api/auth/signout'
                 className={styles.button}
                 onClick={(e) => {
                   e.preventDefault()
@@ -96,6 +95,16 @@ export default function Header () {
               <a>API</a>
             </Link>
           </li>
+          <li className={styles.navItem}>
+            <Link href='/credentials'>
+              <a>Credentials</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href='/email'>
+              <a>Email</a>
+            </Link>
+          </li>
         </ul>
       </nav>
     </header>

jsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "next-auth": ["./src/server"],
-      "next-auth/adapters": ["./src/adapters"],
-      "next-auth/client": ["./src/client"],
-      "next-auth/jwt": ["./src/lib/jwt"],
-      "next-auth/providers": ["./src/providers"]
-    }
-  }
-}

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -29,8 +29,8 @@
     "prepublishOnly": "npm run build",
     "publish:beta": "npm publish --tag beta",
     "publish:canary": "npm publish --tag canary",
-    "lint": "standard",
-    "lint:fix": "standard --fix"
+    "lint": "ts-standard",
+    "lint:fix": "ts-standard --fix"
   },
   "files": [
     "dist",
@@ -50,7 +50,7 @@
     "oauth": "^0.9.15",
     "pkce-challenge": "^2.1.0",
     "preact": "^10.4.1",
-    "preact-render-to-string": "^5.1.7",
+    "preact-render-to-string": "^5.1.14",
     "querystring": "^0.2.0",
     "require_optional": "^1.0.1",
     "typeorm": "^0.2.30"
@@ -64,21 +64,24 @@
     "mysql": "^2.18.1",
     "mssql": "^6.2.1",
     "pg": "^8.2.1",
-    "@prisma/client": "^2.12.0"
+    "@prisma/client": "^2.16.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
+    "@prisma/client": "^2.16.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/github": "^7.2.0",
     "@semantic-release/npm": "7.0.8",
     "@semantic-release/release-notes-generator": "^9.0.1",
+    "@types/react": "^17.0.0",
     "autoprefixer": "^9.7.6",
     "babel-preset-preact": "^2.0.0",
     "conventional-changelog-conventionalcommits": "4.4.0",
     "cssnano": "^4.1.10",
     "dotenv": "^8.2.0",
+    "eslint": "^7.19.0",
     "mocha": "^8.1.3",
     "mongodb": "^3.5.9",
     "mssql": "^6.2.1",
@@ -87,18 +90,31 @@
     "pg": "^8.2.1",
     "postcss-cli": "^7.1.1",
     "postcss-nested": "^4.2.1",
+    "prisma": "^2.16.1",
     "puppeteer": "^5.2.1",
     "puppeteer-extra": "^3.1.15",
     "puppeteer-extra-plugin-stealth": "^2.6.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "standard": "^16.0.3"
+    "ts-standard": "^10.0.0",
+    "typescript": "^4.1.3"
   },
-  "standard": {
+  "ts-standard": {
+    "project": "./tsconfig.json",
     "ignore": [
       "test/",
-      "pages/",
-      "components/"
+      "next-env.d.ts"
+    ],
+    "globals": [
+      "localStorage",
+      "location",
+      "fetch"
     ]
-  }
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/balazsorban44"
+    }
+  ]
 }

pages/api-example.js

@@ -8,10 +8,10 @@ export default function Page () {
       <p><em>You must be signed in to see responses.</em></p>
       <h2>Session</h2>
       <p>/api/examples/session</p>
-      <iframe src="/api/examples/session"/>
+      <iframe src='/api/examples/session' />
       <h2>JSON Web Token</h2>
       <p>/api/examples/jwt</p>
-      <iframe src="/api/examples/jwt"/>
+      <iframe src='/api/examples/jwt' />
     </Layout>
   )
-}
+}

pages/api/auth/[...nextauth].js

@@ -1,92 +1,61 @@
-import NextAuth from "next-auth"
-import Providers from "next-auth/providers"
+import NextAuth from 'next-auth'
+import Providers from 'next-auth/providers'
+
+// import Adapters from 'next-auth/adapters'
+// import { PrismaClient } from '@prisma/client'
+// const prisma = new PrismaClient()
 
 export default NextAuth({
-  // https://next-auth.js.org/configuration/providers
   providers: [
+    Providers.Email({
+      server: process.env.EMAIL_SERVER,
+      from: process.env.EMAIL_FROM
+    }),
     Providers.GitHub({
       clientId: process.env.GITHUB_ID,
-      clientSecret: process.env.GITHUB_SECRET,
+      clientSecret: process.env.GITHUB_SECRET
     }),
     Providers.Auth0({
       clientId: process.env.AUTH0_ID,
       clientSecret: process.env.AUTH0_SECRET,
       domain: process.env.AUTH0_DOMAIN,
-      protection: "pkce"
+      protection: 'pkce'
     }),
     Providers.Twitter({
       clientId: process.env.TWITTER_ID,
-      clientSecret: process.env.TWITTER_SECRET,
+      clientSecret: process.env.TWITTER_SECRET
     }),
+    Providers.Credentials({
+      name: 'Credentials',
+      credentials: {
+        password: { label: 'Password', type: 'password' }
+      },
+      async authorize (credentials) {
+        if (credentials.password === 'password') {
+          return {
+            id: 1,
+            name: 'Fill Murray',
+            email: 'bill@fillmurray.com',
+            image: 'https://www.fillmurray.com/64/64'
+          }
+        }
+        return null
+      }
+    })
   ],
-  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
-  // https://next-auth.js.org/configuration/databases
-  //
-  // Notes:
-  // * You must to install an appropriate node_module for your database
-  // * The Email provider requires a database (OAuth providers do not)
-
-  // The secret should be set to a reasonably long random string.
-  // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
-  // a separate secret is defined explicitly for encrypting the JWT.
-
-  session: {
-    // Use JSON Web Tokens for session instead of database sessions.
-    // This option can be used with or without a database for users/accounts.
-    // Note: `jwt` is automatically set to `true` if no database is specified.
-    jwt: true,
-
-    // Seconds - How long until an idle session expires and is no longer valid.
-    // maxAge: 30 * 24 * 60 * 60, // 30 days
-
-    // Seconds - Throttle how frequently to write to database to extend a session.
-    // Use it to limit write operations. Set to 0 to always update the database.
-    // Note: This option is ignored if using JSON Web Tokens
-    // updateAge: 24 * 60 * 60, // 24 hours
-  },
-
-  // JSON Web tokens are only used for sessions if the `jwt: true` session
-  // option is set - or by default if no database is specified.
-  // https://next-auth.js.org/configuration/options#jwt
   jwt: {
     encryption: true,
-    secret: process.env.SECRET,
-    // A secret to use for key generation (you should set this explicitly)
-    // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
-    // Set to true to use encryption (default: false)
-    // encryption: true,
-    // You can define your own encode/decode functions for signing and encryption
-    // if you want to override the default behaviour.
-    // encode: async ({ secret, token, maxAge }) => {},
-    // decode: async ({ secret, token, maxAge }) => {},
+    secret: process.env.SECRET
   },
-
-  // You can define custom pages to override the built-in pages.
-  // The routes shown here are the default URLs that will be used when a custom
-  // pages is not specified for that route.
-  // https://next-auth.js.org/configuration/pages
-  pages: {
-    // signIn: '/api/auth/signin',  // Displays signin buttons
-    // signOut: '/api/auth/signout', // Displays form with sign out button
-    // error: '/api/auth/error', // Error code passed in query string as ?error=
-    // verifyRequest: '/api/auth/verify-request', // Used for check email page
-    // newUser: null // If set, new users will be directed here on first sign in
-  },
-
-  // Callbacks are asynchronous functions you can use to control what happens
-  // when an action is performed.
-  // https://next-auth.js.org/configuration/callbacks
-  callbacks: {
-    // signIn: async (user, account, profile) => { return Promise.resolve(true) },
-    // redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
-    // session: async (session, user) => { return Promise.resolve(session) },
-    // jwt: async (token, user, account, profile, isNewUser) => { return Promise.resolve(token) }
-  },
-
-  // Events are useful for logging
-  // https://next-auth.js.org/configuration/events
-  events: {},
-
-  // Enable debug messages in the console if you are having problems
   debug: false,
+  theme: 'auto'
+
+  // Default Database Adapter (TypeORM)
+  // database: process.env.DATABASE_URL
+
+  // Prisma Database Adapter
+  // To configure this app to use the schema in `prisma/schema.prisma` run:
+  // npx prisma generate
+  // npx prisma migrate dev --preview-feature
+  // adapter: Adapters.Prisma.Adapter({ prisma })
 })

pages/api/examples/jwt.js

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

pages/api/examples/protected.js

@@ -9,4 +9,4 @@ export default async (req, res) => {
   } else {
     res.send({ error: 'You must be sign in to view the protected content on this page.' })
   }
-}
+}

pages/api/examples/session.js

@@ -4,4 +4,4 @@ import { getSession } from 'next-auth/client'
 export default async (req, res) => {
   const session = await getSession({ req })
   res.send(JSON.stringify(session, null, 2))
-}
+}

pages/client.js

@@ -19,4 +19,4 @@ export default function Page () {
       </p>
     </Layout>
   )
-}
+}

pages/credentials.js

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { signIn, signOut, useSession } from 'next-auth/client'
+import Layout from 'components/layout'
+
+export default function Page () {
+  const [response, setResponse] = React.useState(null)
+  const handleLogin = (options) => async () => {
+    if (options.redirect) {
+      return signIn('credentials', options)
+    }
+    const response = await signIn('credentials', options)
+    setResponse(response)
+  }
+
+  const handleLogout = (options) => async () => {
+    if (options.redirect) {
+      return signOut(options)
+    }
+    const response = await signOut(options)
+    setResponse(response)
+  }
+
+  const [session] = useSession()
+
+  if (session) {
+    return (
+      <Layout>
+        <h1>Test different flows for Credentials logout</h1>
+        <span className='spacing'>Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button><br />
+        <span className='spacing'>No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button><br />
+        <p>Response:</p>
+        <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout>
+      <h1>Test different flows for Credentials login</h1>
+      <span className='spacing'>Default:</span>
+      <button onClick={handleLogin({ redirect: true, password: 'password' })}>Login</button><br />
+      <span className='spacing'>No redirect:</span>
+      <button onClick={handleLogin({ redirect: false, password: 'password' })}>Login</button><br />
+      <span className='spacing'>No redirect, wrong password:</span>
+      <button onClick={handleLogin({ redirect: false, password: '' })}>Login</button>
+      <p>Response:</p>
+      <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+    </Layout>
+  )
+}

pages/email.js

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

pages/policy.js

@@ -4,7 +4,7 @@ export default function Page () {
   return (
     <Layout>
       <p>
-        This is an example site to demonstrate how to use <a href={`https://next-auth.js.org`}>NextAuth.js</a> for authentication.
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
       </p>
       <h2>Terms of Service</h2>
       <p>
@@ -27,4 +27,4 @@ export default function Page () {
       </p>
     </Layout>
   )
-}
+}

pages/protected-ssr.js

@@ -5,7 +5,7 @@ import AccessDenied from '../components/access-denied'
 
 export default function Page ({ content, session }) {
   // If no session exists, display access denied message
-  if (!session) { return  <Layout><AccessDenied/></Layout> }
+  if (!session) { return <Layout><AccessDenied /></Layout> }
 
   // If session exists, display content
   return (
@@ -16,7 +16,7 @@ export default function Page ({ content, session }) {
   )
 }
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps (context) {
   const session = await getSession(context)
   let content = null
 

pages/protected.js

@@ -4,24 +4,24 @@ import Layout from '../components/layout'
 import AccessDenied from '../components/access-denied'
 
 export default function Page () {
-  const [ session, loading ] = useSession()
-  const [ content , setContent ] = useState()
+  const [session, loading] = useSession()
+  const [content, setContent] = useState()
 
   // Fetch content from protected route
-  useEffect(()=>{
+  useEffect(() => {
     const fetchData = async () => {
       const res = await fetch('/api/examples/protected')
       const json = await res.json()
       if (json.content) { setContent(json.content) }
     }
     fetchData()
-  },[session])
+  }, [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) { return  <Layout><AccessDenied/></Layout> }
+  if (!session) { return <Layout><AccessDenied /></Layout> }
 
   // If session exists, display content
   return (
@@ -30,4 +30,4 @@ export default function Page () {
       <p><strong>{content}</strong></p>
     </Layout>
   )
-}
+}

pages/server.js

@@ -1,4 +1,4 @@
-import { useSession, getSession } from 'next-auth/client'
+import { getSession } from 'next-auth/client'
 import Layout from '../components/layout'
 
 export default function Page () {
@@ -6,7 +6,6 @@ export default function Page () {
   // 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 [ session, loading ] = useSession()
 
   return (
     <Layout>
@@ -29,7 +28,7 @@ export default function Page () {
 }
 
 // Export the `session` prop to use sessions with Server Side Rendering
-export async function getServerSideProps(context) {
+export async function getServerSideProps (context) {
   return {
     props: {
       session: await getSession(context)

prisma/schema.prisma

@@ -0,0 +1,63 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Account {
+  id                 Int       @default(autoincrement()) @id
+  compoundId         String    @unique @map(name: "compound_id")
+  userId             Int       @map(name: "user_id")
+  providerType       String    @map(name: "provider_type")
+  providerId         String    @map(name: "provider_id")
+  providerAccountId  String    @map(name: "provider_account_id")
+  refreshToken       String?   @map(name: "refresh_token")
+  accessToken        String?   @map(name: "access_token")
+  accessTokenExpires DateTime? @map(name: "access_token_expires")
+  createdAt          DateTime  @default(now()) @map(name: "created_at")
+  updatedAt          DateTime  @default(now()) @map(name: "updated_at")
+
+  @@index([providerAccountId], name: "providerAccountId")
+  @@index([providerId], name: "providerId")
+  @@index([userId], name: "userId")
+
+  @@map(name: "accounts")
+}
+
+model Session {
+  id           Int      @default(autoincrement()) @id
+  userId       Int      @map(name: "user_id")
+  expires      DateTime
+  sessionToken String   @unique @map(name: "session_token")
+  accessToken  String   @unique @map(name: "access_token")
+  createdAt    DateTime @default(now()) @map(name: "created_at")
+  updatedAt    DateTime @default(now()) @map(name: "updated_at")
+
+  @@map(name: "sessions")
+}
+
+model User {
+  id            Int       @default(autoincrement()) @id
+  name          String?
+  email         String?   @unique
+  emailVerified DateTime? @map(name: "email_verified")
+  image         String?
+  createdAt     DateTime  @default(now()) @map(name: "created_at")
+  updatedAt     DateTime  @default(now()) @map(name: "updated_at")
+
+  @@map(name: "users")
+}
+
+model VerificationRequest {
+  id         Int      @default(autoincrement()) @id
+  identifier String
+  token      String   @unique
+  expires    DateTime
+  createdAt  DateTime  @default(now()) @map(name: "created_at")
+  updatedAt  DateTime  @default(now()) @map(name: "updated_at")
+
+  @@map(name: "verification_requests")
+}

release.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  branches: [
+    '+([0-9])?(.{+([0-9]),x}).x',
+    'main',
+    { name: 'next', prerelease: true }
+  ]
+}

src/adapters/example/index.js

@@ -1,84 +1,83 @@
 const Adapter = (config, options = {}) => {
   async function getAdapter (appOptions) {
+    const { logger } = appOptions
     // Display debug output if debug option enabled
-    function _debug (...args) {
-      if (appOptions.debug) {
-        console.log('[next-auth][debug]', ...args)
-      }
+    function debug (debugCode, ...args) {
+      logger.debug(`ADAPTER_${debugCode}`, ...args)
     }
 
     async function createUser (profile) {
-      _debug('createUser', profile)
+      debug('createUser', profile)
       return null
     }
 
     async function getUser (id) {
-      _debug('getUser', id)
+      debug('getUser', id)
       return null
     }
 
     async function getUserByEmail (email) {
-      _debug('getUserByEmail', email)
+      debug('getUserByEmail', email)
       return null
     }
 
     async function getUserByProviderAccountId (providerId, providerAccountId) {
-      _debug('getUserByProviderAccountId', providerId, providerAccountId)
+      debug('getUserByProviderAccountId', providerId, providerAccountId)
       return null
     }
 
     async function updateUser (user) {
-      _debug('updateUser', user)
+      debug('updateUser', user)
       return null
     }
 
     async function deleteUser (userId) {
-      _debug('deleteUser', userId)
+      debug('deleteUser', userId)
       return null
     }
 
     async function linkAccount (userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires) {
-      _debug('linkAccount', userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires)
+      debug('linkAccount', userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires)
       return null
     }
 
     async function unlinkAccount (userId, providerId, providerAccountId) {
-      _debug('unlinkAccount', userId, providerId, providerAccountId)
+      debug('unlinkAccount', userId, providerId, providerAccountId)
       return null
     }
 
     async function createSession (user) {
-      _debug('createSession', user)
+      debug('createSession', user)
       return null
     }
 
     async function getSession (sessionToken) {
-      _debug('getSession', sessionToken)
+      debug('getSession', sessionToken)
       return null
     }
 
     async function updateSession (session, force) {
-      _debug('updateSession', session)
+      debug('updateSession', session)
       return null
     }
 
     async function deleteSession (sessionToken) {
-      _debug('deleteSession', sessionToken)
+      debug('deleteSession', sessionToken)
       return null
     }
 
     async function createVerificationRequest (identifier, url, token, secret, provider) {
-      _debug('createVerificationRequest', identifier)
+      debug('createVerificationRequest', identifier)
       return null
     }
 
     async function getVerificationRequest (identifier, token, secret, provider) {
-      _debug('getVerificationRequest', identifier, token)
+      debug('getVerificationRequest', identifier, token)
       return null
     }
 
     async function deleteVerificationRequest (identifier, token, secret, provider) {
-      _debug('deleteVerification', identifier, token)
+      debug('deleteVerification', identifier, token)
       return null
     }
 

src/adapters/prisma/index.js

@@ -1,7 +1,6 @@
 import { createHash, randomBytes } from 'crypto'
 
 import { CreateUserError } from '../../lib/errors'
-import logger from '../../lib/logger'
 
 const Adapter = (config) => {
   const {
@@ -21,6 +20,7 @@ const Adapter = (config) => {
   }
 
   async function getAdapter (appOptions) {
+    const { logger } = appOptions
     function debug (debugCode, ...args) {
       logger.debug(`PRISMA_${debugCode}`, ...args)
     }
@@ -280,11 +280,15 @@ const Adapter = (config) => {
         // Hash token provided with secret before trying to match it with database
         // @TODO Use bcrypt instead of salted SHA-256 hash for token
         const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-        const verificationRequest = await prisma[VerificationRequest].findUnique({ where: { token: hashedToken } })
-
+        const verificationRequest = await prisma[VerificationRequest].findFirst({
+          where: {
+            identifier,
+            token: hashedToken
+          }
+        })
         if (verificationRequest && verificationRequest.expires && new Date() > verificationRequest.expires) {
           // Delete verification entry so it cannot be used again
-          await prisma[VerificationRequest].delete({ where: { token: hashedToken } })
+          await prisma[VerificationRequest].deleteMany({ where: { identifier, token: hashedToken } })
           return null
         }
 
@@ -300,7 +304,7 @@ const Adapter = (config) => {
       try {
         // Delete verification entry so it cannot be used again
         const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-        await prisma[VerificationRequest].delete({ where: { token: hashedToken } })
+        await prisma[VerificationRequest].deleteMany({ where: { identifier, token: hashedToken } })
       } catch (error) {
         logger.error('DELETE_VERIFICATION_REQUEST_ERROR', error)
         return Promise.reject(new Error('DELETE_VERIFICATION_REQUEST_ERROR', error))

src/adapters/typeorm/index.js

@@ -6,7 +6,7 @@ import { CreateUserError } from '../../lib/errors'
 import adapterConfig from './lib/config'
 import adapterTransform from './lib/transform'
 import Models from './models'
-import logger from '../../lib/logger'
+
 import { updateConnectionEntities } from './lib/utils'
 
 const Adapter = (typeOrmConfig, options = {}) => {
@@ -41,6 +41,12 @@ const Adapter = (typeOrmConfig, options = {}) => {
   let connection = null
 
   async function getAdapter (appOptions) {
+    const { logger } = appOptions
+    // Display debug output if debug option enabled
+    function debug (debugCode, ...args) {
+      logger.debug(`TYPEORM_${debugCode}`, ...args)
+    }
+
     // Helper function to reuse / restablish connections
     // (useful if they drop when after being idle)
     async function _connect () {
@@ -77,12 +83,6 @@ const Adapter = (typeOrmConfig, options = {}) => {
     // https://github.com/typeorm/typeorm/blob/master/docs/entity-manager-api.md
     const { manager } = connection
 
-    // Display debug output if debug option enabled
-    // @TODO Refactor logger so is passed in appOptions
-    function debug (debugCode, ...args) {
-      logger.debug(`TYPEORM_${debugCode}`, ...args)
-    }
-
     // The models are primarily designed for ANSI SQL database, but some
     // flexiblity is required in the adapter to support non-SQL databases such
     // as MongoDB which have different pragmas.
@@ -331,7 +331,7 @@ const Adapter = (typeOrmConfig, options = {}) => {
 
         if (verificationRequest && verificationRequest.expires && new Date() > new Date(verificationRequest.expires)) {
           // Delete verification entry so it cannot be used again
-          await manager.delete(VerificationRequest, { token: hashedToken })
+          await manager.delete(VerificationRequest, { identifier, token: hashedToken })
           return null
         }
 
@@ -347,7 +347,7 @@ const Adapter = (typeOrmConfig, options = {}) => {
       try {
         // Delete verification entry so it cannot be used again
         const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-        await manager.delete(VerificationRequest, { token: hashedToken })
+        await manager.delete(VerificationRequest, { identifier, token: hashedToken })
       } catch (error) {
         logger.error('DELETE_VERIFICATION_REQUEST_ERROR', error)
         return Promise.reject(new Error('DELETE_VERIFICATION_REQUEST_ERROR', error))

src/client/index.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react'
+import { GetServerSidePropsContext } from 'next'
+
+interface DefaultSession {
+  user: {
+    name: string | null
+    email: string | null
+    image: string | null
+  }
+  expires: Date | string
+}
+
+interface BroadcastMessage {
+  event?: 'session'
+  data?: {
+    trigger?: 'signout' | 'getSession'
+  }
+  clientId: string
+  timestamp: number
+}
+
+type GetSession<S extends Record<string, unknown> = DefaultSession> = (options: {
+  ctx?: GetServerSidePropsContext
+  req?: GetServerSidePropsContext['req']
+  event?: 'storage' | 'timer' | 'hidden' | string
+  triggerEvent?: boolean
+}) => Promise<S>
+
+export interface NextAuthConfig {
+  baseUrl: string
+  basePath: string
+  baseUrlServer: string
+  basePathServer: string
+  /** 0 means disabled (don't send); 60 means send every 60 seconds */
+  keepAlive: number
+  /** 0 means disabled (only use cache); 60 means sync if last checked > 60 seconds ago */
+  clientMaxAge: number
+  /** Used for timestamp since last sycned (in seconds) */
+  _clientLastSync: number
+  /** Stores timer for poll interval */
+  _clientSyncTimer: ReturnType<typeof setTimeout>
+  /** Tracks if event listeners have been added */
+  _eventListenersAdded: boolean
+  /** Stores last session response from hook */
+  _clientSession: DefaultSession | null | undefined
+  /** Used to store to function export by getSession() hook */
+  _getSession: any
+}
+
+export type GetCsrfToken = (
+  ctxOrReq: GetServerSidePropsContext & GetServerSidePropsContext['req']
+) => Promise<string | null>
+
+export interface SessionOptions {
+  baseUrl?: string
+  basePath?: string
+  clientMaxAge?: number
+  keepAlive?: number
+}
+
+export type Provider<S extends Record<string, unknown> = DefaultSession > = (options: {
+  children: React.ReactNode
+  session: S
+  options: SessionOptions
+}) => React.ReactNode
+
+export type SetOptions = (options: SessionOptions) => void
+
+export type SessionContext = React.createContext<[DefaultSession | null, boolean]>
+
+export type UseSession = () => [any, boolean]
+
+export type GetProviders = () => Promise<any[]>
+
+// Sign in types
+
+export interface SignInOptions {
+  /** Defaults to the current URL. */
+  callbackUrl?: string
+  redirect?: boolean
+}
+export interface SignInResponse {
+  error: string | null
+  status: number
+  ok: boolean
+  url: string | null
+}
+
+export type SignIn<AuthorizationParams = Record<string, string>> = (
+  provider?: string,
+  options?: SignInOptions,
+  authorizationParams?: AuthorizationParams
+) => SignInResponse
+
+// Sign out types
+
+interface SignOutResponse<RedirectType extends boolean=true> {
+  /** Defaults to the current URL. */
+  callbackUrl?: string
+  redirect?: RedirectType
+}
+
+export type SignOut<RedirectType extends boolean = true> = (params: SignOutResponse<RedirectType>) => RedirectType extends true ? Promise<{url?: string} | undefined> : undefined

src/client/index.js

@@ -1,5 +1,3 @@
-/// Note: fetch() is built in to Next.js 9.4
-//
 // Note about signIn() and signOut() methods:
 //
 // On signIn() and signOut() we pass 'json: true' to request a response in JSON
@@ -10,9 +8,8 @@
 //
 // We use HTTP POST requests with CSRF Tokens to protect against CSRF attacks.
 
-/* global fetch:false */
 import { useState, useEffect, useContext, createContext, createElement } from 'react'
-import logger from '../lib/logger'
+import _logger, { proxyLogger } from '../lib/logger'
 import parseUrl from '../lib/parse-url'
 
 // This behaviour mirrors the default behaviour for getting the site name that
@@ -21,169 +18,81 @@ import parseUrl from '../lib/parse-url'
 //    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'.
+/** @type {import(".").NextAuthConfig} */
 const __NEXTAUTH = {
   baseUrl: parseUrl(process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
   basePath: parseUrl(process.env.NEXTAUTH_URL).basePath,
-  keepAlive: 0, // 0 == disabled (don't send); 60 == send every 60 seconds
-  clientMaxAge: 0, // 0 == disabled (only use cache); 60 == sync if last checked > 60 seconds ago
+  baseUrlServer: parseUrl(process.env.NEXTAUTH_URL_INTERNAL || process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
+  basePathServer: parseUrl(process.env.NEXTAUTH_URL_INTERNAL || process.env.NEXTAUTH_URL).basePath,
+  keepAlive: 0,
+  clientMaxAge: 0,
   // Properties starting with _ are used for tracking internal app state
-  _clientLastSync: 0, // used for timestamp since last sycned (in seconds)
-  _clientSyncTimer: null, // stores timer for poll interval
-  _eventListenersAdded: false, // tracks if event listeners have been added,
-  _clientSession: undefined, // stores last session response from hook,
-  // Generate a unique ID to make it possible to identify when a message
-  // was sent from this tab/window so it can be ignored to avoid event loops.
-  _clientId: Math.random().toString(36).substring(2) + Date.now().toString(36),
-  // Used to store to function export by getSession() hook
+  _clientLastSync: 0,
+  _clientSyncTimer: null,
+  _eventListenersAdded: false,
+  _clientSession: undefined,
   _getSession: () => {}
 }
 
+const logger = proxyLogger(_logger, __NEXTAUTH.basePath)
+
+const broadcast = BroadcastChannel()
+
 // Add event listners on load
-if (typeof window !== 'undefined') {
-  if (__NEXTAUTH._eventListenersAdded === false) {
-    __NEXTAUTH._eventListenersAdded = true
+if (typeof window !== 'undefined' && !__NEXTAUTH._eventListenersAdded) {
+  __NEXTAUTH._eventListenersAdded = true
+  // Listen for storage events and update session if event fired from
+  // another window (but suppress firing another event to avoid a loop)
+  // Fetch new session data but tell it to not to fire another event to
+  // avoid an infinite loop.
+  // Note: We could pass session data through and do something like
+  // `setData(message.data)` but that can cause problems depending
+  // on how the session object is being used in the client; it is
+  // more robust to have each window/tab fetch it's own copy of the
+  // session object rather than share it across instances.
+  broadcast.receive(() => __NEXTAUTH._getSession({ event: 'storage' }))
 
-    // Listen for storage events and update session if event fired from
-    // another window (but suppress firing another event to avoid a loop)
-    window.addEventListener('storage', async (event) => {
-      if (event.key === 'nextauth.message') {
-        const message = JSON.parse(event.newValue)
-        if (message?.event === 'session' && message.data) {
-          // Ignore storage events fired from the same window that created them
-          if (__NEXTAUTH._clientId === message.clientId) {
-            return
-          }
-
-          // Fetch new session data but pass 'true' to it not to fire an event to
-          // avoid an infinite loop.
-          //
-          // Note: We could pass session data through and do something like
-          // `setData(message.data)` but that can cause problems depending
-          // on how the session object is being used in the client; it is
-          // more robust to have each window/tab fetch it's own copy of the
-          // session object rather than share it across instances.
-          await __NEXTAUTH._getSession({ event: 'storage' })
-        }
-      }
-    })
-
-    // Listen for document visibilitychange events
-    let hidden, visibilityChange
-    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
-      hidden = 'hidden'
-      visibilityChange = 'visibilitychange'
-    } else if (typeof document.msHidden !== 'undefined') {
-      hidden = 'msHidden'
-      visibilityChange = 'msvisibilitychange'
-    } else if (typeof document.webkitHidden !== 'undefined') {
-      hidden = 'webkitHidden'
-      visibilityChange = 'webkitvisibilitychange'
-    }
-    const handleVisibilityChange = () => !document[hidden] && __NEXTAUTH._getSession({ event: visibilityChange })
-    document.addEventListener('visibilitychange', handleVisibilityChange, false)
-  }
-}
-
-// Method to set options. The documented way is to use the provider, but this
-// method is being left in as an alternative, that will be helpful if/when we
-// expose a vanilla JavaScript version that doesn't depend on React.
-const setOptions = ({
-  baseUrl,
-  basePath,
-  clientMaxAge,
-  keepAlive
-} = {}) => {
-  if (baseUrl) { __NEXTAUTH.baseUrl = baseUrl }
-  if (basePath) { __NEXTAUTH.basePath = basePath }
-  if (clientMaxAge) { __NEXTAUTH.clientMaxAge = clientMaxAge }
-  if (keepAlive) {
-    __NEXTAUTH.keepAlive = keepAlive
-
-    if (typeof window !== 'undefined' && keepAlive > 0) {
-      // Clear existing timer (if there is one)
-      if (__NEXTAUTH._clientSyncTimer !== null) { clearTimeout(__NEXTAUTH._clientSyncTimer) }
-
-      // Set next timer to trigger in number of seconds
-      __NEXTAUTH._clientSyncTimer = setTimeout(async () => {
-        // Only invoke keepalive when a session exists
-        if (__NEXTAUTH._clientSession) {
-          await __NEXTAUTH._getSession({ event: 'timer' })
-        }
-      }, keepAlive * 1000)
-    }
-  }
-}
-
-// Universal method (client + server)
-export const getSession = async ({ req, ctx, triggerEvent = true } = {}) => {
-  // If passed 'appContext' via getInitialProps() in _app.js then get the req
-  // object from ctx and use that for the req value to allow getSession() to
-  // work seemlessly in getInitialProps() on server side pages *and* in _app.js.
-  if (!req && ctx && ctx.req) { req = ctx.req }
-
-  const baseUrl = _apiBaseUrl()
-  const fetchOptions = req ? { headers: { cookie: req.headers.cookie } } : {}
-  const session = await _fetchData(`${baseUrl}/session`, fetchOptions)
-  if (triggerEvent) {
-    _sendMessage({ event: 'session', data: { trigger: 'getSession' } })
-  }
-  return session
-}
-
-// Universal method (client + server)
-const getCsrfToken = async ({ req, ctx } = {}) => {
-  // If passed 'appContext' via getInitialProps() in _app.js then get the req
-  // object from ctx and use that for the req value to allow getCsrfToken() to
-  // work seemlessly in getInitialProps() on server side pages *and* in _app.js.
-  if (!req && ctx && ctx.req) { req = ctx.req }
-
-  const baseUrl = _apiBaseUrl()
-  const fetchOptions = req ? { headers: { cookie: req.headers.cookie } } : {}
-  const data = await _fetchData(`${baseUrl}/csrf`, fetchOptions)
-  return data && data.csrfToken ? data.csrfToken : null
-}
-
-// Universal method (client + server); does not require request headers
-const getProviders = async () => {
-  const baseUrl = _apiBaseUrl()
-  return _fetchData(`${baseUrl}/providers`)
+  // Listen for document visibility change events and
+  // if visibility of the document changes, re-fetch the session.
+  document.addEventListener('visibilitychange', () => {
+    !document.hidden && __NEXTAUTH._getSession({ event: 'visibilitychange' })
+  }, false)
 }
 
 // Context to store session data globally
 const SessionContext = createContext()
 
-// Client side method
-export const useSession = (session) => {
-  // Try to use context if we can
-  const value = useContext(SessionContext)
-
-  // If we have no Provider in the tree, call the actual hook
-  if (value === undefined) {
-    return _useSessionHook(session)
-  }
-
-  return value
+/**
+ * React Hook that gives you access
+ * to the logged in user's session data.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#usesession)
+ * @type {import(".").UseSession}
+ */
+export function useSession (session) {
+  const context = useContext(SessionContext)
+  if (context) return context
+  return _useSessionHook(session)
 }
 
-// Internal hook for getting session from the api.
-const _useSessionHook = (session) => {
+function _useSessionHook (session) {
   const [data, setData] = useState(session)
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(!data)
 
   useEffect(() => {
-    const _getSession = async ({ event = null } = {}) => {
+    __NEXTAUTH._getSession = async ({ event = null } = {}) => {
       try {
-        const triggredByEvent = (event !== null)
-        const triggeredByStorageEvent = !!((event && event === 'storage'))
+        const triggredByEvent = event !== null
+        const triggeredByStorageEvent = event === 'storage'
 
         const clientMaxAge = __NEXTAUTH.clientMaxAge
         const clientLastSync = parseInt(__NEXTAUTH._clientLastSync)
-        const currentTime = Math.floor(new Date().getTime() / 1000)
+        const currentTime = _now()
         const clientSession = __NEXTAUTH._clientSession
 
         // Updates triggered by a storage event *always* trigger an update and we
         // always update if we don't have any value for the current session state.
-        if (triggeredByStorageEvent === false && clientSession !== undefined) {
+        if (!triggeredByStorageEvent && clientSession !== undefined) {
           if (clientMaxAge === 0 && triggredByEvent !== true) {
             // 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
@@ -207,13 +116,14 @@ const _useSessionHook = (session) => {
         // Update clientLastSync before making response to avoid repeated
         // invokations that would otherwise be triggered while we are still
         // waiting for a response.
-        __NEXTAUTH._clientLastSync = Math.floor(new Date().getTime() / 1000)
+        __NEXTAUTH._clientLastSync = _now()
 
         // If this call was invoked via a storage event (i.e. another window) then
         // tell getSession not to trigger an event when it calls to avoid an
         // infinate loop.
-        const triggerEvent = (triggeredByStorageEvent === false)
-        const newClientSessionData = await getSession({ triggerEvent })
+        const newClientSessionData = await getSession({
+          triggerEvent: !triggeredByStorageEvent
+        })
 
         // Save session state internally, just so we can track that we've checked
         // if a session exists at least once.
@@ -223,114 +133,280 @@ const _useSessionHook = (session) => {
         setLoading(false)
       } catch (error) {
         logger.error('CLIENT_USE_SESSION_ERROR', error)
+        setLoading(false)
       }
     }
 
-    __NEXTAUTH._getSession = _getSession
-
-    _getSession()
+    __NEXTAUTH._getSession()
   })
+
   return [data, loading]
 }
 
-// Client side method
-export const signIn = async (provider, args = {}, authorizationParams = {}) => {
+/**
+ * Can be called client or server side to return a session asynchronously.
+ * It calls `/api/auth/session` and returns a promise with a session object,
+ * or null if no session exists.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#getsession)
+ * @type {import(".").GetSession}
+ */
+export async function getSession (ctx) {
+  const session = await _fetchData('session', ctx)
+  if (ctx?.triggerEvent ?? 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)
+ * @type {import(".").GetCsrfToken}
+ */
+async function getCsrfToken (ctx) {
+  return (await _fetchData('csrf', ctx))?.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)
+ * @type {import(".").GetProviders}
+ */
+export async function getProviders () {
+  return _fetchData('providers')
+}
+
+/**
+ * Client-side method to initiate a signin flow
+ * or send the user to the signin page listing all possible providers.
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signin)
+ * @type {import(".").SignIn}
+ */
+export async function signIn (provider, options = {}, authorizationParams = {}) {
+  const {
+    callbackUrl = window.location,
+    redirect = true
+  } = options
+
   const baseUrl = _apiBaseUrl()
-  const callbackUrl = args?.callbackUrl ?? window.location
   const providers = await getProviders()
 
   // Redirect to sign in page if no valid provider specified
   if (!(provider in providers)) {
     // If Provider not recognized, redirect to sign in page
     window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
-  } else {
-    const signInUrl = (providers[provider].type === 'credentials')
-      ? `${baseUrl}/callback/${provider}`
-      : `${baseUrl}/signin/${provider}`
+    return
+  }
+  const isCredentials = providers[provider].type === 'credentials'
+  const isEmail = providers[provider].type === 'email'
+  const canRedirectBeDisabled = isCredentials || isEmail
 
-    // If is any other provider type, POST to provider URL with CSRF Token,
-    // callback URL and any other parameters supplied.
-    const fetchOptions = {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
-      },
-      body: _encodedForm({
-        ...args,
-        csrfToken: await getCsrfToken(),
-        callbackUrl: callbackUrl,
-        json: true
-      })
-    }
-    const _signInUrl = `${signInUrl}?${_encodedForm(authorizationParams)}`
-    const res = await fetch(_signInUrl, fetchOptions)
-    const data = await res.json()
-    window.location = data.url ?? callbackUrl
+  const signInUrl = isCredentials
+    ? `${baseUrl}/callback/${provider}`
+    : `${baseUrl}/signin/${provider}`
+
+  // If is any other provider type, POST to provider URL with CSRF Token,
+  // callback URL and any other parameters supplied.
+  const fetchOptions = {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: new URLSearchParams({
+      ...options,
+      csrfToken: await getCsrfToken(),
+      callbackUrl,
+      json: true
+    })
+  }
+  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
+  const res = await fetch(_signInUrl, fetchOptions)
+  const data = await res.json()
+  if (redirect || !canRedirectBeDisabled) {
+    const url = data.url ?? callbackUrl
+    window.location = 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
   }
 }
 
-// Client side method
-export const signOut = async (args = {}) => {
-  const callbackUrl = args.callbackUrl ?? window.location
-
+/**
+ * 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)
+ * @type {import(".").SignOut}
+ */
+export async function signOut (options = {}) {
+  const {
+    callbackUrl = window.location,
+    redirect = true
+  } = options
   const baseUrl = _apiBaseUrl()
   const fetchOptions = {
     method: 'post',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     },
-    body: _encodedForm({
+    body: new URLSearchParams({
       csrfToken: await getCsrfToken(),
-      callbackUrl: callbackUrl,
+      callbackUrl,
       json: true
     })
   }
   const res = await fetch(`${baseUrl}/signout`, fetchOptions)
   const data = await res.json()
-  _sendMessage({ event: 'session', data: { trigger: 'signout' } })
-  window.location = data.url ?? callbackUrl
+  broadcast.post({ event: 'session', data: { trigger: 'signout' } })
+  if (redirect) {
+    const url = data.url ?? callbackUrl
+    window.location = url
+    // If url contains a hash, the browser does not reload the page. We reload manually
+    if (url.includes('#')) window.location.reload()
+    return
+  }
+
+  await __NEXTAUTH._getSession({ event: 'storage' })
+
+  return data
 }
 
-// Provider to wrap the app in to make session data available globally
-export const Provider = ({ children, session, options }) => {
-  setOptions(options)
-  return createElement(SessionContext.Provider, { value: useSession(session) }, children)
-}
+// Method to set options. The documented way is to use the provider, but this
+// method is being left in as an alternative, that will be helpful if/when we
+// expose a vanilla JavaScript version that doesn't depend on React.
+/** @type {import(".").SetOptions} */
+export function setOptions ({ baseUrl, basePath, clientMaxAge, keepAlive } = {}) {
+  if (baseUrl) __NEXTAUTH.baseUrl = baseUrl
+  if (basePath) __NEXTAUTH.basePath = basePath
+  if (clientMaxAge) __NEXTAUTH.clientMaxAge = clientMaxAge
+  if (keepAlive) {
+    __NEXTAUTH.keepAlive = keepAlive
+    if (typeof window === 'undefined') return
 
-const _fetchData = async (url, options = {}) => {
-  try {
-    const res = await fetch(url, options)
-    const data = await res.json()
-    return Promise.resolve(Object.keys(data).length > 0 ? data : null) // Return null if data empty
-  } catch (error) {
-    logger.error('CLIENT_FETCH_ERROR', url, error)
-    return Promise.resolve(null)
+    // Clear existing timer (if there is one)
+    if (__NEXTAUTH._clientSyncTimer !== null) {
+      clearTimeout(__NEXTAUTH._clientSyncTimer)
+    }
+
+    // Set next timer to trigger in number of seconds
+    __NEXTAUTH._clientSyncTimer = setTimeout(async () => {
+      // Only invoke keepalive when a session exists
+      if (!__NEXTAUTH._clientSession) return
+      await __NEXTAUTH._getSession({ event: 'timer' })
+    }, keepAlive * 1000)
   }
 }
 
-const _apiBaseUrl = () => {
+/**
+ * Provider to wrap the app in to make session data available globally.
+ * Can also be used to throttle the number of requests to the endpoint
+ * `/api/auth/session`.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#provider)
+ * @type {import(".").Provider}
+ */
+export function Provider ({ children, session, options }) {
+  setOptions(options)
+  return createElement(
+    SessionContext.Provider,
+    { value: useSession(session) },
+    children
+  )
+}
+
+/**
+ * If passed 'appContext' via getInitialProps() in _app.js
+ * then get the req object from ctx and use that for the
+ * req value to allow _fetchData to
+ * work seemlessly in getInitialProps() on server side
+ * pages *and* in _app.js.
+ */
+async function _fetchData (path, { ctx, req = ctx?.req } = {}) {
+  try {
+    const baseUrl = await _apiBaseUrl()
+    const options = req ? { headers: { cookie: req.headers.cookie } } : {}
+    const res = await fetch(`${baseUrl}/${path}`, options)
+    const data = await res.json()
+    return Object.keys(data).length > 0 ? data : null // Return null if data empty
+  } catch (error) {
+    logger.error('CLIENT_FETCH_ERROR', path, error)
+    return null
+  }
+}
+
+function _apiBaseUrl () {
   if (typeof window === 'undefined') {
     // NEXTAUTH_URL should always be set explicitly to support server side calls - log warning if not set
-    if (!process.env.NEXTAUTH_URL) { logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set') }
+    if (!process.env.NEXTAUTH_URL) {
+      logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set')
+    }
 
     // Return absolute path when called server side
-    return `${__NEXTAUTH.baseUrl}${__NEXTAUTH.basePath}`
-  } else {
-    // Return relative path when called client side
-    return __NEXTAUTH.basePath
+    return `${__NEXTAUTH.baseUrlServer}${__NEXTAUTH.basePathServer}`
   }
+  // Return relative path when called client side
+  return __NEXTAUTH.basePath
 }
 
-const _encodedForm = (formData) => {
-  return Object.keys(formData).map((key) => {
-    return encodeURIComponent(key) + '=' + encodeURIComponent(formData[key])
-  }).join('&')
+/** Returns the number of seconds elapsed since January 1, 1970 00:00:00 UTC. */
+function _now () {
+  return Math.floor(Date.now() / 1000)
 }
 
-const _sendMessage = (message) => {
-  if (typeof localStorage !== 'undefined') {
-    const timestamp = Math.floor(new Date().getTime() / 1000)
-    localStorage.setItem('nextauth.message', JSON.stringify({ ...message, clientId: __NEXTAUTH._clientId, timestamp })) // eslint-disable-line
+/**
+ * Inspired by [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
+ * Only not using it directly, because Safari does not support it.
+ *
+ * https://caniuse.com/?search=broadcastchannel
+ */
+function BroadcastChannel (name = 'nextauth.message') {
+  return {
+    /**
+     * Get notified by other tabs/windows.
+     * @param {(message: import(".").BroadcastMessage) => void} onReceive
+     */
+    receive (onReceive) {
+      if (typeof window === 'undefined') return
+      window.addEventListener('storage', async (event) => {
+        if (event.key !== name) return
+        /** @type {import(".").BroadcastMessage} */
+        const message = JSON.parse(event.newValue)
+        if (message?.event !== 'session' || !message?.data) return
+
+        onReceive(message)
+      })
+    },
+    /** Notify other tabs/windows. */
+    post (message) {
+      if (typeof localStorage === 'undefined') return
+      localStorage.setItem(name,
+        JSON.stringify({ ...message, timestamp: _now() })
+      )
+    }
   }
 }
 

src/css/index.css

@@ -3,6 +3,7 @@
   --border-radius: .3rem;
   --color-error: #c94b4b;
   --color-info: #157efb;
+  --color-info-text: #fff;
 }
 
 .__next-auth-theme-auto,
@@ -23,7 +24,6 @@
   --color-control-border: #555;
   --color-button-active-background: #060606;
   --color-button-active-border: #666;
-
   --color-seperator: #444;
 }
 
@@ -80,6 +80,7 @@ input[type] {
   font-size: 1rem;
   border-radius: var(--border-radius);
   box-shadow: inset 0 .1rem .2rem rgba(0, 0, 0, .2);
+  color: var(--color-text);
 
   &:focus {
     box-shadow: none;
@@ -202,13 +203,13 @@ a.site {
     font-weight: 500;
     border-radius: 0.3rem;
     background: var(--color-info);
-    color: var(--color-text);
 
     p {
       text-align: left;
       padding: 0.5rem 1rem;
       font-size: 0.9rem;
       line-height: 1.2rem;
+      color: var(--color-info-text);
     }
   }
 

src/lib/logger.d.ts

@@ -0,0 +1,10 @@
+export interface LoggerInstance {
+  warn: (code?: string, ...message: unknown[]) => void
+  error: (code?: string, ...message: unknown[]) => void
+  debug: (code?: string, ...message: unknown[]) => void
+}
+
+export declare function proxyLogger (logger: LoggerInstance, basePath: string): LoggerInstance
+
+const _logger: LoggerInstance
+export default _logger

src/lib/logger.js

@@ -1,4 +1,5 @@
-const logger = {
+/** @type {import("./logger").LoggerInstance} */
+const _logger = {
   error (code, ...message) {
     console.error(
       `[next-auth][error][${code.toLowerCase()}]`,
@@ -22,4 +23,60 @@ const logger = {
   }
 }
 
-export default logger
+/**
+ * Override the built-in logger.
+ * Any `undefined` level will use the default logger.
+ * @param {Partial<import("./logger").LoggerInstance>} newLogger
+ */
+export function setLogger (newLogger = {}) {
+  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
+ * @param {import("./logger").LoggerInstance} logger
+ * @param {string} basePath
+ * @return {import("./logger").LoggerInstance}
+ */
+export function proxyLogger (logger = _logger, basePath) {
+  try {
+    if (typeof window === 'undefined') {
+      return logger
+    }
+
+    const clientLogger = {}
+    for (const level in logger) {
+      clientLogger[level] = (code, ...message) => {
+        _logger[level](code, ...message) // Log on client as usual
+
+        const url = `${basePath}/_log`
+        const body = new URLSearchParams({
+          level,
+          code,
+          message: JSON.stringify(message.map(m => {
+            if (m instanceof Error) {
+              // Serializing errors: https://iaincollins.medium.com/error-handling-in-javascript-a6172ccdf9af
+              return { name: m.name, message: m.message, stack: m.stack }
+            }
+            return m
+          }))
+        })
+        if (navigator.sendBeacon) {
+          return navigator.sendBeacon(url, body)
+        }
+        return fetch(url, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body
+        })
+      }
+    }
+    return clientLogger
+  } catch {
+    return _logger
+  }
+}

src/providers/discord.js

@@ -14,7 +14,7 @@ export default (options) => {
         const defaultAvatarNumber = parseInt(profile.discriminator) % 5
         profile.image_url = `https://cdn.discordapp.com/embed/avatars/${defaultAvatarNumber}.png`
       } else {
-        const format = profile.premium_type === 1 || profile.premium_type === 2 ? 'gif' : 'png'
+        const format = profile.avatar.startsWith('a_') ? 'gif' : 'png'
         profile.image_url = `https://cdn.discordapp.com/avatars/${profile.id}/${profile.avatar}.${format}`
       }
       return {

src/providers/eveonline.js

@@ -0,0 +1,21 @@
+export default (options) => {
+  return {
+    id: 'eveonline',
+    name: 'EVE Online',
+    type: 'oauth',
+    version: '2.0',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: 'https://login.eveonline.com/oauth/token',
+    authorizationUrl: 'https://login.eveonline.com/oauth/authorize?response_type=code',
+    profileUrl: 'https://login.eveonline.com/oauth/verify',
+    profile: (profile) => {
+      return {
+        id: profile.CharacterID,
+        name: profile.CharacterName,
+        image: `https://image.eveonline.com/Character/${profile.CharacterID}_128.jpg`,
+        email: null
+      }
+    },
+    ...options
+  }
+}

src/providers/faceit.js

@@ -0,0 +1,25 @@
+export default (options) => {
+  return {
+    id: 'faceit',
+    name: 'FACEIT',
+    type: 'oauth',
+    version: '2.0',
+    params: { grant_type: 'authorization_code' },
+    headers: {
+      Authorization: `Basic ${Buffer.from(`${options.clientId}:${options.clientSecret}`).toString('base64')}`
+    },
+    accessTokenUrl: 'https://api.faceit.com/auth/v1/oauth/token',
+    authorizationUrl: 'https://accounts.faceit.com/accounts?redirect_popup=true&response_type=code',
+    profileUrl: 'https://api.faceit.com/auth/v1/resources/userinfo',
+    profile (profile) {
+      const { guid: id, nickname: name, email, picture: image } = profile
+      return {
+        id,
+        name,
+        email,
+        image
+      }
+    },
+    ...options
+  }
+}

src/providers/index.js

@@ -10,19 +10,24 @@ import Cognito from './cognito'
 import Credentials from './credentials'
 import Discord from './discord'
 import Email from './email'
+import EVEOnline from './eveonline'
 import Facebook from './facebook'
+import FACEIT from './faceit'
 import Foursquare from './foursquare'
 import FusionAuth from './fusionauth'
 import GitHub from './github'
 import GitLab from './gitlab'
 import Google from './google'
 import IdentityServer4 from './identity-server4'
+import Instagram from './instagram'
+import Kakao from './kakao'
 import LINE from './line'
 import LinkedIn from './linkedin'
 import MailRu from './mailru'
 import Medium from './medium'
 import Netlify from './netlify'
 import Okta from './okta'
+import Osso from './osso'
 import Reddit from './reddit'
 import Salesforce from './salesforce'
 import Slack from './slack'
@@ -32,6 +37,7 @@ import Twitch from './twitch'
 import Twitter from './twitter'
 import VK from './vk'
 import Yandex from './yandex'
+import Zoho from './zoho'
 
 export default {
   Apple,
@@ -46,19 +52,24 @@ export default {
   Credentials,
   Discord,
   Email,
+  EVEOnline,
   Facebook,
+  FACEIT,
   Foursquare,
   FusionAuth,
   GitHub,
   GitLab,
   Google,
   IdentityServer4,
+  Instagram,
+  Kakao,
   LINE,
   LinkedIn,
   MailRu,
   Medium,
   Netlify,
   Okta,
+  Osso,
   Reddit,
   Salesforce,
   Slack,
@@ -67,5 +78,6 @@ export default {
   Twitch,
   Twitter,
   VK,
-  Yandex
+  Yandex,
+  Zoho
 }

src/providers/instagram.js

@@ -0,0 +1,51 @@
+/**
+ * @param {import("../server").Provider} options
+ * @example
+ *
+ * ```js
+ * // pages/api/auth/[...nextauth].js
+ * import Providers from `next-auth/providers`
+ * ...
+ * providers: [
+ *   Providers.Instagram({
+ *     clientId: process.env.INSTAGRAM_CLIENT_ID,
+ *     clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
+ *   })
+ * ]
+ * ...
+ *
+ * // pages/index
+ * import { signIn } from "next-auth/client"
+ * ...
+ * <button onClick={() => signIn("instagram")}>
+ *   Sign in
+ * </button>
+ * ...
+ * ```
+ * *Resources:*
+ * - [NextAuth.js Documentation](https://next-auth.js.org/providers/instagram)
+ * - [Instagram Documentation](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)
+ * - [Configuration](https://developers.facebook.com/apps)
+ */
+export default function Instagram (options) {
+  return {
+    id: 'instagram',
+    name: 'Instagram',
+    type: 'oauth',
+    version: '2.0',
+    scope: 'user_profile',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: 'https://api.instagram.com/oauth/access_token',
+    authorizationUrl: 'https://api.instagram.com/oauth/authorize?response_type=code',
+    profileUrl: 'https://graph.instagram.com/me?fields=id,username,account_type,name',
+    async profile (profile) {
+      return {
+        id: profile.id,
+        name: profile.username,
+        email: null,
+        image: null
+      }
+    },
+    ...options
+  }
+}

src/providers/kakao.js

@@ -0,0 +1,21 @@
+export default (options) => {
+  return {
+    id: 'kakao',
+    name: 'Kakao',
+    type: 'oauth',
+    version: '2.0',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: 'https://kauth.kakao.com/oauth/token',
+    authorizationUrl: 'https://kauth.kakao.com/oauth/authorize?response_type=code',
+    profileUrl: 'https://kapi.kakao.com/v2/user/me',
+    profile: (profile) => {
+      return {
+        id: profile.id,
+        name: profile.kakao_account?.profile.nickname,
+        email: profile.kakao_account?.email,
+        image: profile.kakao_account?.profile.profile_image_url
+      }
+    },
+    ...options
+  }
+}

src/providers/osso.js

@@ -0,0 +1,20 @@
+export default (options) => {
+  return {
+    id: 'osso',
+    name: 'SAML SSO',
+    type: 'oauth',
+    version: '2.0',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: `https://${options.domain}/oauth/token`,
+    authorizationUrl: `https://${options.domain}/oauth/authorize?response_type=code`,
+    profileUrl: `https://${options.domain}/oauth/me`,
+    profile: (profile) => {
+      return {
+        id: profile.id,
+        name: profile.name || profile.email,
+        email: profile.email
+      }
+    },
+    ...options
+  }
+}

src/providers/vk.js

@@ -3,7 +3,7 @@ export default (options) => {
 
   return {
     id: 'vk',
-    name: 'vk.com',
+    name: 'VK',
     type: 'oauth',
     version: '2.0',
     scope: 'email',

src/providers/zoho.js

@@ -0,0 +1,22 @@
+export default (options) => {
+  return {
+    id: 'zoho',
+    name: 'Zoho',
+    type: 'oauth',
+    version: '2.0',
+    scope: 'AaaServer.profile.Read',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: 'https://accounts.zoho.com/oauth/v2/token',
+    authorizationUrl: 'https://accounts.zoho.com/oauth/v2/auth?response_type=code',
+    profileUrl: 'https://accounts.zoho.com/oauth/user/info',
+    profile: (profile) => {
+      return {
+        id: profile.ZUID,
+        name: `${profile.First_Name} ${profile.Last_Name}`,
+        email: profile.Email,
+        image: null
+      }
+    },
+    ...options
+  }
+}

src/server/index.d.ts

@@ -0,0 +1,94 @@
+import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+import { LoggerInstance } from 'src/lib/logger'
+import { CallbacksOptions } from './lib/callbacks'
+import { CookiesOptions } from './lib/cookie'
+import { EventsOptions } from './lib/events'
+
+export interface Provider {
+  id: string
+  name: string
+  type: string
+  version: string
+  params: Record<string, unknown>
+  scope: string
+  accessTokenUrl: string
+  authorizationUrl: string
+  profileUrl?: string
+  grant_type?: string
+  profile?: (profile: any) => Promise<any>
+}
+
+/** @docs https://next-auth.js.org/configuration/options */
+export interface NextAuthOptions {
+  /** @docs https://next-auth.js.org/configuration/options#theme */
+  theme?: 'auto' | 'dark' | 'light'
+  /** @docs https://next-auth.js.org/configuration/options#providers */
+  providers: Provider[]
+  /** @docs https://next-auth.js.org/configuration/options#database */
+  database?: any
+  /** @docs https://next-auth.js.org/configuration/options#secret */
+  secret?: any
+  /** @docs https://next-auth.js.org/configuration/options#session */
+  session?: any
+  /** @docs https://next-auth.js.org/configuration/options#jwt */
+  jwt?: any
+  /** @docs https://next-auth.js.org/configuration/options#pages */
+  pages?: {
+    signIn?: string
+    signOut?: string
+    /** Error code passed in query string as ?error= */
+    error?: string
+    verifyRequest?: string
+    /** If set, new users will be directed here on first sign in */
+    newUser?: string
+  }
+  /**
+   * Callbacks are asynchronous functions you can use to control what happens when an action is performed.
+   * Callbacks are extremely powerful, especially in scenarios involving JSON Web Tokens as
+   * they allow you to implement access controls without a database and
+   * to integrate with external databases or APIs.
+   * @docs https://next-auth.js.org/configuration/options#callbacks
+   */
+  callbacks?: CallbacksOptions
+  /** @docs https://next-auth.js.org/configuration/options#events */
+  events?: EventsOptions
+  /** @docs https://next-auth.js.org/configuration/options#adapter */
+  adapter?: any
+  /** @docs https://next-auth.js.org/configuration/options#debug */
+  debug?: boolean
+  /** @docs https://next-auth.js.org/configuration/options#usesecurecookies */
+  useSecureCookies?: boolean
+  /** @docs https://next-auth.js.org/configuration/options#cookies */
+  cookies?: CookiesOptions
+  /** @docs https://next-auth.js.org/configuration/options#logger */
+  logger: LoggerInstance
+}
+
+/** Options that are the same both in internal and user provided options. */
+export type NextAuthSharedOptions = 'pages' | 'jwt' | 'events' | 'callbacks' | 'cookies' | 'secret' | 'adapter' | 'theme' | 'debug' | 'logger'
+
+export interface NextAuthInternalOptions extends Pick<NextAuthOptions, NextAuthSharedOptions> {
+  pkce?: {
+    code_verifier?: string
+    /**
+     * Could be `"plain"`, but not recommended.
+     * We ignore it for now.
+     * @spec https://tools.ietf.org/html/rfc7636#section-4.2.
+     */
+    code_challenge_method?: 'S256'
+  }
+  provider?: Provider
+  baseUrl?: string
+  basePath?: string
+  action?: string
+  csrfToken?: string
+}
+
+export interface NextAuthRequest extends NextApiRequest {
+  options: NextAuthInternalOptions
+}
+
+export interface NextAuthResponse extends NextApiResponse {}
+
+export declare function NextAuthHandler (req: NextAuthRequest, res: NextAuthResponse, options: NextAuthOptions): ReturnType<NextApiHandler>
+export declare function NextAuthHandler (options: NextAuthOptions): ReturnType<NextApiHandler>

src/server/index.js

@@ -1,13 +1,13 @@
 import adapters from '../adapters'
 import jwt from '../lib/jwt'
 import parseUrl from '../lib/parse-url'
-import logger from '../lib/logger'
+import logger, { setLogger } from '../lib/logger'
 import * as cookie from './lib/cookie'
 import * as defaultEvents from './lib/default-events'
 import * as defaultCallbacks from './lib/default-callbacks'
 import parseProviders from './lib/providers'
 import callbackUrlHandler from './lib/callback-url-handler'
-import extendRes from './lib/extend-req'
+import extendRes from './lib/extend-res'
 import * as routes from './routes'
 import renderPage from './pages'
 import csrfTokenHandler from './lib/csrf-token-handler'
@@ -21,7 +21,15 @@ if (!process.env.NEXTAUTH_URL) {
   logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set')
 }
 
+/**
+ * @param {import("next").NextApiRequest} req
+ * @param {import("next").NextApiResponse} res
+ * @param {import(".").NextAuthOptions} userOptions
+ */
 async function NextAuthHandler (req, res, userOptions) {
+  if (userOptions.logger) {
+    setLogger(userOptions.logger)
+  }
   // If debug enabled, set ENV VAR so that logger logs debug messages
   if (userOptions.debug) {
     process.env._NEXTAUTH_DEBUG = true
@@ -71,6 +79,10 @@ async function NextAuthHandler (req, res, userOptions) {
       provider.protection = 'state' // Default to state, as we did in 3.1 REVIEW: should we use "pkce" or "none" as default?
     }
 
+    if (typeof provider?.protection === 'string') {
+      provider.protection = [provider.protection]
+    }
+
     const maxAge = 30 * 24 * 60 * 60 // Sessions expire after 30 days of being idle
 
     // Parse database / adapter
@@ -122,7 +134,8 @@ async function NextAuthHandler (req, res, userOptions) {
         ...defaultCallbacks,
         ...userOptions.callbacks
       },
-      pkce: {}
+      pkce: {},
+      logger
     }
 
     await callbackUrlHandler(req, res)
@@ -215,6 +228,22 @@ async function NextAuthHandler (req, res, userOptions) {
             return routes.callback(req, res)
           }
           break
+        case '_log':
+          if (userOptions.logger) {
+            try {
+              const {
+                code = 'CLIENT_ERROR',
+                level = 'error',
+                message = '[]'
+              } = req.body
+
+              logger[level](code, ...JSON.parse(message))
+            } catch (error) {
+              // If logging itself failed...
+              logger.error('LOGGER_ERROR', error)
+            }
+          }
+          return res.end()
         default:
       }
     }

src/server/lib/callbacks.d.ts

@@ -0,0 +1,7 @@
+
+export interface CallbacksOptions {
+  signIn?: (user: any, account: any, profile: any) => Promise<never | string>
+  jwt?: (token: any, user: any, account: any, profile: any, isNewUser?: boolean) => Promise<any>
+  session?: (session: any, userOrToken: any) => Promise<any>
+  redirect?: (url: string, baseUrl: string) => Promise<string>
+}

src/server/lib/cookie.d.ts

@@ -0,0 +1,16 @@
+export interface CookieOption {
+  name: string
+  options: {
+    httpOnly: boolean
+    sameSite: string
+    path?: string
+    secure: boolean
+  }
+}
+
+export interface CookiesOptions {
+  sessionToken: CookieOption
+  callbackUrl: CookieOption
+  csrfToken: CookieOption
+  pkceCodeVerifier: CookieOption
+}

src/server/lib/cookie.js

@@ -110,6 +110,7 @@ function _serialize (name, val, options) {
  * For more on prefixes see https://googlechrome.github.io/samples/cookie-prefixes/
  *
  * @TODO Review cookie settings (names, options)
+ * @return {import("./cookie").CookiesOptions}
  */
 export function defaultCookies (useSecureCookies) {
   const cookiePrefix = useSecureCookies ? '__Secure-' : ''

src/server/lib/events.d.ts

@@ -0,0 +1,12 @@
+export type EventType=
+  | 'signIn'
+  | 'signOut'
+  | 'createUser'
+  | 'updateUser'
+  | 'linkAccount'
+  | 'session'
+  | 'error'
+
+export type EventCallback = (message: any) => Promise<void>
+
+export type EventsOptions = Partial<Record<EventType, EventCallback>>

src/server/lib/oauth/callback.js

@@ -3,6 +3,7 @@ import oAuthClient from './client'
 import logger from '../../../lib/logger'
 import { OAuthCallbackError } from '../../../lib/errors'
 
+/** @param {import("../..").NextAuthRequest} req */
 export default async function oAuthCallback (req) {
   const { provider, pkce } = req.options
   const client = oAuthClient(provider)
@@ -89,7 +90,7 @@ export default async function oAuthCallback (req) {
  *     refresh_token?: string
  *     id_token?: string
  *   }
- *   provider: object
+ *   provider: import("../..").Provider
  *   user?: object
  * }} profileParams
  */
@@ -107,7 +108,7 @@ async function getProfile ({ profileData, tokens, provider, user }) {
 
     logger.debug('PROFILE_DATA', profileData)
 
-    const profile = await provider.profile(profileData)
+    const profile = await provider.profile(profileData, tokens)
     // Return profile, raw profile and auth provider details
     return {
       profile: {

src/server/lib/oauth/client.js

@@ -7,6 +7,7 @@ import { sign as jwtSign } from 'jsonwebtoken'
  * @TODO Refactor to remove dependancy on 'oauth' package
  * It is already quite monkey patched, we don't use all the features and and it
  * would be easier to maintain if all the code was native to next-auth.
+ * @param {import("../..").Provider} provider
  */
 export default function oAuthClient (provider) {
   if (provider.version?.startsWith('2.')) {
@@ -86,6 +87,9 @@ export default function oAuthClient (provider) {
 
 /**
  * Ported from https://github.com/ciaranj/node-oauth/blob/a7f8a1e21c362eb4ed2039431fb9ac2ae749f26a/lib/oauth2.js
+ * @param {string} code
+ * @param {import("../..").Provider} provider
+ * @param {string | undefined} codeVerifier
  */
 async function getOAuth2AccessToken (code, provider, codeVerifier) {
   const url = provider.accessTokenUrl
@@ -128,11 +132,11 @@ async function getOAuth2AccessToken (code, provider, codeVerifier) {
     headers.Authorization = 'Basic ' + Buffer.from((provider.clientId + ':' + provider.clientSecret)).toString('base64')
   }
 
-  if ((provider.id === 'okta' || provider.id === 'identity-server4') && !headers.Authorization) {
+  if (provider.id === 'identity-server4' && !headers.Authorization) {
     headers.Authorization = `Bearer ${code}`
   }
 
-  if (provider.protection === 'pkce') {
+  if (provider.protection.includes('pkce')) {
     params.code_verifier = codeVerifier
   }
 
@@ -163,9 +167,17 @@ async function getOAuth2AccessToken (code, provider, codeVerifier) {
           raw = querystring.parse(data)
         }
 
-        const accessToken = provider.id === 'slack'
-          ? raw.authed_user.access_token
-          : raw.access_token
+        let accessToken
+        if (provider.id === 'slack') {
+          const { ok, error } = raw
+          if (!ok) {
+            return reject(error)
+          }
+
+          accessToken = raw.authed_user.access_token
+        } else {
+          accessToken = raw.access_token
+        }
 
         resolve({
           accessToken,
@@ -184,6 +196,9 @@ async function getOAuth2AccessToken (code, provider, codeVerifier) {
  *
  * 18/08/2020 @robertcraigie added results parameter to pass data to an optional request preparer.
  * e.g. see providers/bungie
+ * @param {import("../..").Provider} provider
+ * @param {string} accessToken
+ * @param {any} results
  */
 async function getOAuth2 (provider, accessToken, results) {
   let url = provider.profileUrl

src/server/lib/oauth/pkce-handler.js

@@ -8,11 +8,15 @@ const PKCE_LENGTH = 64
 const PKCE_CODE_CHALLENGE_METHOD = 'S256' // can be 'plain', not recommended https://tools.ietf.org/html/rfc7636#section-4.2
 const PKCE_MAX_AGE = 60 * 15 // 15 minutes in seconds
 
-/** Adds `code_verifier` to `req.options.pkce`, and removes the corresponding cookie */
+/**
+ * Adds `code_verifier` to `req.options.pkce`, and removes the corresponding cookie
+ * @param {import("../..").NextAuthRequest} req
+ * @param {import("../..").NextAuthResponse} res
+ */
 export async function handleCallback (req, res) {
   const { cookies, provider, baseUrl, basePath } = req.options
   try {
-    if (provider.protection !== 'pkce') { // Provider does not support PKCE, nothing to do.
+    if (!provider.protection.includes('pkce')) { // Provider does not support PKCE, nothing to do.
       return
     }
 
@@ -38,11 +42,15 @@ export async function handleCallback (req, res) {
   }
 }
 
-/** Adds `code_challenge` and `code_challenge_method` to `req.options.pkce`. */
+/**
+ * Adds `code_challenge` and `code_challenge_method` to `req.options.pkce`.
+ * @param {import("../..").NextAuthRequest} req
+ * @param {import("../..").NextAuthResponse} res
+ */
 export async function handleSignin (req, res) {
   const { cookies, provider, baseUrl, basePath } = req.options
   try {
-    if (provider.protection !== 'pkce') { // Provider does not support PKCE, nothing to do.
+    if (!provider.protection.includes('pkce')) { // Provider does not support PKCE, nothing to do.
       return
     }
     // Started login flow, add generated pkce to req.options and (encrypted) code_verifier to a cookie

src/server/lib/oauth/state-handler.js

@@ -6,11 +6,13 @@ import { OAuthCallbackError } from '../../../lib/errors'
  * For OAuth 2.0 flows, if the provider supports state,
  * check if state matches the one sent on signin
  * (a hash of the NextAuth.js CSRF token).
+ * @param {import("../..").NextAuthRequest} req
+ * @param {import("../..").NextAuthResponse} res
  */
 export async function handleCallback (req, res) {
   const { csrfToken, provider, baseUrl, basePath } = req.options
   try {
-    if (provider.protection !== 'state') { // Provider does not support state, nothing to do.
+    if (!provider.protection.includes('state')) { // Provider does not support state, nothing to do.
       return
     }
 
@@ -31,11 +33,15 @@ export async function handleCallback (req, res) {
   }
 }
 
-/** Adds CSRF token to the authorizationParams. */
+/**
+ * Adds CSRF token to the authorizationParams.
+ * @param {import("../..").NextAuthRequest} req
+ * @param {import("../..").NextAuthResponse} res
+ */
 export async function handleSignin (req, res) {
   const { provider, baseUrl, basePath, csrfToken } = req.options
   try {
-    if (provider.protection !== 'state') { // Provider does not support state, nothing to do.
+    if (![provider.protection].flat().includes('state')) { // Provider does not support state, nothing to do.
       return
     }
 

src/server/lib/signin/email.js

@@ -10,7 +10,7 @@ export default async function email (email, provider, options) {
     const secret = provider.secret || options.secret
 
     // Generate token
-    const token = provider.generateVerificationToken?.() ?? randomBytes(32).toString('hex')
+    const token = await provider.generateVerificationToken?.() ?? randomBytes(32).toString('hex')
 
     // Send email with link containing token (the unhashed version)
     const url = `${baseUrl}${basePath}/callback/${encodeURIComponent(provider.id)}?email=${encodeURIComponent(email)}&token=${encodeURIComponent(token)}`

src/server/lib/signin/oauth.js

@@ -1,6 +1,7 @@
 import oAuthClient from '../oauth/client'
 import logger from '../../../lib/logger'
 
+/** @param {import("../..").NextAuthRequest} req */
 export default async function getAuthorizationUrl (req) {
   const { provider } = req.options
 

src/server/pages/error.js

@@ -1,8 +1,16 @@
+// @ts-check
 import { h } from 'preact' // eslint-disable-line no-unused-vars
-import render from 'preact-render-to-string'
 
-/** Renders an error page. */
-export default function error ({ baseUrl, basePath, error, res }) {
+/**
+ * Renders an error page.
+ * @param {{
+ *   baseUrl: string
+ *   basePath: string
+ *   error?: string
+ *   res: import("..").NextAuthResponse
+ * }} params
+ */
+export default function error ({ baseUrl, basePath, error = 'default', res }) {
   const signinPageUrl = `${baseUrl}${basePath}/signin`
 
   const errors = {
@@ -37,18 +45,18 @@ export default function error ({ baseUrl, basePath, error, res }) {
       message: (
         <div>
           <p>The sign in link is no longer valid.</p>
-          <p>It may have be used already or it may have expired.</p>
+          <p>It may have been used already or it may have expired.</p>
         </div>
       ),
       signin: <p><a className='button' href={signinPageUrl}>Sign in</a></p>
     }
   }
 
-  const { statusCode, heading, message, signin } = errors[error.toLowerCase()] || errors.default
+  const { statusCode, heading, message, signin } = errors[error.toLowerCase()]
 
   res.status(statusCode)
 
-  return render(
+  return (
     <div className='error'>
       <h1>{heading}</h1>
       <div className='message'>{message}</div>

src/server/pages/index.js

@@ -1,3 +1,4 @@
+import renderToString from 'preact-render-to-string'
 import signin from './signin'
 import signout from './signout'
 import verifyRequest from './verify-request'
@@ -9,14 +10,34 @@ export default function renderPage (req, res) {
   const { baseUrl, basePath, callbackUrl, csrfToken, providers, theme } = req.options
 
   res.setHeader('Content-Type', 'text/html')
-  function send (html) {
-    res.send(`<!DOCTYPE html><head><style type="text/css">${css()}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body class="__next-auth-theme-${theme}"><div class="page">${html}</div></body></html>`)
+  function send ({ html, title }) {
+    res.send(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${css()}</style><title>${title}</title></head><body class="__next-auth-theme-${theme}"><div class="page">${renderToString(html)}</div></body></html>`)
   }
 
   return {
-    signin (props) { send(signin({ csrfToken, providers, callbackUrl, ...req.query, ...props })) },
-    signout (props) { send(signout({ csrfToken, baseUrl, basePath, ...props })) },
-    verifyRequest (props) { send(verifyRequest({ baseUrl, ...props })) },
-    error (props) { send(error({ basePath, baseUrl, res, ...props })) }
+    signin (props) {
+      send({
+        html: signin({ csrfToken, providers, callbackUrl, ...req.query, ...props }),
+        title: 'Sign In'
+      })
+    },
+    signout (props) {
+      send({
+        html: signout({ csrfToken, baseUrl, basePath, ...props }),
+        title: 'Sign Out'
+      })
+    },
+    verifyRequest (props) {
+      send({
+        html: verifyRequest({ baseUrl, ...props }),
+        title: 'Verify Request'
+      })
+    },
+    error (props) {
+      send({
+        html: error({ basePath, baseUrl, res, ...props }),
+        title: 'Error'
+      })
+    }
   }
 }

src/server/pages/signin.js

@@ -1,5 +1,4 @@
 import { h } from 'preact' // eslint-disable-line no-unused-vars
-import render from 'preact-render-to-string'
 
 export default function signin ({ csrfToken, providers, callbackUrl, email, error: errorType }) {
   // We only want to render providers
@@ -30,7 +29,7 @@ export default function signin ({ csrfToken, providers, callbackUrl, email, erro
 
   const error = errorType && (errors[errorType] ?? errors.default)
 
-  return render(
+  return (
     <div className='signin'>
       {error &&
         <div className='error'>

src/server/pages/signout.js

@@ -1,8 +1,7 @@
 import { h } from 'preact' // eslint-disable-line no-unused-vars
-import render from 'preact-render-to-string'
 
 export default function signout ({ baseUrl, basePath, csrfToken }) {
-  return render(
+  return (
     <div className='signout'>
       <h1>Are you sure you want to sign out?</h1>
       <form action={`${baseUrl}${basePath}/signout`} method='POST'>

src/server/pages/verify-request.js

@@ -1,8 +1,7 @@
 import { h } from 'preact' // eslint-disable-line no-unused-vars
-import render from 'preact-render-to-string'
 
 export default function verifyRequest ({ baseUrl }) {
-  return render(
+  return (
     <div className='verify-request'>
       <h1>Check your email</h1>
       <p>A sign in link has been sent to your email address.</p>

src/server/routes/callback.js

@@ -4,7 +4,11 @@ import * as cookie from '../lib/cookie'
 import logger from '../../lib/logger'
 import dispatchEvent from '../lib/dispatch-event'
 
-/** Handle callbacks from login services */
+/**
+ * Handle callbacks from login services
+ * @param {import("..").NextAuthRequest} req
+ * @param {import("..").NextAuthResponse} res
+ */
 export default async function callback (req, res) {
   const {
     provider,
@@ -68,7 +72,7 @@ export default async function callback (req, res) {
           }
         } catch (error) {
           if (error instanceof Error) {
-            return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+            return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
           }
           // TODO: Remove in a future major release
           logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
@@ -164,7 +168,7 @@ export default async function callback (req, res) {
         }
       } catch (error) {
         if (error instanceof Error) {
-          return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+          return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
         }
         // TODO: Remove in a future major release
         logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
@@ -217,12 +221,12 @@ export default async function callback (req, res) {
   } else if (provider.type === 'credentials' && req.method === 'POST') {
     if (!useJwtSession) {
       logger.error('CALLBACK_CREDENTIALS_JWT_ERROR', 'Signin in with credentials is only supported if JSON Web Tokens are enabled')
-      return res.redirect(`${baseUrl}${basePath}/error?error=Configuration`)
+      return res.status(500).redirect(`${baseUrl}${basePath}/error?error=Configuration`)
     }
 
     if (!provider.authorize) {
       logger.error('CALLBACK_CREDENTIALS_HANDLER_ERROR', 'Must define an authorize() handler to use credentials authentication provider')
-      return res.redirect(`${baseUrl}${basePath}/error?error=Configuration`)
+      return res.status(500).redirect(`${baseUrl}${basePath}/error?error=Configuration`)
     }
 
     const credentials = req.body
@@ -231,11 +235,11 @@ export default async function callback (req, res) {
     try {
       userObjectReturnedFromAuthorizeHandler = await provider.authorize(credentials)
       if (!userObjectReturnedFromAuthorizeHandler) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=CredentialsSignin&provider=${encodeURIComponent(provider.id)}`)
+        return res.status(401).redirect(`${baseUrl}${basePath}/error?error=CredentialsSignin&provider=${encodeURIComponent(provider.id)}`)
       }
     } catch (error) {
       if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
       }
       return res.redirect(error)
     }
@@ -246,11 +250,11 @@ export default async function callback (req, res) {
     try {
       const signInCallbackResponse = await callbacks.signIn(user, account, credentials)
       if (signInCallbackResponse === false) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
+        return res.status(403).redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
       }
     } catch (error) {
       if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
+        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
       }
       return res.redirect(error)
     }

src/server/routes/providers.js

@@ -2,6 +2,8 @@
  * Return a JSON object with a list of all OAuth providers currently configured
  * and their signin and callback URLs. This makes it possible to automatically
  * generate buttons for all providers when rendering client side.
+ * @param {import("..").NextAuthRequest} req
+ * @param {import("..").NextAuthResponse} res
  */
 export default function providers (req, res) {
   const { providers } = req.options

src/server/routes/signin.js

@@ -44,7 +44,7 @@ export default async function signin (req, res) {
 
     // Check if user is allowed to sign in
     try {
-      const signInCallbackResponse = await callbacks.signIn(profile, account, { email })
+      const signInCallbackResponse = await callbacks.signIn(profile, account, { email, verificationRequest: true })
       if (signInCallbackResponse === false) {
         return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
       } else if (typeof signInCallbackResponse === 'string') {

test/docker/app/package.json

@@ -11,8 +11,8 @@
   "author": "Iain Collins <me@iaincollins.com>",
   "license": "ISC",
   "dependencies": {
-    "next": "^9.5.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "next": "^10.0.6",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

tsconfig.json

@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "next-auth": [
+        "./src/server"
+      ],
+      "next-auth/adapters": [
+        "./src/adapters"
+      ],
+      "next-auth/client": [
+        "./src/client"
+      ],
+      "next-auth/jwt": [
+        "./src/lib/jwt"
+      ],
+      "next-auth/providers": [
+        "./src/providers"
+      ]
+    },
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

www/docs/configuration/callbacks.md

@@ -79,7 +79,7 @@ When using NextAuth.js without a database, the user object it will always be a p
 :::
 
 :::tip
-If you only want to allow users who already have accounts in the database to sign in, you can check for the existance of a `user.id` property and reject any sign in attempts from accounts that do not have one.
+If you only want to allow users who already have accounts in the database to sign in, you can check for the existence of a `user.id` property and reject any sign in attempts from accounts that do not have one.
 
 If you are using NextAuth.js without database and want to control who can sign in, you can check their email address or profile against a hard coded list in the `signIn()` callback.
 :::
@@ -112,52 +112,6 @@ callbacks: {
 The redirect callback may be invoked more than once in the same flow.
 :::
 
-## Session callback
-
-The session callback is called whenever a session is checked.
-
-e.g. `getSession()`, `useSession()`, `/api/auth/session`
-
-* When using database sessions, the User object is passed as an argument.
-* When using JSON Web Tokens for sessions, the JWT payload is provided instead.
-
-```js title="pages/api/auth/[...nextauth].js"
-...
-callbacks: {
-  /**
-   * @param  {object} session      Session object
-   * @param  {object} token        User object    (if using database sessions)
-   *                               JSON Web Token (if not using database sessions)
-   * @return {object}              Session that will be returned to the client 
-   */
-  async session(session, token) {
-    if(token?.accessToken) {
-      // Add property to session, like an access_token from a provider
-      session.accessToken = token.accessToken
-    }
-    return session
-  }
-}
-...
-```
-
-:::tip
-When using JSON Web Tokens the `jwt()` callback is invoked before the `session()` callback, so anything you add to the
-JSON Web Token will be immediately available in the session callback, like for example an `access_token` from a provider.
-:::
-
-:::tip
-To better represent its value, when using a JWT session, the second parameter should be called `token` (This is the same thing you return from the `jwt` callback). If you use a database, call it `user`.
-:::
-
-:::warning
-The session object is not persisted server side, even when using database sessions - only data such as the session token, the user, and the expiry time is stored in the session table.
-
-If you need to persist session data server side, you can use the `accessToken` returned for the session as a key - and connect to the database in the `session()` callback to access it. Session `accessToken` values do not rotate and are valid as long as the session is valid.
-
-If using JSON Web Tokens instead of database sessions, you should use the User ID or a unique key stored in the token (you will need to generate a key for this yourself on sign in, as access tokens for sessions are not generated when using JSON Web Tokens).
-:::
-
 ## JWT callback
 
 This JSON Web Token callback is called whenever a JSON Web Token is created (i.e. at sign 
@@ -206,3 +160,47 @@ NextAuth.js does not limit how much data you can store in a JSON Web Token, howe
 
 If you need to persist a large amount of data, you will need to persist it elsewhere (e.g. in a database). You can store a key that can be used to look up that data in the `session()` callback.
 :::
+
+## Session callback
+
+The session callback is called whenever a session is checked. By default, only a subset of the token is returned for increased security. If you want to make something available you added to the token through the `jwt()` callback, you have to explicitely forward it here to make it available to the client.
+
+e.g. `getSession()`, `useSession()`, `/api/auth/session`
+
+* When using database sessions, the User object is passed as an argument.
+* When using JSON Web Tokens for sessions, the JWT payload is provided instead.
+
+```js title="pages/api/auth/[...nextauth].js"
+...
+callbacks: {
+  /**
+   * @param  {object} session      Session object
+   * @param  {object} token        User object    (if using database sessions)
+   *                               JSON Web Token (if not using database sessions)
+   * @return {object}              Session that will be returned to the client 
+   */
+  async session(session, token) {
+    // Add property to session, like an access_token from a provider.
+    session.accessToken = token.accessToken
+    return session
+  }
+}
+...
+```
+
+:::tip
+When using JSON Web Tokens the `jwt()` callback is invoked before the `session()` callback, so anything you add to the
+JSON Web Token will be immediately available in the session callback, like for example an `access_token` from a provider.
+:::
+
+:::tip
+To better represent its value, when using a JWT session, the second parameter should be called `token` (This is the same thing you return from the `jwt()` callback). If you use a database, call it `user`.
+:::
+
+:::warning
+The session object is not persisted server side, even when using database sessions - only data such as the session token, the user, and the expiry time is stored in the session table.
+
+If you need to persist session data server side, you can use the `accessToken` returned for the session as a key - and connect to the database in the `session()` callback to access it. Session `accessToken` values do not rotate and are valid as long as the session is valid.
+
+If using JSON Web Tokens instead of database sessions, you should use the User ID or a unique key stored in the token (you will need to generate a key for this yourself on sign in, as access tokens for sessions are not generated when using JSON Web Tokens).
+:::

www/docs/configuration/databases.md

@@ -136,17 +136,44 @@ Install module:
 database: 'mariadb://username:password@127.0.0.1:3306/database_name'
 ```
 
-### Postgres
+### Postgres / CockroachDB
 
 Install module:
 `npm i pg`
 
 #### Example
 
+PostgresDB
 ```js
 database: 'postgres://username:password@127.0.0.1:5432/database_name'
 ```
 
+CockroachDB
+```js
+database: 'postgres://username:password@127.0.0.1:26257/database_name'
+```
+
+If the node is using Self-signed cert
+
+```js
+database: {
+    type: "cockroachdb",
+    host: process.env.DATABASE_HOST,
+    port: 26257,
+    username: process.env.DATABASE_USER,
+    password: process.env.DATABASE_PASSWORD,
+    database: process.env.DATABASE_NAME,
+    ssl: {
+      rejectUnauthorized: false,
+      ca: fs.readFileSync('/path/to/server-certificates/root.crt').toString()
+    },
+  },
+```
+
+Read more: [https://node-postgres.com/features/ssl](https://node-postgres.com/features/ssl)
+
+---
+
 ### Microsoft SQL Server
 
 Install module:
@@ -166,7 +193,7 @@ Install module:
 #### Example
 
 ```js
-database: 'mongodb://username:password@127.0.0.1:27017/database_name'
+database: 'mongodb://username:password@127.0.0.1:3306/database_name'
 ```
 
 ### SQLite
@@ -182,9 +209,6 @@ Install module:
 database: 'sqlite://localhost/:memory:'
 ```
 
-
----
-
 ## Other databases
 
 See the [documentation for adapters](/schemas/adapters) for more information on advanced configuration, including how to use NextAuth.js with other databases using a [custom adapter](/tutorials/creating-a-database-adapter).

www/docs/configuration/options.md

@@ -18,9 +18,17 @@ If your Next.js application uses a custom base path, specify the route to the AP
 _e.g. `NEXTAUTH_URL=https://example.com/custom-route/api/auth`_
 
 :::tip
-To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `now env` command.
+To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `vercel env` command.
 :::
 
+### NEXTAUTH_URL_INTERNAL
+
+If provided, server-side calls will use this instead of `NEXTAUTH_URL`. Useful in environments when the server doesn't have access to the canonical URL of your site. Defaults to `NEXTAUTH_URL`.
+
+```
+NEXTAUTH_URL_INTERNAL=http://10.240.8.16
+```
+
 ---
 
 ## Options
@@ -113,11 +121,29 @@ By default JSON Web Tokens are signed (JWS) but not encrypted (JWE), as JWT encr
 jwt: {
   // A secret to use for key generation - you should set this explicitly
   // Defaults to NextAuth.js secret if not explicitly specified.
+  // This is used to generate the actual signingKey and produces a warning
+  // message if not defined explicitly.
   // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
   
+  // You can generate a signing key using `jose newkey -s 512 -t oct -a HS512`
+  // This gives you direct knowledge of the key used to sign the token so you can use it
+  // to authenticate indirectly (eg. to a database driver)
+  // signingKey: {"kty":"oct","kid":"Dl893BEV-iVE-x9EC52TDmlJUgGm9oZ99_ZL025Hc5Q","alg":"HS512","k":"K7QqRmJOKRK2qcCKV_pi9PSBv3XP0fpTu30TP8xn4w01xR3ZMZM38yL2DnTVPVw6e4yhdh0jtoah-i4c_pZagA"},
+  
+  // If you chose something other than the default algorithm for the signingKey (HS512)
+  // you also need to configure the algorithm
+  // verificationOptions: {
+  //    algorithms: ['HS256']
+  // },
+  
   // Set to true to use encryption. Defaults to false (signing only).
   // encryption: true,
-
+  // encryptionKey: "",
+  // decryptionKey = encryptionKey,
+  // decryptionOptions = {
+  //    algorithms: ['A256GCM']
+  // },
+  
   // You can define your own encode/decode functions for signing and encryption
   // if you want to override the default behaviour.
   // async encode({ secret, token, maxAge }) {},
@@ -307,6 +333,42 @@ Set debug to `true` to enable debug messages for authentication and database ope
 
 ---
 
+### logger
+
+* **Default value**: `console`
+* **Required**: *No*
+
+#### Description
+
+Override any of the logger levels (`undefined` levels will use the built-in logger), and intercept logs in NextAuth. You can use this to send NextAuth logs to a third-party logging service.
+
+Example:
+```js title="/pages/api/auth/[...nextauth].js"
+import log from "logging-service"
+
+export default NextAuth({
+  ...
+  logger: {
+    error(code, ...message) {
+      log.error(code, message)
+    },
+    warn(code, ...message) {
+      log.warn(code, message)
+    },
+    debug(code, ...message) {
+      log.debug(code, message)
+    }
+  }
+  ...
+})
+```
+
+:::note
+If the `debug` level is defined by the user, it will be called regardless of the `debug: false` [option](#debug).
+:::
+
+---
+
 ### theme
 
 * **Default value**: `"auto"`

www/docs/configuration/pages.md

@@ -7,7 +7,7 @@ NextAuth.js automatically creates simple, unbranded authentication pages for han
 
 The options displayed on the sign up page are automatically generated based on the providers specified in the options passed to NextAuth.js.
 
-To add a custom login page, for example. You can use the `pages` option:
+To add a custom login page, you can use the `pages` option:
 
 ```javascript title="pages/api/auth/[...nextauth].js"
 ...
@@ -42,11 +42,22 @@ export default function SignIn({ providers }) {
   )
 }
 
-SignIn.getInitialProps = async (context) => {
+// This is the recommended way for Next.js 9.3 or newer
+export async function getServerSideProps(context){
+  const providers = await providers()
   return {
-    providers: await providers(context)
+    props: { providers }
   }
 }
+
+/*
+// If older than Next.js 9.3
+SignIn.getInitialProps = async () => {
+  return {
+    providers: await providers()
+  }
+}
+*/
 ```
 
 ### Email Sign in
@@ -54,7 +65,7 @@ SignIn.getInitialProps = async (context) => {
 If you create a custom sign in form for email sign in, you will need to submit both fields for the **email** address and **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/signin/email**.
 
 ```jsx title="pages/auth/email-signin.js"
-import { csrfToken } from 'next-auth/client'
+import { getCsrfToken } from 'next-auth/client'
 
 export default function SignIn({ csrfToken }) {
   return (
@@ -62,18 +73,29 @@ export default function SignIn({ csrfToken }) {
       <input name='csrfToken' type='hidden' defaultValue={csrfToken}/>
       <label>
         Email address
-        <input type='text' id='email' name='email'/>
+        <input type='email' id='email' name='email'/>
       </label>
       <button type='submit'>Sign in with Email</button>
     </form>
   )
 }
 
-SignIn.getInitialProps = async (context) => {
+// This is the recommended way for Next.js 9.3 or newer
+export async function getServerSideProps(context){
+  const csrfToken = await getCsrfToken(context)
   return {
-    csrfToken: await csrfToken(context)
+    props: { csrfToken }
   }
 }
+
+/*
+// If older than Next.js 9.3
+SignIn.getInitialProps = async (context) => {
+  return {
+    csrfToken: await getCsrfToken(context)
+  }
+}
+*/
 ```
 
 You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
@@ -87,7 +109,7 @@ signIn('email', { email: 'jsmith@example.com' })
 If you create a sign in form for credentials based authentication, you will need to pass a **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/callback/credentials**.
 
 ```jsx title="pages/auth/credentials-signin.js"
-import { csrfToken } from 'next-auth/client'
+import { getCsrfToken } from 'next-auth/client'
 
 export default function SignIn({ csrfToken }) {
   return (
@@ -99,18 +121,30 @@ export default function SignIn({ csrfToken }) {
       </label>
       <label>
         Password
-        <input name='password' type='text'/>
+        <input name='password' type='password'/>
       </label>
       <button type='submit'>Sign in</button>
     </form>
   )
 }
 
-SignIn.getInitialProps = async (context) => {
+// This is the recommended way for Next.js 9.3 or newer
+export async function getServerSideProps(context) {
   return {
-    csrfToken: await csrfToken(context)
+    props: {
+      csrfToken: await getCsrfToken(context)
+    }
   }
 }
+
+/*
+// If older than Next.js 9.3
+SignIn.getInitialProps = async (context) => {
+  return {
+    csrfToken: await getCsrfToken(context)
+  }
+}
+*/
 ```
 
 You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
@@ -118,3 +152,7 @@ You can also use the `signIn()` function which will handle obtaining the CSRF to
 ```js
 signIn('credentials', { username: 'jsmith', password: '1234' })
 ```
+
+:::tip
+Remember to put any custom pages in a folder outside **/pages/api** which is reserved for API code. As per the examples above, a location convention suggestion is `pages/auth/...`. 
+:::

www/docs/configuration/providers.md

@@ -56,15 +56,11 @@ NextAuth.js is designed to work with any OAuth service, it supports OAuth 1.0, 1
 
 <Image src="/img/signin.png" alt="Signin Screenshot" />
 
-:::tip
-If you want to create a custom sign in link you can link to **/api/auth/signin/[provider]** which will sign in the user in directly with that provider.
-:::
-
 ### Using a custom provider
 
 You can use an OAuth provider that isn't built-in by using a custom object.
 
-As an example of what this looks like, this is the the provider object returned for the Google provider:
+As an example of what this looks like, this is the provider object returned for the Google provider:
 
 ```js
 {
@@ -78,7 +74,10 @@ As an example of what this looks like, this is the the provider object returned
   requestTokenUrl: "https://accounts.google.com/o/oauth2/auth",
   authorizationUrl: "https://accounts.google.com/o/oauth2/auth?response_type=code",
   profileUrl: "https://www.googleapis.com/oauth2/v1/userinfo?alt=json",
-  async profile(profile) {
+  async profile(profile, tokens) {
+    // You can use the tokens, in case you want to fetch more profile information
+    // For example several OAuth provider does not return e-mail by default.
+    // Depending on your provider, will have tokens like `access_token`, `id_token` and or `refresh_token`
     return {
       id: profile.id,
       name: profile.name,
@@ -112,6 +111,16 @@ providers: [
 ...
 ```
 
+:::tip
+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 three changes:
+1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers)
+2. Re-export your config: at [`src/providers/index.js`](https://github.com/nextauthjs/next-auth/blob/main/src/providers/index.js)
+3. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
+
+You can look at the existing built-in providers for inspiration.
+:::
+
+
 ### OAuth provider options
 
 |        Name         |                           Description                            |              Type               | Required |
@@ -132,7 +141,7 @@ providers: [
 |       profile       |       An callback returning an object with the user's info       |            `object`             |    No    |
 |       idToken       |   Set to `true` for services that use ID Tokens (e.g. OpenID)    |            `boolean`            |    No    |
 |       headers       |      Any headers that should be sent to the OAuth provider       |            `object`             |    No    |
-|     protection      | Additional security for OAuth login flows (defaults to `state`)  |     `pkce`, `state`, `none`     |    No    |
+|     protection      | Additional security for OAuth login flows (defaults to `state`)  |`[pkce]`,`[state]`,`[pkce,state]`|    No    |
 |        state        | Same as `protection: "state"`. Being deprecated, use protection. |            `boolean`            |    No    |
 
 ## Sign in with Email

www/docs/contributors.md

@@ -5,14 +5,14 @@ title: Contributors
 
 ## Core Team
 
-* <a href="https://github.com/iaincollins">Iain Collins</a>
-* <a href="https://github.com/LoriKarikari">Lori Karikari</a>
-* <a href="https://github.com/ndom91">Nico Domino</a>
-* <a href="https://github.com/Fumler">Fredrik Pettersen</a>
-* <a href="https://github.com/geraldnolan">Gerald Nolan</a>
-* <a href="https://github.com/lluia">Lluis Agusti</a>
-* <a href="https://github.com/JeffersonBledsoe">Jefferson Bledsoe</a>
-* <a href="https://github.com/balazsorban44">Balázs Orbán</a>
+* [Iain Collins](https://github.com/iaincollins)
+* [Lori Karikari](https://github.com/LoriKarikari)
+* [Nico Domino](https://github.com/ndom91)
+* [Fredrik Pettersen](https://github.com/Fumler)
+* [Gerald Nolan](https://github.com/geraldnolan)
+* [Lluis Agusti](https://github.com/lluia)
+* [Jefferson Bledsoe](https://github.com/JeffersonBledsoe)
+* [Balázs Orbán](https://github.com/sponsors/balazsorban44)
 
 _Special thanks to Lori Karikari for creating most of the providers, to Nico Domino for creating this site, to Fredrik Pettersen for creating the Prisma adapter, to Gerald Nolan for adding support for Sign in with Apple, to Lluis Agusti for work to add TypeScript definitions and to Jefferson Bledsoe for working on automating testing._
 

www/docs/errors.md

@@ -76,13 +76,31 @@ In _most cases_ it does not make sense to specify a database in NextAuth.js opti
 The provider you tried to use failed when setting [PKCE or Proof Key for Code Exchange](https://tools.ietf.org/html/rfc7636#section-4.2).
 The `code_verifier` is saved in a cookie called (by default) `__Secure-next-auth.pkce.code_verifier` which expires after 15 minutes.
 Check if `cookies.pkceCodeVerifier` is configured correctly. The default `code_challenge_method` is `"S256"`. This is currently not configurable to `"plain"`, as it is not recommended, and in most cases it is only supported for backward compatibility.
-
 ---
 
 ### Session Handling
 
 #### JWT_SESSION_ERROR
 
+https://next-auth.js.org/errors#jwt_session_error JWKKeySupport: the key does not support HS512 verify algorithm
+
+The algorithm used for generating your key isn't listed as supported. You can generate a HS512 key using
+
+````
+  jose newkey -s 512 -t oct -a HS512
+````
+
+If you are unable to use an HS512 key (for example to interoperate with other services) you can define what is supported using
+
+````
+  jwt: {
+    signingKey: {"kty":"oct","kid":"--","alg":"HS256","k":"--"}
+    verificationOptions: {
+      algorithms: ["HS256"]
+    }
+  }
+````
+
 #### SESSION_ERROR
 
 ---
@@ -139,4 +157,4 @@ Check your mail server configuration.
 
 This error happens when `[...nextauth].js` file is not found inside `pages/api/auth`.
 
-Make sure the file is there and the filename is written correctly.
+Make sure the file is there and the filename is written correctly.

www/docs/faq.md

@@ -116,7 +116,7 @@ NextAuth.js records Refresh Tokens and Access Tokens on sign in (if supplied by
 
 You can then look them up from the database or persist them to the JSON Web Token.
 
-Note: NextAuth.js does not currently handle Access Token rotation for OAuth providers for you, if this is something you need, currently you will need to write the logic to handle that yourself. 
+Note: NextAuth.js does not currently handle Access Token rotation for OAuth providers for you, however you can check out [this tutorial](/tutorials/refresh-token-rotation) if you want to implement it.
 
 ### When I sign in with another account with the same email address, why are accounts not linked automatically?
 

www/docs/getting-started/client.md

@@ -133,7 +133,7 @@ The `getProviders()` method returns the list of providers currently configured f
 
 It calls `/api/auth/providers` and returns a list of the currently configured authentication providers.
 
-It can be use useful if you are creating a dynamic custom sign in page.
+It can be useful if you are creating a dynamic custom sign in page.
 
 ---
 
@@ -150,7 +150,7 @@ export default async (req, res) => {
 ```
 
 :::note
-Unlike `getSession()` and `getCsrfToken()`, when calling `getSession()` server side, you don't need to pass anything, just as calling it client side.
+Unlike `getSession()` and `getCsrfToken()`, when calling `getProviders()` server side, you don't need to pass anything, just as calling it client side.
 :::
 
 ---
@@ -210,6 +210,46 @@ e.g.
 
 The URL must be considered valid by the [redirect callback handler](/configuration/callbacks#redirect). By default it requires the URL to be an absolute URL at the same hostname, or else it will redirect to the homepage. You can define your own redirect callback to allow other URLs, including supporting relative URLs.
 
+#### Using the redirect: false option
+
+:::note
+The redirect option is only available for `credentials` and `email` providers.
+:::
+
+In some cases, you might want to deal with the sign in response on the same page and disable the default redirection. For example, if an error occurs (like wrong credentials given by the user), you might want to handle the error on the same page. For that, you can pass `redirect: false` in the second parameter object.
+
+e.g.
+
+- `signIn('credentials', { redirect: false, password: 'password' })`
+- `signIn('email', { redirect: false, email: 'bill@fillmurray.com' })`
+
+`signIn` will then return a Promise, that resolves to the following:
+
+```ts
+{
+  /**
+   * Will be different error codes,
+   * depending on the type of error.
+   */
+  error: string | undefined
+  /**
+   * HTTP status code,
+   * hints the kind of error that happened. 
+   */ 
+  status: number
+  /**
+   * `true` if the signin was successful
+   */
+  ok: boolean
+  /**
+   * `null` if there was an error,
+   * otherwise the url the user
+   * should have been redirected to.
+   */
+  url: string | null
+}
+```
+
 #### Additional params
 
 It is also possible to pass additional parameters to the `/authorize` endpoint through the third argument of `signIn()`.
@@ -256,6 +296,16 @@ e.g. `signOut({ callbackUrl: 'http://localhost:3000/foo' })`
 
 The URL must be considered valid by the [redirect callback handler](/configuration/callbacks#redirect). By default this means it must be an absolute URL at the same hostname (or else it will default to the homepage); you can define your own custom redirect callback to allow other URLs, including supporting relative URLs.
 
+#### Using the redirect: false option
+
+If you pass `redirect: false` to `signOut`, the page will not reload. The session will be deleted, and the `useSession` hook is notified, so any indication about the user will be shown as logged out automatically. It can give a very nice experience for the user.
+
+:::tip
+If you need to redirect to another page but you want to avoid a page reload, you can try:
+`const data = await signOut({redirect: false, callbackUrl: "/foo"})`
+where `data.url` is the validated url you can redirect the user to without any flicker by using Next.js's `useRouter().push(data.url)`
+:::
+
 ---
 
 ## Provider
@@ -306,7 +356,7 @@ export default function App ({ Component, pageProps }) {
 :::note
 **These options have no effect on clients that are not signed in.**
 
-Every tab/window maintains it's own copy of the local session state; the session it is not stored in shared storage like localStorage or sessionStorage. Any update in one tab/window triggers a message to other tabs/windows to update their own session state.
+Every tab/window maintains its own copy of the local session state; the session is not stored in shared storage like localStorage or sessionStorage. Any update in one tab/window triggers a message to other tabs/windows to update their own session state.
 
 Using low values for `clientMaxAge` or `keepAlive` will increase network traffic and load on  authenticated clients and may impact hosting costs and performance.
 :::

www/docs/getting-started/rest-api.md

@@ -35,7 +35,7 @@ The `POST` submission requires CSRF token from `/api/auth/csrf`.
 
 Returns client-safe session object - or an empty object if there is no session.
 
-The contents of the session object that is returned is configurable with the session callback.
+The contents of the session object that is returned are configurable with the session callback.
 
 #### `GET` /api/auth/csrf
 
@@ -52,7 +52,7 @@ It can be used to dynamically generate custom sign up pages and to check what ca
 ---
 
 :::note
-The default base path is `/api/auth` but it is configurable by specyfing a custom path in `NEXTAUTH_URL`
+The default base path is `/api/auth` but it is configurable by specifying a custom path in `NEXTAUTH_URL`
 
 e.g. 
 

www/docs/providers/atlassian.md

@@ -9,8 +9,6 @@ https://developer.atlassian.com/cloud/jira/platform/oauth-2-authorization-code-g
 
 ## Example
 
-For Jira Platform API access:
-
 ```js
 import Providers from `next-auth/providers`
 ...
@@ -18,8 +16,7 @@ providers: [
   Providers.Atlassian({
     clientId: process.env.ATLASSIAN_CLIENT_ID,
     clientSecret: process.env.ATLASSIAN_CLIENT_SECRET,
-      scope:
-        'write:jira-work read:jira-work read:jira-user offline_access read:me',
+    scope: 'write:jira-work read:jira-work read:jira-user offline_access read:me'
   })
 ]
 ...
@@ -33,7 +30,7 @@ providers: [
 An app can be created at https://developer.atlassian.com/apps/
 :::
 
-Under "Apis and features" side menu, configure the following for the "OAuth 2.0 (3LO)"
+Under "Apis and features" in the side menu, configure the following for "OAuth 2.0 (3LO)":
 
 - Redirect URL
   - http://localhost:3000/api/auth/callback/atlassian

www/docs/providers/azure-ad-b2c.md

@@ -12,7 +12,23 @@ https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-c
 https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant
 
 ## Example
+- In https://portal.azure.com/ -> Azure Active Directory create a new App Registration.
+- Make sure to remember / copy
+  - Application (client) ID
+  - Directory (tenant) ID
+- When asked for a redirection URL, use http://localhost:3000/api/auth/callback/azure-ad-b2c
+- Create a new secret and remember / copy its value immediately, it will disappear.
 
+In `.env.local` create the follwing entries:
+
+```
+AZURE_CLIENT_ID=<copy Application (client) ID here> 
+AZURE_CLIENT_SECRET=<copy generated secret value here>
+AZURE_TENANT_ID=<copy the tenant id here>
+```
+
+In `pages/api/auth/[...nextauth].js` find or add the AZURE entries:
+  
 ```js
 import Providers from 'next-auth/providers';
 ...
@@ -25,4 +41,5 @@ providers: [
   }),
 ]
 ...
+
 ```

www/docs/providers/email.md

@@ -91,7 +91,7 @@ providers: [
   Providers.Email({
     server: process.env.EMAIL_SERVER, 
     from: process.env.EMAIL_FROM,
-    sendVerificationRequest: ({ identifier: email, url, token, site, provider }) => { /* your function */ }
+    sendVerificationRequest: ({ identifier: email, url, token, baseUrl, provider }) => { /* your function */ }
   })
 ]
 ```
@@ -184,3 +184,17 @@ const text = ({ url, site }) => `Sign in to ${site}\n${url}\n\n`
 :::tip
 If you want to generate great looking email client compatible HTML with React, check out https://mjml.io
 :::
+
+
+## Customising the Verification Token
+
+By default, we are generating a random verification token. You can define a `generateVerificationToken` method in your provider options if you want to override it:
+
+```js title="pages/api/auth/[...nextauth].js"
+providers: [
+  Providers.Email({
+    async generateVerificationToken() {
+      return "ABC123"
+    }
+  })
+],

www/docs/providers/eveonline.md

@@ -0,0 +1,57 @@
+---
+id: eveonline
+title: EVE Online
+---
+
+## Documentation
+
+https://developers.eveonline.com/blog/article/sso-to-authenticated-calls
+
+## Configuration
+
+https://developers.eveonline.com/
+
+## Example
+
+```js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.EVEOnline({
+    clientId: process.env.EVE_CLIENT_ID,
+    clientSecret: process.env.EVE_CLIENT_SECRET
+  })
+]
+...
+```
+
+:::tip When creating your application, make sure to select `Authentication Only` as the connection type.
+
+:::tip If using JWT for the session, you can add the `CharacterID` to the JWT token and session. Example:
+
+```js
+...
+options: {
+  jwt: {
+    secret: process.env.JWT_SECRET,
+  },
+  callbacks: {
+    jwt: async (token, user, account, profile, isNewUser) => {
+      if (profile) {
+        token = {
+          ...token,
+          id: profile.CharacterID,
+        }
+      }
+      return token;
+    },
+    session: async (session, token) => {
+      if (token) {
+        session.user.id = token.id;
+      }
+      return session;
+    }
+  }
+}
+...
+```

www/docs/providers/faceit.md

@@ -0,0 +1,30 @@
+---
+id: faceit
+title: FACEIT
+---
+
+## Documentation
+
+https://cdn.faceit.com/third_party/docs/FACEIT_Connect_3.0.pdf
+
+## Configuration
+
+https://developers.faceit.com/apps
+
+Grant type: `Authorization Code`
+
+Scopes to have basic infos (email, nickname, guid and avatar) : `openid`, `email`, `profile`
+
+## Example
+
+```js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.FACEIT({
+    clientId: process.env.FACEIT_CLIENT_ID,
+    clientSecret: process.env.FACEIT_CLIENT_SECRET
+  })
+]
+...
+```

www/docs/providers/instagram.md

@@ -0,0 +1,42 @@
+---
+id: instagram
+title: Instagram
+---
+
+## Documentation
+
+https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
+
+## Configuration
+
+https://developers.facebook.com/apps/
+
+## Example
+
+```jsx
+// pages/api/auth/[...nextauth].js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.Instagram({
+    clientId: process.env.INSTAGRAM_CLIENT_ID,
+    clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
+  })
+]
+...
+// pages/index.jsx
+import { signIn } from "next-auth/client"
+...
+<button onClick={() => signIn("instagram")}>
+  Sign in
+</button>
+...
+```
+
+:::warning
+Email address is not returned by the Instagram API.
+:::
+
+:::tip
+Instagram display app required callback URL to be configured in your Facebook app and Facebook required you to use **https** even for localhost! In order to do that, you either need to [add an SSL to your localhost](https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/) or use a proxy such as [ngrock](https://ngrok.com/docs).
+:::

www/docs/providers/kakao.md

@@ -0,0 +1,32 @@
+---
+id: kakao
+title: Kakao
+---
+
+## Documentation
+
+https://developers.kakao.com/product/kakaoLogin
+
+## Configuration
+
+https://developers.kakao.com/docs/latest/en/kakaologin/common
+
+## Example
+
+```js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.Kakao({
+    clientId: process.env.KAKAO_CLIENT_ID,
+    clientSecret: process.env.KAKAO_CLIENT_SECRET
+  })
+]
+...
+```
+
+## Instructions
+
+### Configuration
+
+Create a provider and a Kakao application at `https://developers.kakao.com/console/app`. In the settings of the app under Kakao Login, activate web app, change consent items and configure callback URL.

www/docs/providers/osso.md

@@ -0,0 +1,39 @@
+---
+id: osso
+title: Osso
+---
+
+## Documentation
+
+Osso is an open source service that handles SAML authentication against Identity Providers, normalizes profiles, and makes those profiles available to you in an OAuth 2.0 code grant flow.
+
+If you don't yet have an Osso instance, you can use [Osso's Demo App](https://demo.ossoapp.com) for your testing purposes. For documentation on deploying an Osso instance, see https://ossoapp.com/docs/deploy/overview/
+
+## Configuration
+
+You can configure your OAuth Clients on your Osso Admin UI, i.e. https://demo.ossoapp.com/admin/config - you'll need to get a Client ID and Secret and allow-list your redirect URIs.
+
+[SAML SSO differs a bit from OAuth](https://ossoapp.com/blog/saml-vs-oauth) - for every tenant who wants to sign in to your application using SAML, you and your customer need to perform a multi-step configuration in Osso's Admin UI and the admin dashboard of the tenant's Identity Provider. Osso provides documentation for providers like Okta and OneLogin, cloud-based IDPs who also offer a developer account that's useful for testing. Osso also provides a [Mock IDP](https://idp.ossoapp.com) that you can use for testing without needing to sign up for an Identity Provider service.
+
+See Osso's complete configuration and testing documentation at https://ossoapp.com/docs/configure/overview
+
+## Example
+
+A full example application is available at https://github.com/enterprise-oss/osso-next-auth-example and https://nextjs-demo.ossoapp.com
+
+```js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.Osso({
+    clientId: process.env.OSSO_CLIENT_ID,
+    clientSecret: process.env.OSSO_CLIENT_SECRET,
+    domain: process.env.OSSO_DOMAIN
+  })
+}
+...
+```
+
+:::note
+`domain` should be the fully qualified domain – e.g. `demo.ossoapp.com`
+:::

www/docs/providers/twitch.md

@@ -11,6 +11,8 @@ https://dev.twitch.tv/docs/authentication
 
 https://dev.twitch.tv/console/apps
 
+Add the following redirect URL into the console `http://<your-next-app-url>/api/auth/callback/twitch`
+
 ## Example
 
 ```js
@@ -23,4 +25,4 @@ providers: [
   })
 ]
 ...
-```
+```

www/docs/providers/vk.md

@@ -1,6 +1,6 @@
 ---
 id: vk
-title: vk.com
+title: VK
 ---
 
 ## Documentation

www/docs/providers/zoho.md

@@ -0,0 +1,26 @@
+---
+id: zoho
+title: Zoho
+---
+
+## Documentation
+
+https://www.zoho.com/accounts/protocol/oauth/web-server-applications.html
+
+## Configuration
+
+https://api-console.zoho.com/
+
+## Example
+
+```js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.Zoho({
+    clientId: process.env.ZOHO_CLIENT_ID,
+    clientSecret: process.env.ZOHO_CLIENT_SECRET
+  })
+]
+...
+```

www/docs/schemas/adapters.md

@@ -185,7 +185,7 @@ Once you have saved your schema, use the Prisma CLI to generate the Prisma Clien
 npx prisma generate
 ```
 
-To configure you database to use the new schema (i.e. create tables and columns) use the `primsa migrate` command:
+To configure you database to use the new schema (i.e. create tables and columns) use the `prisma migrate` command:
 
 ```
 npx prisma migrate dev --preview-feature

www/docs/tutorials.md

@@ -9,6 +9,18 @@ _These tutorials are contributed by the community and hosted on this site._
 
 _New submissions and edits are welcome!_
 
+### [NextJS Authentication Crash Course with NextAuth.js](https://youtu.be/o_wZIVmWteQ)
+
+This tutorial dives in to the ins and outs of NextAuth including email, Github, Twitter and integrating with Auth0 in under hour.
+
+### [Create your own NextAuth.js Login Pages](https://youtu.be/kB6YNYZ63fw)
+
+This tutorial shows you how to jump in and create your own custom login pages versus using the ones provided by NextAuth.js
+
+### [Refresh Token Rotation](tutorials/refresh-token-rotation)
+
+How to implement refresh token rotation.
+
 ### [Securing pages and API routes](tutorials/securing-pages-and-api-routes)
 
 How to restrict access to pages and API routes.
@@ -67,7 +79,6 @@ This example shows how to implement a fullstack app in TypeScript with Next.js u
 
 This `dev.to` tutorial walks one through adding NextAuth.js to an existing project. Including setting up the OAuth client id and secret, adding the API routes for authentication, protecting pages and api routes behind that authentication, etc.
 
-
 ### [Adding Sign in With Apple Next JS](https://thesiddd.com/blog/apple-auth)
 
 This tutorial walks step by step on how to get Sign In with Apple working (both locally and on a deployed website) using NextAuth.js.

www/docs/tutorials/refresh-token-rotation.md

@@ -0,0 +1,139 @@
+---
+id: refresh-token-rotation
+title: Refresh Token Rotation
+---
+
+While NextAuth.js doesn't automatically handle access token rotation for OAuth providers yet, this functionality can be implemented using [callbacks](https://next-auth.js.org/configuration/callbacks).
+
+## Source Code
+
+_A working example can be accessed [here](https://github.com/lawrencecchen/next-auth-refresh-tokens)._
+
+## Implementation
+
+### Server Side
+
+Using a [JWT callback](https://next-auth.js.org/configuration/callbacks#jwt-callback) and a [session callback](https://next-auth.js.org/configuration/callbacks#session-callback), we can persist OAuth tokens and refresh them when they expire.
+
+Below is a sample implementation using Google's Identity Provider. Please note that the OAuth 2.0 request in the `refreshAccessToken()` function will vary between different providers, but the core logic should remain similar.
+
+```js title="pages/auth/[...nextauth.js]"
+import NextAuth from "next-auth";
+import Providers from "next-auth/providers";
+
+const GOOGLE_AUTHORIZATION_URL =
+  "https://accounts.google.com/o/oauth2/v2/auth?" +
+  new URLSearchParams({
+    prompt: "consent",
+    access_type: "offline",
+    response_type: "code",
+  });
+
+/**
+ * Takes a token, and returns a new token with updated
+ * `accessToken` and `accessTokenExpires`. If an error occurs,
+ * returns the old token and an error property
+ */
+async function refreshAccessToken(token) {
+  try {
+    const url =
+      "https://oauth2.googleapis.com/token?" +
+      new URLSearchParams({
+        client_id: process.env.GOOGLE_CLIENT_ID,
+        client_secret: process.env.GOOGLE_CLIENT_SECRET,
+        grant_type: "refresh_token",
+        refresh_token: token.refreshToken,
+      });
+
+    const response = await fetch(url, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+
+    const refreshedTokens = await response.json();
+
+    if (!response.ok) {
+      throw refreshedTokens;
+    }
+
+    return {
+      ...token,
+      accessToken: refreshedTokens.access_token,
+      accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000,
+      refreshToken: refreshedTokens.refresh_token ?? token.refreshToken, // Fall back to old refresh token
+    };
+  } catch (error) {
+    console.log(error);
+
+    return {
+      ...token,
+      error: "RefreshAccessTokenError",
+    };
+  }
+}
+
+export default NextAuth({
+  providers: [
+    Providers.Google({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      authorizationUrl: GOOGLE_AUTHORIZATION_URL,
+    }),
+  ],
+  callbacks: {
+    async jwt(token, user, account) {
+      // Initial sign in
+      if (account && user) {
+        return {
+          accessToken: account.accessToken,
+          accessTokenExpires: Date.now() + account.expires_in * 1000,
+          refreshToken: account.refresh_token,
+          user,
+        };
+      }
+
+      // Return previous token if the access token has not expired yet
+      if (Date.now() < token.accessTokenExpires) {
+        return token;
+      }
+
+      // Access token has expired, try to update it
+      return refreshAccessToken(token);
+    },
+    async session(session, token) {
+      if (token) {
+        session.user = token.user;
+        session.accessToken = token.accessToken;
+        session.error = token.error;
+      }
+
+      return session;
+    },
+  },
+});
+```
+
+### Client Side
+
+The `RefreshAccessTokenError` error that is caught in the `refreshAccessToken()` method is passed all the way to the client. This means that you can direct the user to the sign in flow if we cannot refresh their token.
+
+We can handle this functionality as a side effect:
+
+```js title="pages/auth/[...nextauth.js]"
+import { signIn, useSession } from "next-auth/client";
+import { useEffect } from "react";
+
+const HomePage() {
+  const [session] = useSession();
+
+  useEffect(() => {
+    if (session?.error === "RefreshAccessTokenError") {
+      signIn(); // Force sign in to hopefully resolve error
+    }
+  }, [session]);
+
+return (...)
+}
+```

www/docusaurus.config.js

@@ -68,7 +68,7 @@ module.exports = {
               to: '/contributors'
             },
             {
-              label: 'Canary docs',
+              label: 'Canary documentation',
               to: 'https://next-auth-git-canary.nextauthjs.vercel.app/'
             }
           ]