docs: change osu! capitalization inside the document

fix: nodemailer imports

.github/pr-labeler.yml

@@ -54,7 +54,7 @@ upstash-redis:
 xata:
   - packages/adapter-xata/**
 
-core:
+legacy:
   - packages/next-auth/src/**/*
 
 style:

.github/sync.yml

@@ -1,7 +0,0 @@
-# This is a legacy example pushed from the v4 branch
-nextauthjs/next-auth-example:
-  - source: apps/example-nextjs
-    dest: .
-    deleteOrphaned: true
-  - .github/FUNDING.yml
-  - LICENSE

.github/workflows/release.yml

@@ -32,11 +32,16 @@ jobs:
         run: pnpm install
       - name: Build
         run: pnpm build
+        env:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ vars.TURBO_TEAM }}
       - name: Run tests
         run: pnpm test
         env:
           UPSTASH_REDIS_URL: ${{ secrets.UPSTASH_REDIS_URL }}
           UPSTASH_REDIS_KEY: ${{ secrets.UPSTASH_REDIS_KEY }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ vars.TURBO_TEAM }}
       # - name: Coverage
       #   uses: codecov/codecov-action@v1
       #   with:

.github/workflows/sync-examples.yml

@@ -1,18 +0,0 @@
-name: Sync Example Repositories
-on:
-  push:
-    branches:
-      - v4
-  workflow_dispatch:
-jobs:
-  sync:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-      - name: Run GitHub File Sync
-        # Can update to v1 when https://github.com/BetaHuhn/repo-file-sync-action/issues/168 is resolved
-        uses: BetaHuhn/repo-file-sync-action@v1.16.5
-        with:
-          GH_PAT: ${{ secrets.GH_PAT_CLASSIC }}
-          SKIP_PR: true

apps/dev/README.md

@@ -3,4 +3,4 @@
 This folder contains a Next.js app using NextAuth.js for local development. See the following section on how to start:
 
 [Setting up local environment
-](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md#setting-up-local-environment)
+](https://github.com/nextauthjs/.github/blob/main/CONTRIBUTING.md#setting-up-local-environment)

apps/dev/app/api/auth/[...nextauth]/route.ts

@@ -1,4 +1,5 @@
-import NextAuth, { NextAuthOptions } from "next-auth"
+import NextAuth, { type NextAuthOptions } from "next-auth"
+// import { NextRequest } from "next/server"
 
 // Providers
 import Apple from "next-auth/providers/apple"
@@ -78,55 +79,142 @@ export const authOptions: NextAuthOptions = {
       credentials: { password: { label: "Password", type: "password" } },
       async authorize(credentials) {
         if (credentials.password !== "pw") return null
-        return { name: "Fill Murray", email: "bill@fillmurray.com", image: "https://www.fillmurray.com/64/64", id: "1", foo: "" }
+        return {
+          name: "Fill Murray",
+          email: "bill@fillmurray.com",
+          image: "https://www.fillmurray.com/64/64",
+          id: "1",
+          foo: "",
+        }
       },
     }),
-    Apple({ clientId: process.env.APPLE_ID, clientSecret: process.env.APPLE_SECRET }),
-    Auth0({ clientId: process.env.AUTH0_ID, clientSecret: process.env.AUTH0_SECRET, issuer: process.env.AUTH0_ISSUER }),
+    Apple({
+      clientId: process.env.APPLE_ID,
+      clientSecret: process.env.APPLE_SECRET,
+    }),
+    Auth0({
+      clientId: process.env.AUTH0_ID,
+      clientSecret: process.env.AUTH0_SECRET,
+      issuer: process.env.AUTH0_ISSUER,
+    }),
     AzureAD({
       clientId: process.env.AZURE_AD_CLIENT_ID,
       clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
       tenantId: process.env.AZURE_AD_TENANT_ID,
     }),
-    AzureB2C({ clientId: process.env.AZURE_B2C_ID, clientSecret: process.env.AZURE_B2C_SECRET, issuer: process.env.AZURE_B2C_ISSUER }),
-    BoxyHQSAML({ issuer: "https://jackson-demo.boxyhq.com", clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com", clientSecret: "dummy" }),
+    AzureB2C({
+      clientId: process.env.AZURE_B2C_ID,
+      clientSecret: process.env.AZURE_B2C_SECRET,
+      issuer: process.env.AZURE_B2C_ISSUER,
+    }),
+    BoxyHQSAML({
+      issuer: "https://jackson-demo.boxyhq.com",
+      clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com",
+      clientSecret: "dummy",
+    }),
     // Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
-    Discord({ clientId: process.env.DISCORD_ID, clientSecret: process.env.DISCORD_SECRET }),
-    DuendeIDS6({ clientId: "interactive.confidential", clientSecret: "secret", issuer: "https://demo.duendesoftware.com" }),
-    Facebook({ clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET }),
-    Foursquare({ clientId: process.env.FOURSQUARE_ID, clientSecret: process.env.FOURSQUARE_SECRET }),
-    Freshbooks({ clientId: process.env.FRESHBOOKS_ID, clientSecret: process.env.FRESHBOOKS_SECRET }),
-    GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }),
-    Gitlab({ clientId: process.env.GITLAB_ID, clientSecret: process.env.GITLAB_SECRET }),
-    Google({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }),
+    Discord({
+      clientId: process.env.DISCORD_ID,
+      clientSecret: process.env.DISCORD_SECRET,
+    }),
+    DuendeIDS6({
+      clientId: "interactive.confidential",
+      clientSecret: "secret",
+      issuer: "https://demo.duendesoftware.com",
+    }),
+    Facebook({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET,
+    }),
+    Foursquare({
+      clientId: process.env.FOURSQUARE_ID,
+      clientSecret: process.env.FOURSQUARE_SECRET,
+    }),
+    Freshbooks({
+      clientId: process.env.FRESHBOOKS_ID,
+      clientSecret: process.env.FRESHBOOKS_SECRET,
+    }),
+    GitHub({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+    Gitlab({
+      clientId: process.env.GITLAB_ID,
+      clientSecret: process.env.GITLAB_SECRET,
+    }),
+    Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
     // IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
-    Instagram({ clientId: process.env.INSTAGRAM_ID, clientSecret: process.env.INSTAGRAM_SECRET }),
+    Instagram({
+      clientId: process.env.INSTAGRAM_ID,
+      clientSecret: process.env.INSTAGRAM_SECRET,
+    }),
     // Keycloak({ clientId: process.env.KEYCLOAK_ID, clientSecret: process.env.KEYCLOAK_SECRET, issuer: process.env.KEYCLOAK_ISSUER }),
-    Line({ clientId: process.env.LINE_ID, clientSecret: process.env.LINE_SECRET }),
-    LinkedIn({ clientId: process.env.LINKEDIN_ID, clientSecret: process.env.LINKEDIN_SECRET }),
-    Mailchimp({ clientId: process.env.MAILCHIMP_ID, clientSecret: process.env.MAILCHIMP_SECRET }),
+    Line({
+      clientId: process.env.LINE_ID,
+      clientSecret: process.env.LINE_SECRET,
+    }),
+    LinkedIn({
+      clientId: process.env.LINKEDIN_ID,
+      clientSecret: process.env.LINKEDIN_SECRET,
+    }),
+    Mailchimp({
+      clientId: process.env.MAILCHIMP_ID,
+      clientSecret: process.env.MAILCHIMP_SECRET,
+    }),
     // Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
-    Osu({ clientId: process.env.OSU_CLIENT_ID, clientSecret: process.env.OSU_CLIENT_SECRET }),
-    Patreon({ clientId: process.env.PATREON_ID, clientSecret: process.env.PATREON_SECRET }),
-    Slack({ clientId: process.env.SLACK_ID, clientSecret: process.env.SLACK_SECRET }),
-    Spotify({ clientId: process.env.SPOTIFY_ID, clientSecret: process.env.SPOTIFY_SECRET }),
-    Trakt({ clientId: process.env.TRAKT_ID, clientSecret: process.env.TRAKT_SECRET }),
-    Twitch({ clientId: process.env.TWITCH_ID, clientSecret: process.env.TWITCH_SECRET }),
-    Twitter({ clientId: process.env.TWITTER_ID, clientSecret: process.env.TWITTER_SECRET }),
+    Osu({
+      clientId: process.env.OSU_CLIENT_ID,
+      clientSecret: process.env.OSU_CLIENT_SECRET,
+    }),
+    Patreon({
+      clientId: process.env.PATREON_ID,
+      clientSecret: process.env.PATREON_SECRET,
+    }),
+    Slack({
+      clientId: process.env.SLACK_ID,
+      clientSecret: process.env.SLACK_SECRET,
+    }),
+    Spotify({
+      clientId: process.env.SPOTIFY_ID,
+      clientSecret: process.env.SPOTIFY_SECRET,
+    }),
+    Trakt({
+      clientId: process.env.TRAKT_ID,
+      clientSecret: process.env.TRAKT_SECRET,
+    }),
+    Twitch({
+      clientId: process.env.TWITCH_ID,
+      clientSecret: process.env.TWITCH_SECRET,
+    }),
+    Twitter({
+      clientId: process.env.TWITTER_ID,
+      clientSecret: process.env.TWITTER_SECRET,
+    }),
     // TwitterLegacy({ clientId: process.env.TWITTER_LEGACY_ID, clientSecret: process.env.TWITTER_LEGACY_SECRET }),
     Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
-    Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
-    WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
+    Wikimedia({
+      clientId: process.env.WIKIMEDIA_ID,
+      clientSecret: process.env.WIKIMEDIA_SECRET,
+    }),
+    WorkOS({
+      clientId: process.env.WORKOS_ID,
+      clientSecret: process.env.WORKOS_SECRET,
+    }),
   ],
 }
 
-if (authOptions.adapter) {
-  // TODO:
-  // authOptions.providers.unshift(
-  //   // NOTE: You can start a fake e-mail server with `pnpm email`
-  //   // and then go to `http://localhost:1080` in the browser
-  //   Email({ server: "smtp://127.0.0.1:1025?tls.rejectUnauthorized=false" })
-  // )
-}
+/**
+ * Advanced Initialization - route handler
+ */
+// const handler = async (
+//   req: NextRequest,
+//   routeContext: { params: { nextauth: string[] } }
+// ): Promise<any> => {
+//   return NextAuth(req, routeContext, authOptions)
+// }
 
-export default NextAuth(authOptions)
+const handler = NextAuth(authOptions)
+export { handler as GET, handler as POST }

apps/dev/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/dev/package.json

@@ -21,7 +21,7 @@
     "@prisma/client": "^3",
     "@supabase/supabase-js": "^2.0.5",
     "faunadb": "^4",
-    "next": "13.0.6",
+    "next": "13.4.12",
     "next-auth": "workspace:*",
     "nodemailer": "^6",
     "react": "^18",
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@types/jsonwebtoken": "^8.5.5",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.6",
     "fake-smtp-server": "^0.8.0",
     "pg": "^8.7.3",

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

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

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

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

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

@@ -1,7 +1,7 @@
 // This is an example of how to query data from Supabase with RLS.
 // Learn more about Row Levele Security (RLS): https://supabase.com/docs/guides/auth/row-level-security
 import { getServerSession } from "next-auth/next"
-import { authOptions } from "../auth/[...nextauth]"
+import { authOptions } from "/app/api/auth/[...nextauth]/route"
 import { createClient } from "@supabase/supabase-js"
 
 export default async (req, res) => {

apps/dev/pages/protected-ssr.js

@@ -1,6 +1,6 @@
 // This is an example of how to protect content using server rendering
 import { getServerSession } from "next-auth/next"
-import { authOptions } from "./api/auth/[...nextauth]"
+import { authOptions } from "/app/api/auth/[...nextauth]/route"
 import Layout from "../components/layout"
 import AccessDenied from "../components/access-denied"
 

apps/dev/pages/server.js

@@ -1,6 +1,6 @@
 import { getServerSession } from "next-auth/next"
 import Layout from "../components/layout"
-import { authOptions } from "./api/auth/[...nextauth]"
+import { authOptions } from "/app/api/auth/[...nextauth]/route"
 
 export default function Page() {
   // As this page uses Server Side Rendering, the `session` will be already

apps/dev/pages/supabase-ssr.js

@@ -1,7 +1,7 @@
 // This is an example of how to protect content using server rendering
 // and fetching data from Supabase with RLS enabled.
 import { getServerSession } from "next-auth/next"
-import { authOptions } from "./api/auth/[...nextauth]"
+import { authOptions } from "/app/api/auth/[...nextauth]/route"
 import { createClient } from "@supabase/supabase-js"
 import Layout from "../components/layout"
 import AccessDenied from "../components/access-denied"

apps/dev/tsconfig.json

@@ -23,7 +23,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",

apps/example-nextjs/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@types/node": "^17",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.0.37",
     "typescript": "^4"
   }
 }

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

