@better-auth-ui/heroui 1.6.3 → 1.6.5

package/src/components/auth/{magic-link.tsx → magic-link/magic-link.tsx}

@@ -1,4 +1,10 @@
-import { useAuth, useSignInMagicLink } from "@better-auth-ui/react"
+import { authMutationKeys } from "@better-auth-ui/core"
+import {
+  type MagicLinkAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useSignInMagicLink
+} from "@better-auth-ui/react"
 import {
   Button,
   Card,
@@ -14,12 +20,12 @@ import {
   TextField,
   toast
 } from "@heroui/react"
+import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
 
-import { FieldSeparator } from "./field-separator"
-import { MagicLinkButton } from "./magic-link-button"
-import { PasskeyButton } from "./passkey-button"
-import { ProviderButtons, type SocialLayout } from "./provider-buttons"
+import { magicLinkPlugin } from "../../../lib/auth/magic-link-plugin"
+import { FieldSeparator } from "../field-separator"
+import { ProviderButtons, type SocialLayout } from "../provider-buttons"
 
 export type MagicLinkProps = {
   className?: string
@@ -29,12 +35,11 @@ export type MagicLinkProps = {
 }
 
 /**
- * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
+ * Magic-link sign-in form.
  *
- * @param className - Additional CSS class names applied to the card container
- * @param socialLayout - Layout style for social provider buttons
- * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
- * @returns The magic-link sign-in UI as a JSX element
+ * @param socialLayout - Provider button layout.
+ * @param socialPosition - `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @param variant - Card variant.
  */
 export function MagicLink({
   className,
@@ -44,26 +49,35 @@ export function MagicLink({
   ...props
 }: MagicLinkProps & Omit<CardProps, "children">) {
   const {
+    authClient,
     basePaths,
     baseURL,
+    emailAndPassword,
     localization,
-    passkey,
+    plugins,
     redirectTo,
     socialProviders,
     viewPaths
   } = useAuth()
+  const { localization: magicLinkLocalization } = useAuthPlugin(magicLinkPlugin)
 
   const [email, setEmail] = useState("")
 
-  const { mutate: signInMagicLink, isPending: magicLinkPending } =
-    useSignInMagicLink({
+  const { mutate: signInMagicLink, isPending: signInMagicLinkPending } =
+    useSignInMagicLink(authClient as MagicLinkAuthClient, {
       onSuccess: () => {
         setEmail("")
-        toast.success(localization.auth.magicLinkSent)
+        toast.success(magicLinkLocalization.magicLinkSent)
       }
     })
 
-  const isPending = magicLinkPending
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -74,7 +88,7 @@ export function MagicLink({
 
   return (
     <Card
-      className={cn("w-full max-w-sm p-4 md:p-6", className)}
+      className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
       {...props}
     >
@@ -88,10 +102,7 @@ export function MagicLink({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons
-                socialLayout={socialLayout}
-                isPending={isPending}
-              />
+              <ProviderButtons socialLayout={socialLayout} />
             )}
 
             {showSeparator && (
@@ -122,14 +133,19 @@ export function MagicLink({
 
           <div className="flex flex-col gap-3">
             <Button type="submit" className="w-full" isPending={isPending}>
-              {isPending && <Spinner color="current" size="sm" />}
+              {signInMagicLinkPending && <Spinner color="current" size="sm" />}
 
-              {localization.auth.sendMagicLink}
+              {magicLinkLocalization.sendMagicLink}
             </Button>
 
-            <MagicLinkButton view="magicLink" isPending={isPending} />
-
-            {passkey && <PasskeyButton isPending={isPending} />}
+            {plugins.flatMap((plugin) =>
+              (plugin.authButtons ?? []).map((AuthButton, index) => (
+                <AuthButton
+                  key={`${plugin.id}-${index.toString()}`}
+                  view="magicLink"
+                />
+              ))
+            )}
           </div>
         </Form>
 
@@ -140,26 +156,25 @@ export function MagicLink({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons
-                socialLayout={socialLayout}
-                isPending={isPending}
-              />
+              <ProviderButtons socialLayout={socialLayout} />
             )}
           </>
         )}
       </Card.Content>
 
-      <Card.Footer className="flex-col">
-        <Description className="text-sm">
-          {localization.auth.needToCreateAnAccount}{" "}
-          <Link
-            href={`${basePaths.auth}/${viewPaths.auth.signUp}`}
-            className="text-accent decoration-accent no-underline hover:underline"
-          >
-            {localization.auth.signUp}
-          </Link>
-        </Description>
-      </Card.Footer>
+      {emailAndPassword?.enabled && (
+        <Card.Footer className="flex-col gap-3">
+          <Description className="text-sm">
+            {localization.auth.needToCreateAnAccount}{" "}
+            <Link
+              href={`${basePaths.auth}/${viewPaths.auth.signUp}`}
+              className="text-accent no-underline hover:underline decoration-accent-hover"
+            >
+              {localization.auth.signUp}
+            </Link>
+          </Description>
+        </Card.Footer>
+      )}
     </Card>
   )
 }

package/src/components/{settings/account → auth/multi-session}/manage-account.tsx

@@ -1,5 +1,8 @@
 import {
+  type ListDeviceSession,
+  type MultiSessionAuthClient,
   useAuth,
+  useAuthPlugin,
   useRevokeMultiSession,
   useSetActiveSession,
   useUser
@@ -10,17 +13,13 @@ import {
   Ellipsis
 } from "@gravity-ui/icons"
 import { Button, Dropdown, Spinner, toast } from "@heroui/react"
-import type { Session, User } from "better-auth"
 
-import { UserView } from "../../user/user-view"
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
 
-export type DeviceSession = {
-  session: Session
-  user: User
-}
+import { UserView } from "../user/user-view"
 
 export type ManageAccountProps = {
-  deviceSession?: DeviceSession | null
+  deviceSession?: ListDeviceSession | null
   isPending?: boolean
 }
 
@@ -37,14 +36,18 @@ export function ManageAccount({
   deviceSession,
   isPending
 }: ManageAccountProps) {
-  const { localization } = useAuth()
-  const { data: user } = useUser()
+  const { authClient, localization } = useAuth()
+  const { localization: multiSessionLocalization } =
+    useAuthPlugin(multiSessionPlugin)
+  const { data: user } = useUser(authClient)
 
   const { mutate: setActiveSession, isPending: isSwitching } =
-    useSetActiveSession()
+    useSetActiveSession(authClient as MultiSessionAuthClient, {
+      onSuccess: () => window.scrollTo({ top: 0 })
+    })
 
   const { mutate: revokeSession, isPending: isRevoking } =
-    useRevokeMultiSession({
+    useRevokeMultiSession(authClient as MultiSessionAuthClient, {
       onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
     })
 
@@ -89,7 +92,7 @@ export function ManageAccount({
           <Dropdown.Popover>
             <Dropdown.Menu>
               <Dropdown.Item
-                textValue={localization.auth.switchAccount}
+                textValue={multiSessionLocalization.switchAccount}
                 onAction={() =>
                   setActiveSession({
                     sessionToken: deviceSession.session.token
@@ -97,7 +100,7 @@ export function ManageAccount({
                 }
               >
                 <ArrowRightArrowLeft className="text-muted" />
-                {localization.auth.switchAccount}
+                {multiSessionLocalization.switchAccount}
               </Dropdown.Item>
 
               <Dropdown.Item

package/src/components/{settings/account → auth/multi-session}/manage-accounts.tsx

@@ -1,9 +1,14 @@
 import {
+  type MultiSessionAuthClient,
   useAuth,
+  useAuthPlugin,
   useListDeviceSessions,
   useSession
 } from "@better-auth-ui/react"
 import { Card, type CardProps, cn } from "@heroui/react"
+
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
+
 import { ManageAccount } from "./manage-account"
 
 export type ManageAccountsProps = {
@@ -24,10 +29,14 @@ export function ManageAccounts({
   variant,
   ...props
 }: ManageAccountsProps & Omit<CardProps, "children">) {
-  const { localization } = useAuth()
-  const { data: session } = useSession()
+  const { authClient } = useAuth()
+  const { localization: multiSessionLocalization } =
+    useAuthPlugin(multiSessionPlugin)
+  const { data: session } = useSession(authClient)
 
-  const { data: deviceSessions, isPending } = useListDeviceSessions()
+  const { data: deviceSessions, isPending } = useListDeviceSessions(
+    authClient as MultiSessionAuthClient
+  )
 
   const otherSessions = deviceSessions?.filter(
     (deviceSession) => deviceSession.session.id !== session?.session.id
@@ -35,7 +44,7 @@ export function ManageAccounts({
 
   const allRows = [
     {
-      key: "current",
+      key: session?.session.id ?? "current",
       deviceSession: !isPending ? session : null,
       isPending
     },
@@ -49,7 +58,7 @@ export function ManageAccounts({
   return (
     <div>
       <h2 className={cn("text-sm font-semibold mb-3")}>
-        {localization.settings.manageAccounts}
+        {multiSessionLocalization.manageAccounts}
       </h2>
 
       <Card className={cn(className)} variant={variant} {...props}>

package/src/components/{user/switch-account-menu.tsx → auth/multi-session/switch-account-submenu-content.tsx}

@@ -1,27 +1,34 @@
 import {
+  type MultiSessionAuthClient,
   useAuth,
+  useAuthPlugin,
   useListDeviceSessions,
   useSession
 } from "@better-auth-ui/react"
 import { Check, CirclePlus } from "@gravity-ui/icons"
 import { Dropdown, Label, Separator } from "@heroui/react"
 
-import { SwitchAccountItem } from "./switch-account-item"
-import { UserView } from "./user-view"
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
+import { UserView } from "../user/user-view"
+import { SwitchAccountSubmenuItem } from "./switch-account-submenu-item"
 
 /**
- * Render the menu content for switching between multiple authenticated sessions.
+ * Render the submenu content for switching between multiple authenticated sessions.
  *
  * Shows the current session with a checkmark, lists other device sessions that can be activated,
  * and provides an option to add a new account. This component should be rendered inside a
  * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
  *
- * @returns The switch account menu content as a JSX element
+ * @returns The switch account submenu content as a JSX element
  */
-export function SwitchAccountMenu() {
-  const { basePaths, viewPaths, localization } = useAuth()
-  const { data: session } = useSession()
-  const { data: deviceSessions, isPending } = useListDeviceSessions()
+export function SwitchAccountSubmenuContent() {
+  const { authClient, basePaths, viewPaths } = useAuth()
+  const { localization: multiSessionLocalization } =
+    useAuthPlugin(multiSessionPlugin)
+  const { data: session } = useSession(authClient)
+  const { data: deviceSessions, isPending } = useListDeviceSessions(
+    authClient as MultiSessionAuthClient
+  )
 
   return (
     <Dropdown.Popover className="min-w-40 md:min-w-56 max-w-[48svw]">
@@ -37,7 +44,7 @@ export function SwitchAccountMenu() {
             (deviceSession) => deviceSession.session.id !== session?.session?.id
           )
           .map((deviceSession) => (
-            <SwitchAccountItem
+            <SwitchAccountSubmenuItem
               key={deviceSession.session.id}
               deviceSession={deviceSession}
             />
@@ -46,12 +53,12 @@ export function SwitchAccountMenu() {
         <Separator />
 
         <Dropdown.Item
-          textValue={localization.auth.addAccount}
+          textValue={multiSessionLocalization.addAccount}
           href={`${basePaths.auth}/${viewPaths.auth.signIn}`}
         >
           <CirclePlus className="text-muted" />
 
-          <Label>{localization.auth.addAccount}</Label>
+          <Label>{multiSessionLocalization.addAccount}</Label>
         </Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown.Popover>

package/src/components/{user/switch-account-item.tsx → auth/multi-session/switch-account-submenu-item.tsx}

@@ -1,14 +1,18 @@
-import { useSetActiveSession } from "@better-auth-ui/react"
+import {
+  type MultiSessionAuthClient,
+  useAuth,
+  useSetActiveSession
+} from "@better-auth-ui/react"
 import { Dropdown, Spinner } from "@heroui/react"
 import type { Session, User } from "better-auth"
-import { UserView } from "./user-view"
+import { UserView } from "../user/user-view"
 
 type DeviceSession = {
   session: Session
   user: User
 }
 
-export type SwitchAccountItemProps = {
+export type SwitchAccountSubmenuItemProps = {
   deviceSession: DeviceSession
 }
 
@@ -18,8 +22,16 @@ export type SwitchAccountItemProps = {
  * @param deviceSession - The device session to display and switch to when pressed
  * @returns The switch account dropdown item as a JSX element
  */
-export function SwitchAccountItem({ deviceSession }: SwitchAccountItemProps) {
-  const { mutate: setActiveSession, isPending } = useSetActiveSession()
+export function SwitchAccountSubmenuItem({
+  deviceSession
+}: SwitchAccountSubmenuItemProps) {
+  const { authClient } = useAuth()
+  const { mutate: setActiveSession, isPending } = useSetActiveSession(
+    authClient as MultiSessionAuthClient,
+    {
+      onSuccess: () => window.scrollTo({ top: 0 })
+    }
+  )
 
   return (
     <Dropdown.Item

package/src/components/auth/multi-session/switch-account-submenu.tsx

@@ -0,0 +1,50 @@
+import { useAuth, useAuthPlugin, useSession } from "@better-auth-ui/react"
+import { Persons } from "@gravity-ui/icons"
+import { Dropdown, Label } from "@heroui/react"
+
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
+
+import { SwitchAccountSubmenuContent } from "./switch-account-submenu-content"
+
+export type SwitchAccountSubmenuProps = {
+  className?: string
+}
+
+/**
+ * Render a dropdown submenu for switching between multiple authenticated sessions.
+ *
+ * This component renders as a submenu trigger that opens the switch account menu.
+ * It should be rendered inside a Dropdown.Menu.
+ *
+ * @param className - Optional additional CSS class names
+ * @returns The switch account submenu as a JSX element
+ */
+export function SwitchAccountSubmenu({ className }: SwitchAccountSubmenuProps) {
+  const { authClient } = useAuth()
+  const { data: session } = useSession(authClient)
+  const { localization: multiSessionLocalization } =
+    useAuthPlugin(multiSessionPlugin)
+
+  if (!session) {
+    return null
+  }
+
+  return (
+    <Dropdown.SubmenuTrigger>
+      <Dropdown.Item
+        className={className}
+        textValue={multiSessionLocalization.switchAccount}
+      >
+        <Persons className="text-muted" />
+
+        <Label>{multiSessionLocalization.switchAccount}</Label>
+
+        <Dropdown.SubmenuIndicator />
+      </Dropdown.Item>
+
+      <Dropdown.Popover className="min-w-40 md:min-w-56 max-w-[48svw]">
+        <SwitchAccountSubmenuContent />
+      </Dropdown.Popover>
+    </Dropdown.SubmenuTrigger>
+  )
+}

package/src/components/auth/passkey/passkey-button.tsx

@@ -0,0 +1,56 @@
+import { type AuthView, authMutationKeys } from "@better-auth-ui/core"
+import {
+  type PasskeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useSignInPasskey
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import { Button, Spinner } from "@heroui/react"
+import { useIsMutating } from "@tanstack/react-query"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type PasskeyButtonProps = {
+  /** @remarks `AuthView` */
+  view?: AuthView
+}
+
+export function PasskeyButton({ view }: PasskeyButtonProps) {
+  const { authClient, localization, redirectTo, navigate } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey(
+    authClient as PasskeyAuthClient,
+    {
+      onSuccess: () => navigate({ to: redirectTo })
+    }
+  )
+
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
+
+  // Passkey sign-in isn't relevant on the sign-up flow.
+  if (view === "signUp") return null
+
+  return (
+    <Button
+      className="w-full"
+      variant="tertiary"
+      isDisabled={isPending}
+      isPending={passkeyPending}
+      onPress={() => signInPasskey()}
+    >
+      {passkeyPending ? <Spinner color="current" size="sm" /> : <Fingerprint />}
+      {localization.auth.continueWith.replace(
+        "{{provider}}",
+        passkeyLocalization.passkey
+      )}
+    </Button>
+  )
+}

package/src/components/{settings/security → auth/passkey}/passkey.tsx

@@ -1,7 +1,14 @@
-import { useAuth, useDeletePasskey } from "@better-auth-ui/react"
+import {
+  type PasskeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useDeletePasskey
+} from "@better-auth-ui/react"
 import { Fingerprint, Xmark } from "@gravity-ui/icons"
 import { Button, Spinner } from "@heroui/react"
 
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
 export type PasskeyProps = {
   passkey: {
     id: string
@@ -11,9 +18,14 @@ export type PasskeyProps = {
 }
 
 export function Passkey({ passkey }: PasskeyProps) {
-  const { localization } = useAuth()
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const { mutate: deletePasskey, isPending } = useDeletePasskey(
+    authClient as PasskeyAuthClient
+  )
 
-  const { mutate: deletePasskey, isPending } = useDeletePasskey()
+  const passkeyName = passkey.name || passkeyLocalization.passkey
 
   return (
     <div className="flex items-center gap-3">
@@ -22,9 +34,7 @@ export function Passkey({ passkey }: PasskeyProps) {
       </div>
 
       <div className="flex flex-col min-w-0">
-        <span className="text-sm font-medium leading-tight">
-          {passkey.name || localization.auth.passkey}
-        </span>
+        <span className="text-sm font-medium leading-tight">{passkeyName}</span>
 
         <span className="text-xs text-muted">
           {new Date(passkey.createdAt).toLocaleString(undefined, {
@@ -40,6 +50,10 @@ export function Passkey({ passkey }: PasskeyProps) {
         size="sm"
         isPending={isPending}
         onPress={() => deletePasskey({ id: passkey.id })}
+        aria-label={passkeyLocalization.deletePasskey.replace(
+          "{{name}}",
+          passkeyName
+        )}
       >
         {isPending ? <Spinner color="current" size="sm" /> : <Xmark />}
         {localization.settings.delete}