Merge branch 'main' into feat/add-slugify-in-tabs

nextauthjs · Oct 2, 2024 · 0137eba · 0137eba
2 parents ce3e58d + 8c00815
commit 0137eba
Show file tree

Hide file tree

Showing 16 changed files with 253 additions and 223 deletions.
diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { useEffect, useRef, useState } from "react"
 import algoliasearch from "algoliasearch/lite"
 import { InstantSearch, Hits, useInstantSearch } from "react-instantsearch"
 //import { InstantSearchNext } from "react-instantsearch-nextjs"
@@ -32,35 +32,58 @@ const searchClient = {
   },
 }
 
-export default function () {
-  const ctrlKHandler = (e: KeyboardEvent) => {
-    if (e.repeat || e.target instanceof HTMLInputElement) return
-    if (e.ctrlKey && e.key === "k") {
-      e.preventDefault()
-      document.querySelector<HTMLInputElement>('input[type="search"]')?.focus()
-    }
-  }
+export default function Wrapper() {
+  const docSearchRef = useRef<HTMLDivElement>(null)
+  const [isSearchHitsVisible, setIsSearchHitsVisible] = useState(false)
 
   useEffect(() => {
+    function ctrlKHandler(e: KeyboardEvent) {
+      if (e.repeat || e.target instanceof HTMLInputElement) return
+      if (e.ctrlKey && e.key === "k") {
+        e.preventDefault()
+        document
+          .querySelector<HTMLInputElement>('input[type="search"]')
+          ?.focus()
+      }
+    }
+
+    function clickSearchBoxOutsideHandler(event: MouseEvent) {
+      setIsSearchHitsVisible(
+        Boolean(
+          event.target instanceof Node &&
+            docSearchRef.current?.contains(event.target)
+        )
+      )
+    }
+
     window.addEventListener("keydown", ctrlKHandler)
+    window.addEventListener("mousedown", clickSearchBoxOutsideHandler)
 
-    return window.addEventListener("keydown", ctrlKHandler)
+    return () => {
+      window.removeEventListener("keydown", ctrlKHandler)
+      window.removeEventListener("mousedown", clickSearchBoxOutsideHandler)
+    }
   }, [])
 
   return (
-    <div className="relative [aside_&]:w-full max-md:[nav_&]:hidden">
+    <div
+      ref={docSearchRef}
+      className="relative [aside_&]:w-full max-md:[nav_&]:hidden"
+    >
       <InstantSearch
         indexName="next-auth"
         // @ts-expect-error
         searchClient={searchClient}
       >
         <CustomSearchBox />
-        <NoResultsBoundary>
-          <Hits
-            hitComponent={Hit}
-            className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
-          />
-        </NoResultsBoundary>
+        {isSearchHitsVisible && (
+          <NoResultsBoundary>
+            <Hits
+              hitComponent={Hit}
+              className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
+            />
+          </NoResultsBoundary>
+        )}
       </InstantSearch>
     </div>
   )

diff --git a/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx b/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx
@@ -56,20 +56,20 @@ export function OAuthProviderSelect() {
             <p className="mt-8 rounded-md">
               Or jump directly to one of the popular ones below.
             </p>
-            <div className="mt-8 flex flex-row gap-6 pb-8">
+            <div className="mt-8 flex flex-row gap-6 overflow-x-scroll pb-8">
               <div
                 role="button"
                 onClick={() =>
                   handleSelectOption({ id: "google", name: "Google" })
                 }
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img src={`/img/providers/google.svg`} className="mt-2 w-11" />
                 <div className="text-center text-sm">Google</div>
               </div>
               <div
                 role="button"
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
                 onClick={() =>
                   handleSelectOption({ id: "github", name: "GitHub" })
                 }
@@ -82,7 +82,7 @@ export function OAuthProviderSelect() {
                 onClick={() =>
                   handleSelectOption({ id: "twitter", name: "Twitter" })
                 }
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img src={`/img/providers/twitter.svg`} className="mt-2 w-11" />
                 <div className="text-center text-sm">Twitter</div>
@@ -92,7 +92,7 @@ export function OAuthProviderSelect() {
                 onClick={() =>
                   handleSelectOption({ id: "keycloak", name: "keycloak" })
                 }
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img
                   src={`/img/providers/keycloak.svg`}
@@ -103,7 +103,7 @@ export function OAuthProviderSelect() {
               <div
                 role="button"
                 onClick={() => handleSelectOption({ id: "okta", name: "okta" })}
-                className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
+                className="flex h-32 w-32 min-w-24 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
               >
                 <img src={`/img/providers/okta.svg`} className="mt-2 w-11" />
                 <div className="text-center text-sm">Okta</div>

diff --git a/docs/components/Tooltip/index.tsx b/docs/components/Tooltip/index.tsx
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/docs/pages/getting-started/authentication/email.mdx b/docs/pages/getting-started/authentication/email.mdx
@@ -32,14 +32,14 @@ This login mechanism starts by the user providing their email address at the log
     defaultValue="resend"
     className="w-full flex flex-col"
   >
-    <RichTabs.List className="flex gap-4 flex-wrap">
+    <RichTabs.List className="grid grid-cols-[repeat(auto-fit,140px)] justify-center gap-4">
       <RichTabs.Trigger
         value="forwardemail"
         orientation="vertical"
         className="!border border-neutral-200 dark:border-neutral-700 aria-selected:!bg-neutral-100 aria-selected:dark:!bg-neutral-950 dark:!bg-neutral-900 !bg-white !h-auto !w-auto !gap-2 !justify-start p-6 px-8 rounded-md outline-none transition-all duration-300 hover:bg-neutral-200 !font-normal"
       >
         <img className="size-16 dark:bg-[currentColor]" src={`/img/providers/forwardemail.svg`} />
-        <div className="text-sm text-center">Forward Email</div>
+        <div className="text-sm text-center line-clamp-1">Forward Email</div>
       </RichTabs.Trigger>
       <RichTabs.Trigger
         value="resend"

diff --git a/docs/pages/getting-started/installation.mdx b/docs/pages/getting-started/installation.mdx
@@ -15,8 +15,6 @@ Start by installing the appropriate package for your framework.
 
   </Code.Next>
   <Code.Qwik>
-
-    You can use the Qwik starter script:
 
     ```bash npm2yarn
     npm run qwik add auth

diff --git a/packages/adapter-firebase/src/index.ts b/packages/adapter-firebase/src/index.ts
@@ -44,29 +44,53 @@ export interface FirebaseAdapterConfig extends AppOptions {
    *
    *
    * @example
-   * ```ts title="pages/api/auth/[...nextauth].ts"
-   * import NextAuth from "next-auth"
-   * import { FirestoreAdapter } from "@auth/firebase-adapter"
-   *
-   * export default NextAuth({
+   * ```ts
+   *  // This will convert all field and collection names to snake_case
    *  adapter: FirestoreAdapter({ namingStrategy: "snake_case" })
    *  // ...
    * })
    * ```
    */
   namingStrategy?: "snake_case" | "default"
+  /**
+   * Use this option if you already have one of the default collections in your Firestore database.
+   *
+   * @example
+   * ```ts
+   *  // This will use the collection name "authjs_users" instead of the default "users"
+   *  adapter: FirestoreAdapter({ collections: { users: "authjs_users" } })
+   *  // ...
+   * ```
+   */
+  collections?: {
+    users?: string
+    sessions?: string
+    accounts?: string
+    verificationTokens?: string
+  }
 }
 
 export function FirestoreAdapter(
   config?: FirebaseAdapterConfig | Firestore
 ): Adapter {
-  const { db, namingStrategy = "default" } =
-    config instanceof Firestore
-      ? { db: config }
-      : { ...config, db: config?.firestore ?? initFirestore(config) }
+  const {
+    db,
+    namingStrategy = "default",
+    collections = {},
+  } = config instanceof Firestore
+    ? { db: config }
+    : { ...config, db: config?.firestore ?? initFirestore(config) }
 
   const preferSnakeCase = namingStrategy === "snake_case"
-  const C = collectionsFactory(db, preferSnakeCase)
+  const C = collectionsFactory(db, preferSnakeCase, {
+    users: "users",
+    sessions: "sessions",
+    accounts: "accounts",
+    verificationTokens: preferSnakeCase
+      ? "verification_tokens"
+      : "verificationTokens",
+    ...collections,
+  })
   const mapper = mapFieldsFactory(preferSnakeCase)
 
   return {
@@ -247,12 +271,11 @@ export function mapFieldsFactory(preferSnakeCase?: boolean) {
   return { toDb: identity, fromDb: identity }
 }
 
-/** @internal */
 function getConverter<Document extends Record<string, any>>(options: {
   excludeId?: boolean
   preferSnakeCase?: boolean
 }): FirebaseFirestore.FirestoreDataConverter<Document> {
-  const mapper = mapFieldsFactory(options?.preferSnakeCase ?? false)
+  const mapper = mapFieldsFactory(options?.preferSnakeCase)
 
   return {
     toFirestore(object) {
@@ -302,7 +325,6 @@ export async function getOneDoc<T>(
   return querySnap.docs[0]?.data() ?? null
 }
 
-/** @internal */
 async function deleteDocs<T>(
   querySnapshot: FirebaseFirestore.Query<T>
 ): Promise<void> {
@@ -323,22 +345,21 @@ export async function getDoc<T>(
 /** @internal */
 export function collectionsFactory(
   db: FirebaseFirestore.Firestore,
-  preferSnakeCase = false
+  preferSnakeCase = false,
+  collections: Required<NonNullable<FirebaseAdapterConfig["collections"]>>
 ) {
   return {
     users: db
-      .collection("users")
+      .collection(collections.users)
       .withConverter(getConverter<AdapterUser>({ preferSnakeCase })),
     sessions: db
-      .collection("sessions")
+      .collection(collections.sessions)
       .withConverter(getConverter<AdapterSession>({ preferSnakeCase })),
     accounts: db
-      .collection("accounts")
+      .collection(collections.accounts)
       .withConverter(getConverter<AdapterAccount>({ preferSnakeCase })),
     verification_tokens: db
-      .collection(
-        preferSnakeCase ? "verification_tokens" : "verificationTokens"
-      )
+      .collection(collections.verificationTokens)
       .withConverter(
         getConverter<VerificationToken>({ preferSnakeCase, excludeId: true })
       ),

diff --git a/packages/adapter-firebase/test/index.test.ts b/packages/adapter-firebase/test/index.test.ts
@@ -21,10 +21,24 @@ describe.each([
     config.projectId = "authjs-test"
     config.databaseURL = "http://localhost:8080"
 
-    const db = initFirestore(config)
     const preferSnakeCase = config.namingStrategy === "snake_case"
+
+    config.collections = {
+      accounts: preferSnakeCase ? "authjs_accounts" : "authjsAccounts",
+      verificationTokens: preferSnakeCase
+        ? "verification_tokens"
+        : "verificationTokens",
+    }
+    const db = initFirestore(config)
     const mapper = mapFieldsFactory(preferSnakeCase)
-    const C = collectionsFactory(db, preferSnakeCase)
+    const C = collectionsFactory(db, preferSnakeCase, {
+      users: "users",
+      accounts: preferSnakeCase ? "authjs_accounts" : "authjsAccounts",
+      sessions: "sessions",
+      verificationTokens: preferSnakeCase
+        ? "verification_tokens"
+        : "verificationTokens",
+    })
 
     for (const [name, collection] of Object.entries(C)) {
       test(`collection "${name}" should be empty`, async () => {

diff --git a/packages/adapter-prisma/package.json b/packages/adapter-prisma/package.json
@@ -56,9 +56,9 @@
     "@prisma/client": ">=2.26.0 || >=3 || >=4 || >=5"
   },
   "devDependencies": {
-    "@prisma/client": "^5.9.1",
-    "@prisma/extension-accelerate": "^0.6.3",
-    "mongodb": "^4.17.0",
-    "prisma": "^5.9.1"
+    "@prisma/client": "^5.20.0",
+    "@prisma/extension-accelerate": "1.1.0",
+    "mongodb": "^6.9.0",
+    "prisma": "^5.20.0"
   }
 }
diff --git a/packages/adapter-prisma/prisma/custom.prisma b/packages/adapter-prisma/prisma/custom.prisma
@@ -5,6 +5,7 @@ datasource db {
 
 generator client {
   provider = "prisma-client-js"
+  previewFeatures = ["strictUndefinedChecks"]
 }
 
 model User {

diff --git a/packages/adapter-prisma/prisma/mongodb.prisma b/packages/adapter-prisma/prisma/mongodb.prisma
@@ -5,6 +5,7 @@ datasource db {
 
 generator client {
   provider = "prisma-client-js"
+  previewFeatures = ["strictUndefinedChecks"]
 }
 
 model Account {

diff --git a/packages/adapter-prisma/prisma/schema.prisma b/packages/adapter-prisma/prisma/schema.prisma
@@ -5,6 +5,7 @@ datasource db {
 
 generator client {
   provider = "prisma-client-js"
+  previewFeatures = ["strictUndefinedChecks"]
 }
 
 model User {