@@ -53,6 +53,7 @@ export const authOptions: NextAuthOptions = {
   ],
   theme: {
     colorScheme: "light",
+    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
   },
   callbacks: {
     async jwt({ token }) {

docs/docs/adapters.md

@@ -3,19 +3,21 @@ id: adapters
 title: Adapters
 ---
 
-Visit the [authjs.dev](https://authjs.dev/reference/adapters) page for the up-to-date documentation.
+Visit the [authjs.dev](https://authjs.dev/getting-started/adapters) page for the up-to-date documentation.
 
 - [Dgraph](https://authjs.dev/reference/adapter/dgraph)
+- [Drizzle](https://authjs.dev/reference/adapter/drizzle)
 - [DynamoDB](https://authjs.dev/reference/adapter/dynamodb)
 - [Fauna](https://authjs.dev/reference/adapter/fauna)
 - [Firebase](https://authjs.dev/reference/adapter/firebase)
-- [MongoDB](https://authjs.dev/reference/adapter/mongodb)
-- [Prisma](https://authjs.dev/reference/adapter/prisma)
-- [TypeORM](https://authjs.dev/reference/adapter/typeorm)
+- [kysely](https://authjs.dev/reference/adapter/kysely)
 - [MikroORM](https://authjs.dev/reference/adapter/mikro-orm)
+- [MongoDB](https://authjs.dev/reference/adapter/mongodb)
 - [neo4j](https://authjs.dev/reference/adapter/neo4j)
+- [Prisma](https://authjs.dev/reference/adapter/prisma)
 - [PouchDB](https://authjs.dev/reference/adapter/pouchdb)
 - [Sequelize](https://authjs.dev/reference/adapter/sequelize)
 - [Supabase](https://authjs.dev/reference/adapter/supabase)
+- [TypeORM](https://authjs.dev/reference/adapter/typeorm)
 - [Upstash Redis](https://authjs.dev/reference/adapter/upstash-redis)
 - [Xata](https://authjs.dev/reference/adapter/xata)

docs/docs/configuration/databases.md

@@ -3,7 +3,7 @@ id: databases
 title: Databases
 ---
 
-NextAuth.js offers multiple database adapters. Check out [the overview](https://authjs.dev/reference/adapters).
+NextAuth.js offers multiple database adapters. Check out [the overview](https://authjs.dev/getting-started/adapters).
 
 > As of **v4** NextAuth.js no longer ships with an adapter included by default. If you would like to persist any information, you need to install one of the many available adapters yourself. See the individual adapter documentation pages for more details.
 
@@ -13,4 +13,4 @@ To learn more about databases in NextAuth.js and how they are used, check out [d
 
 ## How to use a database
 
-See the [documentation for adapters](https://authjs.dev/reference/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).
+See the [documentation for adapters](https://authjs.dev/getting-started/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).

docs/docs/configuration/initialization.md

@@ -3,17 +3,23 @@ id: initialization
 title: Initialization
 ---
 
+The main entry point of NextAuth.js is the `NextAuth` method that you import from `next-auth`. It handles different types of requests, as defined in the [REST API](../getting-started/rest-api.md) section.
+
+:::info
+NextAuth.js cannot use the run [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime) for initialization. The upcoming [`@auth/nextjs` library](https://authjs.dev/reference/nextjs) (which will replace `next-auth`) on the other hand will be fully compatible.
+:::
+
+You can initialize NextAuth.js in a few different ways.
+
+## Simple initialization
+
+### API Routes (`pages`)
+
 In Next.js, you can define an API route that will catch all requests that begin with a certain path. Conveniently, this is called [Catch all API routes](https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes).
 
 When you define a `/pages/api/auth/[...nextauth]` JS/TS file, you instruct NextAuth.js that every API request beginning with `/api/auth/*` should be handled by the code written in the `[...nextauth]` file.
 
-Depending on your use case, you can initialize NextAuth.js in two different ways:
-
-## Simple initialization
-
-In most cases, you won't need to worry about what `NextAuth.js` does, and you will get by just fine with the following initialization:
-
-```ts title="/pages/api/auth/[...nextauth].js"
+```ts title="/pages/api/auth/[...nextauth].ts"
 import NextAuth from "next-auth"
 
 export default NextAuth({
@@ -25,9 +31,36 @@ Here, you only need to pass your [options](/configuration/options) to `NextAuth`
 
 This is the preferred initialization in tutorials/other parts of the documentation, as it simplifies the code and reduces potential errors in the authentication flow.
 
+### Route Handlers (`app/`)
+
+[Next.js 13.2](https://nextjs.org/blog/next-13-2#custom-route-handlers) introduced [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers), the preferred way to handle REST-like requests in App Router (`app/`).
+
+You can initialize NextAuth.js with a Route Handler too, very similar to API Routes.
+
+```ts title="/app/api/auth/[...nextauth]/route.ts"
+import NextAuth from "next-auth"
+
+const handler = NextAuth({
+  ...
+})
+
+export { handler as GET, handler as POST }
+```
+
+Internally, NextAuth.js detects that it is being initialized in a Route Handler (by understanding that it is passed a Web [`Request` instance](https://developer.mozilla.org/en-US/docs/Web/API/Request)), and will return a handler that returns a [`Response` instance](https://developer.mozilla.org/en-US/docs/Web/API/Response). A Route Handler file expects you to export some named handler functions that handle a request and return a response. NextAuth.js needs the `GET` and `POST` handlers to function properly, so we export those two.
+
+:::info
+Technically, in a Route Handler, the `api/` prefix is not necessary, but we decided to keep it required for an easier migration.
+:::
+
 ## Advanced initialization
 
-If you have a specific use case and need to make NextAuth.js do something slightly different than what it is designed for, keep in mind, the `[...nextauth].js` config file is still just **a regular [API Route](https://nextjs.org/docs/api-routes/introduction)** at the end of the day.
+:::info
+The following describes the advanced initialization with API Routes, but everything will apply similarily when using [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers) too.
+Instead, `NextAuth` will receive the first two arguments of a Route Handler, and the third argument will be the [auth options](../configuration/options.md)
+:::
+
+If you have a specific use case and need to make NextAuth.js do something slightly different than what it is designed for, keep in mind, the `[...nextauth].ts` config file is just **a regular [API Route](https://nextjs.org/docs/api-routes/introduction)**.
 
 That said, you can initialize NextAuth.js like this:
 
@@ -91,7 +124,7 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
 
 A practical example could be to not show a certain provider on the default sign-in page, but still be able to sign in with it. (The idea is taken from [this discussion](https://github.com/nextauthjs/next-auth/discussions/3133)):
 
-```js title="/pages/api/auth/[...nextauth].js"
+```js title="/pages/api/auth/[...nextauth].ts"
 import NextAuth from "next-auth"
 import CredentialsProvider from "next-auth/providers/credentials"
 import GoogleProvider from "next-auth/providers/google"
@@ -114,7 +147,7 @@ export default async function auth(req, res) {
 }
 ```
 
-For more details on all available actions and which methods are supported, please check out the [REST API documentation](/getting-started/rest-api) or the appropriate area in [the source code](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/index.ts)
+For more details on all available actions and which methods are supported, please check out the [REST API documentation](/getting-started/rest-api) or the appropriate area in [the source code](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/index.ts)
 
 This way of initializing `NextAuth` is very powerful, but should be used sparingly.
 

docs/docs/configuration/nextjs.md

@@ -1,14 +1,29 @@
 # Next.js
 
-## `unstable_getServerSession`
-
-This method was renamed to `getServerSession`. See the documentation below.
-
 ## `getServerSession`
 
-When calling from server-side i.e. in API routes or in `getServerSideProps`, we recommend using this function instead of `getSession` to retrieve the `session` object. This method is especially useful when you are using NextAuth.js with a database. This method can _drastically_ reduce response time when used over `getSession` on server-side, due to avoiding an extra `fetch` to an API Route (this is generally [not recommended in Next.js](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#getserversideprops-or-api-routes)). In addition, `getServerSession` will correctly update the cookie expiry time and update the session content if `callbacks.jwt` or `callbacks.session` changed something.
+:::tip
+You can create a helper function so you don't need to pass `authOptions` around:
 
-Otherwise, if you only want to get the session token, see [`getToken`](/tutorials/securing-pages-and-api-routes#using-gettoken).
+```ts title=auth.ts
+import type { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from "next"
+import type { NextAuthOptions } from "next-auth"
+import { getServerSession } from "next-auth"
+
+// You'll need to import and pass this
+// to `NextAuth` in `app/api/auth/[...nextauth]/route.ts`
+export const config = {
+  providers: [], // rest of your config
+} satisfies NextAuthOptions
+
+// Use it in server contexts
+export function auth(...args: [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]] | [NextApiRequest, NextApiResponse] | []) {
+  return getServerSession(...args, config)
+}
+```
+:::
+
+When calling from the server-side i.e. in Route Handlers, React Server Components, API routes or in `getServerSideProps`, we recommend using this function instead of `getSession` to retrieve the `session` object. This method is especially useful when you are using NextAuth.js with a database. This method can _drastically_ reduce response time when used over `getSession` on server-side, due to avoiding an extra `fetch` to an API Route (this is generally [not recommended in Next.js](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#getserversideprops-or-api-routes)). In addition, `getServerSession` will correctly update the cookie expiry time and update the session content if `callbacks.jwt` or `callbacks.session` changed something.
 
 `getServerSession` requires passing the same object you would pass to `NextAuth` when initializing NextAuth.js. To do so, you can export your NextAuth.js options in the following way:
 
@@ -55,7 +70,7 @@ import { authOptions } from 'pages/api/auth/[...nextauth]'
 import { getServerSession } from "next-auth/next"
 
 
-export async function handler(req, res) {
+export default async function handler(req, res) {
   const session = await getServerSession(req, res, authOptions)
 
   if (!session) {
@@ -69,7 +84,7 @@ export async function handler(req, res) {
 }
 ```
 
-### In `app/` directory:
+### In App Router:
 
 You can also use `getServerSession` in Next.js' server components:
 
@@ -87,6 +102,15 @@ export default async function Page() {
 Currently, the underlying Next.js `cookies()` method [only provides read access](https://beta.nextjs.org/docs/api-reference/cookies) to the request cookies. This means that the `expires` value is stripped away from `session` in Server Components. Furthermore, there is a hard expiry on sessions, after which the user will be required to sign in again. (The default expiry is 30 days).
 :::
 
+### Caching
+
+Note that using this function implies personalized data and that you should not store pages or APIs using this in a [public cache](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control). For example a host like [Vercel](https://vercel.com/docs/concepts/functions/serverless-functions/edge-caching) will implicitly prevent you from caching publicly due to the `set-cookie` header set by this function.
+
+
+## `unstable_getServerSession`
+
+This method was renamed to `getServerSession`. See the documentation above.
+
 ## Middleware
 
 You can use a Next.js Middleware with NextAuth.js to protect your site.
@@ -154,22 +178,27 @@ Callbacks are asynchronous functions you can use to control what happens when an
 
 #### Description
 
-Specify URLs to be used if you want to create custom sign in, and error pages. Pages specified will override the corresponding built-in page.
+Specify URLs to be used if you want to create custom sign-in and error pages. The pages specified will override the corresponding built-in page.
 
-:::note
-This should match the `pages` configuration that's found in `[...nextauth].ts`.
+:::info
+The `pages` configuration should match the same configuration in `[...nextauth].ts`. This is so that the `next-auth` Middleware is aware of your custom pages, so it won't end up redirecting to itself when an unauthenticated condition is met.
 :::
 
 #### Example (default value)
 
 ```js
-pages: {
-  signIn: '/api/auth/signin',
-  error: '/api/auth/error',
-}
+import { withAuth } from "next-auth/middleware"
+
+export default withAuth({
+  // Matches the pages config in `[...nextauth]`
+  pages: {
+    signIn: '/login',
+    error: '/error',
+  }
+})
 ```
 
-See the documentation for the [pages option](/configuration/pages) for more information.
+For more information, see the documentation for the [pages option](/configuration/pages).
 
 ---
 
@@ -179,7 +208,7 @@ See the documentation for the [pages option](/configuration/pages) for more info
 
 #### Description
 
-The same `secret` used in the [NextAuth.js config](/configuration/options#options).
+The same `secret` is used in the [NextAuth.js config](/configuration/options#options).
 
 #### Example (default value)
 
@@ -225,7 +254,6 @@ The `middleware` function will only be invoked if the `authorized` callback retu
 
 If you have a custom jwt decode method set in `[...nextauth].ts`, you must also pass the same `decode` method to `withAuth` in order to read the custom-signed JWT correctly. You may want to extract the encode/decode logic to a separate function for consistency.
 
-``
 ```ts title="/api/auth/[...nextauth].ts"
 import type { NextAuthOptions } from "next-auth"
 import NextAuth from "next-auth"
@@ -253,7 +281,7 @@ import withAuth from "next-auth/middleware"
 import { authOptions } from "pages/api/auth/[...nextauth]";
 
 export default withAuth({
-  jwt: { decode: authOptions.jwt },
+  jwt: { decode: authOptions.jwt?.decode },
   callbacks: {
     authorized: ({ token }) => !!token,
   },

docs/docs/configuration/options.md

@@ -27,7 +27,7 @@ Using [System Environment Variables](https://vercel.com/docs/concepts/projects/e
 
 ### NEXTAUTH_SECRET
 
-Used to encrypt the NextAuth.js JWT, and to hash [email verification tokens](https://authjs.dev/reference/adapters#verification-token). This is the default value for the `secret` option in [NextAuth](/configuration/options#secret) and [Middleware](/configuration/nextjs#secret).
+Used to encrypt the NextAuth.js JWT, and to hash [email verification tokens](https://authjs.dev/getting-started/adapters#verification-token). This is the default value for the `secret` option in [NextAuth](/configuration/options#secret) and [Middleware](/configuration/nextjs#secret).
 
 
 ### NEXTAUTH_URL_INTERNAL
@@ -310,7 +310,7 @@ events: {
 
 #### Description
 
-By default NextAuth.js does not include an adapter any longer. If you would like to persist user / account data, please install one of the many available adapters. More information can be found in the [adapter documentation](https://authjs.dev/reference/adapters).
+By default NextAuth.js does not include an adapter any longer. If you would like to persist user / account data, please install one of the many available adapters. More information can be found in the [adapter documentation](https://authjs.dev/getting-started/adapters).
 
 ---
 
@@ -472,7 +472,7 @@ cookies: {
       httpOnly: true,
       sameSite: 'lax',
       path: '/',
-      secure: useSecureCookies,
+      secure: true,
       maxAge: 900
     }
   },
@@ -482,7 +482,7 @@ cookies: {
       httpOnly: true,
       sameSite: "lax",
       path: "/",
-      secure: useSecureCookies,
+      secure: true,
       maxAge: 900
     },
   },
@@ -492,7 +492,7 @@ cookies: {
       httpOnly: true,
       sameSite: "lax",
       path: "/",
-      secure: useSecureCookies,
+      secure: true,
     },
   },
 }

docs/docs/configuration/pages.md

@@ -44,11 +44,11 @@ Example: `/auth/error?error=Configuration`
 
 The following errors are passed as error query parameters to the default or overridden sign-in page:
 
-- **OAuthSignin**: Error in constructing an authorization URL ([1](https://github.com/nextauthjs/next-auth/blob/457952bb5abf08b09861b0e5da403080cd5525be/src/server/lib/signin/oauth.js), [2](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/lib/oauth/pkce-handler.ts), [3](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/lib/oauth/state-handler.ts)),
-- **OAuthCallback**: Error in handling the response ([1](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/lib/oauth/callback.ts), [2](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/lib/oauth/pkce-handler.ts), [3](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/lib/oauth/state-handler.ts)) from an OAuth provider.
+- **OAuthSignin**: Error in constructing an authorization URL ([1](https://github.com/nextauthjs/next-auth/blob/457952bb5abf08b09861b0e5da403080cd5525be/src/server/lib/signin/oauth.js), [2](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/lib/oauth/pkce-handler.ts), [3](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/lib/oauth/state-handler.ts)),
+- **OAuthCallback**: Error in handling the response ([1](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/lib/oauth/callback.ts), [2](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/lib/oauth/pkce-handler.ts), [3](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/lib/oauth/state-handler.ts)) from an OAuth provider.
 - **OAuthCreateAccount**: Could not create OAuth provider user in the database.
 - **EmailCreateAccount**: Could not create email provider user in the database.
-- **Callback**: Error in the [OAuth callback handler route](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/routes/callback.ts)
+- **Callback**: Error in the [OAuth callback handler route](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/routes/callback.ts)
 - **OAuthAccountNotLinked**: If the email on the account is already linked, but not with this OAuth account
 - **EmailSignin**: Sending the e-mail with the verification token failed
 - **CredentialsSignin**: The `authorize` callback returned `null` in the [Credentials provider](/providers/credentials). We don't recommend providing information about which part of the credentials were wrong, as it might be abused by malicious hackers.
@@ -78,12 +78,17 @@ In addition, you can define a `theme.brandColor` to define a custom accent color
 In order to get the available authentication providers and the URLs to use for them, you can make a request to the API endpoint `/api/auth/providers`:
 
 ```tsx title="pages/auth/signin.tsx"
-import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
+import type {
+  GetServerSidePropsContext,
+  InferGetServerSidePropsType,
+} from "next"
 import { getProviders, signIn } from "next-auth/react"
 import { getServerSession } from "next-auth/next"
-import { authOptions } from "../api/auth/[...nextauth]";
+import { authOptions } from "../api/auth/[...nextauth]"
 
-export default function SignIn({ providers }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function SignIn({
+  providers,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <>
       {Object.values(providers).map((provider) => (
@@ -98,17 +103,17 @@ export default function SignIn({ providers }: InferGetServerSidePropsType<typeof
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const session = await getServerSession(context.req, context.res, authOptions);
-  
+  const session = await getServerSession(context.req, context.res, authOptions)
+
   // If the user is already logged in, redirect.
   // Note: Make sure not to redirect to the same page
   // To avoid an infinite loop!
   if (session) {
-    return { redirect: { destination: "/" } };
+    return { redirect: { destination: "/" } }
   }
 
-  const providers = await getProviders();
-  
+  const providers = await getProviders()
+
   return {
     props: { providers: providers ?? [] },
   }
@@ -122,10 +127,15 @@ There is another, more fully styled example signin page available [here](https:/
 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**.
 
 ```tsx title="pages/auth/email-signin.tsx"
-import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
+import type {
+  GetServerSidePropsContext,
+  InferGetServerSidePropsType,
+} from "next"
 import { getCsrfToken } from "next-auth/react"
 
-export default function SignIn({ csrfToken }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function SignIn({
+  csrfToken,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <form method="post" action="/api/auth/signin/email">
       <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
@@ -157,10 +167,15 @@ 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**.
 
 ```tsx title="pages/auth/credentials-signin.tsx"
-import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
+import type {
+  GetServerSidePropsContext,
+  InferGetServerSidePropsType,
+} from "next"
 import { getCsrfToken } from "next-auth/react"
 
-export default function SignIn({ csrfToken }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function SignIn({
+  csrfToken,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <form method="post" action="/api/auth/callback/credentials">
       <input name="csrfToken" type="hidden" defaultValue={csrfToken} />

docs/docs/configuration/providers/email.md

@@ -3,6 +3,12 @@ id: email
 title: Email
 ---
 
+### Install nodemailer
+
+```bash npm2yarn2pnpm
+npm install nodemailer
+```
+
 ### How to
 
 The Email provider sends "magic links" via email that the user can click on to sign in.
@@ -35,10 +41,10 @@ The email provider requires a database, it cannot be used without one.
 
 |          Name           |                                     Description                                     |               Type               | Required |
 | :---------------------: | :---------------------------------------------------------------------------------: | :------------------------------: | :------: |
-|           id            |                             Unique ID for the provider                              |             `string`             |   Yes    |
-|          name           |                          Descriptive name for the provider                          |             `string`             |   Yes    |
-|          type           |                       Type of provider, in this case `email`                        |            `"email"`             |   Yes    |
-|         server          |                     Path or object pointing to the email server                     |       `string` or `Object`       |   Yes    |
-| sendVerificationRequest |               Callback to execute when a verification request is sent               | `(params) => Promise<undefined>` |   Yes    |
+|           id            |                             Unique ID for the provider                              |             `string`             |    No    |
+|          name           |                          Descriptive name for the provider                          |             `string`             |    No    |
+|          type           |                       Type of provider, in this case `email`                        |            `"email"`             |    No    |
+|         server          |                     Path or object pointing to the email server                     |       `string` or `Object`       |   No    |
+| sendVerificationRequest |     Callback to execute to send a verification request, default uses nodemailer     | `(params) => Promise<undefined>` |    No    |
 |          from           |   The email address from which emails are sent, default: "<no-reply@example.com>"   |             `string`             |    No    |
 |         maxAge          | How long until the e-mail can be used to log the user in seconds. Defaults to 1 day |             `number`             |    No    |

docs/docs/configuration/providers/oauth.md

@@ -359,7 +359,7 @@ providers: [
 
 ## Built-in providers
 
-NextAuth.js comes with a set of built-in providers. You can find them [here](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers). Each built-in provider has its own documentation page:
+NextAuth.js comes with a set of built-in providers. You can find them [here](https://github.com/nextauthjs/next-auth/tree/v4/packages/next-auth/src/providers). Each built-in provider has its own documentation page:
 
 <div className="provider-name-list">
 {Object.entries(require("../../../providers.json"))

docs/docs/deployment.md

@@ -18,8 +18,8 @@ See below for more detailed provider settings.
 
 1. Make sure to expose the Vercel [System Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) in your project settings.
 2. Create a `NEXTAUTH_SECRET` environment variable for all environments.
-   a. You can use `openssl rand -base64 32` or https://generate-secret.vercel.app/32 to generate a random value.
-   b. You **do not** need the `NEXTAUTH_URL` environment variable in Vercel.
+    - You can use `openssl rand -base64 32` or https://generate-secret.vercel.app/32 to generate a random value.
+    - You **do not** need the `NEXTAUTH_URL` environment variable in Vercel.
 3. Add your provider's client ID and client secret to environment variables. _(Skip this step if not using an [OAuth Provider](/configuration/providers/oauth))_
 4. Deploy!
 

docs/docs/errors.md

@@ -21,7 +21,7 @@ This error occurs when the `SessionProvider` Context has a problem fetching sess
 
 #### CLIENT_FETCH_ERROR
 
-If you see `CLIENT_FETCH_ERROR` make sure you have configured the `NEXTAUTH_URL` environment variable.
+This can happen for multiple reasons. Make sure that you [configured](/configuration/initialization) NextAuth.js correctly, and if you used [`NEXTAUTH_URL`](https://next-auth.js.org/configuration/options#nextauth_url) that it's correctly set.
 
 ---
 

docs/docs/getting-started/client.md

@@ -172,18 +172,14 @@ export default function Page() {
     return (
       <>
         <p>Signed in as {session.user.name}</p>
-        
+
         {/* Update the value by sending it to the backend. */}
-        <button onClick={() => update({ name: "John Doe" })}>
-          Edit name
-        </button>
+        <button onClick={() => update({ name: "John Doe" })}>Edit name</button>
         {/*
-          * Only trigger a session update, assuming you already updated the value server-side.
-          * All `useSession().data` references will be updated.
-          */}
-        <button onClick={() => update()}>
-          Edit name
-        </button>
+         * Only trigger a session update, assuming you already updated the value server-side.
+         * All `useSession().data` references will be updated.
+         */}
+        <button onClick={() => update()}>Edit name</button>
       </>
     )
   }
@@ -203,7 +199,7 @@ export default NextAuth({
     jwt({ token, trigger, session }) {
       if (trigger === "update" && session?.name) {
         // Note, that `session` can be any arbitrary object, remember to validate it!
-        token.name = session
+        token.name = session.name
       }
       return token
     }
@@ -245,7 +241,7 @@ The `update()` method won't sync between tabs as the `refetchInterval` and `refe
 :::
 
 ```tsx title="pages/profile.tsx"
-import {useEffect} from "react"
+import { useEffect } from "react"
 import { useSession } from "next-auth/react"
 
 export default function Page() {
@@ -263,18 +259,17 @@ export default function Page() {
   // Listen for when the page is visible, if the user switches tabs
   // and makes our tab visible again, re-fetch the session
   useEffect(() => {
-    const visibilityHandler = () => document.visibilityState === "visible" && update()
+    const visibilityHandler = () =>
+      document.visibilityState === "visible" && update()
     window.addEventListener("visibilitychange", visibilityHandler, false)
-    return () => window.removeEventListener("visibilitychange", visibilityHandler, false)
+    return () =>
+      window.removeEventListener("visibilitychange", visibilityHandler, false)
   }, [update])
 
-  return (
-    <pre>
-      {JSON.stringify(session, null, 2)}
-    </pre>
-  )
+  return <pre>{JSON.stringify(session, null, 2)}</pre>
 }
 ```
+
 ---
 
 ## getSession()
@@ -288,7 +283,7 @@ On the server side, **this is still available to use**, however, we recommend us
 
 This helper is helpful in case you want to read the session outside of the context of React.
 
-When called, `getSession()` will send a request to `/api/auth/session` and returns a promise with a [session object](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/types.ts#L407-L425), or `null` if no session exists.
+When called, `getSession()` will send a request to `/api/auth/session` and returns a promise with a [session object](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/core/types.ts#L407-L425), or `null` if no session exists.
 
 ```js
 async function myFunction() {
@@ -359,7 +354,7 @@ export default async (req, res) => {
 ```
 
 :::note
-Unlike and `getCsrfToken()`, when calling `getProviders()` server side, you don't need to pass anything, just as calling it client side.
+Unlike `getCsrfToken()`, when calling `getProviders()` server side, you don't need to pass anything, just as calling it client side.
 :::
 
 ---
@@ -519,7 +514,11 @@ where `data.url` is the validated URL you can redirect the user to without any f
 
 ## SessionProvider
 
-Using the supplied `<SessionProvider>` allows instances of `useSession()` to share the session object across components, by using [React Context](https://reactjs.org/docs/context.html) under the hood. It also takes care of keeping the session updated and synced between tabs/windows.
+:::note
+If you are using the App Router, we encourage you to use [`getServerSession`](/configuration/nextjs#getserversession) in server contexts instead. (`SessionProvider` _can_ be used in the App Router, which might be the easier choice if you are migrating from pages.)
+:::
+
+Using the supplied `<SessionProvider>` allows instances of `useSession()` to share the session object across components, by using [React Context](https://react.dev/learn/passing-data-deeply-with-context) under the hood. It also takes care of keeping the session updated and synced between tabs/windows.
 
 ```jsx title="pages/_app.js"
 import { SessionProvider } from "next-auth/react"
@@ -575,8 +574,8 @@ export default function App({
   return (
     <SessionProvider
       session={session}
-      // In case you use a custom path and your app lives at "/cool-app" rather than at the root "/"
-      basePath="cool-app"
+      // Default base path if your app lives at the root "/"
+      basePath="/"
       // Re-fetch session every 5 minutes
       refetchInterval={5 * 60}
       // Re-fetches session when window is focused
@@ -629,11 +628,13 @@ See [**the Next.js documentation**](https://nextjs.org/docs/advanced-features/cu
 :::
 
 ### Custom base path
+
 When your Next.js application uses a custom base path, set the `NEXTAUTH_URL` environment variable to the route to the API endpoint in full - as in the example below and as explained [here](/configuration/options#nextauth_url).
 
 Also, make sure to pass the `basePath` page prop to the `<SessionProvider>` – as in the example below – so your custom base path is fully configured and used by NextAuth.js.
 
 #### Example
+
 In this example, the custom base path used is `/custom-route`.
 
 ```

docs/docs/getting-started/example.md

@@ -26,6 +26,8 @@ If you are using TypeScript, NextAuth.js comes with its types definitions within
 
 To add NextAuth.js to a project create a file called `[...nextauth].js` in `pages/api/auth`. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
 
+If you're using [Next.js 13.2](https://nextjs.org/blog/next-13-2#custom-route-handlers) or above with the new App Router (`app/`), you can initialize the configuration using the new [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) by following our [guide](https://next-auth.js.org/configuration/initialization#route-handlers-app).
+
 ```javascript title="pages/api/auth/[...nextauth].js" showLineNumbers
 import NextAuth from "next-auth"
 import GithubProvider from "next-auth/providers/github"
@@ -74,6 +76,7 @@ Instances of `useSession` will then have access to the session data and status.
 
 :::tip
 Check out the [client documentation](/getting-started/client) to see how you can improve the user experience and page performance by using the NextAuth.js client.
+If you are using the Next.js App Router, please note that `<SessionProvider />` requires a client component and therefore cannot be put inside the root layout. For more details, check out the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts).
 :::
 
 ### Frontend - Add React Hook

docs/docs/getting-started/introduction.md

@@ -16,7 +16,7 @@ It is designed from the ground up to support Next.js and Serverless.
 - Designed to work with any [OAuth service, it supports OAuth 1.0, 1.0A, 2.0 and OpenID Connect](/providers)
 - Built-in support for [many popular sign-in services](/configuration/providers/oauth)
 - Supports [email / passwordless authentication](/providers/email)
-- Supports stateless authentication with [any backend](https://authjs.dev/reference/adapters) (Active Directory, LDAP, etc)
+- Supports stateless authentication with [any backend](https://authjs.dev/getting-started/adapters) (Active Directory, LDAP, etc)
 - Supports both JSON Web Tokens and database sessions
 - Designed for Serverless but runs anywhere (AWS Lambda, Docker, Heroku, etc…)
 

docs/docs/getting-started/typescript.md

@@ -6,7 +6,7 @@ title: TypeScript
 NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use TypeScript, IDEs like VSCode will pick this up to provide you with a better developer experience. While you are typing, you will get suggestions about what certain objects/functions look like, and sometimes links to documentation, examples, and other valuable resources.
 
 Check out the example repository showcasing how to use `next-auth` on a Next.js application with TypeScript:  
-https://github.com/nextauthjs/next-auth-typescript-example
+https://github.com/nextauthjs/next-auth-example
 
 ---
 

docs/docs/getting-started/upgrade-to-v4.md

@@ -319,7 +319,7 @@ Introduced in https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.8
 
 **This does not require any changes from the user - these are adapter specific changes only**
 
-The Adapter API has been rewritten and significantly simplified in NextAuth.js v4. The adapters now have less work to do as some functionality has been migrated to the core of NextAuth, like hashing the [verification token](https://authjs.dev/reference/adapters#verification-token).
+The Adapter API has been rewritten and significantly simplified in NextAuth.js v4. The adapters now have less work to do as some functionality has been migrated to the core of NextAuth, like hashing the [verification token](https://authjs.dev/getting-started/adapters#verification-token).
 
 If you are an adapter maintainer or are interested in writing your own adapter, you can find more information about this change in https://github.com/nextauthjs/next-auth/pull/2361 and release https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.22.
 
@@ -351,8 +351,8 @@ User {
   id
   name
   email
-- emailVerified
-+ email_verified
++ emailVerified
+- email_verified
   image
 -  created_at
 -  updated_at

docs/docs/providers/42.md

@@ -19,7 +19,7 @@ https://profile.intra.42.fr/oauth/applications/new
 
 The **42 School Provider** comes with a set of default options:
 
-- [42 School Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/42-school.ts)
+- [42 School Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/42-school.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/apple.md

@@ -15,7 +15,7 @@ https://developer.apple.com/account/resources/identifiers/list/serviceId
 
 The **Apple Provider** comes with a set of default options:
 
-- [Apple Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/apple.ts)
+- [Apple Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/apple.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/atlassian.md

@@ -11,7 +11,7 @@ https://developer.atlassian.com/cloud/jira/platform/oauth-2-authorization-code-g
 
 The **Atlassian Provider** comes with a set of default options:
 
-- [Atlassian Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/atlassian.ts)
+- [Atlassian Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/atlassian.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/auth0.md

@@ -15,7 +15,7 @@ https://manage.auth0.com/dashboard
 
 The **Auth0 Provider** comes with a set of default options:
 
-- [Auth0 Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/auth0.ts)
+- [Auth0 Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/auth0.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/authentik.md

@@ -11,7 +11,7 @@ https://goauthentik.io/docs/providers/oauth2
 
 The **Authentik Provider** comes with a set of default options:
 
-- [Authentik Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/authentik.ts)
+- [Authentik Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/authentik.ts)
 
 You can override any of the options to suit your own use case.
 

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

@@ -26,7 +26,7 @@ https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-tenant
 
 The **Azure Active Directory Provider** comes with a set of default options:
 
-- [Azure Active Directory Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/azure-ad-b2c.ts)
+- [Azure Active Directory Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/azure-ad-b2c.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/azure-ad.md

@@ -3,6 +3,17 @@ id: azure-ad
 title: Azure Active Directory
 ---
 
+:::note
+Azure Active Directory returns the following fields on `Account`:
+
+- `token_type` (string)
+- `expires_in` (number)
+- `ext_expires_in` (number)
+- `access_token` (string).
+
+Remember to add these fields to your database schema, in case if you are using an [Adapter](https://authjs.dev/getting-started/adapters).
+:::
+
 ## Documentation
 
 https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow
@@ -20,7 +31,7 @@ https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-regis
 - Pay close attention to "Who can use this application or access this API?"
   - This allows you to scope access to specific types of user accounts
   - Only your tenant, all azure tenants, or all azure tenants and public Microsoft accounts (Skype, Xbox, Outlook.com, etc.)
-- When asked for a redirection URL, use `https://yourapplication.com/api/auth/callback/azure-ad` or for development `http://localhost:3000/api/auth/callback/azure-ad`.
+- When asked for a redirection URL, select the platform type "Web" and use `https://yourapplication.com/api/auth/callback/azure-ad` or for development `http://localhost:3000/api/auth/callback/azure-ad`.
 - After your App Registration is created, under "Client Credential" create your Client secret.
 - Now copy your:
   - Application (client) ID
@@ -37,6 +48,10 @@ AZURE_AD_TENANT_ID=<copy the tenant id here>
 
 That will default the tenant to use the `common` authorization endpoint. [For more details see here](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols#endpoints).
 
+:::note
+When you see `ResourceNotFound` error code while accessing an API, make sure to use the correct tenant ID. For instance, when the intended access is for a personal account, the tenant ID should not be provided.
+:::
+
 :::note
 Azure AD returns the profile picture in an ArrayBuffer, instead of just a URL to the image, so our provider converts it to a base64 encoded image string and returns that instead. See: https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0#examples. The default image size is 48x48 to avoid [running out of space](https://next-auth.js.org/faq#:~:text=What%20are%20the%20disadvantages%20of%20JSON%20Web%20Tokens%3F) in case the session is saved as a JWT.
 :::

docs/docs/providers/battlenet.md

@@ -15,7 +15,7 @@ https://develop.battle.net/access/clients
 
 The **Battle.net Provider** comes with a set of default options:
 
-- [Battle.net Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/battlenet.js)
+- [Battle.net Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/battlenet.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/box.md

@@ -15,7 +15,7 @@ https://developer.box.com/guides/sso-identities-and-app-users/connect-okta-to-ap
 
 The **Box Provider** comes with a set of default options:
 
-- [Box Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/box.js)
+- [Box Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/box.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/boxyhq-saml.md

@@ -19,7 +19,7 @@ Check out the [documentation](https://boxyhq.com/docs/jackson/saml-flow#2-saml-c
 
 The **BoxyHQ SAML Provider** comes with a set of default options:
 
-- [BoxyHQ Provider options](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers/boxyhq-saml.ts)
+- [BoxyHQ Provider options](https://github.com/nextauthjs/next-auth/tree/v4/packages/next-auth/src/providers/boxyhq-saml.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/bungie.md

@@ -15,7 +15,7 @@ https://www.bungie.net/en/Application
 
 The **Bungie Provider** comes with a set of default options:
 
-- [Bungie Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/bungie.js)
+- [Bungie Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/bungie.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/cognito.md

@@ -17,7 +17,7 @@ You need to select your AWS region to go the the Cognito dashboard.
 
 The **Amazon Cognito Provider** comes with a set of default options:
 
-- [Amazon Cognito Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/cognito.ts)
+- [Amazon Cognito Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/cognito.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/coinbase.md

@@ -15,7 +15,7 @@ https://www.coinbase.com/settings/api
 
 The **Coinbase Provider** comes with a set of default options:
 
-- [Coinbase Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/coinbase.js)
+- [Coinbase Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/coinbase.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/credentials.md

@@ -19,7 +19,7 @@ The functionality provided for credentials based authentication is intentionally
 
 The **Credentials Provider** comes with a set of default options:
 
-- [Credentials Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/credentials.ts)
+- [Credentials Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/credentials.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -125,7 +125,7 @@ providers: [
       return user
     },
     credentials: {
-      email: { label: "Username", type: "text ", placeholder: "jsmith" },
+      username: { label: "Username", type: "text ", placeholder: "jsmith" },
       "2fa-key": { label: "2FA Key" },
     },
   }),

docs/docs/providers/discord.md

@@ -15,7 +15,7 @@ https://discord.com/developers/applications
 
 The **Discord Provider** comes with a set of default options:
 
-- [Discord Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/discord.ts)
+- [Discord Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/discord.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/dropbox.md

@@ -15,7 +15,7 @@ https://www.dropbox.com/developers/apps
 
 The **Dropbox Provider** comes with a set of default options:
 
-- [Dropbox Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/dropbox.js)
+- [Dropbox Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/dropbox.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/email.md

@@ -15,7 +15,6 @@ The Email provider can be used in conjunction with (or instead of) one or more O
 
 On initial sign in, a **Verification Token** is sent to the email address provided. By default this token is valid for 24 hours. If the Verification Token is used within that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.
 
-
 If someone provides the email address of an _existing account_ when signing in, an email is sent and they are signed into the account associated with that email address when they follow the link in the email.
 
 :::tip
@@ -26,17 +25,25 @@ The Email Provider can be used with both JSON Web Tokens and database sessions,
 
 The **Email Provider** comes with a set of default options:
 
-- [Email Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/email.ts)
+- [Email Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/email.ts)
 
 You can override any of the options to suit your own use case.
 
 ## Configuration
 
+NextAuth.js lets you send emails either via HTTP or SMTP.
+
+### HTTP
+
+Check out our [HTTP-based Email Provider](https://authjs.dev/guides/providers/email-http) guide.
+
+### SMTP
+
 1. NextAuth.js does not include `nodemailer` as a dependency, so you'll need to install it yourself if you want to use the Email Provider. Run `npm install nodemailer` or `yarn add nodemailer`.
 2. You will need an SMTP account; ideally for one of the [services known to work with `nodemailer`](https://community.nodemailer.com/2-0-0-beta/setup-smtp/well-known-services/).
 3. There are two ways to configure the SMTP server connection.
 
-You can either use a connection string or a `nodemailer` configuration object.
+You can either use a connection string or a `nodemailer` configuration object or transport.
 
 2.1 **Using a connection string**
 
@@ -92,7 +99,7 @@ providers: [
 ],
 ```
 
-3. Do not forget to setup one of the database [adapters](https://authjs.dev/reference/adapters) for storing the Email verification token.
+3. Do not forget to setup one of the database [adapters](https://authjs.dev/getting-started/adapters) for storing the Email verification token.
 
 4. You can now sign in with an email address at `/api/auth/signin`.
 
@@ -153,7 +160,7 @@ async function sendVerificationRequest(params) {
  *
  * @note We don't add the email address to avoid needing to escape it, if you do, remember to sanitize it!
  */
-function html(params: { url: string; host: string; theme: Theme }) {
+function html(params: { url: string, host: string, theme: Theme }) {
   const { url, host, theme } = params
 
   const escapedHost = host.replace(/\./g, "​.")
@@ -202,7 +209,7 @@ function html(params: { url: string; host: string; theme: Theme }) {
 }
 
 /** Email Text body (fallback for email clients that don't render HTML, e.g. feature phones) */
-function text({ url, host }: { url: string; host: string }) {
+function text({ url, host }: { url: string, host: string }) {
   return `Sign in to ${host}\n${url}\n\n`
 }
 ```
@@ -228,27 +235,51 @@ providers: [
 ## Normalizing the email address
 
 By default, NextAuth.js will normalize the email address. It treats values as case-insensitive (which is technically not compliant to the [RFC 2821 spec](https://datatracker.ietf.org/doc/html/rfc2821), but in practice this causes more problems than it solves, eg. when looking up users by e-mail from databases.) and also removes any secondary email address that was passed in as a comma-separated list. You can apply your own normalization via the `normalizeIdentifier` method on the `EmailProvider`. The following example shows the default behavior:
-```ts
-  EmailProvider({
-    // ...
-    normalizeIdentifier(identifier: string): string {
-      // Get the first two elements only,
-      // separated by `@` from user input.
-      let [local, domain] = identifier.toLowerCase().trim().split("@")
-      // The part before "@" can contain a ","
-      // but we remove it on the domain part
-      domain = domain.split(",")[0]
-      return `${local}@${domain}`
 
-      // You can also throw an error, which will redirect the user
-      // to the error page with error=EmailSignin in the URL
-      // if (identifier.split("@").length > 2) {
-      //   throw new Error("Only one email allowed")
-      // }
-    },
-  })
+```ts
+EmailProvider({
+  // ...
+  normalizeIdentifier(identifier: string): string {
+    // Get the first two elements only,
+    // separated by `@` from user input.
+    let [local, domain] = identifier.toLowerCase().trim().split("@")
+    // The part before "@" can contain a ","
+    // but we remove it on the domain part
+    domain = domain.split(",")[0]
+    return `${local}@${domain}`
+
+    // You can also throw an error, which will redirect the user
+    // to the error page with error=EmailSignin in the URL
+    // if (identifier.split("@").length > 2) {
+    //   throw new Error("Only one email allowed")
+    // }
+  },
+})
 ```
 
 :::warning
 Always make sure this returns a single e-mail address, even if multiple ones were passed in.
 :::
+
+## Sending Magic Links To Existing Users
+
+You can ensure that only existing users are sent a magic login link. You will need to grab the email the user entered and check your database to see if the email already exists in the "User" collection in your database. If it exists, it will send the user a magic link but otherwise, you can send the user to another page, such as "/register".
+
+```js title="pages/api/auth/[...nextauth].js"
+import User from "../../../models/User";
+import db from "../../../utils/db";
+...
+callbacks: {
+  async signIn({ user, account, email }) {
+    await db.connect();
+    const userExists = await User.findOne({
+      email: user.email,  //the user object has an email property, which contains the email the user entered.
+    });
+    if (userExists) {
+      return true;   //if the email exists in the User collection, email them a magic login link
+    } else {
+      return "/register";
+    }
+  },
+ ...
+```

docs/docs/providers/eveonline.md

@@ -15,7 +15,7 @@ https://developers.eveonline.com/
 
 The **EVE Online Provider** comes with a set of default options:
 
-- [EVE Online Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/eveonline.ts)
+- [EVE Online Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/eveonline.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/facebook.md

@@ -15,7 +15,7 @@ https://developers.facebook.com/apps/
 
 The **Facebook Provider** comes with a set of default options:
 
-- [Facebook Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/facebook.ts)
+- [Facebook Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/facebook.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/faceit.md

@@ -19,7 +19,7 @@ Scopes to have basic infos (email, nickname, guid and avatar) : `openid`, `email
 
 The **FACEIT Provider** comes with a set of default options:
 
-- [FACEIT Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/faceit.js)
+- [FACEIT Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/faceit.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/foursquare.md

@@ -19,7 +19,7 @@ Foursquare requires an additional `apiVersion` parameter in [`YYYYMMDD` format](
 
 The **Foursquare Provider** comes with a set of default options:
 
-- [Foursquare Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/foursquare.js)
+- [Foursquare Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/foursquare.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/fusionauth.md

@@ -11,7 +11,7 @@ https://fusionauth.io/docs/v1/tech/oauth/
 
 The **FusionAuth Provider** comes with a set of default options:
 
-- [FusionAuth Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/fusionauth.ts)
+- [FusionAuth Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/fusionauth.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -50,7 +50,7 @@ For more information, follow the [FusionAuth 5-minute setup guide](https://fusio
 In the OAuth settings for your application, configure the following.
 
 - Redirect URL
-  - https://localhost:3000/api/auth/callback/fusionauth
+  - http://localhost:3000/api/auth/callback/fusionauth
 - Enabled grants
   - Make sure _Authorization Code_ is enabled.
 

docs/docs/providers/github.md

@@ -4,7 +4,7 @@ title: GitHub
 ---
 
 :::note
-GitHub returns a field on `Account` called `refresh_token_expires_in` which is a number. See their [docs](https://docs.github.com/en/developers/apps/building-github-apps/refreshing-user-to-server-access-tokens#response). Remember to add this field to your database schema, in case if you are using an [Adapter](https://authjs.dev/reference/adapters).
+GitHub returns a field on `Account` called `refresh_token_expires_in` which is a number. See their [docs](https://docs.github.com/en/developers/apps/building-github-apps/refreshing-user-to-server-access-tokens#response). Remember to add this field to your database schema, in case if you are using an [Adapter](https://authjs.dev/getting-started/adapters).
 :::
 
 ## Documentation
@@ -19,7 +19,7 @@ https://github.com/settings/apps
 
 The **GitHub Provider** comes with a set of default options:
 
-- [GitHub Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/github.ts)
+- [GitHub Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/github.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/gitlab.md

@@ -3,6 +3,10 @@ id: gitlab
 title: GitLab
 ---
 
+:::note
+GitLab returns a field on `Account` called `created_at` which is a number. See their [docs](https://docs.gitlab.com/ee/api/oauth2.html). Remember to add this field as optional to your database schema, in case if you are using an [Adapter](https://authjs.dev/reference/adapters).
+:::
+
 ## Documentation
 
 https://docs.gitlab.com/ee/api/oauth2.html
@@ -15,7 +19,7 @@ https://gitlab.com/-/profile/applications
 
 The **Gitlab Provider** comes with a set of default options:
 
-- [Gitlab Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/gitlab.ts)
+- [Gitlab Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/gitlab.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/google.md

@@ -20,7 +20,7 @@ The "Authorized redirect URIs" used when creating the credentials must include y
 
 The **Google Provider** comes with a set of default options:
 
-- [Google Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/google.ts)
+- [Google Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/google.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/hubspot.md

@@ -19,7 +19,7 @@ You need to have an APP in your Developer Account as described at https://develo
 
 The **HubSpot Provider** comes with a set of default options:
 
-- [HubSpot Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/hubspot.ts)
+- [HubSpot Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/hubspot.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -40,4 +40,3 @@ providers: [
 :::warning
 The **Redirect URL** under the **Auth** tab on the HubSpot App Settings page must match the callback url which would be http://localhost:3000/api/auth/callback/hubspot for local development. Only one callback URL per Client ID and Client Secret pair is allowed, so it might be easier to create a new app for local development then fiddle with the url changes.  
 :::
-

docs/docs/providers/identity-server4.md

@@ -15,7 +15,7 @@ https://identityserver4.readthedocs.io/en/latest/
 
 The **IdentityServer4 Provider** comes with a set of default options:
 
-- [IdentityServer4 Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/identity-server4.js)
+- [IdentityServer4 Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/identity-server4.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/instagram.md

@@ -15,7 +15,7 @@ https://developers.facebook.com/apps/
 
 The **Instagram Provider** comes with a set of default options:
 
-- [Instagram Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/instagram.js)
+- [Instagram Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/instagram.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/kakao.md

@@ -15,7 +15,7 @@ https://developers.kakao.com/docs/latest/en/kakaologin/common
 
 The **Kakao Provider** comes with a set of default options:
 
-- [Kakao Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/kakao.js)
+- [Kakao Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/kakao.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/keycloak.md

@@ -17,7 +17,7 @@ Create an openid-connect client in Keycloak with "confidential" as the "Access T
 
 The **Keycloak Provider** comes with a set of default options:
 
-- [Keycloak Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/keycloak.ts)
+- [Keycloak Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/keycloak.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/line.md

@@ -15,7 +15,7 @@ https://developers.line.biz/console/
 
 The **Line Provider** comes with a set of default options:
 
-- [Line Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/line.ts)
+- [Line Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/line.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/linkedin.md

@@ -19,7 +19,7 @@ From the Auth tab get the client ID and client secret. On the same tab, add redi
 
 The **LinkedIn Provider** comes with a set of default options:
 
-- [LinkedIn Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/linkedin.ts)
+- [LinkedIn Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/linkedin.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/mailchimp.md

@@ -15,7 +15,7 @@ https://admin.mailchimp.com/account/oauth2/client/
 
 The **Mailchimp Provider** comes with a set of default options:
 
-- [Mailchimp Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/mailchimp.js)
+- [Mailchimp Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/mailchimp.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/mailru.md

@@ -15,7 +15,7 @@ https://o2.mail.ru/app/
 
 The **Mail.ru Provider** comes with a set of default options:
 
-- [Mail.ru Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/mailru.js)
+- [Mail.ru Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/mailru.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/medium.md

@@ -15,7 +15,7 @@ https://medium.com/me/applications
 
 The **Medium Provider** comes with a set of default options:
 
-- [Medium Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/medium.js)
+- [Medium Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/medium.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/naver.md

@@ -15,7 +15,7 @@ https://developers.naver.com/docs/login/api/api.md
 
 The **Naver Provider** comes with a set of default options:
 
-- [Naver Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/naver.js)
+- [Naver Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/naver.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/netlify.md

@@ -15,7 +15,7 @@ https://github.com/netlify/netlify-oauth-example
 
 The **Netlify Provider** comes with a set of default options:
 
-- [Netlify Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/netlify.js)
+- [Netlify Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/netlify.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/okta.md

@@ -11,7 +11,7 @@ https://developer.okta.com/docs/reference/api/oidc
 
 The **Okta Provider** comes with a set of default options:
 
-- [Okta Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/okta.ts)
+- [Okta Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/okta.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/onelogin.md

@@ -15,7 +15,7 @@ https://developers.onelogin.com/openid-connect/connect-to-onelogin
 
 The **OneLogin Provider** comes with a set of default options:
 
-- [OneLogin Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/onelogin.js)
+- [OneLogin Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/onelogin.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/osso.md

@@ -21,7 +21,7 @@ See Osso's complete configuration and testing documentation at https://ossoapp.c
 
 The **Osso Provider** comes with a set of default options:
 
-- [Osso Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/osso.js)
+- [Osso Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/osso.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/osu.md

@@ -1,6 +1,6 @@
 ---
 id: osu
-title: Osu!
+title: osu!
 ---
 
 ## Documentation
@@ -13,14 +13,14 @@ https://osu.ppy.sh/home/account/edit#new-oauth-application
 
 ## Options
 
-The **Osu Provider** comes with a set of default options:
+The **osu! Provider** comes with a set of default options:
 
-- [Osu Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/osu.ts)
+- [osu! Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/osu.ts)
 
 You can override any of the options to suit your own use case.
 
 :::note
-Osu! does **not** provide a user email!
+osu! does **not** provide a user email!
 :::
 
 ## Example

docs/docs/providers/patreon.md

@@ -17,7 +17,7 @@ Create a API v2 client on [Patreon Platform](https://www.patreon.com/portal/regi
 
 The **Patreon Provider** comes with a set of default options:
 
-- [Patreon Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/patreon.ts)
+- [Patreon Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/patreon.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/pinterest.md

@@ -15,7 +15,7 @@ https://developers.pinterest.com/apps/
 
 The **Pinterest Provider** comes with a set of default options:
 
-- [Pinterest Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/pinterest.ts)
+- [Pinterest Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/pinterest.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -35,3 +35,4 @@ providers: [
 :::tip
 To use in production, make sure the app has standard API access and not trial access
 :::
+```

docs/docs/providers/pipedrive.md

@@ -11,7 +11,7 @@ https://pipedrive.readme.io/docs/marketplace-oauth-authorization
 
 The **Pipedrive Provider** comes with a set of default options:
 
-- [Pipedrive Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/pipedrive.ts)
+- [Pipedrive Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/pipedrive.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/reddit.md

@@ -22,7 +22,7 @@ https://www.reddit.com/dev/api/
 
 The **Reddit Provider** comes with a set of default options:
 
-- [Reddit Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/reddit.js)
+- [Reddit Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/reddit.js)
 
 You can override any of the options to suit your own use case.
 
@@ -58,7 +58,7 @@ providers: [
     clientSecret: process.env.REDDIT_CLIENT_SECRET,
     authorization: {
       params: {
-        duration: 'permanent',
+        duration: "permanent",
       },
     },
   }),

docs/docs/providers/salesforce.md

@@ -11,7 +11,7 @@ https://help.salesforce.com/articleView?id=remoteaccess_authenticate.htm&type=5
 
 The **Salesforce Provider** comes with a set of default options:
 
-- [Salesforce Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/salesforce.js)
+- [Salesforce Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/salesforce.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/slack.md

@@ -22,7 +22,7 @@ Slack requires that the redirect URL of your app uses `https`, even for local de
 
 The **Slack Provider** comes with a set of default options:
 
-- [Slack Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/slack.ts)
+- [Slack Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/slack.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/spotify.md

@@ -15,7 +15,7 @@ https://developer.spotify.com/dashboard/applications
 
 The **Spotify Provider** comes with a set of default options:
 
-- [Spotify Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/spotify.ts)
+- [Spotify Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/spotify.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/strava.md

@@ -11,7 +11,7 @@ http://developers.strava.com/docs/reference/
 
 The **Strava Provider** comes with a set of default options:
 
-- [Strava Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/strava.ts)
+- [Strava Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/strava.ts)
 
 You can override any of the options to suit your own use case. Ensure the redirect_uri configuration fits your needs accordingly.
 

docs/docs/providers/todoist.md

@@ -15,7 +15,7 @@ https://developer.todoist.com/appconsole.html
 
 The **Todoist Provider** comes with a set of default options:
 
-- [Todoist Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/todoist.ts)
+- [Todoist Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/todoist.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/trakt.md

@@ -17,7 +17,7 @@ Start by creating an OAuth app on Trakt for [production](https://trakt.tv/oauth/
 
 The **Trakt Provider** comes with a set of default options:
 
-- [Trakt Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/trakt.ts)
+- [Trakt Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/trakt.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/twitch.md

@@ -17,7 +17,7 @@ Add the following redirect URL into the console `http://<your-next-app-url>/api/
 
 The **Twitch Provider** comes with a set of default options:
 
-- [Twitch Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/twitch.ts)
+- [Twitch Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/twitch.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/twitter.md

@@ -4,7 +4,7 @@ title: Twitter
 ---
 
 :::note
-Twitter is currently the only built-in provider using the OAuth 1.0 spec. This means that you won't receive an `access_token` or `refresh_token`, but an `oauth_token` and `oauth_token_secret` respectively. Remember to add these to your database schema, in case if you are using an [Adapter](https://authjs.dev/reference/adapters).
+Twitter is currently the only built-in provider using the OAuth 1.0 spec. This means that you won't receive an `access_token` or `refresh_token`, but an `oauth_token` and `oauth_token_secret` respectively. Remember to add these to your database schema, in case if you are using an [Adapter](https://authjs.dev/getting-started/adapters).
 :::
 
 ## Documentation
@@ -19,7 +19,7 @@ https://developer.twitter.com/en/apps
 
 The **Twitter Provider** comes with a set of default options:
 
-- [Twitter Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/twitter.ts)
+- [Twitter Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/twitter.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -58,5 +58,5 @@ TwitterProvider({
 Keep in mind that although this change is easy, it changes how and with which of [Twitter APIs](https://developer.twitter.com/en/docs/api-reference-index) you can interact with. Read the official [Twitter OAuth 2 documentation](https://developer.twitter.com/en/docs/authentication/oauth-2-0) for more details.
 
 :::note
-Email is currently not supported by Twitter OAuth 2.0. 
+Email is currently not supported by Twitter OAuth 2.0.
 :::

docs/docs/providers/united-effects.md

@@ -15,7 +15,7 @@ https://core.unitedeffects.com
 
 The **United Effects Provider** comes with a set of default options:
 
-- [United Effects Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/united-effects.ts)
+- [United Effects Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/united-effects.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -40,4 +40,4 @@ providers: [
 
 :::warning
 The United Effects API does not return the user name or image by design, so this provider will return null for both. United Effects prioritizes user personal information security above all and has built a secured profile access request system separate from the provider API.
-:::
+:::

docs/docs/providers/vk.md

@@ -15,7 +15,7 @@ https://vk.com/apps?act=manage
 
 The **VK Provider** comes with a set of default options:
 
-- [VK Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/vk.js)
+- [VK Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/vk.ts)
 
 You can override any of the options to suit your own use case.
 
@@ -34,7 +34,7 @@ providers: [
 ```
 
 :::note
-By default the provider uses `5.126` version of the API. See https://vk.com/dev/versions for more info.
+By default the provider uses `5.131` version of the API. See https://vk.com/dev/versions for more info.
 :::
 
 If you want to use a different version, you can pass it to provider's options object:
@@ -42,7 +42,7 @@ If you want to use a different version, you can pass it to provider's options ob
 ```js
 // pages/api/auth/[...nextauth].js
 
-const apiVersion = "5.126"
+const apiVersion = "5.131"
 ...
 providers: [
   VkProvider({

docs/docs/providers/wikimedia.md

@@ -21,9 +21,9 @@ Please be aware that Wikimedia accounts do not have to have an associated email
 
 1. Go to and accept the Consumer Registration doc: https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration
 2. Request a new OAuth 2.0 consumer to get the `clientId` and `clientSecret`: https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose/oauth2
-  2a. Add the following redirect URL into the console `http://<your-next-app-url>/api/auth/callback/wikimedia`
-  2b. Do not check the box next to `This consumer is only for [your username]`
-  2c. Unless you explicitly need a larger scope, feel free to select the radio button labelled `User identity verification only - no ability to read pages or act on the users behalf.`
+   2a. Add the following redirect URL into the console `http://<your-next-app-url>/api/auth/callback/wikimedia`
+   2b. Do not check the box next to `This consumer is only for [your username]`
+   2c. Unless you explicitly need a larger scope, feel free to select the radio button labelled `User identity verification only - no ability to read pages or act on the users behalf.`
 
 After registration, you can initally test your application only with your own Wikimedia account. You may have to wait several days for the application to be approved for it to be used by everyone.
 
@@ -31,7 +31,7 @@ After registration, you can initally test your application only with your own Wi
 
 The **Wikimedia Provider** comes with a set of default options:
 
-- [Wikimedia Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/wikimedia.ts)
+- [Wikimedia Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/wikimedia.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/wordpress.md

@@ -15,7 +15,7 @@ https://developer.wordpress.com/apps/
 
 The **Wordpress Provider** comes with a set of default options:
 
-- [Wordpress Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/wordpress.js)
+- [Wordpress Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/wordpress.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/workos.md

@@ -15,7 +15,7 @@ https://dashboard.workos.com
 
 The **WorkOS Provider** comes with a set of default options:
 
-- [WorkOS Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/workos.ts)
+- [WorkOS Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/workos.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/yandex.md

@@ -15,7 +15,7 @@ https://oauth.yandex.com/client/new
 
 The **Yandex Provider** comes with a set of default options:
 
-- [Yandex Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/yandex.js)
+- [Yandex Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/yandex.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/zitadel.md

@@ -22,7 +22,7 @@ Make sure to enable **dev mode** in ZITADEL console to allow redirects for local
 
 The **ZITADEL Provider** comes with a set of default options:
 
-- [ZITADEL Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/zitadel.ts)
+- [ZITADEL Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/zitadel.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/zoho.md

@@ -3,6 +3,10 @@ id: zoho
 title: Zoho
 ---
 
+:::note
+Zoho returns a field on `Account` called `api_domain` which is a string. See their [docs](https://www.zoho.com/accounts/protocol/oauth/web-apps/access-token.html). Remember to add this field to your database schema, in case if you are using an [Adapter](https://authjs.dev/reference/adapters).
+:::
+
 ## Documentation
 
 https://www.zoho.com/accounts/protocol/oauth/web-server-applications.html
@@ -15,7 +19,7 @@ https://api-console.zoho.com/
 
 The **Zoho Provider** comes with a set of default options:
 
-- [Zoho Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/zoho.js)
+- [Zoho Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/zoho.js)
 
 You can override any of the options to suit your own use case.
 

docs/docs/providers/zoom.md

@@ -15,7 +15,7 @@ https://marketplace.zoom.us
 
 The **Zoom Provider** comes with a set of default options:
 
-- [Zoom Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/zoom.ts)
+- [Zoom Provider options](https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/zoom.ts)
 
 You can override any of the options to suit your own use case.
 

docs/docs/tutorials/creating-a-database-adapter.md

@@ -7,7 +7,7 @@ Using a custom adapter you can connect to any database back-end or even several
 
 ## How to create an adapter
 
-For more information about the data these methods need to manage see [models](https://authjs.dev/reference/adapters#models).
+For more information about the data these methods need to manage see [models](https://authjs.dev/getting-started/adapters#models).
 
 _See the code below for practical example._
 

docs/package.json

@@ -7,7 +7,7 @@
   "name": "next-auth-docs",
   "version": "0.2.0",
   "scripts": {
-    "start": "npm run generate-providers && docusaurus start --no-open --port 8000",
+    "start": "npm run generate-providers && docusaurus start --no-open",
     "dev": "npm run start",
     "build": "npm run generate-providers && docusaurus build",
     "docusaurus": "docusaurus",
@@ -29,15 +29,20 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-marquee-slider": "^1.1.5",
-    "remark-github": "^10.1.0",
-    "styled-components": "5.3.3"
+    "remark-github": "^10.1.0"
   },
   "devDependencies": {
     "@docusaurus/core": "2.1.0",
     "@docusaurus/module-type-aliases": "2.1.0",
     "@docusaurus/preset-classic": "2.1.0",
     "@docusaurus/theme-common": "2.1.0",
-    "@docusaurus/types": "2.1.0"
+    "@docusaurus/types": "2.1.0",
+    "autoprefixer": "^10.4.7",
+    "framer-motion": "^10.16.4",
+    "postcss": "^8.4.14",
+    "postcss-nested": "^5.0.6",
+    "styled-components": "5.3.3",
+    "tailwindcss": "^3.3.3"
   },
   "browserslist": {
     "production": [

docs/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("postcss-nested"),
+  ],
+}

docs/sidebars.js

@@ -1,3 +1,17 @@
+/** @type {import('@docusaurus/plugin-content-docs').PropSidebarItemHtml} */
+const clerk = {
+  type: "html",
+  value: `
+  <a href="https://clerk.com?utm_source=sponsorship&utm_medium=docs&utm_campaign=authjs&utm_content=callout">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="/img/clerk-sidebar-light.png">
+      <source media="(prefers-color-scheme: light)" srcset="/img/clerk-sidebar-dark.png">
+      <img alt="Clerk – Authentication & User Management" src="/img/clerk-sidebar-dark.png">
+    </picture>
+  </a>`,
+  defaultStyle: true,
+}
+
 module.exports = {
   docs: [
     {
@@ -60,6 +74,7 @@ module.exports = {
       collapsed: true,
       items: ["guides/basics", "guides/fullstack", "guides/testing"],
     },
+    clerk,
     {
       type: "html",
       value:

docs/src/components/clerk.js

@@ -0,0 +1,553 @@
+import { motion, useAnimationControls, useInView } from "framer-motion"
+import * as React from "react"
+const { useEffect, useId, useRef, useState } = React
+
+const width = 76
+const height = 76
+const animationDuration = 1
+
+function easeOut(x) {
+  return x === 1 ? 1 : 1 - Math.pow(2, -10 * x)
+}
+
+export function Clerk() {
+  let inViewRef = useRef(null)
+  let isInView = useInView(inViewRef)
+  return (
+    <span className="tailwind">
+      <section
+        ref={inViewRef}
+        className="h-[430px] w-full overflow-hidden py-8 sm:h-[480px] pb-24 mb-24"
+      >
+        <div className="relative mx-auto flex h-full w-full max-w-6xl flex-col">
+          <div className="absolute -top-1 inline-flex w-fit self-center rounded-md ring-black/[0.07] px-6 pt-1 pb-1.5 text-[12px] font-medium tracking-tighter text-[#B2B2B2] shadow-[inset_0px_1px_1px_rgba(0,0,0,0.07),inset_1px_0px_1px_rgba(0,0,0,0.07),inset_-1px_0px_1px_rgba(0,0,0,0.07)] [mask:linear-gradient(180deg,black,black_54%,transparent)] dark:ring-white/[0.07] dark:text-white dark:shadow-[inset_0px_1px_1px_rgba(255,255,255,0.07),inset_1px_0px_1px_rgba(255,255,255,0.07),inset_-1px_0px_1px_rgba(255,255,255,0.07)] ">
+            Sponsored by
+          </div>
+          <div className="flex flex-1 items-center justify-center">
+            <AnimatedLogo />
+          </div>
+          <div className="relative isolate flex flex-1 flex-col items-center justify-between">
+            <div className="absolute -top-5 z-50 h-10 w-full [mask:linear-gradient(90deg,transparent,black_20%,black_80%,transparent)] before:absolute before:inset-0 before:top-5 before:h-[1px] before:bg-gradient-to-r before:from-[#AE48FF] before:via-[#6C47FF] before:via-[25%] before:to-[#18CCFC] before:opacity-50 before:blur-[2px] after:absolute after:inset-0 after:left-1/2 after:top-5 after:h-[1px] after:w-3/4 after:-translate-x-1/2 after:bg-gradient-to-r after:from-[#AE48FF] after:via-[#6C47FF] after:via-[25%] after:to-[#18CCFC] after:[mask:linear-gradient(90deg,transparent,black,black,transparent)]">
+              <motion.div
+                initial={{ x: "-100%" }}
+                animate={isInView ? { x: "100%" } : {}}
+                transition={{
+                  delay: 2.5,
+                  duration: isInView ? 1 : 0,
+                  ease: "easeInOut",
+                  repeat: Infinity,
+                  repeatDelay: 3,
+                }}
+                className="absolute inset-x-0 top-5 z-10 h-[1px] bg-gradient-to-l from-white/75 to-transparent to-50% dark:from-white/25"
+              />
+            </div>
+            <div className="absolute inset-0 isolate -z-10 overflow-hidden before:absolute before:inset-0 before:bg-[url(/img/background-pattern.svg)] before:[mask:radial-gradient(ellipse_farthest-side_at_50%_-25vw,black,transparent)] dark:before:opacity-10">
+              <div className="absolute left-1/2 top-0 h-12 w-1/2 -translate-x-1/2 -translate-y-3/4 rounded-[50%] bg-gradient-to-r from-[#AE48FF] via-[#6C47FF] via-[25%] to-[#18CCFC] opacity-20 blur-xl" />
+            </div>
+
+            <h2>
+              <span className="sr-only">Clerk complete user management</span>
+            </h2>
+
+            <p className="text-center text-base leading-tight dark:text-white tracking-tight">
+              More than authentication...
+              <br />
+              <span className="text-2xl font-bold text-[#6C47FF] sm:text-[28px]">
+                Complete user management.
+              </span>
+            </p>
+
+            <div className="relative isolate">
+              <a
+                href="https://clerk.com?utm_source=sponsorship&utm_medium=website&utm_campaign=authjs&utm_content=09_01_2023"
+                className="relative isolate inline-flex h-8 items-center gap-1.5 rounded-[8px] px-4 text-[13px] font-semibold text-white before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:shadow-lg before:shadow-[rgb(100_48_247/0.3)] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[#6C47FF] after:shadow-[inset_0px_-8px_16px_-4px_#6430F7,inset_0px_0px_1px_1px_theme(colors.white/4%),inset_0px_1px_0px_theme(colors.white/10%),0px_0px_0px_1px_#6C47FF] dark:before:shadow-black"
+              >
+                <span className="z-20 flex items-center gap-1.5 bg-gradient-to-b from-white from-50% to-[#D7D4FF] bg-clip-text text-transparent drop-shadow-[0px_1px_1px_rgb(86_30_227/60%)]">
+                  <span>Get started for free</span>
+                  <ArrowIcon />
+                </span>
+              </a>
+
+              {[0, 1, 2, 3].map((i) => (
+                <Ring key={i} i={i} isInView={isInView} />
+              ))}
+            </div>
+
+            <div className="absolute left-1/2 top-0 -z-10 h-[140px] w-3/4 -translate-x-1/2 -translate-y-1/3 rotate-12 transform-gpu rounded-[50%] bg-gradient-to-r from-[#6C47FF] via-[#4818BF] via-25% to-sky-500 opacity-10 blur-3xl" />
+          </div>
+        </div>
+      </section>
+    </span>
+  )
+}
+
+function Ring({ i, isInView }) {
+  const transition = {
+    delay: i * 1,
+    duration: 4,
+    ease: "linear",
+    repeat: Infinity,
+    times: [0, 0.1, 1],
+  }
+
+  return (
+    <motion.div
+      className="pointer-events-none absolute left-1/2 top-1/2 -z-10 h-[275%] w-[135%] rounded-[22px] border border-[#6C47FF]/[.15] dark:border-[#6C47FF]/25"
+      style={{ x: "-50%", y: "-50%" }}
+      initial={{ opacity: 0, scaleX: 0.75, scaleY: 0.4 }}
+      animate={isInView ? { opacity: [0, 1, 0], scaleX: 1, scaleY: 1 } : {}}
+      transition={isInView ? transition : {}}
+    />
+  )
+}
+
+function ArrowIcon() {
+  const id = useId()
+
+  return (
+    <svg
+      width="10"
+      height="8"
+      viewBox="0 0 10 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.25 4.00144L5.78125 0.78125M9.25 4.00144L5.78125 7.21875M9.25 4.00144H0.765625"
+        stroke={`url(#${id})`}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id={id}
+          x1="4.50"
+          y1="0.50"
+          x2="4.50"
+          y2="7.50"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.50" stopColor="white" />
+          <stop offset="1" stopColor="#D7D4FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export function AnimatedLogo() {
+  let inViewRef = useRef(null)
+  let isInView = useInView(inViewRef, {
+    amount: "all",
+    margin: "0px 0px -200px 0px",
+    once: true,
+  })
+
+  let [isAnimationFinished] = useState(false)
+
+  let wrapperContainer = useAnimationControls()
+  let iconContainer = useAnimationControls()
+
+  let iconShapeMono = useAnimationControls()
+  let iconPathMono = useAnimationControls()
+  let startCapMono = useAnimationControls()
+  let endCapMono = useAnimationControls()
+
+  let iconPathSpectrumContainer = useAnimationControls()
+  let iconPathSpectrum = useAnimationControls()
+  let startCapSpectrum = useAnimationControls()
+  let endCapSpectrum = useAnimationControls()
+
+  let iconDot = useAnimationControls()
+
+  let logoType = useAnimationControls()
+
+  useEffect(() => {
+    async function startAnimationSequence() {
+      await Promise.all([
+        iconContainer.start({
+          rotate: -135,
+          transition: { duration: animationDuration, ease: easeOut },
+        }),
+        startCapMono.start({ opacity: 1, transition: { duration: 0.1 } }),
+        endCapMono.start({
+          opacity: 1,
+          rotate: 0,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.1 },
+          },
+        }),
+        iconPathMono.start({
+          opacity: 1,
+          pathLength: 1,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.1 },
+          },
+        }),
+      ])
+
+      await Promise.all([
+        iconShapeMono.start({ opacity: 1, transition: { duration: 0 } }),
+        startCapMono.start({ opacity: 0, transition: { duration: 0 } }),
+      ])
+
+      await Promise.all([
+        iconContainer.start({
+          rotate: 0,
+          transition: { duration: animationDuration, ease: easeOut },
+          x: 0,
+        }),
+        endCapMono.start({
+          opacity: 1,
+          rotate: -180,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.1 },
+          },
+        }),
+        iconPathMono.start({
+          opacity: 1,
+          pathLength: 0,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.1 },
+          },
+        }),
+        iconPathSpectrumContainer.start({
+          rotate: 0,
+          transition: { duration: animationDuration, ease: easeOut },
+        }),
+        iconPathSpectrum.start({
+          opacity: 1,
+          pathLength: 1,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.1 },
+          },
+        }),
+        endCapSpectrum.start({
+          opacity: 1,
+          transition: { duration: 0.1 },
+        }),
+        startCapSpectrum.start({
+          opacity: 1,
+          rotate: 0,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.1 },
+          },
+        }),
+        iconDot.start({
+          opacity: 1,
+          scale: 1,
+          transition: {
+            duration: animationDuration,
+            ease: easeOut,
+            opacity: { duration: 0.2 },
+          },
+        }),
+        logoType.start({
+          WebkitMaskPosition: "100% 0%",
+          opacity: 1,
+          transition: {
+            WebkitMaskPosition: {
+              duration: animationDuration * 3,
+              ease: easeOut,
+            },
+            duration: animationDuration,
+            ease: easeOut,
+          },
+          x: 0,
+        }),
+      ])
+
+      // setIsAnimationFinished(true)
+
+      return
+    }
+
+    if (isInView) {
+      startAnimationSequence()
+    }
+  }, [
+    iconContainer,
+    endCapMono,
+    iconDot,
+    iconPathMono,
+    iconShapeMono,
+    logoType,
+    startCapMono,
+    wrapperContainer,
+    iconPathSpectrumContainer,
+    iconPathSpectrum,
+    endCapSpectrum,
+    startCapSpectrum,
+    isInView,
+  ])
+
+  return (
+    <motion.div
+      ref={inViewRef}
+      animate={wrapperContainer}
+      className="relative isolate flex scale-75 items-center gap-2 sm:scale-100"
+    >
+      {!isAnimationFinished && (
+        <motion.div
+          style={{ x: "138%" }}
+          animate={iconContainer}
+          className="relative"
+        >
+          <motion.svg
+            initial={{ opacity: 0 }}
+            animate={iconShapeMono}
+            width={width}
+            height={height}
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M25.0101 27.8385C25.4355 28.2639 25.3928 28.9682 24.8929 29.303C22.3497 31.0065 19.2909 32 16 32C12.7091 32 9.65026 31.0065 7.10707 29.303C6.60723 28.9682 6.56452 28.2639 6.98992 27.8385L10.6439 24.1845C10.9741 23.8543 11.4864 23.8021 11.9021 24.0151C13.1312 24.6447 14.5241 25 16 25C17.4759 25 18.8688 24.6447 20.0979 24.0151C20.5136 23.8021 21.0259 23.8543 21.3561 24.1845L25.0101 27.8385Z"
+              className="fill-[#1C0452] dark:fill-white"
+            />
+            <path
+              d="M24.8929 2.697C25.3928 3.0318 25.4355 3.73609 25.0101 4.16149L21.3561 7.81545C21.0259 8.14569 20.5135 8.19786 20.0979 7.98491C18.8688 7.35525 17.4759 7 16 7C11.0294 7 7 11.0294 7 16C7 17.4759 7.35525 18.8688 7.98491 20.0979C8.19786 20.5135 8.14569 21.0259 7.81545 21.3561L4.16149 25.0101C3.73609 25.4355 3.0318 25.3928 2.697 24.8929C0.993528 22.3497 0 19.2909 0 16C0 7.16344 7.16344 0 16 0C19.2909 0 22.3497 0.993528 24.8929 2.697Z"
+              className="fill-[#1C0452] dark:fill-white"
+            />
+          </motion.svg>
+
+          <svg
+            className="absolute inset-0"
+            width={width}
+            height={height}
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <motion.path
+              className="stroke-[#1C0452] dark:stroke-white"
+              initial={{ opacity: 0, pathLength: 0 }}
+              animate={iconPathMono}
+              d="M4.7719 21.5C3.95737 19.8403 3.5 17.9736 3.5 16C3.5 9.09644 9.09644 3.5 16 3.5C17.5864 3.5 19.1037 3.79551 20.5 4.33449C25.1801 6.14103 28.5 10.6828 28.5 16C28.5 22.9036 22.9036 28.5 16 28.5C14.0264 28.5 11.875 27.9297 10.25 27.1016"
+              strokeWidth="7"
+              fill="none"
+            />
+            <motion.path
+              className="fill-[#1C0452] dark:fill-white"
+              initial={{ opacity: 0 }}
+              animate={startCapMono}
+              d="M7.8413 19.8045L1.49564 22.7635C1.84251 23.5061 2.24473 24.2177 2.697 24.8929C3.0318 25.3927 3.73609 25.4355 4.16149 25.0101L7.81545 21.3561C8.14569 21.0259 8.19786 20.5135 7.98492 20.0979C7.93533 20.0011 7.88745 19.9033 7.8413 19.8045Z"
+            />
+          </svg>
+
+          {/* End cap */}
+          <motion.svg
+            initial={{ opacity: 0, rotate: -322 }}
+            animate={endCapMono}
+            className="absolute inset-0 fill-[#1C0452] dark:fill-white"
+            width={width}
+            height={height}
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M7.10709 29.303C6.60725 28.9682 6.56454 28.2639 6.98994 27.8385L10.6439 24.1846C10.9741 23.8543 11.4865 23.8021 11.9021 24.0151C11.9989 24.0647 12.0967 24.1126 12.1955 24.1587L9.23649 30.5044C8.49388 30.1575 7.78231 29.7553 7.10709 29.303Z" />
+          </motion.svg>
+
+          <svg
+            className="absolute inset-0 fill-[#1C0452] dark:fill-white"
+            width={width}
+            height={height}
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <motion.circle
+              initial={{ opacity: 0, scale: 0.75 }}
+              animate={iconDot}
+              cx="16"
+              cy="16"
+              r="5"
+            />
+          </svg>
+
+          <motion.svg
+            initial={{ rotate: 180 }}
+            animate={iconPathSpectrumContainer}
+            className="absolute inset-0"
+            width={width}
+            height={height}
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <motion.path
+              initial={{ opacity: 0, pathLength: 0 }}
+              animate={iconPathSpectrum}
+              d="M21.6661,4.85498C21.2881,4.66241 20.899,4.48851 20.5,4.33449C19.1037,3.79551 17.5864,3.5 16,3.5C9.09644,3.5 3.5,9.09644 3.5,16C3.5,17.9736 3.95737,19.8403 4.7719,21.5"
+              stroke="url(#paint0_linear_45_194)"
+              strokeWidth="7"
+            />
+
+            <motion.path
+              initial={{ opacity: 0, pathLength: 0 }}
+              animate={endCapSpectrum}
+              d="M25.0101 4.16148C25.4355 3.73608 25.3927 3.03179 24.8929 2.69699C24.8134 2.64375 24.7335 2.59121 24.653 2.53938C24.0497 2.15079 23.4187 1.80165 22.7635 1.49561L19.8045 7.84128L19.8069 7.84239C19.9048 7.88819 20.0019 7.93571 20.0979 7.9849C20.5135 8.19784 21.0259 8.14568 21.3561 7.81543L25.0101 4.16148Z"
+              fill="url(#paint0_linear_45_213)"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_45_194"
+                x1="24.5"
+                y1="3.5"
+                x2="3.5"
+                y2="24.5"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#56C2FF" />
+                <stop offset="0.66" stopColor="#6C47FF" />
+                <stop offset="1" stopColor="#9C49FE" />
+              </linearGradient>
+              <linearGradient
+                id="paint0_linear_45_213"
+                x1="3.5"
+                y1="25"
+                x2="25.4653"
+                y2="3.98633"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#9B48FD" />
+                <stop offset="0.389423" stopColor="#6C47FF" />
+                <stop offset="1" stopColor="#55C1FF" />
+              </linearGradient>
+            </defs>
+          </motion.svg>
+
+          <motion.svg
+            initial={{ opacity: 0, rotate: 322 }}
+            animate={startCapSpectrum}
+            className="absolute inset-0"
+            width={width}
+            height={height}
+            viewBox="0 0 32 32"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.55694 22.8933C1.88964 23.5891 2.27113 24.2571 2.697 24.8929C2.7783 25.0143 2.8814 25.1087 2.99701 25.176C3.29792 25.3512 3.68357 25.3427 3.99016 25.1477C4.05078 25.1091 4.10831 25.0632 4.16149 25.0101L7.81544 21.3561C7.85673 21.3148 7.89366 21.2707 7.92628 21.2243C8.15459 20.8993 8.17124 20.4616 7.98491 20.0979C7.97999 20.0883 7.97509 20.0787 7.9702 20.069C7.92584 19.9817 7.88287 19.8935 7.8413 19.8045L1.49563 22.7635C1.51588 22.8069 1.53632 22.8501 1.55694 22.8933Z"
+              fill="url(#paint0_linear_45_202)"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_45_202"
+                x1="3.5"
+                y1="25"
+                x2="25.4653"
+                y2="3.98633"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#9B48FD" />
+                <stop offset="0.33" stopColor="#6C47FF" />
+                <stop offset="1" stopColor="#55C1FF" />
+              </linearGradient>
+            </defs>
+          </motion.svg>
+        </motion.div>
+      )}
+
+      {isAnimationFinished && (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 32 32"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M25.0101 27.8385C25.4355 28.2639 25.3928 28.9682 24.8929 29.303C22.3497 31.0064 19.2909 32 16 32C12.7091 32 9.65028 31.0064 7.10708 29.303C6.60725 28.9682 6.56453 28.2639 6.98993 27.8385L10.6439 24.1845C10.9741 23.8543 11.4864 23.8021 11.9021 24.0151C13.1312 24.6447 14.5241 25 16 25C17.4759 25 18.8688 24.6447 20.0979 24.0151C20.5136 23.8021 21.0259 23.8543 21.3561 24.1845L25.0101 27.8385Z"
+            className="fill-[#1C0452] dark:fill-white"
+          />
+          <circle
+            className="fill-[#1C0452] dark:fill-white"
+            cx="16"
+            cy="16"
+            r="5"
+          />
+          <path
+            d="M4.7719 21.5C3.95737 19.8403 3.5 17.9736 3.5 16C3.5 9.09644 9.09644 3.5 16 3.5C17.5864 3.5 19.1037 3.79551 20.5 4.33449C20.899 4.48851 21.2881 4.66241 21.6661 4.85498"
+            stroke="url(#paint0_linear_52_261)"
+            strokeWidth="7"
+          />
+          <path
+            d="M1.55691 22.8933C1.88961 23.5891 2.2711 24.2571 2.69697 24.8929C2.77828 25.0143 2.88138 25.1087 2.99698 25.176C3.29789 25.3512 3.68354 25.3427 3.99013 25.1477C4.05075 25.1091 4.10828 25.0632 4.16146 25.0101L7.81542 21.3561C7.8567 21.3148 7.89363 21.2707 7.92625 21.2243C8.15456 20.8993 8.17121 20.4616 7.98488 20.0979C7.97996 20.0883 7.97506 20.0787 7.97017 20.069C7.92581 19.9817 7.88284 19.8935 7.84127 19.8045L1.49561 22.7635C1.51585 22.8069 1.53629 22.8501 1.55691 22.8933Z"
+            fill="url(#paint1_linear_52_261)"
+          />
+          <path
+            d="M25.0101 4.16148C25.4355 3.73608 25.3928 3.03179 24.8929 2.69699C24.8135 2.64375 24.7335 2.59121 24.653 2.53938C24.0498 2.15079 23.4187 1.80165 22.7635 1.49561L19.8045 7.84128L19.8069 7.84239C19.9049 7.88819 20.0019 7.93571 20.0979 7.9849C20.5136 8.19784 21.0259 8.14568 21.3561 7.81543L25.0101 4.16148Z"
+            fill="url(#paint2_linear_52_261)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_52_261"
+              x1="24.5"
+              y1="3.5"
+              x2="3.5"
+              y2="24.5"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#56C2FF" />
+              <stop offset="0.66" stopColor="#6C47FF" />
+              <stop offset="1" stopColor="#9C49FE" />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_52_261"
+              x1="3.49997"
+              y1="25"
+              x2="25.4652"
+              y2="3.98633"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#9B48FD" />
+              <stop offset="0.389423" stopColor="#6C47FF" />
+              <stop offset="1" stopColor="#55C1FF" />
+            </linearGradient>
+            <linearGradient
+              id="paint2_linear_52_261"
+              x1="3.50003"
+              y1="25"
+              x2="25.4653"
+              y2="3.98633"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#9B48FD" />
+              <stop offset="0.389423" stopColor="#6C47FF" />
+              <stop offset="1" stopColor="#55C1FF" />
+            </linearGradient>
+          </defs>
+        </svg>
+      )}
+
+      <motion.svg
+        className="fill-[#1C0452] [mask-image:linear-gradient(90deg,transparent_30%,black_60%)] [mask-size:300%_100%] dark:fill-white"
+        initial={{ WebkitMaskPosition: "0% 0%", opacity: 0, x: "-20%" }}
+        animate={logoType}
+        width={67 * 3}
+        height={22 * 3}
+        viewBox="0 0 67 22"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.1071 0H20.7394V21.7459H17.1071V0ZM12.407 17.1147C11.887 17.6425 11.2626 18.061 10.5719 18.3447C9.88121 18.6285 9.13867 18.7713 8.3897 18.7646C7.75719 18.7834 7.12745 18.6751 6.53933 18.4465C5.9512 18.2179 5.41705 17.8738 4.96982 17.4354C4.15743 16.6055 3.68984 15.4206 3.68984 14.0081C3.68984 11.1806 5.56976 9.24662 8.3897 9.24662C9.14602 9.2362 9.89539 9.38947 10.5842 9.69537C11.2731 10.0014 11.8844 10.4525 12.3746 11.0165L14.8145 8.90395C13.2245 7.01405 10.6446 6.03728 8.19471 6.03728C3.39992 6.03728 0 9.27362 0 14.035C0 16.39 0.844958 18.373 2.2699 19.7732C3.69483 21.1735 5.72483 21.996 8.06721 21.996C11.1096 21.996 13.537 20.7867 14.8995 19.2665L12.407 17.1147ZM38.3352 13.8163C38.3285 14.2935 38.2951 14.77 38.2352 15.2436H26.7081C27.188 17.4296 28.8731 18.7638 31.208 18.7638C31.964 18.7796 32.7135 18.6246 33.3986 18.3109C34.0836 17.9971 34.6856 17.5331 35.1578 16.9547L35.2753 17.0526L37.6553 19.1163C36.3228 20.7761 34.1003 22 31.013 22C26.4131 22 22.9433 18.8274 22.9433 14.0073C22.9433 11.6425 23.7607 9.65951 25.1231 8.25928C25.8423 7.53925 26.7044 6.971 27.6563 6.58957C28.6081 6.20813 29.6297 6.02156 30.6579 6.04136C35.3202 6.04136 38.3352 9.30707 38.3352 13.8163ZM27.7356 10.5262C27.2625 11.0604 26.9303 11.7 26.7681 12.389H34.6678C34.2203 10.5164 32.9203 9.24586 30.8454 9.24586C30.2635 9.22748 29.6844 9.3324 29.1476 9.5533C28.611 9.77433 28.1292 10.1062 27.7356 10.5262ZM49.5641 5.99467V9.96047C49.1441 9.92871 48.7217 9.89682 48.4642 9.89682C45.7142 9.89682 44.1543 11.8308 44.1543 14.3694V21.7454H40.527V6.21501H44.1543V8.56754H44.1869C45.4193 6.91759 47.1867 5.99958 49.1117 5.99958L49.5641 5.99467ZM55.3999 18.0984L58.0223 15.2414H58.0898L62.2047 21.7459H66.287L60.4872 12.5143L66.187 6.26454H61.8772L55.3999 13.3393V0H51.77V21.7459H55.3999V18.0984Z"
+        />
+      </motion.svg>
+    </motion.div>
+  )
+}

docs/src/css/index.css

@@ -1,3 +1,9 @@
+.tailwind {
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+}
+
 /* stylelint-disable docusaurus/copyright-header */
 /**
  * Any CSS included here will be global. The classic template