docs: change osu! capitalization inside the document

fix: nodemailer imports

.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,14 +1,220 @@
 import NextAuth, { type NextAuthOptions } from "next-auth"
+// import { NextRequest } from "next/server"
+
+// Providers
+import Apple from "next-auth/providers/apple"
+import Auth0 from "next-auth/providers/auth0"
+import AzureAD from "next-auth/providers/azure-ad"
+import AzureB2C from "next-auth/providers/azure-ad-b2c"
+import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
+// import Cognito from "next-auth/providers/cognito"
+import Credentials from "next-auth/providers/credentials"
+import Discord from "next-auth/providers/discord"
+import DuendeIDS6 from "next-auth/providers/duende-identity-server6"
+// import Email from "next-auth/providers/email"
+import Facebook from "next-auth/providers/facebook"
+import Foursquare from "next-auth/providers/foursquare"
+import Freshbooks from "next-auth/providers/freshbooks"
 import GitHub from "next-auth/providers/github"
+import Gitlab from "next-auth/providers/gitlab"
+import Google from "next-auth/providers/google"
+// import IDS4 from "next-auth/providers/identity-server4"
+import Instagram from "next-auth/providers/instagram"
+// import Keycloak from "next-auth/providers/keycloak"
+import Line from "next-auth/providers/line"
+import LinkedIn from "next-auth/providers/linkedin"
+import Mailchimp from "next-auth/providers/mailchimp"
+// import Okta from "next-auth/providers/okta"
+import Osu from "next-auth/providers/osu"
+import Patreon from "next-auth/providers/patreon"
+import Slack from "next-auth/providers/slack"
+import Spotify from "next-auth/providers/spotify"
+import Trakt from "next-auth/providers/trakt"
+import Twitch from "next-auth/providers/twitch"
+import Twitter from "next-auth/providers/twitter"
+import Vk from "next-auth/providers/vk"
+import Wikimedia from "next-auth/providers/wikimedia"
+import WorkOS from "next-auth/providers/workos"
+
+// // Prisma
+// import { PrismaClient } from "@prisma/client"
+// import { PrismaAdapter } from "@next-auth/prisma-adapter"
+// const client = globalThis.prisma || new PrismaClient()
+// if (process.env.NODE_ENV !== "production") globalThis.prisma = client
+// const adapter = PrismaAdapter(client)
+
+// // Fauna
+// import { Client as FaunaClient } from "faunadb"
+// import { FaunaAdapter } from "@next-auth/fauna-adapter"
+// const opts = { secret: process.env.FAUNA_SECRET, domain: process.env.FAUNA_DOMAIN }
+// const client = globalThis.fauna || new FaunaClient(opts)
+// if (process.env.NODE_ENV !== "production") globalThis.fauna = client
+// const adapter = FaunaAdapter(client)
+
+// // TypeORM
+// import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
+// const adapter = TypeORMLegacyAdapter({
+//   type: "sqlite",
+//   name: "next-auth-test-memory",
+//   database: "./typeorm/dev.db",
+//   synchronize: true,
+// })
+
+// // Supabase
+// import { SupabaseAdapter } from "@next-auth/supabase-adapter"
+// const adapter = SupabaseAdapter({
+//   url: process.env.NEXT_PUBLIC_SUPABASE_URL,
+//   secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
+// })
 
 export const authOptions: NextAuthOptions = {
+  // adapter,
+  // debug: process.env.NODE_ENV !== "production",
+  theme: {
+    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
+    brandColor: "#1786fb",
+  },
   providers: [
+    Credentials({
+      credentials: { password: { label: "Password", type: "password" } },
+      async authorize(credentials) {
+        if (credentials.password !== "pw") return null
+        return {
+          name: "Fill Murray",
+          email: "bill@fillmurray.com",
+          image: "https://www.fillmurray.com/64/64",
+          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,
+    }),
+    AzureAD({
+      clientId: process.env.AZURE_AD_CLIENT_ID,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+    }),
+    AzureB2C({
+      clientId: process.env.AZURE_B2C_ID,
+      clientSecret: process.env.AZURE_B2C_SECRET,
+      issuer: process.env.AZURE_B2C_ISSUER,
+    }),
+    BoxyHQSAML({
+      issuer: "https://jackson-demo.boxyhq.com",
+      clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com",
+      clientSecret: "dummy",
+    }),
+    // Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
+    Discord({
+      clientId: process.env.DISCORD_ID,
+      clientSecret: process.env.DISCORD_SECRET,
+    }),
+    DuendeIDS6({
+      clientId: "interactive.confidential",
+      clientSecret: "secret",
+      issuer: "https://demo.duendesoftware.com",
+    }),
+    Facebook({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET,
+    }),
+    Foursquare({
+      clientId: process.env.FOURSQUARE_ID,
+      clientSecret: process.env.FOURSQUARE_SECRET,
+    }),
+    Freshbooks({
+      clientId: process.env.FRESHBOOKS_ID,
+      clientSecret: process.env.FRESHBOOKS_SECRET,
+    }),
     GitHub({
       clientId: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET,
     }),
+    Gitlab({
+      clientId: process.env.GITLAB_ID,
+      clientSecret: process.env.GITLAB_SECRET,
+    }),
+    Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+    // IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
+    Instagram({
+      clientId: process.env.INSTAGRAM_ID,
+      clientSecret: process.env.INSTAGRAM_SECRET,
+    }),
+    // Keycloak({ clientId: process.env.KEYCLOAK_ID, clientSecret: process.env.KEYCLOAK_SECRET, issuer: process.env.KEYCLOAK_ISSUER }),
+    Line({
+      clientId: process.env.LINE_ID,
+      clientSecret: process.env.LINE_SECRET,
+    }),
+    LinkedIn({
+      clientId: process.env.LINKEDIN_ID,
+      clientSecret: process.env.LINKEDIN_SECRET,
+    }),
+    Mailchimp({
+      clientId: process.env.MAILCHIMP_ID,
+      clientSecret: process.env.MAILCHIMP_SECRET,
+    }),
+    // Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
+    Osu({
+      clientId: process.env.OSU_CLIENT_ID,
+      clientSecret: process.env.OSU_CLIENT_SECRET,
+    }),
+    Patreon({
+      clientId: process.env.PATREON_ID,
+      clientSecret: process.env.PATREON_SECRET,
+    }),
+    Slack({
+      clientId: process.env.SLACK_ID,
+      clientSecret: process.env.SLACK_SECRET,
+    }),
+    Spotify({
+      clientId: process.env.SPOTIFY_ID,
+      clientSecret: process.env.SPOTIFY_SECRET,
+    }),
+    Trakt({
+      clientId: process.env.TRAKT_ID,
+      clientSecret: process.env.TRAKT_SECRET,
+    }),
+    Twitch({
+      clientId: process.env.TWITCH_ID,
+      clientSecret: process.env.TWITCH_SECRET,
+    }),
+    Twitter({
+      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,
+    }),
   ],
 }
 
+/**
+ * Advanced Initialization - route handler
+ */
+// const handler = async (
+//   req: NextRequest,
+//   routeContext: { params: { nextauth: string[] } }
+// ): Promise<any> => {
+//   return NextAuth(req, routeContext, authOptions)
+// }
+
 const handler = NextAuth(authOptions)
 export { handler as GET, handler as POST }

apps/dev/package.json

@@ -21,7 +21,7 @@
     "@prisma/client": "^3",
     "@supabase/supabase-js": "^2.0.5",
     "faunadb": "^4",
-    "next": "13.3.0",
+    "next": "13.4.12",
     "next-auth": "workspace:*",
     "nodemailer": "^6",
     "react": "^18",

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

@@ -1,132 +0,0 @@
-import NextAuth, { NextAuthOptions } from "next-auth"
-
-// Providers
-import Apple from "next-auth/providers/apple"
-import Auth0 from "next-auth/providers/auth0"
-import AzureAD from "next-auth/providers/azure-ad"
-import AzureB2C from "next-auth/providers/azure-ad-b2c"
-import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
-// import Cognito from "next-auth/providers/cognito"
-import Credentials from "next-auth/providers/credentials"
-import Discord from "next-auth/providers/discord"
-import DuendeIDS6 from "next-auth/providers/duende-identity-server6"
-// import Email from "next-auth/providers/email"
-import Facebook from "next-auth/providers/facebook"
-import Foursquare from "next-auth/providers/foursquare"
-import Freshbooks from "next-auth/providers/freshbooks"
-import GitHub from "next-auth/providers/github"
-import Gitlab from "next-auth/providers/gitlab"
-import Google from "next-auth/providers/google"
-// import IDS4 from "next-auth/providers/identity-server4"
-import Instagram from "next-auth/providers/instagram"
-// import Keycloak from "next-auth/providers/keycloak"
-import Line from "next-auth/providers/line"
-import LinkedIn from "next-auth/providers/linkedin"
-import Mailchimp from "next-auth/providers/mailchimp"
-// import Okta from "next-auth/providers/okta"
-import Osu from "next-auth/providers/osu"
-import Patreon from "next-auth/providers/patreon"
-import Slack from "next-auth/providers/slack"
-import Spotify from "next-auth/providers/spotify"
-import Trakt from "next-auth/providers/trakt"
-import Twitch from "next-auth/providers/twitch"
-import Twitter from "next-auth/providers/twitter"
-import Vk from "next-auth/providers/vk"
-import Wikimedia from "next-auth/providers/wikimedia"
-import WorkOS from "next-auth/providers/workos"
-
-// // Prisma
-// import { PrismaClient } from "@prisma/client"
-// import { PrismaAdapter } from "@next-auth/prisma-adapter"
-// const client = globalThis.prisma || new PrismaClient()
-// if (process.env.NODE_ENV !== "production") globalThis.prisma = client
-// const adapter = PrismaAdapter(client)
-
-// // Fauna
-// import { Client as FaunaClient } from "faunadb"
-// import { FaunaAdapter } from "@next-auth/fauna-adapter"
-// const opts = { secret: process.env.FAUNA_SECRET, domain: process.env.FAUNA_DOMAIN }
-// const client = globalThis.fauna || new FaunaClient(opts)
-// if (process.env.NODE_ENV !== "production") globalThis.fauna = client
-// const adapter = FaunaAdapter(client)
-
-// // TypeORM
-// import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
-// const adapter = TypeORMLegacyAdapter({
-//   type: "sqlite",
-//   name: "next-auth-test-memory",
-//   database: "./typeorm/dev.db",
-//   synchronize: true,
-// })
-
-// // Supabase
-// import { SupabaseAdapter } from "@next-auth/supabase-adapter"
-// const adapter = SupabaseAdapter({
-//   url: process.env.NEXT_PUBLIC_SUPABASE_URL,
-//   secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
-// })
-
-export const authOptions: NextAuthOptions = {
-  // adapter,
-  // debug: process.env.NODE_ENV !== "production",
-  theme: {
-    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
-    brandColor: "#1786fb",
-  },
-  providers: [
-    Credentials({
-      credentials: { password: { label: "Password", type: "password" } },
-      async authorize(credentials) {
-        if (credentials.password !== "pw") return null
-        return { name: "Fill Murray", email: "bill@fillmurray.com", image: "https://www.fillmurray.com/64/64", 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 }),
-    AzureAD({
-      clientId: process.env.AZURE_AD_CLIENT_ID,
-      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
-      tenantId: process.env.AZURE_AD_TENANT_ID,
-    }),
-    AzureB2C({ clientId: process.env.AZURE_B2C_ID, clientSecret: process.env.AZURE_B2C_SECRET, issuer: process.env.AZURE_B2C_ISSUER }),
-    BoxyHQSAML({ issuer: "https://jackson-demo.boxyhq.com", clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com", clientSecret: "dummy" }),
-    // Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
-    Discord({ clientId: process.env.DISCORD_ID, clientSecret: process.env.DISCORD_SECRET }),
-    DuendeIDS6({ clientId: "interactive.confidential", clientSecret: "secret", issuer: "https://demo.duendesoftware.com" }),
-    Facebook({ clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET }),
-    Foursquare({ clientId: process.env.FOURSQUARE_ID, clientSecret: process.env.FOURSQUARE_SECRET }),
-    Freshbooks({ clientId: process.env.FRESHBOOKS_ID, clientSecret: process.env.FRESHBOOKS_SECRET }),
-    GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }),
-    Gitlab({ clientId: process.env.GITLAB_ID, clientSecret: process.env.GITLAB_SECRET }),
-    Google({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }),
-    // IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
-    Instagram({ clientId: process.env.INSTAGRAM_ID, clientSecret: process.env.INSTAGRAM_SECRET }),
-    // Keycloak({ clientId: process.env.KEYCLOAK_ID, clientSecret: process.env.KEYCLOAK_SECRET, issuer: process.env.KEYCLOAK_ISSUER }),
-    Line({ clientId: process.env.LINE_ID, clientSecret: process.env.LINE_SECRET }),
-    LinkedIn({ clientId: process.env.LINKEDIN_ID, clientSecret: process.env.LINKEDIN_SECRET }),
-    Mailchimp({ clientId: process.env.MAILCHIMP_ID, clientSecret: process.env.MAILCHIMP_SECRET }),
-    // Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
-    Osu({ clientId: process.env.OSU_CLIENT_ID, clientSecret: process.env.OSU_CLIENT_SECRET }),
-    Patreon({ clientId: process.env.PATREON_ID, clientSecret: process.env.PATREON_SECRET }),
-    Slack({ clientId: process.env.SLACK_ID, clientSecret: process.env.SLACK_SECRET }),
-    Spotify({ clientId: process.env.SPOTIFY_ID, clientSecret: process.env.SPOTIFY_SECRET }),
-    Trakt({ clientId: process.env.TRAKT_ID, clientSecret: process.env.TRAKT_SECRET }),
-    Twitch({ clientId: process.env.TWITCH_ID, clientSecret: process.env.TWITCH_SECRET }),
-    Twitter({ clientId: process.env.TWITTER_ID, clientSecret: process.env.TWITTER_SECRET }),
-    // TwitterLegacy({ clientId: process.env.TWITTER_LEGACY_ID, clientSecret: process.env.TWITTER_LEGACY_SECRET }),
-    Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
-    Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
-    WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
-  ],
-}
-
-if (authOptions.adapter) {
-  // 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" })
-  // )
-}
-
-export default NextAuth(authOptions)

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

@@ -5,7 +5,6 @@ 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.
 :::
@@ -13,6 +12,7 @@ NextAuth.js cannot use the run [Edge Runtime](https://nextjs.org/docs/api-refere
 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).
@@ -62,7 +62,6 @@ Instead, `NextAuth` will receive the first two arguments of a Route Handler, and
 
 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:
 
 ```ts title="/pages/api/auth/[...nextauth].ts"
@@ -148,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:
 
@@ -69,7 +84,7 @@ export default async function handler(req, res) {
 }
 ```
 
-### In `app/` directory:
+### In App Router:
 
 You can also use `getServerSession` in Next.js' server components:
 
@@ -91,6 +106,11 @@ Currently, the underlying Next.js `cookies()` method [only provides read access]
 
 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.
@@ -158,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).
 
 ---
 
@@ -183,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)
 
@@ -229,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"
@@ -257,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/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/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() {
@@ -519,6 +514,10 @@ where `data.url` is the validated URL you can redirect the user to without any f
 
 ## SessionProvider
 
+:::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"
@@ -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

@@ -76,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/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

@@ -11,7 +11,7 @@ Azure Active Directory returns the following fields on `Account`:
 - `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/reference/adapters).
+Remember to add these fields to your database schema, in case if you are using an [Adapter](https://authjs.dev/getting-started/adapters).
 :::
 
 ## Documentation

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,12 +25,20 @@ 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.
@@ -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.ts)
+- [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.ts)
+- [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.
 

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

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

docs/src/pages/index.js

@@ -8,6 +8,7 @@ import CodeBlock from "@theme/CodeBlock"
 import ProviderMarquee from "../components/ProviderMarquee"
 import Seo from "./seo"
 import styles from "./index.module.css"
+import { Clerk } from "../components/clerk"
 
 const features = [
   {
@@ -152,6 +153,7 @@ function Home() {
                   </h2>
                 </div>
               </div>
+              <Clerk />
               <div className="row">
                 {features.map((props, idx) => (
                   <Feature key={idx} {...props} />

docs/static/img/background-pattern.svg

@@ -0,0 +1,100 @@
+<svg
+  width="48"
+  height="36"
+  viewBox="0 0 56 42"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke="#E7E8F1"
+  stroke-width="1"
+>
+  <path
+    d="M45.8935 7.4645L41.483 11.8749C41.3445 12.0134 41.1633 12.1013 40.9689 12.1245C40.7743 12.1478 40.5777 12.105 40.4103 12.0032C38.6755 10.9566 36.6746 10.4346 34.6494 10.5003C32.6242 10.566 30.6615 11.2165 28.998 12.3734C27.975 13.0855 27.0866 13.9738 26.3745 14.9969C25.219 16.6614 24.5691 18.6242 24.5029 20.6494C24.4367 22.6746 24.957 24.6758 26.0014 26.4122C26.1025 26.5792 26.1448 26.7752 26.1216 26.9692C26.0983 27.163 26.0109 27.3435 25.8731 27.482L21.4627 31.8923C21.3739 31.9817 21.2668 32.0509 21.1488 32.095C21.0308 32.1393 20.9046 32.1573 20.7789 32.1483C20.6532 32.1391 20.531 32.103 20.4206 32.0422C20.3102 31.9814 20.2142 31.8975 20.1393 31.7961C17.753 28.5161 16.5197 24.5383 16.632 20.4836C16.7444 16.4289 18.1959 12.5255 20.7602 9.38257C21.543 8.42097 22.4221 7.54189 23.3837 6.75906C26.5264 4.19551 30.4292 2.74437 34.4833 2.63205C38.5373 2.51973 42.5145 3.75255 45.7943 6.13816C45.8964 6.21286 45.9809 6.3088 46.0422 6.41934C46.1036 6.52989 46.1402 6.65241 46.1497 6.77848C46.1592 6.90455 46.1411 7.03117 46.0969 7.1496C46.0526 7.26803 45.9832 7.37547 45.8935 7.4645Z"
+  />
+  <path
+    d="M45.8897 34.5161L41.4792 30.1057C41.3407 29.9672 41.1595 29.8794 40.9651 29.8561C40.7706 29.8328 40.5739 29.8755 40.4065 29.9773C38.7707 30.9641 36.8965 31.4858 34.9861 31.4858C33.0756 31.4858 31.2014 30.9641 29.5656 29.9773C29.3983 29.8755 29.2016 29.8328 29.007 29.8561C28.8125 29.8794 28.6315 29.9672 28.4929 30.1057L24.0824 34.5161C23.9899 34.6049 23.9182 34.7132 23.8722 34.8329C23.8261 34.9527 23.8071 35.0811 23.8163 35.2091C23.8254 35.3371 23.8626 35.4614 23.9253 35.5734C23.9879 35.6854 24.0744 35.7822 24.1786 35.8569C27.3181 38.1412 31.1007 39.3716 34.9832 39.3716C38.8656 39.3716 42.6482 38.1412 45.7877 35.8569C45.8923 35.7827 45.9793 35.6862 46.0425 35.5744C46.1056 35.4627 46.1434 35.3385 46.1532 35.2105C46.1629 35.0825 46.1443 34.9539 46.0989 34.834C46.0532 34.714 45.9819 34.6054 45.8897 34.5161Z"
+  />
+  <path
+    d="M34.997 26.244C37.8964 26.244 40.247 23.8935 40.247 20.994C40.247 18.0946 37.8964 15.744 34.997 15.744C32.0975 15.744 29.747 18.0946 29.747 20.994C29.747 23.8935 32.0975 26.244 34.997 26.244Z"
+  />
+  <path
+    d="M-10.8935 -13.5355L-6.48304 -9.12508C-6.34447 -8.98664 -6.16334 -8.89874 -5.96889 -8.87548C-5.77429 -8.85223 -5.5777 -8.89496 -5.41035 -8.99681C-3.67546 -10.0434 -1.67461 -10.5654 0.350573 -10.4997C2.37576 -10.434 4.33849 -9.78347 6.00196 -8.6266C7.02502 -7.91449 7.91335 -7.02616 8.62548 -6.00309C9.78097 -4.33862 10.4309 -2.37576 10.4971 -0.350574C10.5633 1.67461 10.0429 3.67576 8.99861 5.41218C8.89748 5.57923 8.85516 5.77521 8.87841 5.9692C8.90165 6.16304 8.98912 6.34355 9.12687 6.48196L13.5373 10.8923C13.6261 10.9817 13.7332 11.0509 13.8512 11.095C13.9692 11.1393 14.0954 11.1573 14.2211 11.1483C14.3468 11.1391 14.469 11.103 14.5794 11.0422C14.6898 10.9814 14.7858 10.8975 14.8607 10.7961C17.247 7.51607 18.4803 3.53827 18.368 -0.516392C18.2556 -4.57108 16.8041 -8.47452 14.2398 -11.6174C13.457 -12.579 12.5779 -13.4581 11.6163 -14.2409C8.47363 -16.8045 4.57076 -18.2556 0.516696 -18.368C-3.53735 -18.4803 -7.51454 -17.2474 -10.7943 -14.8618C-10.8964 -14.7871 -10.981 -14.6912 -11.0422 -14.5807C-11.1036 -14.4701 -11.1402 -14.3476 -11.1497 -14.2215C-11.1592 -14.0955 -11.1411 -13.9688 -11.0969 -13.8504C-11.0526 -13.732 -10.9832 -13.6245 -10.8935 -13.5355Z"
+  />
+  <path
+    d="M-10.8897 13.5161L-6.47923 9.10565C-6.34066 8.96724 -6.15953 8.87936 -5.96508 8.85608C-5.77063 8.83281 -5.57388 8.87553 -5.40654 8.97735C-3.77071 9.96414 -1.89649 10.4858 0.0138683 10.4858C1.92438 10.4858 3.79857 9.96414 5.43441 8.97735C5.60174 8.87553 5.79843 8.83281 5.99295 8.85608C6.18747 8.87936 6.36853 8.96724 6.50713 9.10565L10.9176 13.5161C11.01 13.6049 11.0818 13.7132 11.1278 13.8329C11.1738 13.9527 11.1929 14.0811 11.1837 14.2091C11.1746 14.3371 11.1373 14.4614 11.0747 14.5734C11.0121 14.6854 10.9256 14.7822 10.8214 14.8569C7.68191 17.1412 3.89931 18.3716 0.016777 18.3716C-3.86564 18.3716 -7.64822 17.1412 -10.7877 14.8569C-10.8923 14.7827 -10.9793 14.6862 -11.0425 14.5744C-11.1056 14.4627 -11.1434 14.3385 -11.1532 14.2105C-11.1629 14.0825 -11.1443 13.9539 -11.0989 13.834C-11.0532 13.714 -10.9819 13.6054 -10.8897 13.5161Z"
+  />
+  <path
+    d="M0.00299549 5.24402C-2.89638 5.24402 -5.24701 2.89352 -5.24701 -0.00602722C-5.24701 -2.90543 -2.89638 -5.25598 0.00299549 -5.25598C2.90252 -5.25598 5.25299 -2.90543 5.25299 -0.00602722C5.25299 2.89352 2.90252 5.24402 0.00299549 5.24402Z"
+  />
+  <path
+    d="M45.1065 -13.5355L49.517 -9.12508C49.6555 -8.98664 49.8367 -8.89874 50.0311 -8.87548C50.2257 -8.85223 50.4223 -8.89496 50.5897 -8.99681C52.3245 -10.0434 54.3254 -10.5654 56.3506 -10.4997C58.3758 -10.434 60.3385 -9.78347 62.002 -8.6266C63.025 -7.91449 63.9134 -7.02616 64.6255 -6.00309C65.781 -4.33862 66.4309 -2.37576 66.4971 -0.350574C66.5633 1.67461 66.0429 3.67576 64.9986 5.41218C64.8975 5.57923 64.8552 5.77521 64.8784 5.9692C64.9016 6.16304 64.9891 6.34355 65.1269 6.48196L69.5373 10.8923C69.6261 10.9817 69.7332 11.0509 69.8512 11.095C69.9692 11.1393 70.0954 11.1573 70.2211 11.1483C70.3468 11.1391 70.469 11.103 70.5794 11.0422C70.6898 10.9814 70.7858 10.8975 70.8607 10.7961C73.247 7.51607 74.4803 3.53827 74.368 -0.516392C74.2556 -4.57108 72.8041 -8.47452 70.2398 -11.6174C69.457 -12.579 68.5779 -13.4581 67.6163 -14.2409C64.4736 -16.8045 60.5708 -18.2556 56.5167 -18.368C52.4626 -18.4803 48.4855 -17.2474 45.2057 -14.8618C45.1036 -14.7871 45.019 -14.6912 44.9578 -14.5807C44.8964 -14.4701 44.8598 -14.3476 44.8503 -14.2215C44.8408 -14.0955 44.8589 -13.9688 44.9031 -13.8504C44.9474 -13.732 45.0168 -13.6245 45.1065 -13.5355Z"
+  />
+  <path
+    d="M45.1103 13.5161L49.5208 9.10565C49.6593 8.96724 49.8405 8.87936 50.0349 8.85608C50.2294 8.83281 50.4261 8.87553 50.5935 8.97735C52.2293 9.96414 54.1035 10.4858 56.0139 10.4858C57.9244 10.4858 59.7986 9.96414 61.4344 8.97735C61.6017 8.87553 61.7984 8.83281 61.993 8.85608C62.1875 8.87936 62.3685 8.96724 62.5071 9.10565L66.9176 13.5161C67.01 13.6049 67.0818 13.7132 67.1278 13.8329C67.1739 13.9527 67.1929 14.0811 67.1837 14.2091C67.1746 14.3371 67.1373 14.4614 67.0747 14.5734C67.0121 14.6854 66.9256 14.7822 66.8214 14.8569C63.6819 17.1412 59.8993 18.3716 56.0168 18.3716C52.1344 18.3716 48.3518 17.1412 45.2123 14.8569C45.1077 14.7827 45.0207 14.6862 44.9575 14.5744C44.8944 14.4627 44.8566 14.3385 44.8468 14.2105C44.8371 14.0825 44.8557 13.9539 44.9011 13.834C44.9468 13.714 45.0181 13.6054 45.1103 13.5161Z"
+  />
+  <path
+    d="M56.003 5.24402C53.1036 5.24402 50.753 2.89352 50.753 -0.00602722C50.753 -2.90543 53.1036 -5.25598 56.003 -5.25598C58.9025 -5.25598 61.253 -2.90543 61.253 -0.00602722C61.253 2.89352 58.9025 5.24402 56.003 5.24402Z"
+  />
+  <path
+    d="M-10.8935 28.4645L-6.48304 32.8749C-6.34447 33.0134 -6.16334 33.1013 -5.96889 33.1245C-5.77429 33.1478 -5.5777 33.105 -5.41035 33.0032C-3.67546 31.9566 -1.67461 31.4346 0.350573 31.5003C2.37576 31.566 4.33849 32.2165 6.00196 33.3734C7.02502 34.0855 7.91335 34.9738 8.62548 35.9969C9.78097 37.6614 10.4309 39.6242 10.4971 41.6494C10.5633 43.6746 10.0429 45.6758 8.99861 47.4122C8.89748 47.5792 8.85516 47.7752 8.87841 47.9692C8.90165 48.163 8.98912 48.3436 9.12687 48.482L13.5373 52.8923C13.6261 52.9817 13.7332 53.0509 13.8512 53.095C13.9692 53.1393 14.0954 53.1573 14.2211 53.1483C14.3468 53.1391 14.469 53.103 14.5794 53.0422C14.6898 52.9814 14.7858 52.8975 14.8607 52.7962C17.247 49.5161 18.4803 45.5383 18.368 41.4836C18.2556 37.4289 16.8041 33.5255 14.2398 30.3826C13.457 29.421 12.5779 28.5419 11.6163 27.7591C8.47363 25.1955 4.57076 23.7444 0.516696 23.632C-3.53735 23.5197 -7.51454 24.7526 -10.7943 27.1382C-10.8964 27.2129 -10.981 27.3088 -11.0422 27.4193C-11.1036 27.5299 -11.1402 27.6524 -11.1497 27.7785C-11.1592 27.9045 -11.1411 28.0312 -11.0969 28.1496C-11.0526 28.268 -10.9832 28.3755 -10.8935 28.4645Z"
+  />
+  <path
+    d="M-10.8897 55.5161L-6.47923 51.1057C-6.34066 50.9672 -6.15953 50.8794 -5.96508 50.8561C-5.77063 50.8328 -5.57388 50.8755 -5.40654 50.9773C-3.77071 51.9641 -1.89649 52.4858 0.0138683 52.4858C1.92438 52.4858 3.79857 51.9641 5.43441 50.9773C5.60174 50.8755 5.79843 50.8328 5.99295 50.8561C6.18747 50.8794 6.36853 50.9672 6.50713 51.1057L10.9176 55.5161C11.01 55.6049 11.0818 55.7132 11.1278 55.8329C11.1738 55.9527 11.1929 56.0811 11.1837 56.2091C11.1746 56.3371 11.1373 56.4614 11.0747 56.5734C11.0121 56.6854 10.9256 56.7822 10.8214 56.8569C7.68191 59.1412 3.89931 60.3716 0.016777 60.3716C-3.86564 60.3716 -7.64822 59.1412 -10.7877 56.8569C-10.8923 56.7827 -10.9793 56.6862 -11.0425 56.5744C-11.1056 56.4627 -11.1434 56.3385 -11.1532 56.2105C-11.1629 56.0825 -11.1443 55.9539 -11.0989 55.834C-11.0532 55.714 -10.9819 55.6054 -10.8897 55.5161Z"
+  />
+  <path
+    d="M0.00299549 47.244C-2.89638 47.244 -5.24701 44.8935 -5.24701 41.994C-5.24701 39.0946 -2.89638 36.744 0.00299549 36.744C2.90252 36.744 5.25299 39.0946 5.25299 41.994C5.25299 44.8935 2.90252 47.244 0.00299549 47.244Z"
+  />
+  <path
+    d="M45.1065 28.4645L49.517 32.8749C49.6555 33.0134 49.8367 33.1013 50.0311 33.1245C50.2257 33.1478 50.4223 33.105 50.5897 33.0032C52.3245 31.9566 54.3254 31.4346 56.3506 31.5003C58.3758 31.566 60.3385 32.2165 62.002 33.3734C63.025 34.0855 63.9134 34.9738 64.6255 35.9969C65.781 37.6614 66.4309 39.6242 66.4971 41.6494C66.5633 43.6746 66.0429 45.6758 64.9986 47.4122C64.8975 47.5792 64.8552 47.7752 64.8784 47.9692C64.9016 48.163 64.9891 48.3436 65.1269 48.482L69.5373 52.8923C69.6261 52.9817 69.7332 53.0509 69.8512 53.095C69.9692 53.1393 70.0954 53.1573 70.2211 53.1483C70.3468 53.1391 70.469 53.103 70.5794 53.0422C70.6898 52.9814 70.7858 52.8975 70.8607 52.7962C73.247 49.5161 74.4803 45.5383 74.368 41.4836C74.2556 37.4289 72.8041 33.5255 70.2398 30.3826C69.457 29.421 68.5779 28.5419 67.6163 27.7591C64.4736 25.1955 60.5708 23.7444 56.5167 23.632C52.4626 23.5197 48.4855 24.7526 45.2057 27.1382C45.1036 27.2129 45.019 27.3088 44.9578 27.4193C44.8964 27.5299 44.8598 27.6524 44.8503 27.7785C44.8408 27.9045 44.8589 28.0312 44.9031 28.1496C44.9474 28.268 45.0168 28.3755 45.1065 28.4645Z"
+  />
+  <path
+    d="M45.1103 55.5161L49.5208 51.1057C49.6593 50.9672 49.8405 50.8794 50.0349 50.8561C50.2294 50.8328 50.4261 50.8755 50.5935 50.9773C52.2293 51.9641 54.1035 52.4858 56.0139 52.4858C57.9244 52.4858 59.7986 51.9641 61.4344 50.9773C61.6017 50.8755 61.7984 50.8328 61.993 50.8561C62.1875 50.8794 62.3685 50.9672 62.5071 51.1057L66.9176 55.5161C67.01 55.6049 67.0818 55.7132 67.1278 55.8329C67.1739 55.9527 67.1929 56.0811 67.1837 56.2091C67.1746 56.3371 67.1373 56.4614 67.0747 56.5734C67.0121 56.6854 66.9256 56.7822 66.8214 56.8569C63.6819 59.1412 59.8993 60.3716 56.0168 60.3716C52.1344 60.3716 48.3518 59.1412 45.2123 56.8569C45.1077 56.7827 45.0207 56.6862 44.9575 56.5744C44.8944 56.4627 44.8566 56.3385 44.8468 56.2105C44.8371 56.0825 44.8557 55.9539 44.9011 55.834C44.9468 55.714 45.0181 55.6054 45.1103 55.5161Z"
+  />
+  <path
+    d="M56.003 47.244C53.1036 47.244 50.753 44.8935 50.753 41.994C50.753 39.0946 53.1036 36.744 56.003 36.744C58.9025 36.744 61.253 39.0946 61.253 41.994C61.253 44.8935 58.9025 47.244 56.003 47.244Z"
+  />
+  <path
+    d="M45.8935 7.4645L41.483 11.8749C41.3445 12.0134 41.1633 12.1013 40.9689 12.1245C40.7743 12.1478 40.5777 12.105 40.4103 12.0032C38.6755 10.9566 36.6746 10.4346 34.6494 10.5003C32.6242 10.566 30.6615 11.2165 28.998 12.3734C27.975 13.0855 27.0866 13.9738 26.3745 14.9969C25.219 16.6614 24.5691 18.6242 24.5029 20.6494C24.4367 22.6746 24.957 24.6758 26.0014 26.4122C26.1025 26.5792 26.1448 26.7752 26.1216 26.9692C26.0983 27.163 26.0109 27.3435 25.8731 27.482L21.4627 31.8923C21.3739 31.9817 21.2668 32.0509 21.1488 32.095C21.0308 32.1393 20.9046 32.1573 20.7789 32.1483C20.6532 32.1391 20.531 32.103 20.4206 32.0422C20.3102 31.9814 20.2142 31.8975 20.1393 31.7961C17.753 28.5161 16.5197 24.5383 16.632 20.4836C16.7444 16.4289 18.1959 12.5255 20.7602 9.38257C21.543 8.42097 22.4221 7.54189 23.3837 6.75906C26.5264 4.19551 30.4292 2.74437 34.4833 2.63205C38.5373 2.51973 42.5145 3.75255 45.7943 6.13816C45.8964 6.21286 45.9809 6.3088 46.0422 6.41934C46.1036 6.52989 46.1402 6.65241 46.1497 6.77848C46.1592 6.90455 46.1411 7.03117 46.0969 7.1496C46.0526 7.26803 45.9832 7.37547 45.8935 7.4645Z"
+  />
+  <path
+    d="M45.8897 34.5161L41.4792 30.1057C41.3407 29.9672 41.1595 29.8794 40.9651 29.8561C40.7706 29.8328 40.5739 29.8755 40.4065 29.9773C38.7707 30.9641 36.8965 31.4858 34.9861 31.4858C33.0756 31.4858 31.2014 30.9641 29.5656 29.9773C29.3983 29.8755 29.2016 29.8328 29.007 29.8561C28.8125 29.8794 28.6315 29.9672 28.4929 30.1057L24.0824 34.5161C23.9899 34.6049 23.9182 34.7132 23.8722 34.8329C23.8261 34.9527 23.8071 35.0811 23.8163 35.2091C23.8254 35.3371 23.8626 35.4614 23.9253 35.5734C23.9879 35.6854 24.0744 35.7822 24.1786 35.8569C27.3181 38.1412 31.1007 39.3716 34.9832 39.3716C38.8656 39.3716 42.6482 38.1412 45.7877 35.8569C45.8923 35.7827 45.9793 35.6862 46.0425 35.5744C46.1056 35.4627 46.1434 35.3385 46.1532 35.2105C46.1629 35.0825 46.1443 34.9539 46.0989 34.834C46.0532 34.714 45.9819 34.6054 45.8897 34.5161Z"
+  />
+  <path
+    d="M34.997 26.244C37.8964 26.244 40.247 23.8935 40.247 20.994C40.247 18.0946 37.8964 15.744 34.997 15.744C32.0975 15.744 29.747 18.0946 29.747 20.994C29.747 23.8935 32.0975 26.244 34.997 26.244Z"
+  />
+  <path
+    d="M-10.8935 -13.5355L-6.48304 -9.12508C-6.34447 -8.98664 -6.16334 -8.89874 -5.96889 -8.87548C-5.77429 -8.85223 -5.5777 -8.89496 -5.41035 -8.99681C-3.67546 -10.0434 -1.67461 -10.5654 0.350573 -10.4997C2.37576 -10.434 4.33849 -9.78347 6.00196 -8.6266C7.02502 -7.91449 7.91335 -7.02616 8.62548 -6.00309C9.78097 -4.33862 10.4309 -2.37576 10.4971 -0.350574C10.5633 1.67461 10.0429 3.67576 8.99861 5.41218C8.89748 5.57923 8.85516 5.77521 8.87841 5.9692C8.90165 6.16304 8.98912 6.34355 9.12687 6.48196L13.5373 10.8923C13.6261 10.9817 13.7332 11.0509 13.8512 11.095C13.9692 11.1393 14.0954 11.1573 14.2211 11.1483C14.3468 11.1391 14.469 11.103 14.5794 11.0422C14.6898 10.9814 14.7858 10.8975 14.8607 10.7961C17.247 7.51607 18.4803 3.53827 18.368 -0.516392C18.2556 -4.57108 16.8041 -8.47452 14.2398 -11.6174C13.457 -12.579 12.5779 -13.4581 11.6163 -14.2409C8.47363 -16.8045 4.57076 -18.2556 0.516696 -18.368C-3.53735 -18.4803 -7.51454 -17.2474 -10.7943 -14.8618C-10.8964 -14.7871 -10.981 -14.6912 -11.0422 -14.5807C-11.1036 -14.4701 -11.1402 -14.3476 -11.1497 -14.2215C-11.1592 -14.0955 -11.1411 -13.9688 -11.0969 -13.8504C-11.0526 -13.732 -10.9832 -13.6245 -10.8935 -13.5355Z"
+  />
+  <path
+    d="M-10.8897 13.5161L-6.47923 9.10565C-6.34066 8.96724 -6.15953 8.87936 -5.96508 8.85608C-5.77063 8.83281 -5.57388 8.87553 -5.40654 8.97735C-3.77071 9.96414 -1.89649 10.4858 0.0138683 10.4858C1.92438 10.4858 3.79857 9.96414 5.43441 8.97735C5.60174 8.87553 5.79843 8.83281 5.99295 8.85608C6.18747 8.87936 6.36853 8.96724 6.50713 9.10565L10.9176 13.5161C11.01 13.6049 11.0818 13.7132 11.1278 13.8329C11.1738 13.9527 11.1929 14.0811 11.1837 14.2091C11.1746 14.3371 11.1373 14.4614 11.0747 14.5734C11.0121 14.6854 10.9256 14.7822 10.8214 14.8569C7.68191 17.1412 3.89931 18.3716 0.016777 18.3716C-3.86564 18.3716 -7.64822 17.1412 -10.7877 14.8569C-10.8923 14.7827 -10.9793 14.6862 -11.0425 14.5744C-11.1056 14.4627 -11.1434 14.3385 -11.1532 14.2105C-11.1629 14.0825 -11.1443 13.9539 -11.0989 13.834C-11.0532 13.714 -10.9819 13.6054 -10.8897 13.5161Z"
+  />
+  <path
+    d="M0.00299549 5.24402C-2.89638 5.24402 -5.24701 2.89352 -5.24701 -0.00602722C-5.24701 -2.90543 -2.89638 -5.25598 0.00299549 -5.25598C2.90252 -5.25598 5.25299 -2.90543 5.25299 -0.00602722C5.25299 2.89352 2.90252 5.24402 0.00299549 5.24402Z"
+  />
+  <path
+    d="M45.1065 -13.5355L49.517 -9.12508C49.6555 -8.98664 49.8367 -8.89874 50.0311 -8.87548C50.2257 -8.85223 50.4223 -8.89496 50.5897 -8.99681C52.3245 -10.0434 54.3254 -10.5654 56.3506 -10.4997C58.3758 -10.434 60.3385 -9.78347 62.002 -8.6266C63.025 -7.91449 63.9134 -7.02616 64.6255 -6.00309C65.781 -4.33862 66.4309 -2.37576 66.4971 -0.350574C66.5633 1.67461 66.0429 3.67576 64.9986 5.41218C64.8975 5.57923 64.8552 5.77521 64.8784 5.9692C64.9016 6.16304 64.9891 6.34355 65.1269 6.48196L69.5373 10.8923C69.6261 10.9817 69.7332 11.0509 69.8512 11.095C69.9692 11.1393 70.0954 11.1573 70.2211 11.1483C70.3468 11.1391 70.469 11.103 70.5794 11.0422C70.6898 10.9814 70.7858 10.8975 70.8607 10.7961C73.247 7.51607 74.4803 3.53827 74.368 -0.516392C74.2556 -4.57108 72.8041 -8.47452 70.2398 -11.6174C69.457 -12.579 68.5779 -13.4581 67.6163 -14.2409C64.4736 -16.8045 60.5708 -18.2556 56.5167 -18.368C52.4626 -18.4803 48.4855 -17.2474 45.2057 -14.8618C45.1036 -14.7871 45.019 -14.6912 44.9578 -14.5807C44.8964 -14.4701 44.8598 -14.3476 44.8503 -14.2215C44.8408 -14.0955 44.8589 -13.9688 44.9031 -13.8504C44.9474 -13.732 45.0168 -13.6245 45.1065 -13.5355Z"
+  />
+  <path
+    d="M45.1103 13.5161L49.5208 9.10565C49.6593 8.96724 49.8405 8.87936 50.0349 8.85608C50.2294 8.83281 50.4261 8.87553 50.5935 8.97735C52.2293 9.96414 54.1035 10.4858 56.0139 10.4858C57.9244 10.4858 59.7986 9.96414 61.4344 8.97735C61.6017 8.87553 61.7984 8.83281 61.993 8.85608C62.1875 8.87936 62.3685 8.96724 62.5071 9.10565L66.9176 13.5161C67.01 13.6049 67.0818 13.7132 67.1278 13.8329C67.1739 13.9527 67.1929 14.0811 67.1837 14.2091C67.1746 14.3371 67.1373 14.4614 67.0747 14.5734C67.0121 14.6854 66.9256 14.7822 66.8214 14.8569C63.6819 17.1412 59.8993 18.3716 56.0168 18.3716C52.1344 18.3716 48.3518 17.1412 45.2123 14.8569C45.1077 14.7827 45.0207 14.6862 44.9575 14.5744C44.8944 14.4627 44.8566 14.3385 44.8468 14.2105C44.8371 14.0825 44.8557 13.9539 44.9011 13.834C44.9468 13.714 45.0181 13.6054 45.1103 13.5161Z"
+  />
+  <path
+    d="M56.003 5.24402C53.1036 5.24402 50.753 2.89352 50.753 -0.00602722C50.753 -2.90543 53.1036 -5.25598 56.003 -5.25598C58.9025 -5.25598 61.253 -2.90543 61.253 -0.00602722C61.253 2.89352 58.9025 5.24402 56.003 5.24402Z"
+  />
+  <path
+    d="M-10.8935 28.4645L-6.48304 32.8749C-6.34447 33.0134 -6.16334 33.1013 -5.96889 33.1245C-5.77429 33.1478 -5.5777 33.105 -5.41035 33.0032C-3.67546 31.9566 -1.67461 31.4346 0.350573 31.5003C2.37576 31.566 4.33849 32.2165 6.00196 33.3734C7.02502 34.0855 7.91335 34.9738 8.62548 35.9969C9.78097 37.6614 10.4309 39.6242 10.4971 41.6494C10.5633 43.6746 10.0429 45.6758 8.99861 47.4122C8.89748 47.5792 8.85516 47.7752 8.87841 47.9692C8.90165 48.163 8.98912 48.3436 9.12687 48.482L13.5373 52.8923C13.6261 52.9817 13.7332 53.0509 13.8512 53.095C13.9692 53.1393 14.0954 53.1573 14.2211 53.1483C14.3468 53.1391 14.469 53.103 14.5794 53.0422C14.6898 52.9814 14.7858 52.8975 14.8607 52.7962C17.247 49.5161 18.4803 45.5383 18.368 41.4836C18.2556 37.4289 16.8041 33.5255 14.2398 30.3826C13.457 29.421 12.5779 28.5419 11.6163 27.7591C8.47363 25.1955 4.57076 23.7444 0.516696 23.632C-3.53735 23.5197 -7.51454 24.7526 -10.7943 27.1382C-10.8964 27.2129 -10.981 27.3088 -11.0422 27.4193C-11.1036 27.5299 -11.1402 27.6524 -11.1497 27.7785C-11.1592 27.9045 -11.1411 28.0312 -11.0969 28.1496C-11.0526 28.268 -10.9832 28.3755 -10.8935 28.4645Z"
+  />
+  <path
+    d="M-10.8897 55.5161L-6.47923 51.1057C-6.34066 50.9672 -6.15953 50.8794 -5.96508 50.8561C-5.77063 50.8328 -5.57388 50.8755 -5.40654 50.9773C-3.77071 51.9641 -1.89649 52.4858 0.0138683 52.4858C1.92438 52.4858 3.79857 51.9641 5.43441 50.9773C5.60174 50.8755 5.79843 50.8328 5.99295 50.8561C6.18747 50.8794 6.36853 50.9672 6.50713 51.1057L10.9176 55.5161C11.01 55.6049 11.0818 55.7132 11.1278 55.8329C11.1738 55.9527 11.1929 56.0811 11.1837 56.2091C11.1746 56.3371 11.1373 56.4614 11.0747 56.5734C11.0121 56.6854 10.9256 56.7822 10.8214 56.8569C7.68191 59.1412 3.89931 60.3716 0.016777 60.3716C-3.86564 60.3716 -7.64822 59.1412 -10.7877 56.8569C-10.8923 56.7827 -10.9793 56.6862 -11.0425 56.5744C-11.1056 56.4627 -11.1434 56.3385 -11.1532 56.2105C-11.1629 56.0825 -11.1443 55.9539 -11.0989 55.834C-11.0532 55.714 -10.9819 55.6054 -10.8897 55.5161Z"
+  />
+  <path
+    d="M0.00299549 47.244C-2.89638 47.244 -5.24701 44.8935 -5.24701 41.994C-5.24701 39.0946 -2.89638 36.744 0.00299549 36.744C2.90252 36.744 5.25299 39.0946 5.25299 41.994C5.25299 44.8935 2.90252 47.244 0.00299549 47.244Z"
+  />
+  <path
+    d="M45.1065 28.4645L49.517 32.8749C49.6555 33.0134 49.8367 33.1013 50.0311 33.1245C50.2257 33.1478 50.4223 33.105 50.5897 33.0032C52.3245 31.9566 54.3254 31.4346 56.3506 31.5003C58.3758 31.566 60.3385 32.2165 62.002 33.3734C63.025 34.0855 63.9134 34.9738 64.6255 35.9969C65.781 37.6614 66.4309 39.6242 66.4971 41.6494C66.5633 43.6746 66.0429 45.6758 64.9986 47.4122C64.8975 47.5792 64.8552 47.7752 64.8784 47.9692C64.9016 48.163 64.9891 48.3436 65.1269 48.482L69.5373 52.8923C69.6261 52.9817 69.7332 53.0509 69.8512 53.095C69.9692 53.1393 70.0954 53.1573 70.2211 53.1483C70.3468 53.1391 70.469 53.103 70.5794 53.0422C70.6898 52.9814 70.7858 52.8975 70.8607 52.7962C73.247 49.5161 74.4803 45.5383 74.368 41.4836C74.2556 37.4289 72.8041 33.5255 70.2398 30.3826C69.457 29.421 68.5779 28.5419 67.6163 27.7591C64.4736 25.1955 60.5708 23.7444 56.5167 23.632C52.4626 23.5197 48.4855 24.7526 45.2057 27.1382C45.1036 27.2129 45.019 27.3088 44.9578 27.4193C44.8964 27.5299 44.8598 27.6524 44.8503 27.7785C44.8408 27.9045 44.8589 28.0312 44.9031 28.1496C44.9474 28.268 45.0168 28.3755 45.1065 28.4645Z"
+  />
+  <path
+    d="M45.1103 55.5161L49.5208 51.1057C49.6593 50.9672 49.8405 50.8794 50.0349 50.8561C50.2294 50.8328 50.4261 50.8755 50.5935 50.9773C52.2293 51.9641 54.1035 52.4858 56.0139 52.4858C57.9244 52.4858 59.7986 51.9641 61.4344 50.9773C61.6017 50.8755 61.7984 50.8328 61.993 50.8561C62.1875 50.8794 62.3685 50.9672 62.5071 51.1057L66.9176 55.5161C67.01 55.6049 67.0818 55.7132 67.1278 55.8329C67.1739 55.9527 67.1929 56.0811 67.1837 56.2091C67.1746 56.3371 67.1373 56.4614 67.0747 56.5734C67.0121 56.6854 66.9256 56.7822 66.8214 56.8569C63.6819 59.1412 59.8993 60.3716 56.0168 60.3716C52.1344 60.3716 48.3518 59.1412 45.2123 56.8569C45.1077 56.7827 45.0207 56.6862 44.9575 56.5744C44.8944 56.4627 44.8566 56.3385 44.8468 56.2105C44.8371 56.0825 44.8557 55.9539 44.9011 55.834C44.9468 55.714 45.0181 55.6054 45.1103 55.5161Z"
+  />
+  <path
+    d="M56.003 47.244C53.1036 47.244 50.753 44.8935 50.753 41.994C50.753 39.0946 53.1036 36.744 56.003 36.744C58.9025 36.744 61.253 39.0946 61.253 41.994C61.253 44.8935 58.9025 47.244 56.003 47.244Z"
+  />
+</svg>

docs/tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class", '[data-theme="dark"]'],
+  content: ["./src/**/*.js"],
+  theme: { extend: {} },
+  plugins: [],
+}

docs/versioned_docs/version-v3/adapters/prisma.md

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