docs: remove capitalization on osu!

* fix: returns status for signing in with credentials provider `redirect: false`

* chore: format cookie.ts

.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/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/app/api/auth/[...nextauth]/route.ts

@@ -1,12 +1,207 @@
 import NextAuth, { type NextAuthOptions } from "next-auth"
-import GitHub from "next-auth/providers/github"
 // 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 as string,
-      clientSecret: process.env.GITHUB_SECRET as string,
+      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,
     }),
   ],
 }

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

@@ -6,16 +6,18 @@ title: Adapters
 Visit the [authjs.dev](https://authjs.dev/reference/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/nextjs.md

@@ -2,6 +2,27 @@
 
 ## `getServerSession`
 
+:::tip
+You can create a helper function so you don't need to pass `authOptions` around:
+
+```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:
@@ -157,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).
 
 ---
 
@@ -182,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)
 
@@ -255,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/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

@@ -203,7 +203,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
     }
@@ -519,6 +519,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"

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

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

docs/docs/providers/osu.md

@@ -1,6 +1,6 @@
 ---
 id: osu
-title: Osu!
+title: osu!
 ---
 
 ## Documentation

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

package.json

@@ -5,7 +5,7 @@
   "repository": "https://github.com/nextauthjs/next-auth.git",
   "scripts": {
     "build:app": "turbo run build --filter=next-auth-app",
-    "build": "turbo run build --filter=next-auth --filter=@next-auth/* --no-deps",
+    "build": "turbo run build --filter=next-auth --no-deps",
     "lint": "turbo run lint --filter=!next-auth-docs --parallel",
     "test": "turbo run test --concurrency=1 --filter=!@next-auth/pouchdb-adapter --filter=!@next-auth/upstash-redis-adapter --filter=!next-auth-* --filter=[HEAD^1]",
     "clean": "turbo run clean --no-cache",

packages/next-auth/README.md

@@ -168,7 +168,7 @@ export default function App({
 
 ## Security
 
-If you think you have found a vulnerability (or not sure) in NextAuth.js or any of the related packages (i.e. Adapters), we ask you to have a read of our [Security Policy](https://github.com/nextauthjs/next-auth/blob/main/SECURITY.md) to reach out responsibly. Please do not open Pull Requests/Issues/Discussions before consulting with us.
+If you think you have found a vulnerability (or not sure) in NextAuth.js or any of the related packages (i.e. Adapters), we ask you to have a read of our [Security Policy](https://github.com/nextauthjs/next-auth/security/policy) to reach out responsibly. Please do not open Pull Requests/Issues/Discussions before consulting with us.
 
 ## Acknowledgments
 

packages/next-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-auth",
-  "version": "4.22.4",
+  "version": "4.24.3",
   "description": "Authentication for Next.js",
   "homepage": "https://next-auth.js.org",
   "repository": "https://github.com/nextauthjs/next-auth.git",
@@ -9,7 +9,7 @@
     "Balázs Orbán <info@balazsorban.com>",
     "Nico Domino <yo@ndo.dev>",
     "Lluis Agusti <hi@llu.lu>",
-    "Thang Huu Vu <thvu@hey.com>"
+    "Thang Huu Vu <hi@thvu.dev>"
   ],
   "main": "index.js",
   "module": "index.js",
@@ -27,19 +27,42 @@
     "nextauth"
   ],
   "exports": {
-    ".": "./index.js",
-    "./jwt": "./jwt/index.js",
-    "./react": "./react/index.js",
-    "./core": "./core/index.js",
-    "./next": "./next/index.js",
-    "./middleware": "./middleware.js",
-    "./client/_utils": "./client/_utils.js",
-    "./providers/*": "./providers/*.js"
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./adapters": {
+      "types": "./adapters.d.ts"
+    },
+    "./jwt": {
+      "types": "./jwt/index.d.ts",
+      "default": "./jwt/index.js"
+    },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "default": "./react/index.js"
+    },
+    "./next": {
+      "types": "./next/index.d.ts",
+      "default": "./next/index.js"
+    },
+    "./middleware": {
+      "types": "./middleware.d.ts",
+      "default": "./middleware.js"
+    },
+    "./client/_utils": {
+      "types": "./client/_utils.d.ts",
+      "default": "./client/_utils.js"
+    },
+    "./providers/*": {
+      "types": "./providers/*.d.ts",
+      "default": "./providers/*.js"
+    }
   },
   "scripts": {
     "build": "pnpm clean && pnpm build:js && pnpm build:css",
     "build:js": "pnpm clean && pnpm generate-providers && pnpm tsc --project tsconfig.json && babel --config-file ./config/babel.config.js src --out-dir . --extensions \".tsx,.ts,.js,.jsx\"",
-    "clean": "rm -rf coverage client css utils providers core jwt react next index.d.ts index.js adapters.d.ts middleware.d.ts middleware.js",
+    "clean": "rm -rf coverage client css utils providers core jwt react next lib ./*.js ./*.ts*",
     "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir . && node config/wrap-css.js",
     "dev": "pnpm clean && pnpm generate-providers && concurrently \"pnpm watch:css\" \"pnpm watch:ts\"",
     "watch:ts": "pnpm tsc --project tsconfig.dev.json",

packages/next-auth/src/adapters.ts

@@ -60,19 +60,21 @@ export interface VerificationToken {
  * [Create a custom adapter](https://next-auth.js.org/tutorials/creating-a-database-adapter)
  */
 export interface Adapter {
-  createUser: (user: Omit<AdapterUser, "id">) => Awaitable<AdapterUser>
-  getUser: (id: string) => Awaitable<AdapterUser | null>
-  getUserByEmail: (email: string) => Awaitable<AdapterUser | null>
+  createUser?: (user: Omit<AdapterUser, "id">) => Awaitable<AdapterUser>
+  getUser?: (id: string) => Awaitable<AdapterUser | null>
+  getUserByEmail?: (email: string) => Awaitable<AdapterUser | null>
   /** Using the provider id and the id of the user for a specific account, get the user. */
-  getUserByAccount: (
+  getUserByAccount?: (
     providerAccountId: Pick<AdapterAccount, "provider" | "providerAccountId">
   ) => Awaitable<AdapterUser | null>
-  updateUser: (user: Partial<AdapterUser> & Pick<AdapterUser, 'id'>) => Awaitable<AdapterUser>
+  updateUser?: (
+    user: Partial<AdapterUser> & Pick<AdapterUser, "id">
+  ) => Awaitable<AdapterUser>
   /** @todo Implement */
   deleteUser?: (
     userId: string
   ) => Promise<void> | Awaitable<AdapterUser | null | undefined>
-  linkAccount: (
+  linkAccount?: (
     account: AdapterAccount
   ) => Promise<void> | Awaitable<AdapterAccount | null | undefined>
   /** @todo Implement */
@@ -80,15 +82,15 @@ export interface Adapter {
     providerAccountId: Pick<AdapterAccount, "provider" | "providerAccountId">
   ) => Promise<void> | Awaitable<AdapterAccount | undefined>
   /** Creates a session for the user and returns it. */
-  createSession: (session: {
+  createSession?: (session: {
     sessionToken: string
     userId: string
     expires: Date
   }) => Awaitable<AdapterSession>
-  getSessionAndUser: (
+  getSessionAndUser?: (
     sessionToken: string
   ) => Awaitable<{ session: AdapterSession; user: AdapterUser } | null>
-  updateSession: (
+  updateSession?: (
     session: Partial<AdapterSession> & Pick<AdapterSession, "sessionToken">
   ) => Awaitable<AdapterSession | null | undefined>
   /**
@@ -96,7 +98,7 @@ export interface Adapter {
    * It is preferred that this method also returns the session
    * that is being deleted for logging purposes.
    */
-  deleteSession: (
+  deleteSession?: (
     sessionToken: string
   ) => Promise<void> | Awaitable<AdapterSession | null | undefined>
   createVerificationToken?: (

packages/next-auth/src/core/errors.ts

@@ -1,4 +1,4 @@
-import type { EventCallbacks, LoggerInstance } from ".."
+import type { EventCallbacks, InternalOptions, LoggerInstance } from ".."
 
 /**
  * Same as the default `Error`, but it is JSON serializable.
@@ -106,7 +106,7 @@ export function eventsErrorHandler(
 export function adapterErrorHandler<TAdapter>(
   adapter: TAdapter | undefined,
   logger: LoggerInstance
-): TAdapter | undefined {
+): InternalOptions["adapter"] | undefined {
   if (!adapter) return
 
   return Object.keys(adapter).reduce<any>((acc, name) => {

packages/next-auth/src/core/lib/cookie.ts

@@ -114,7 +114,7 @@ export function defaultCookies(useSecureCookies: boolean): CookiesOptions {
         path: "/",
         secure: useSecureCookies,
       },
-    }
+    },
   }
 }
 
@@ -161,8 +161,21 @@ export class SessionStore {
     }
   }
 
+  /**
+   * The JWT Session or database Session ID
+   * constructed from the cookie chunks.
+   */
   get value() {
-    return Object.values(this.#chunks)?.join("")
+    // Sort the chunks by their keys before joining
+    const sortedKeys = Object.keys(this.#chunks).sort((a, b) => {
+      const aSuffix = parseInt(a.split(".").pop() ?? "0")
+      const bSuffix = parseInt(b.split(".").pop() ?? "0")
+
+      return aSuffix - bSuffix
+    })
+
+    // Use the sorted keys to join the chunks in the correct order
+    return sortedKeys.map((key) => this.#chunks[key]).join("")
   }
 
   /** Given a cookie, return a list of cookies, chunked to fit the allowed cookie size. */

packages/next-auth/src/core/pages/error.tsx

@@ -75,11 +75,9 @@ export default function ErrorPage(props: ErrorProps) {
         </div>
       ),
       signin: (
-        <p>
-          <a className="button" href={signinPageUrl}>
-            Sign in
-          </a>
-        </p>
+        <a className="button" href={signinPageUrl}>
+          Sign in
+        </a>
       ),
     },
   }

packages/next-auth/src/core/pages/signin.tsx

@@ -27,6 +27,33 @@ export interface SignInServerPageParams {
   theme: Theme
 }
 
+function hexToRgba(hex?: string, alpha = 1) {
+  if (!hex) {
+    return
+  }
+  // Remove the "#" character if it's included
+  hex = hex.replace(/^#/, "")
+
+  // Expand 3-digit hex codes to their 6-digit equivalents
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+
+  // Parse the hex value to separate R, G, and B components
+  const bigint = parseInt(hex, 16)
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+
+  // Ensure the alpha value is within the valid range [0, 1]
+  alpha = Math.min(Math.max(alpha, 0), 1)
+
+  // Construct the RGBA string
+  const rgba = `rgba(${r}, ${g}, ${b}, ${alpha})`
+
+  return rgba
+}
+
 export default function SigninPage(props: SignInServerPageParams) {
   const {
     csrfToken,
@@ -81,7 +108,7 @@ export default function SigninPage(props: SignInServerPageParams) {
 
   const error = errorType && (errors[errorType] ?? errors.default)
 
-  const logos = "https://authjs.dev/img/providers"
+  const providerLogoPath = "https://authjs.dev/img/providers"
   return (
     <div className="signin">
       {theme.brandColor && (
@@ -113,109 +140,139 @@ export default function SigninPage(props: SignInServerPageParams) {
             <p>{error}</p>
           </div>
         )}
-        {providersToRender.map((provider, i: number) => (
-          <div key={provider.id} className="provider">
-            {provider.type === "oauth" && (
-              <form action={provider.signinUrl} method="POST">
-                <input type="hidden" name="csrfToken" value={csrfToken} />
-                {callbackUrl && (
-                  <input type="hidden" name="callbackUrl" value={callbackUrl} />
-                )}
-                <button
-                  type="submit"
-                  className="button"
-                  style={
-                    // eslint-disable-next-line
-                    {
-                      "--provider-bg": provider.style?.bg ?? "",
-                      "--provider-dark-bg": provider.style?.bgDark ?? "",
-                      "--provider-color": provider.style?.text ?? "",
-                      "--provider-dark-color": provider.style?.textDark ?? "",
-                    } as React.CSSProperties
-                  }
-                >
-                  {provider.style?.logo && (
-                    <img
-                      loading="lazy"
-                      height={24}
-                      width={24}
-                      id="provider-logo"
-                      src={`${
-                        provider.style.logo.startsWith("/") ? logos : ""
-                      }${provider.style.logo}`}
+        {providersToRender.map((provider, i: number) => {
+          let bg, text, logo, logoDark, bgDark, textDark
+          if (provider.type === "oauth") {
+            ;({
+              bg = "",
+              text = "",
+              logo = "",
+              bgDark = bg,
+              textDark = text,
+              logoDark = "",
+            } = provider.style ?? {})
+
+            logo = logo.startsWith("/")
+              ? `${providerLogoPath}${logo as string}`
+              : logo
+            logoDark = logoDark.startsWith("/")
+              ? `${providerLogoPath}${logoDark as string}`
+              : logoDark || logo
+
+            logoDark ||= logo
+          }
+          return (
+            <div key={provider.id} className="provider">
+              {provider.type === "oauth" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {callbackUrl && (
+                    <input
+                      type="hidden"
+                      name="callbackUrl"
+                      value={callbackUrl}
                     />
                   )}
-                  {provider.style?.logoDark && (
-                    <img
-                      loading="lazy"
-                      height={24}
-                      width={24}
-                      id="provider-logo-dark"
-                      src={`${
-                        provider.style.logo.startsWith("/") ? logos : ""
-                      }${provider.style.logoDark}`}
-                    />
-                  )}
-                  <span>Sign in with {provider.name}</span>
-                </button>
-              </form>
-            )}
-            {(provider.type === "email" || provider.type === "credentials") &&
-              i > 0 &&
-              providersToRender[i - 1].type !== "email" &&
-              providersToRender[i - 1].type !== "credentials" && <hr />}
-            {provider.type === "email" && (
-              <form action={provider.signinUrl} method="POST">
-                <input type="hidden" name="csrfToken" value={csrfToken} />
-                <label
-                  className="section-header"
-                  htmlFor={`input-email-for-${provider.id}-provider`}
-                >
-                  Email
-                </label>
-                <input
-                  id={`input-email-for-${provider.id}-provider`}
-                  autoFocus
-                  type="email"
-                  name="email"
-                  value={email}
-                  placeholder="email@example.com"
-                  required
-                />
-                <button id="submitButton" type="submit">Sign in with {provider.name}</button>
-              </form>
-            )}
-            {provider.type === "credentials" && (
-              <form action={provider.callbackUrl} method="POST">
-                <input type="hidden" name="csrfToken" value={csrfToken} />
-                {Object.keys(provider.credentials).map((credential) => {
-                  return (
-                    <div key={`input-group-${provider.id}`}>
-                      <label
-                        className="section-header"
-                        htmlFor={`input-${credential}-for-${provider.id}-provider`}
-                      >
-                        {provider.credentials[credential].label ?? credential}
-                      </label>
-                      <input
-                        name={credential}
-                        id={`input-${credential}-for-${provider.id}-provider`}
-                        type={provider.credentials[credential].type ?? "text"}
-                        placeholder={
-                          provider.credentials[credential].placeholder ?? ""
-                        }
-                        {...provider.credentials[credential]}
+                  <button
+                    type="submit"
+                    className="button"
+                    style={
+                      // eslint-disable-next-line
+                      {
+                        "--provider-bg": bg,
+                        "--provider-dark-bg": bgDark,
+                        "--provider-color": text,
+                        "--provider-dark-color": textDark,
+                        "--provider-bg-hover": hexToRgba(bg, 0.8),
+                        "--provider-dark-bg-hover": hexToRgba(bgDark, 0.8),
+                      } as React.CSSProperties
+                    }
+                  >
+                    {logo && (
+                      <img
+                        loading="lazy"
+                        height={24}
+                        width={24}
+                        id="provider-logo"
+                        src={`${
+                          logo.startsWith("/") ? providerLogoPath : ""
+                        }${logo}`}
                       />
-                    </div>
-                  )
-                })}
-                <button type="submit">Sign in with {provider.name}</button>
-              </form>
-            )}
-            {(provider.type === "email" || provider.type === "credentials") &&
-              i + 1 < providersToRender.length && <hr />}
-          </div>
-        ))}
+                    )}
+                    {logoDark && (
+                      <img
+                        loading="lazy"
+                        height={24}
+                        width={24}
+                        id="provider-logo-dark"
+                        src={`${
+                          logo.startsWith("/") ? providerLogoPath : ""
+                        }${logoDark}`}
+                      />
+                    )}
+                    <span>Sign in with {provider.name}</span>
+                  </button>
+                </form>
+              )}
+              {(provider.type === "email" || provider.type === "credentials") &&
+                i > 0 &&
+                providersToRender[i - 1].type !== "email" &&
+                providersToRender[i - 1].type !== "credentials" && <hr />}
+              {provider.type === "email" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  <label
+                    className="section-header"
+                    htmlFor={`input-email-for-${provider.id}-provider`}
+                  >
+                    Email
+                  </label>
+                  <input
+                    id={`input-email-for-${provider.id}-provider`}
+                    autoFocus
+                    type="email"
+                    name="email"
+                    value={email}
+                    placeholder="email@example.com"
+                    required
+                  />
+                  <button id="submitButton" type="submit">
+                    Sign in with {provider.name}
+                  </button>
+                </form>
+              )}
+              {provider.type === "credentials" && (
+                <form action={provider.callbackUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {Object.keys(provider.credentials).map((credential) => {
+                    return (
+                      <div key={`input-group-${provider.id}`}>
+                        <label
+                          className="section-header"
+                          htmlFor={`input-${credential}-for-${provider.id}-provider`}
+                        >
+                          {provider.credentials[credential].label ?? credential}
+                        </label>
+                        <input
+                          name={credential}
+                          id={`input-${credential}-for-${provider.id}-provider`}
+                          type={provider.credentials[credential].type ?? "text"}
+                          placeholder={
+                            provider.credentials[credential].placeholder ?? ""
+                          }
+                          {...provider.credentials[credential]}
+                        />
+                      </div>
+                    )
+                  })}
+                  <button type="submit">Sign in with {provider.name}</button>
+                </form>
+              )}
+              {(provider.type === "email" || provider.type === "credentials") &&
+                i + 1 < providersToRender.length && <hr />}
+            </div>
+          )
+        })}
       </div>
     </div>
   )

packages/next-auth/src/core/types.ts

@@ -580,10 +580,12 @@ export type AuthAction =
   | "error"
   | "_log"
 
+type NonNullableFields<T> = {
+  [P in keyof T]-?: NonNullable<T[P]>
+}
+
 /** @internal */
-export interface InternalOptions<
-  TProviderType = ProviderType,
-> {
+export interface InternalOptions<TProviderType = ProviderType> {
   providers: InternalProvider[]
   /**
    * Parsed from `NEXTAUTH_URL` or `x-forwarded-host` and `x-forwarded-proto` if the host is trusted.
@@ -602,7 +604,7 @@ export interface InternalOptions<
   pages: Partial<PagesOptions>
   jwt: JWTOptions
   events: Partial<EventCallbacks>
-  adapter?: Adapter
+  adapter?: NonNullableFields<Adapter>
   callbacks: CallbacksOptions
   cookies: CookiesOptions
   callbackUrl: string

packages/next-auth/src/css/index.css

@@ -3,43 +3,77 @@
   --border-radius: 0.5rem;
   --color-error: #c94b4b;
   --color-info: #157efb;
+  --color-info-hover: #0f6ddb;
   --color-info-text: #fff;
 }
 
 .__next-auth-theme-auto,
 .__next-auth-theme-light {
   --color-background: #ececec;
+  --color-background-hover: rgba(236, 236, 236, 0.8);
   --color-background-card: #fff;
   --color-text: #000;
   --color-primary: #444;
   --color-control-border: #bbb;
   --color-button-active-background: #f9f9f9;
   --color-button-active-border: #aaa;
-  --color-seperator: #ccc;
+  --color-separator: #ccc;
 }
 
 .__next-auth-theme-dark {
   --color-background: #161b22;
+  --color-background-hover: rgba(22, 27, 34, 0.8);
   --color-background-card: #0d1117;
   --color-text: #fff;
   --color-primary: #ccc;
   --color-control-border: #555;
   --color-button-active-background: #060606;
   --color-button-active-border: #666;
-  --color-seperator: #444;
+  --color-separator: #444;
 }
 
 @media (prefers-color-scheme: dark) {
   .__next-auth-theme-auto {
     --color-background: #161b22;
+    --color-background-hover: rgba(22, 27, 34, 0.8);
     --color-background-card: #0d1117;
     --color-text: #fff;
     --color-primary: #ccc;
     --color-control-border: #555;
     --color-button-active-background: #060606;
     --color-button-active-border: #666;
-    --color-seperator: #444;
+    --color-separator: #444;
   }
+
+  button,
+  a.button {
+    color: var(--provider-dark-color, var(--color-primary));
+    background-color: var(--provider-dark-bg, var(--color-background));
+    &:hover {
+      background-color: var(--provider-dark-bg-hover, var(--color-background-hover)) !important;
+    }
+  }
+  #provider-logo {
+    display: none !important;
+  }
+  #provider-logo-dark {
+    width: 25px;
+    display: block !important;
+  }
+}
+html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
 }
 
 body {
@@ -52,13 +86,15 @@ body {
 }
 
 h1 {
-  font-weight: 400;
   margin-bottom: 1.5rem;
   padding: 0 1rem;
+  font-weight: 400;
   color: var(--color-text);
 }
 
 p {
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
   color: var(--color-text);
 }
 
@@ -92,8 +128,6 @@ input[type] {
 }
 
 p {
-  margin: 0 0 1.5rem 0;
-  padding: 0 1rem;
   font-size: 1.1rem;
   line-height: 2rem;
 }
@@ -115,10 +149,9 @@ button span {
 
 button,
 a.button {
-  margin: 0 0 0.75rem 0;
   padding: 0.75rem 1rem;
   color: var(--provider-color, var(--color-primary));
-  background-color: var(--provider-bg, var(--color-background-card));
+  background-color: var(--provider-bg);
   font-size: 1.1rem;
   min-height: 62px;
   border-color: rgba(0, 0, 0, 0.1);
@@ -130,11 +163,8 @@ a.button {
   align-items: center;
   justify-content: center;
 
-  @media (max-width: 450px) {
-    font-size: 0.9rem;
-  }
-
   &:hover {
+    background-color: var(--provider-bg-hover, var(--color-background-hover));
     cursor: pointer;
   }
   &:active {
@@ -153,20 +183,9 @@ a.button {
   color: var(--button-text-color, var(--color-info-text));
   background-color: var(--brand-color, var(--color-info));
   width: 100%;
-}
 
-@media (prefers-color-scheme: dark) {
-  button,
-  a.button {
-    color: var(--provider-dark-color, var(--color-primary));
-    background-color: var(--provider-dark-bg, var(--color-background));
-  }
-  #provider-logo {
-    display: none !important;
-  }
-  #provider-logo-dark {
-    width: 25px;
-    display: block !important;
+  &:hover {
+    background-color: var(--button-hover-bg, var(--color-info-hover)) !important;
   }
 }
 
@@ -189,6 +208,7 @@ a.site {
   place-items: center;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 
   > div {
     text-align: center;
@@ -197,7 +217,6 @@ a.site {
 
 .error {
   a.button {
-    display: inline-block;
     padding-left: 2rem;
     padding-right: 2rem;
     margin-top: 0.5rem;
@@ -218,7 +237,7 @@ a.site {
   hr {
     display: block;
     border: 0;
-    border-top: 1px solid var(--color-seperator);
+    border-top: 1px solid var(--color-separator);
     margin: 2rem auto 1rem auto;
     overflow: visible;
 
@@ -258,30 +277,24 @@ a.site {
     button {
       width: 100%;
     }
+  }
 
-    max-width: 300px;
+  .provider + .provider {
+    margin-top: 1rem;
   }
 }
 
 .logo {
   display: inline-block;
   max-width: 150px;
-  margin-top: 20px;
-  margin-bottom: 25px;
+  margin: 1.25rem 0;
   max-height: 70px;
 }
 
 .card {
-  @media screen and (min-width: 450px) {
-    width: 350px;
-  }
-  @media screen and (max-width: 450px) {
-    width: 200px;
-  }
-  margin: 20px 0 20px 0;
   background-color: var(--color-background-card);
-  border-radius: 30px;
-  padding: 20px 50px;
+  border-radius: 2rem;
+  padding: 1.25rem 2rem;
 
   .header {
     color: var(--color-primary);
@@ -291,3 +304,16 @@ a.site {
 .section-header {
   color: var(--color-text);
 }
+
+@media screen and (min-width: 450px) {
+  .card {
+    margin: 2rem 0;
+    width: 368px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .card {
+    margin: 1rem 0;
+    width: 343px;
+  }
+}

packages/next-auth/src/jwt/types.ts

@@ -36,7 +36,7 @@ export interface JWTDecodeParams {
 export interface JWTOptions {
   /**
    * The secret used to encode/decode the NextAuth.js issued JWT.
-   * @deprecated  Set the `NEXTAUTH_SECRET` environment vairable or
+   * @deprecated  Set the `NEXTAUTH_SECRET` environment variable or
    * use the top-level `secret` option instead
    */
   secret: string

packages/next-auth/src/next/index.ts

@@ -101,6 +101,7 @@ async function NextAuthRouteHandler(
     response.headers.delete("Location")
     response.headers.set("Content-Type", "application/json")
     return new Response(JSON.stringify({ url: redirect }), {
+      status: internalResponse.status,
       headers: response.headers,
     })
   }

packages/next-auth/src/providers/apple.ts

@@ -117,14 +117,7 @@ export default function Apple<P extends AppleProfile>(
       }
     },
     checks: ["pkce"],
-    style: {
-      logo: "/apple.svg",
-      logoDark: "/apple-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/apple.svg", text: "#fff", bg: "#000" },
     options,
   }
 }

packages/next-auth/src/providers/atlassian.ts

@@ -31,14 +31,7 @@ export default function Atlassian<P extends AtlassianProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/atlassian.svg",
-      logoDark: "/atlassian-dark.svg",
-      bg: "#0052cc",
-      text: "#fff",
-      bgDark: "#fff",
-      textDark: "#0052cc",
-    },
+    style: { logo: "/atlassian.svg", bg: "#fff", text: "#0052cc" },
     options,
   }
 }

packages/next-auth/src/providers/auth0.ts

@@ -26,14 +26,7 @@ export default function Auth0<P extends Auth0Profile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/auth0.svg",
-      logoDark: "/auth0-dark.svg",
-      bg: "#fff",
-      text: "#EB5424",
-      bgDark: "#EB5424",
-      textDark: "#fff",
-    },
+    style: { logo: "/auth0.svg", text: "#fff", bg: "#EB5424" },
     options,
   }
 }

packages/next-auth/src/providers/azure-ad-b2c.ts

@@ -42,14 +42,7 @@ export default function AzureADB2C<P extends AzureB2CProfile>(
         image: null,
       }
     },
-    style: {
-      logo: "/azure.svg",
-      logoDark: "/azure-dark.svg",
-      bg: "#fff",
-      text: "#0072c6",
-      bgDark: "#0072c6",
-      textDark: "#fff",
-    },
+    style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
     options,
   }
 }

packages/next-auth/src/providers/azure-ad.ts

@@ -56,14 +56,7 @@ export default function AzureAD<P extends AzureADProfile>(
         image: image ?? null,
       }
     },
-    style: {
-      logo: "/azure.svg",
-      logoDark: "/azure-dark.svg",
-      bg: "#fff",
-      text: "#0072c6",
-      bgDark: "#0072c6",
-      textDark: "#fff",
-    },
+    style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
     options,
   }
 }

packages/next-auth/src/providers/battlenet.ts

@@ -26,14 +26,7 @@ export default function BattleNet<P extends BattleNetProfile>(
         image: null,
       }
     },
-    style: {
-      logo: "/battlenet.svg",
-      logoDark: "/battlenet-dark.svg",
-      bg: "#fff",
-      text: "#148eff",
-      bgDark: "#148eff",
-      textDark: "#fff",
-    },
+    style: { logo: "/battlenet.svg", bg: "#148eff", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/box.js

@@ -17,11 +17,8 @@ export default function Box(options) {
     },
     style: {
       logo: "/box.svg",
-      logoDark: "/box-dark.svg",
-      bg: "#fff",
-      text: "#0075C9",
-      bgDark: "#0075C9",
-      textDark: "#fff",
+      bg: "#0075C9",
+      text: "#fff",
     },
     options,
   }

packages/next-auth/src/providers/cognito.ts

@@ -24,14 +24,7 @@ export default function Cognito<P extends CognitoProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/cognito.svg",
-      logoDark: "/cognito.svg",
-      bg: "#fff",
-      text: "#C17B9E",
-      bgDark: "#fff",
-      textDark: "#C17B9E",
-    },
+    style: { logo: "/cognito.svg", bg: "#fff", text: "#C17B9E" },
     options,
   }
 }

packages/next-auth/src/providers/discord.ts

@@ -44,14 +44,7 @@ export default function Discord<P extends DiscordProfile>(
         image: profile.image_url,
       }
     },
-    style: {
-      logo: "/discord.svg",
-      logoDark: "/discord-dark.svg",
-      bg: "#fff",
-      text: "#7289DA",
-      bgDark: "#7289DA",
-      textDark: "#fff",
-    },
+    style: { logo: "/discord.svg", bg: "#5865F2", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/facebook.ts

@@ -41,14 +41,7 @@ export default function Facebook<P extends FacebookProfile>(
         image: profile.picture.data.url,
       }
     },
-    style: {
-      logo: "/facebook.svg",
-      logoDark: "/facebook-dark.svg",
-      bg: "#fff",
-      text: "#006aff",
-      bgDark: "#006aff",
-      textDark: "#fff",
-    },
+    style: { logo: "/facebook.svg", bg: "#006aff", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/foursquare.js

@@ -52,11 +52,8 @@ export default function Foursquare(options) {
     },
     style: {
       logo: "/foursquare.svg",
-      logoDark: "/foursquare-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
+      text: "#fff",
+      bg: "#000",
     },
     options,
   }

packages/next-auth/src/providers/freshbooks.js

@@ -19,11 +19,8 @@ export default function Freshbooks(options) {
     },
     style: {
       logo: "/freshbooks.svg",
-      logoDark: "/freshbooks-dark.svg",
-      bg: "#fff",
-      text: "#0075dd",
-      bgDark: "#0075dd",
-      textDark: "#fff",
+      text: "#fff",
+      bg: "#0075dd",
     },
     ...options,
   }

packages/next-auth/src/providers/github.ts

@@ -98,14 +98,7 @@ export default function Github<P extends GithubProfile>(
         image: profile.avatar_url,
       }
     },
-    style: {
-      logo: "/github.svg",
-      logoDark: "/github-dark.svg",
-      bg: "#fff",
-      bgDark: "#000",
-      text: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/github.svg", bg: "#24292f", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/gitlab.ts

@@ -67,14 +67,7 @@ export default function GitLab<P extends GitLabProfile>(
         image: profile.avatar_url,
       }
     },
-    style: {
-      logo: "/gitlab.svg",
-      logoDark: "/gitlab-dark.svg",
-      bg: "#fff",
-      text: "#FC6D26",
-      bgDark: "#FC6D26",
-      textDark: "#fff",
-    },
+    style: { logo: "/gitlab.svg", bg: "#FC6D26", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/google.ts

@@ -37,14 +37,7 @@ export default function Google<P extends GoogleProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/google.svg",
-      logoDark: "/google.svg",
-      bgDark: "#fff",
-      bg: "#fff",
-      text: "#000",
-      textDark: "#000",
-    },
+    style: { logo: "/google.svg", bg: "#fff", text: "#000" },
     options,
   }
 }

packages/next-auth/src/providers/hubspot.ts

@@ -64,14 +64,7 @@ export default function HubSpot<P extends HubSpotProfile>(
         image: null,
       }
     },
-    style: {
-      logo: "/hubspot.svg",
-      logoDark: "/hubspot-dark.svg",
-      bg: "#fff",
-      text: "#ff7a59",
-      bgDark: "#ff7a59",
-      textDark: "#fff",
-    },
+    style: { logo: "/hubspot.svg", bg: "#ff7a59", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/instagram.js

@@ -48,11 +48,8 @@ export default function Instagram(options) {
     },
     style: {
       logo: "/instagram.svg",
-      logoDark: "/instagram.svg",
       bg: "#fff",
       text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
     },
     options,
   }

packages/next-auth/src/providers/keycloak.ts

@@ -43,14 +43,7 @@ export default function Keycloak<P extends KeycloakProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/keycloak.svg",
-      logoDark: "/keycloak.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
-    },
+    style: { logo: "/keycloak.svg", bg: "#fff", text: "#000" },
     options,
   }
 }

packages/next-auth/src/providers/line.ts

@@ -33,14 +33,7 @@ export default function LINE<P extends LineProfile>(
     client: {
       id_token_signed_response_alg: "HS256",
     },
-    style: {
-      logo: "/line.svg",
-      logoDark: "/line.svg",
-      bg: "#fff",
-      text: "#00C300",
-      bgDark: "#00C300",
-      textDark: "#fff",
-    },
+    style: { logo: "/line.svg", bg: "#00C300", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/linkedin.ts

@@ -55,14 +55,7 @@ export default function LinkedIn<P extends LinkedInProfile>(
             ?.identifiers?.[0]?.identifier,
       }
     },
-    style: {
-      logo: "/linkedin.svg",
-      logoDark: "/linkedin-dark.svg",
-      bg: "#fff",
-      text: "#069",
-      bgDark: "#069",
-      textDark: "#fff",
-    },
+    style: { logo: "/linkedin.svg", bg: "#069", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/mailchimp.js

@@ -15,14 +15,7 @@ export default function Mailchimp(options) {
         image: null,
       }
     },
-    style: {
-      logo: "/mailchimp.svg",
-      logoDark: "/mailchimp-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/mailchimp.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/oauth.ts

@@ -91,11 +91,11 @@ export type UserinfoEndpointHandler = EndpointHandler<
 
 export interface OAuthProviderButtonStyles {
   logo: string
-  logoDark: string
+  logoDark?: string
   bg: string
-  bgDark: string
+  bgDark?: string
   text: string
-  textDark: string
+  textDark?: string
 }
 
 export interface OAuthConfig<P> extends CommonProviderOptions, PartialIssuer {

packages/next-auth/src/providers/okta.ts

@@ -52,14 +52,7 @@ export default function Okta<P extends OktaProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/okta.svg",
-      logoDark: "/okta-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/okta.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/passage.ts

@@ -0,0 +1,56 @@
+import type { OAuthConfig, OAuthUserConfig } from "."
+
+/** @see [Supported Scopes](https://docs.passage.id/hosted-login/oidc-client-configuration#supported-scopes) */
+export interface PassageProfile {
+  iss: string
+  /** Unique identifer in Passage for the user */
+  sub: string
+  aud: string[]
+  exp: number
+  iat: number
+  auth_time: number
+  azp: string
+  client_id: string
+  at_hash: string
+  c_hash: string
+  /** The user's email address */
+  email: string
+  /** Whether the user has verified their email address */
+  email_verified: boolean
+  /** The user's phone number */
+  phone: string
+  /** Whether the user has verified their phone number */
+  phone_number_verified: boolean
+}
+
+export default function Passage(
+  config: OAuthUserConfig<PassageProfile>
+): OAuthConfig<PassageProfile> {
+  config.issuer = config.issuer?.replace(/\/$/, "")
+  return {
+    id: "passage",
+    name: "Passage",
+    type: "oauth",
+    wellKnown: `${config.issuer}/.well-known/openid-configuration`,
+    authorization: { params: { scope: "openid email" } },
+    client: { token_endpoint_auth_method: "client_secret_basic" },
+    checks: ["pkce", "state"],
+    profile(profile) {
+      return {
+        id: profile.sub,
+        name: null,
+        email: profile.email,
+        image: null,
+      }
+    },
+    style: {
+      logo: "/passage.svg",
+      logoDark: "/passage.svg",
+      bg: "#fff",
+      bgDark: "#fff",
+      text: "#000",
+      textDark: "#000",
+    },
+    options: config,
+  }
+}

packages/next-auth/src/providers/patreon.ts

@@ -29,14 +29,7 @@ export default function Patreon<P extends PatreonProfile>(
         image: profile.data.attributes.image_url,
       }
     },
-    style: {
-      logo: "/patreon.svg",
-      logoDark: "/patreon.svg",
-      bg: "#fff",
-      text: "#e85b46",
-      bgDark: "#000",
-      textDark: "#e85b46",
-    },
+    style: { logo: "/patreon.svg", bg: "#e85b46", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/slack.ts

@@ -49,14 +49,7 @@ export default function Slack<P extends SlackProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/slack.svg",
-      logoDark: "/slack.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/slack.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/spotify.ts

@@ -29,14 +29,7 @@ export default function Spotify<P extends SpotifyProfile>(
         image: profile.images?.[0]?.url,
       }
     },
-    style: {
-      logo: "/spotify.svg",
-      logoDark: "/spotify.svg",
-      bg: "#fff",
-      text: "#2ebd59",
-      bgDark: "#fff",
-      textDark: "#2ebd59",
-    },
+    style: { logo: "/spotify.svg", text: "#fff", bg: "#000" },
     options,
   }
 }

packages/next-auth/src/providers/todoist.ts

@@ -53,14 +53,7 @@ export default function TodoistProvider<P extends TodoistProfile>(
         image: profile.avatar_big,
       }
     },
-    style: {
-      logo: "/todoist.svg",
-      logoDark: "/todoist.svg",
-      bg: "#fff",
-      text: "#E44332",
-      bgDark: "#000",
-      textDark: "#E44332",
-    },
+    style: { logo: "/todoist.svg", text: "#000", bg: "#E44332" },
     ...options,
   }
 }

packages/next-auth/src/providers/trakt.ts

@@ -51,14 +51,7 @@ export default function Trakt<P extends TraktUser>(
         image: profile.images.avatar.full, // trakt does not allow hotlinking
       }
     },
-    style: {
-      logo: "/trakt.svg",
-      logoDark: "/trakt-dark.svg",
-      bg: "#fff",
-      text: "#ED2224",
-      bgDark: "#ED2224",
-      textDark: "#fff",
-    },
+    style: { logo: "/trakt.svg", bg: "#ED2224", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/twitch.ts

@@ -36,14 +36,7 @@ export default function Twitch<P extends TwitchProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/twitch.svg",
-      logoDark: "/twitch-dark.svg",
-      bg: "#fff",
-      text: "#65459B",
-      bgDark: "#65459B",
-      textDark: "#fff",
-    },
+    style: { logo: "/twitch.svg", bg: "#65459B", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/twitter.ts

@@ -119,14 +119,7 @@ export function TwitterLegacy<
         ),
       }
     },
-    style: {
-      logo: "/twitter.svg",
-      logoDark: "/twitter-dark.svg",
-      bg: "#fff",
-      text: "#1da1f2",
-      bgDark: "#1da1f2",
-      textDark: "#fff",
-    },
+    style: { logo: "/twitter.svg", bg: "#1da1f2", text: "#fff" },
     options,
   }
 }
@@ -214,14 +207,7 @@ export default function Twitter<
         }
       },
       checks: ["pkce", "state"],
-      style: {
-        logo: "/twitter.svg",
-        logoDark: "/twitter-dark.svg",
-        bg: "#fff",
-        text: "#1da1f2",
-        bgDark: "#1da1f2",
-        textDark: "#fff",
-      },
+      style: { logo: "/twitter.svg", bg: "#1da1f2", text: "#fff" },
       options,
     }
   }

packages/next-auth/src/providers/vk.ts

@@ -305,14 +305,7 @@ export default function VK<P extends Record<string, any> = VkProfile>(
         image: profile.photo_100,
       }
     },
-    style: {
-      logo: "/vk.svg",
-      logoDark: "/vk-dark.svg",
-      bg: "#fff",
-      text: "#07F",
-      bgDark: "#07F",
-      textDark: "#fff",
-    },
+    style: { logo: "/vk.svg", bg: "#07F", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/wikimedia.ts

@@ -180,14 +180,7 @@ export default function Wikimedia<P extends WikimediaProfile>(
         email: profile.email,
       }
     },
-    style: {
-      logo: "/wikimedia.svg",
-      logoDark: "/wikimedia-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/wikimedia.svg", bg: "#000", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/workos.ts

@@ -44,14 +44,7 @@ export default function WorkOS<P extends WorkOSProfile>(
         image: profile.raw_attributes.picture ?? null,
       }
     },
-    style: {
-      logo: "/workos.svg",
-      logoDark: "/workos-dark.svg",
-      bg: "#fff",
-      text: "#6363f1",
-      bgDark: "#6363f1",
-      textDark: "#fff",
-    },
+    style: { logo: "/workos.svg", bg: "#6363f1", text: "#fff" },
     options,
   }
 }

packages/next-auth/src/providers/yandex.ts

@@ -144,11 +144,8 @@ export default function Yandex(
     },
     style: {
       logo: "/yandex.svg",
-      logoDark: "/yandex.svg",
       bg: "#ffcc00",
       text: "#000",
-      bgDark: "#ffcc00",
-      textDark: "#000",
     },
     options,
   }

packages/next-auth/src/react/index.tsx

@@ -247,7 +247,7 @@ export async function signIn<
     isCredentials ? "callback" : "signin"
   }/${provider}`
 
-  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
+  const _signInUrl = `${signInUrl}${authorizationParams ? `?${new URLSearchParams(authorizationParams)}` : ""}`
 
   const res = await fetch(_signInUrl, {
     method: "post",