feat(build): modernize how we bundle next-auth (#1682)

* feat(build): optionally include TypeORM

If the user doesn't use databases,
it shouldn't be necessary to iclude it in the bundle.
This can more than half the package size!

* feat(build): clean up in dependencies

Remove unused dependencies, move optional ones to be optional

* feat(build): add exports field

* fix: use peerDependenciesMeta instead of non-standard peerOptionalDependecns field

* fix: ts-standard string quotes

* fix: ts-standard string quotes

* refactor: use asnyc/await for sendVerificationRequest

* chore(deps): upgrade mongodb, remove require_optional

Co-authored-by: ndom91 <yo@ndo.dev>

BREAKING CHANGE:
`typeorm`, and `nodemailer` are no longer dependencies added by default.
If you need any of them, you will have to install them yourself in your project directory.
TypeOrm is the default adapter, so if you only provide an `adapter` configuration or a `database`, you will need `typeorm`. You could also check out `@next-auth/typeorm-adapter`. In case you are using the Email provider, you will have to install `nodemailer` (or you can use the choice of your library in the `sendVerificationRequest` callback to send out the e-mail.)

.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/**/*
@@ -32,4 +33,7 @@ client:
 
 pages:
   - src/server/pages/**/*
-  - www/docs/configuration/pages.md
+  - 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/release.yml

@@ -2,8 +2,10 @@ name: Release
 on:
   push:
     branches:
-      - main
-      - canary
+      - 'main'
+      - 'next'
+      - '3.x'
+  pull_request:
 jobs:
   release:
     name: 'Release'
@@ -21,4 +23,4 @@ jobs:
       - run: npx semantic-release@17
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          NPM_TOKEN: ${{secrets.NPM_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
 
@@ -37,4 +39,4 @@ www/providers.json
 /_work
 
 # Prisma migrations
-/prisma/migrations
+/prisma/migrations

CONTRIBUTING.md

@@ -42,7 +42,7 @@ npm i
 > NOTE: You can add any environment variables to .env.local that you would like to use in your dev app.
 > You can find the next-auth config under`pages/api/auth/[...nextauth].js`.
 
-1. Start the dev application/server and CSS watching:
+1. Start the dev application/server:
 ```sh
 npm run dev
 ```

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>
 
@@ -154,4 +167,3 @@ We're open to all community contributions! If you'd like to contribute in any wa
 ## License
 
 ISC
-

components/header.js

@@ -100,6 +100,11 @@ export default function Header () {
               <a>Credentials</a>
             </Link>
           </li>
+          <li className={styles.navItem}>
+            <Link href='/email'>
+              <a>Email</a>
+            </Link>
+          </li>
         </ul>
       </nav>
     </header>

config/babel.config.json

@@ -1,12 +1,19 @@
 {
   "presets": [
-    ["@babel/preset-env", { "targets": { "esmodules": true } }]
+    ["@babel/preset-env", { "targets": { "node": "10" } }]
   ],
   "comments": false,
   "overrides": [
+    {
+      "test": ["../src/client/**"],
+      "comments": true,
+      "presets": [
+        ["@babel/preset-env", { "targets": { "ie": "11" } }]
+      ]
+    },
     {
       "test": ["../src/server/pages/**"],
       "presets": ["preact"]
     }
   ]
-}
+}

package.json

@@ -5,12 +5,12 @@
   "homepage": "https://next-auth.js.org",
   "repository": "https://github.com/nextauthjs/next-auth.git",
   "author": "Iain Collins <me@iaincollins.com>",
-  "main": "index.js",
   "scripts": {
     "build": "npm run build:js && npm run build:css",
     "build:js": "babel --config-file ./config/babel.config.json src --out-dir dist",
     "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir dist && node config/wrap-css.js",
-    "dev": "next | npm run watch:css",
+    "dev:with-css": "next | npm run watch:css",
+    "dev": "next",
     "watch": "npm run watch:js | npm run watch:css",
     "watch:js": "babel --config-file ./config/babel.config.json --watch src --out-dir dist",
     "watch:css": "postcss --config config/postcss.config.js --watch src/**/*.css --base src --dir dist",
@@ -32,6 +32,15 @@
     "lint": "ts-standard",
     "lint:fix": "ts-standard --fix"
   },
+  "main": "index.js",
+  "exports": {
+    ".": "./dist/server/index.js",
+    "./jwt": "./dist/lib/jwt.js",
+    "./adapters": "./dist/adapters/index.js",
+    "./client": "./dist/client/index.js",
+    "./providers": "./dist/providers/index.js",
+    "./providers/*": "./dist/providers/*.js"
+  },
   "files": [
     "dist",
     "index.js",
@@ -42,29 +51,47 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "crypto-js": "^4.0.0",
     "futoin-hkdf": "^1.3.2",
     "jose": "^1.27.2",
     "jsonwebtoken": "^8.5.1",
-    "nodemailer": "^6.4.16",
     "oauth": "^0.9.15",
     "pkce-challenge": "^2.1.0",
     "preact": "^10.4.1",
-    "preact-render-to-string": "^5.1.7",
-    "querystring": "^0.2.0",
-    "require_optional": "^1.0.1",
-    "typeorm": "^0.2.30"
+    "preact-render-to-string": "^5.1.14"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17",
-    "react-dom": "^16.13.1 || ^17"
-  },
-  "peerOptionalDependencies": {
-    "mongodb": "^3.5.9",
+    "react-dom": "^16.13.1 || ^17",
+    "mongodb": "^3.6.6",
     "mysql": "^2.18.1",
     "mssql": "^6.2.1",
     "pg": "^8.2.1",
-    "@prisma/client": "^2.16.1"
+    "@prisma/client": "^2.16.1",
+    "nodemailer": "^6.4.16",
+    "typeorm": "^0.2.30"
+  },
+  "peerDependenciesMeta": {
+    "mongodb": {
+      "optional": true
+    },
+    "mysql": {
+      "optional": true
+    },
+    "mssql": {
+      "optional": true
+    },
+    "pg": {
+      "optional": true
+    },
+    "@prisma/client": {
+      "optional": true
+    },
+    "nodemailer": {
+      "optional": true
+    },
+    "typeorm": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -83,7 +110,7 @@
     "dotenv": "^8.2.0",
     "eslint": "^7.19.0",
     "mocha": "^8.1.3",
-    "mongodb": "^3.5.9",
+    "mongodb": "^3.6.6",
     "mssql": "^6.2.1",
     "mysql": "^2.18.1",
     "next": "^10.0.5",
@@ -106,7 +133,15 @@
       "next-env.d.ts"
     ],
     "globals": [
+      "localStorage",
+      "location",
       "fetch"
     ]
-  }
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/balazsorban44"
+    }
+  ]
 }

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

@@ -6,6 +6,27 @@ import Providers from 'next-auth/providers'
 // const prisma = new PrismaClient()
 
 export default NextAuth({
+  // Used to debug https://github.com/nextauthjs/next-auth/issues/1664
+  // cookies: {
+  //   csrfToken: {
+  //     name: 'next-auth.csrf-token',
+  //     options: {
+  //       httpOnly: true,
+  //       sameSite: 'none',
+  //       path: '/',
+  //       secure: true
+  //     }
+  //   },
+  //   pkceCodeVerifier: {
+  //     name: 'next-auth.pkce.code_verifier',
+  //     options: {
+  //       httpOnly: true,
+  //       sameSite: 'none',
+  //       path: '/',
+  //       secure: true
+  //     }
+  //   }
+  // },
   providers: [
     Providers.Email({
       server: process.env.EMAIL_SERVER,
@@ -19,6 +40,11 @@ export default NextAuth({
       clientId: process.env.AUTH0_ID,
       clientSecret: process.env.AUTH0_SECRET,
       domain: process.env.AUTH0_DOMAIN,
+      // Used to debug https://github.com/nextauthjs/next-auth/issues/1664
+      // protection: ["pkce", "state"],
+      // authorizationParams: {
+      //   response_mode: 'form_post'
+      // }
       protection: 'pkce'
     }),
     Providers.Twitter({

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>
+  )
+}

release.config.js

@@ -2,9 +2,6 @@ module.exports = {
   branches: [
     '+([0-9])?(.{+([0-9]),x}).x',
     'main',
-    'next',
-    'next-major',
-    { name: 'beta', prerelease: true },
-    { name: 'alpha', prerelease: true }
+    { name: 'next', prerelease: true }
   ]
 }

src/adapters/typeorm/index.js

@@ -1,6 +1,5 @@
 import { createConnection, getConnection } from 'typeorm'
 import { createHash } from 'crypto'
-import require_optional from 'require_optional' // eslint-disable-line camelcase
 
 import { CreateUserError } from '../../lib/errors'
 import adapterConfig from './lib/config'
@@ -94,12 +93,8 @@ const Adapter = (typeOrmConfig, options = {}) => {
     let ObjectId
     if (config.type === 'mongodb') {
       idKey = '_id'
-      // Using a dynamic import causes problems for some compilers/bundlers
-      // that don't handle dynamic imports. To try and work around this we are
-      // using the same method mongodb uses to load Object ID type, which is to
-      // use the require_optional loader.
-      const mongodb = require_optional('mongodb')
-      ObjectId = mongodb.ObjectId
+      const mongodb = (await import('mongodb')).default
+      ObjectId = mongodb.ObjectID
     }
 
     // These values are stored as seconds, but to use them with dates in

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
@@ -20,167 +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)
-// 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.
-export async function getSession ({ ctx, req = ctx?.req, triggerEvent = true } = {}) {
-  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)
-// 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.
-async function getCsrfToken ({ ctx, 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
@@ -204,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.
@@ -220,27 +133,64 @@ 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]
 }
 
+/**
+ * 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)
- * @see https://next-auth.js.org/getting-started/client#signin
- * @param {string} [provider]
- * @param {SignInOptions} [options]
- * @param {object} [authorizationParams]
- * @return {Promise<SignInResponse | undefined>}
- * @typedef {{callbackUrl?: string; redirect?: boolean}} SignInOptions
- * @typedef {{error: string | null; status: number; ok: boolean}} SignInResponse
+ * 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 {
@@ -258,6 +208,9 @@ export async function signIn (provider, options = {}, authorizationParams = {})
     return
   }
   const isCredentials = providers[provider].type === 'credentials'
+  const isEmail = providers[provider].type === 'email'
+  const canRedirectBeDisabled = isCredentials || isEmail
+
   const signInUrl = isCredentials
     ? `${baseUrl}/callback/${provider}`
     : `${baseUrl}/signin/${provider}`
@@ -279,7 +232,7 @@ export async function signIn (provider, options = {}, authorizationParams = {})
   const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
   const res = await fetch(_signInUrl, fetchOptions)
   const data = await res.json()
-  if (redirect || !isCredentials) {
+  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
@@ -304,10 +257,10 @@ export async function signIn (provider, options = {}, authorizationParams = {})
 
 /**
  * Signs the user out, by removing the session cookie.
- * (Automatically adds the CSRF token to the request)
- * @param {SignOutOptions} [options]
- * @returns {Promise<{url?: string} | undefined>}
- * @typedef {{callbackUrl?: string; redirect?: boolean;}} SignOutOptions
+ * 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 {
@@ -328,7 +281,7 @@ export async function signOut (options = {}) {
   }
   const res = await fetch(`${baseUrl}/signout`, fetchOptions)
   const data = await res.json()
-  _sendMessage({ event: 'session', data: { trigger: 'signout' } })
+  broadcast.post({ event: 'session', data: { trigger: 'signout' } })
   if (redirect) {
     const url = data.url ?? callbackUrl
     window.location = url
@@ -342,40 +295,118 @@ export async function signOut (options = {}) {
   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 _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
+/** Returns the number of seconds elapsed since January 1, 1970 00:00:00 UTC. */
+function _now () {
+  return Math.floor(Date.now() / 1000)
+}
+
+/**
+ * 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/lib/logger.d.ts

@@ -3,3 +3,8 @@ export interface LoggerInstance {
   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/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/email.js

@@ -1,4 +1,3 @@
-import nodemailer from 'nodemailer'
 import logger from '../lib/logger'
 
 export default (options) => {
@@ -22,13 +21,13 @@ export default (options) => {
   }
 }
 
-const sendVerificationRequest = ({ identifier: email, url, baseUrl, provider }) => {
-  return new Promise((resolve, reject) => {
-    const { server, from } = provider
-    // Strip protocol from URL and use domain as site name
-    const site = baseUrl.replace(/^https?:\/\//, '')
-
-    nodemailer
+async function sendVerificationRequest ({ identifier: email, url, baseUrl, provider }) {
+  const { server, from } = provider
+  // Strip protocol from URL and use domain as site name
+  const site = baseUrl.replace(/^https?:\/\//, '')
+  try {
+    const nodemailer = (await import('nodemailer')).default
+    await nodemailer
       .createTransport(server)
       .sendMail({
         to: email,
@@ -36,14 +35,11 @@ const sendVerificationRequest = ({ identifier: email, url, baseUrl, provider })
         subject: `Sign in to ${site}`,
         text: text({ url, site, email }),
         html: html({ url, site, email })
-      }, (error) => {
-        if (error) {
-          logger.error('SEND_VERIFICATION_EMAIL_ERROR', email, error)
-          return reject(new Error('SEND_VERIFICATION_EMAIL_ERROR', error))
-        }
-        return resolve()
       })
-  })
+  } catch (error) {
+    logger.error('SEND_VERIFICATION_EMAIL_ERROR', email, error)
+    throw new Error('SEND_VERIFICATION_EMAIL_ERROR')
+  }
 }
 
 // Email HTML body

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

@@ -12,18 +12,22 @@ 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'
@@ -33,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,
@@ -49,18 +54,22 @@ export default {
   Email,
   EVEOnline,
   Facebook,
+  FACEIT,
   Foursquare,
   FusionAuth,
   GitHub,
   GitLab,
   Google,
   IdentityServer4,
+  Instagram,
+  Kakao,
   LINE,
   LinkedIn,
   MailRu,
   Medium,
   Netlify,
   Okta,
+  Osso,
   Reddit,
   Salesforce,
   Slack,
@@ -69,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/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

@@ -82,6 +82,7 @@ export interface NextAuthInternalOptions extends Pick<NextAuthOptions, NextAuthS
   basePath?: string
   action?: string
   csrfToken?: string
+  csrfTokenVerified?: boolean
 }
 
 export interface NextAuthRequest extends NextApiRequest {

src/server/index.js

@@ -1,4 +1,3 @@
-import adapters from '../adapters'
 import jwt from '../lib/jwt'
 import parseUrl from '../lib/parse-url'
 import logger, { setLogger } from '../lib/logger'
@@ -6,12 +5,12 @@ 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 * as routes from './routes'
 import renderPage from './pages'
-import csrfTokenHandler from './lib/csrf-token-handler'
 import createSecret from './lib/create-secret'
+import callbackUrlHandler from './lib/callback-url-handler'
+import extendRes from './lib/extend-res'
+import csrfTokenHandler from './lib/csrf-token-handler'
 import * as pkce from './lib/oauth/pkce-handler'
 import * as state from './lib/oauth/state-handler'
 
@@ -67,16 +66,18 @@ async function NextAuthHandler (req, res, userOptions) {
 
     const secret = createSecret({ userOptions, basePath, baseUrl })
 
-    const { csrfToken, csrfTokenVerified } = csrfTokenHandler(req, res, cookies, secret)
-
     const providers = parseProviders({ providers: userOptions.providers, baseUrl, basePath })
     const provider = providers.find(({ id }) => id === providerId)
 
-    if (provider &&
-      provider.type === 'oauth' && provider.version?.startsWith('2') &&
-       (!provider.protection && provider.state !== false)
-    ) {
-      provider.protection = 'state' // Default to state, as we did in 3.1 REVIEW: should we use "pkce" or "none" as default?
+    // Protection only works on OAuth 2.x providers
+    if (provider?.type === 'oauth' && provider.version?.startsWith('2')) {
+      // When provider.state is undefined, we still want this to pass
+      if (!provider.protection) {
+        // Default to state, as we did in 3.1 REVIEW: should we use "pkce" or "none" as default?
+        provider.protection = ['state']
+      } else if (typeof provider.protection === 'string') {
+        provider.protection = [provider.protection]
+      }
     }
 
     const maxAge = 30 * 24 * 60 * 60 // Sessions expire after 30 days of being idle
@@ -84,7 +85,11 @@ async function NextAuthHandler (req, res, userOptions) {
     // Parse database / adapter
     // If adapter is provided, use it (advanced usage, overrides database)
     // If database URI or config object is provided, use it (simple usage)
-    const adapter = userOptions.adapter ?? (userOptions.database && adapters.Default(userOptions.database))
+    let adapter = userOptions.adapter
+    if ((!adapter && !!userOptions.database)) {
+      const TypeOrm = (await import('../adapters/typeorm')).default
+      adapter = TypeOrm.Adapter(userOptions.database)
+    }
 
     // User provided options are overriden by other options,
     // except for the options with special handling above
@@ -103,7 +108,6 @@ async function NextAuthHandler (req, res, userOptions) {
       provider,
       cookies,
       secret,
-      csrfToken,
       providers,
       // Session options
       session: {
@@ -134,6 +138,7 @@ async function NextAuthHandler (req, res, userOptions) {
       logger
     }
 
+    csrfTokenHandler(req, res)
     await callbackUrlHandler(req, res)
 
     const render = renderPage(req, res)
@@ -146,7 +151,7 @@ async function NextAuthHandler (req, res, userOptions) {
         case 'session':
           return routes.session(req, res)
         case 'csrf':
-          return res.json({ csrfToken })
+          return res.json({ csrfToken: req.options.csrfToken })
         case 'signin':
           if (pages.signIn) {
             let signinUrl = `${pages.signIn}${pages.signIn.includes('?') ? '&' : '?'}callbackUrl=${req.options.callbackUrl}`
@@ -199,7 +204,7 @@ async function NextAuthHandler (req, res, userOptions) {
       switch (action) {
         case 'signin':
           // Verified CSRF Token required for all sign in routes
-          if (csrfTokenVerified && provider) {
+          if (req.options.csrfTokenVerified && provider) {
             if (await pkce.handleSignin(req, res)) return
             if (await state.handleSignin(req, res)) return
             return routes.signin(req, res)
@@ -208,14 +213,14 @@ async function NextAuthHandler (req, res, userOptions) {
           return res.redirect(`${baseUrl}${basePath}/signin?csrf=true`)
         case 'signout':
           // Verified CSRF Token required for signout
-          if (csrfTokenVerified) {
+          if (req.options.csrfTokenVerified) {
             return routes.signout(req, res)
           }
           return res.redirect(`${baseUrl}${basePath}/signout?csrf=true`)
         case 'callback':
           if (provider) {
             // Verified CSRF Token required for credentials providers only
-            if (provider.type === 'credentials' && !csrfTokenVerified) {
+            if (provider.type === 'credentials' && !req.options.csrfTokenVerified) {
               return res.redirect(`${baseUrl}${basePath}/signin?csrf=true`)
             }
 
@@ -225,18 +230,19 @@ async function NextAuthHandler (req, res, userOptions) {
           }
           break
         case '_log':
-          try {
-            if (!userOptions.logger) return
-            const {
-              code = 'CLIENT_ERROR',
-              level = 'error',
-              message = '[]'
-            } = req.body
+          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)
+              logger[level](code, ...JSON.parse(message))
+            } catch (error) {
+              // If logging itself failed...
+              logger.error('LOGGER_ERROR', error)
+            }
           }
           return res.end()
         default:

src/server/lib/csrf-token-handler.js

@@ -14,29 +14,30 @@ import * as cookie from './cookie'
  * For more details, see the following OWASP links:
  * https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#double-submit-cookie
  * https://owasp.org/www-chapter-london/assets/slides/David_Johansson-Double_Defeat_of_Double-Submit_Cookie.pdf
+ * @param {import("..").NextAuthRequest} req
+ * @param {import("..").NextAuthResponse} res
  */
-export default function csrfTokenHandler (req, res, cookies, secret) {
-  const { csrfToken: csrfTokenFromRequest } = req.body
-
-  let csrfTokenFromCookie
-  let csrfTokenVerified = false
-  if (req.cookies[cookies.csrfToken.name]) {
-    const [csrfTokenValue, csrfTokenHash] = req.cookies[cookies.csrfToken.name].split('|')
-    if (csrfTokenHash === createHash('sha256').update(`${csrfTokenValue}${secret}`).digest('hex')) {
+export default function csrfTokenHandler (req, res) {
+  const { cookies, secret } = req.options
+  if (cookies.csrfToken.name in req.cookies) {
+    const [csrfToken, csrfTokenHash] = req.cookies[cookies.csrfToken.name].split('|')
+    const expectedCsrfTokenHash = createHash('sha256').update(`${csrfToken}${secret}`).digest('hex')
+    if (csrfTokenHash === expectedCsrfTokenHash) {
       // If hash matches then we trust the CSRF token value
-      csrfTokenFromCookie = csrfTokenValue
-
-      // If this is a POST request and the CSRF Token in the Post request matches
-      // the cookie we have already verified is one we have set, then token is verified!
-      if (req.method === 'POST' && csrfTokenFromCookie === csrfTokenFromRequest) { csrfTokenVerified = true }
+      // If this is a POST request and the CSRF Token in the POST request matches
+      // the cookie we have already verified is the one we have set, then the token is verified!
+      const csrfTokenVerified = req.method === 'POST' && csrfToken === req.body.csrfToken
+      req.options.csrfToken = csrfToken
+      req.options.csrfTokenVerified = csrfTokenVerified
+      return
     }
   }
-  if (!csrfTokenFromCookie) {
-    // If no csrfToken - because it's not been set yet, or because the hash doesn't match
-    // (e.g. because it's been modifed or because the secret has changed) create a new token.
-    csrfTokenFromCookie = randomBytes(32).toString('hex')
-    const newCsrfTokenCookie = `${csrfTokenFromCookie}|${createHash('sha256').update(`${csrfTokenFromCookie}${secret}`).digest('hex')}`
-    cookie.set(res, cookies.csrfToken.name, newCsrfTokenCookie, cookies.csrfToken.options)
-  }
-  return { csrfToken: csrfTokenFromCookie, csrfTokenVerified }
+  // If no csrfToken from cookie - because it's not been set yet,
+  // or because the hash doesn't match (e.g. because it's been modifed or because the secret has changed)
+  // create a new token.
+  const csrfToken = randomBytes(32).toString('hex')
+  const csrfTokenHash = createHash('sha256').update(`${csrfToken}${secret}`).digest('hex')
+  const csrfTokenCookie = `${csrfToken}|${csrfTokenHash}`
+  cookie.set(res, cookies.csrfToken.name, csrfTokenCookie, cookies.csrfToken.options)
+  req.options.csrfToken = csrfToken
 }

src/server/lib/oauth/callback.js

@@ -108,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

@@ -136,7 +136,7 @@ async function getOAuth2AccessToken (code, provider, codeVerifier) {
     headers.Authorization = `Bearer ${code}`
   }
 
-  if (provider.protection === 'pkce') {
+  if (provider.protection.includes('pkce')) {
     params.code_verifier = codeVerifier
   }
 
@@ -167,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,

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

@@ -16,7 +16,8 @@ const PKCE_MAX_AGE = 60 * 15 // 15 minutes in seconds
 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.
+    // Provider does not support PKCE, nothing to do.
+    if (!provider.protection?.includes('pkce')) {
       return
     }
 
@@ -50,7 +51,7 @@ export async function handleCallback (req, 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

@@ -12,11 +12,12 @@ import { OAuthCallbackError } from '../../../lib/errors'
 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.
+    // Provider does not support state, nothing to do.
+    if (!provider.protection?.includes('state')) {
       return
     }
 
-    const { state } = req.query
+    const state = req.query.state || req.body.state
     const expectedState = createHash('sha256').update(csrfToken).digest('hex')
 
     logger.debug(
@@ -41,7 +42,7 @@ export async function handleCallback (req, 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?.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/pages/error.js

@@ -1,6 +1,5 @@
 // @ts-check
 import { h } from 'preact' // eslint-disable-line no-unused-vars
-import render from 'preact-render-to-string'
 
 /**
  * Renders an error page.
@@ -57,7 +56,7 @@ export default function error ({ baseUrl, basePath, error = 'default', res }) {
 
   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

@@ -65,18 +65,13 @@ export default async function callback (req, res) {
 
         try {
           const signInCallbackResponse = await callbacks.signIn(userOrProfile, account, OAuthProfile)
-          if (signInCallbackResponse === false) {
+          if (!signInCallbackResponse) {
             return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
           } else if (typeof signInCallbackResponse === 'string') {
             return res.redirect(signInCallbackResponse)
           }
         } catch (error) {
-          if (error instanceof Error) {
-            return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
-          }
-          // TODO: Remove in a future major release
-          logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
-          return res.redirect(error)
+          return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
         }
 
         // Sign user in
@@ -161,18 +156,13 @@ export default async function callback (req, res) {
       // Check if user is allowed to sign in
       try {
         const signInCallbackResponse = await callbacks.signIn(profile, account, { email })
-        if (signInCallbackResponse === false) {
+        if (!signInCallbackResponse) {
           return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
         } else if (typeof signInCallbackResponse === 'string') {
           return res.redirect(signInCallbackResponse)
         }
       } catch (error) {
-        if (error instanceof Error) {
-          return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
-        }
-        // TODO: Remove in a future major release
-        logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
-        return res.redirect(error)
+        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
       }
 
       // Sign user in
@@ -236,12 +226,11 @@ export default async function callback (req, res) {
       userObjectReturnedFromAuthorizeHandler = await provider.authorize(credentials)
       if (!userObjectReturnedFromAuthorizeHandler) {
         return res.status(401).redirect(`${baseUrl}${basePath}/error?error=CredentialsSignin&provider=${encodeURIComponent(provider.id)}`)
+      } else if (typeof userObjectReturnedFromAuthorizeHandler === 'string') {
+        return res.redirect(userObjectReturnedFromAuthorizeHandler)
       }
     } catch (error) {
-      if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
-      }
-      return res.redirect(error)
+      return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
     }
 
     const user = userObjectReturnedFromAuthorizeHandler
@@ -249,14 +238,13 @@ export default async function callback (req, res) {
 
     try {
       const signInCallbackResponse = await callbacks.signIn(user, account, credentials)
-      if (signInCallbackResponse === false) {
+      if (!signInCallbackResponse) {
         return res.status(403).redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
+      } else if (typeof signInCallbackResponse === 'string') {
+        return res.redirect(signInCallbackResponse)
       }
     } catch (error) {
-      if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
-      }
-      return res.redirect(error)
+      return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`)
     }
 
     const defaultJwtPayload = {

src/server/routes/signin.js

@@ -45,18 +45,13 @@ export default async function signin (req, res) {
     // Check if user is allowed to sign in
     try {
       const signInCallbackResponse = await callbacks.signIn(profile, account, { email, verificationRequest: true })
-      if (signInCallbackResponse === false) {
+      if (!signInCallbackResponse) {
         return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
       } else if (typeof signInCallbackResponse === 'string') {
         return res.redirect(signInCallbackResponse)
       }
     } catch (error) {
-      if (error instanceof Error) {
-        return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
-      }
-      // TODO: Remove in a future major release
-      logger.warn('SIGNIN_CALLBACK_REJECT_REDIRECT')
-      return res.redirect(error)
+      return res.redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
     }
 
     try {

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 }) {},
@@ -328,7 +354,7 @@ export default NextAuth({
     },
     warn(code, ...message) {
       log.warn(code, message)
-    }
+    },
     debug(code, ...message) {
       log.debug(code, message)
     }

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:
@@ -121,4 +155,4 @@ 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,
@@ -142,7 +141,7 @@ You can look at the existing built-in providers for inspiration.
 |       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

@@ -212,7 +212,18 @@ The URL must be considered valid by the [redirect callback handler](/configurati
 
 #### Using the redirect: false option
 
-When you use the `credentials` provider, you might not want the user to redirect to an error page if an error occurs, so you can handle any errors (like wrong credentials given by the user) on the same page. For that, you can pass `redirect: false` in the second parameter object. `signIn` then will return a Promise, that resolves to the following:
+:::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
 {
@@ -345,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/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/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/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/docs/warnings.md

@@ -46,32 +46,4 @@ You can use [node-jose-tools](https://www.npmjs.com/package/node-jose-tools) to
 
 **Option 2**: Specify custom encode/decode functions on the jwt object. This gives you complete control over signing / verification / etc.
 
-#### JWT_AUTO_GENERATED_ENCRYPTION_KEY
-
-#### SIGNIN_CALLBACK_REJECT_REDIRECT
-
-You returned something in the `signIn` callback, that is being deprecated.
-
-You probably had something similar in the callback:
-```js
-  return Promise.reject("/some/url")
-```
-
-or
-
-```js
-  throw "/some/url"
-```
-
-To remedy this, simply return the url instead:
-
-```js
-  return "/some/url"
-```
-
-
-#### STATE_OPTION_DEPRECATION
-You provided `state: true` or `state: false` as a provider option. This is being deprecated in a later release in favour of `protection: "state"` and `protection: "none"` respectively. To remedy this warning:
-
-- If you use `state: true`, just simply remove it. The default is `protection: "state"` already..
-- If you use `state: false`, set `protection: "none"`.
+#### JWT_AUTO_GENERATED_ENCRYPTION_KEY

www/package.json

@@ -2,7 +2,7 @@
   "name": "next-auth-docs",
   "version": "0.1.1",
   "scripts": {
-    "start": "docusaurus start",
+    "start": "npm run generate-providers && docusaurus start",
     "build": "npm run generate-providers && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
@@ -11,16 +11,16 @@
     "generate-providers": "node ./scripts/generate-providers.js"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.66",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.66",
+    "@docusaurus/core": "^2.0.0-alpha.70",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.70",
     "classnames": "^2.2.6",
-    "docusaurus-lunr-search": "^2.1.7",
+    "docusaurus-lunr-search": "^2.1.10",
     "jose": "^2.0.2",
     "lodash.times": "^4.3.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-marquee-slider": "^1.1.2",
-    "styled-components": "^5.2.0"
+    "styled-components": "^5.2.1"
   },
   "browserslist": {
     "production": [
@@ -35,6 +35,6 @@
     ]
   },
   "devDependencies": {
-    "standard": "^15.0.0"
+    "standard": "^16.0.3"
   }
 }