@better-auth-ui/heroui 1.6.3 → 1.6.5

package/src/components/auth/auth.tsx

@@ -1,8 +1,8 @@
 import type { AuthView } from "@better-auth-ui/core"
 import { useAuth } from "@better-auth-ui/react"
 import type { CardProps } from "@heroui/react"
+import { type ComponentType, useEffect } from "react"
 import { ForgotPassword } from "./forgot-password"
-import { MagicLink } from "./magic-link"
 import type { SocialLayout } from "./provider-buttons"
 import { ResetPassword } from "./reset-password"
 import { SignIn } from "./sign-in"
@@ -19,6 +19,21 @@ export type AuthProps = {
   view?: AuthView
 }
 
+/**
+ * Built-in views that only make sense when email + password auth is enabled.
+ * When it's disabled, the `<Auth>` router redirects these to `signIn` so a
+ * plugin's `fallbackViews.auth.signIn` (e.g. magic link) takes over.
+ */
+const PASSWORD_ONLY_VIEWS = ["signUp", "forgotPassword", "resetPassword"]
+
+const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
+  signIn: SignIn,
+  signOut: SignOut,
+  signUp: SignUp,
+  forgotPassword: ForgotPassword,
+  resetPassword: ResetPassword
+}
+
 /**
  * Render the appropriate authentication view based on the provided `view` or `path`.
  *
@@ -36,52 +51,101 @@ export function Auth({
   view,
   ...props
 }: AuthProps & Omit<CardProps, "children">) {
-  const { viewPaths } = useAuth()
+  const { basePaths, emailAndPassword, plugins, viewPaths, navigate } =
+    useAuth()
 
   if (!view && !path) {
     throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
   }
 
-  const authPathViews = Object.fromEntries(
-    Object.entries(viewPaths.auth).map(([k, v]) => [v, k])
-  ) as Record<string, AuthView>
+  const authView =
+    view ||
+    (Object.keys(viewPaths.auth) as AuthView[]).find(
+      (key) => viewPaths.auth[key] === path
+    )
 
-  const currentView = view || (path ? authPathViews[path] : undefined)
+  // When email + password auth is disabled, password-only views (signUp,
+  // forgotPassword, resetPassword) have no meaning. Redirect them to signIn,
+  // where a plugin's `fallbackViews.auth.signIn` (e.g. magic link) takes
+  // over as the primary entry point.
+  const shouldRedirectToSignIn =
+    !emailAndPassword?.enabled &&
+    authView &&
+    PASSWORD_ONLY_VIEWS.includes(authView)
 
-  switch (currentView) {
-    case "signIn":
-      return (
-        <SignIn
-          socialLayout={socialLayout}
-          socialPosition={socialPosition}
-          {...props}
-        />
-      )
-    case "signUp":
-      return (
-        <SignUp
-          socialLayout={socialLayout}
-          socialPosition={socialPosition}
-          {...props}
-        />
-      )
-    case "magicLink":
+  useEffect(() => {
+    if (shouldRedirectToSignIn) {
+      navigate({
+        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+        replace: true
+      })
+    }
+  }, [shouldRedirectToSignIn, navigate, basePaths.auth, viewPaths.auth.signIn])
+
+  if (shouldRedirectToSignIn) {
+    return null
+  }
+
+  // 1. Plugin overrides (`views.auth[currentView]`) — first plugin wins,
+  //    including over built-in views. Resolves the view key from `view`,
+  //    then `authView` (built-in path match), then plugin-introduced paths
+  //    (e.g. `magicLink` → `/auth/magic-link`).
+  for (const plugin of plugins) {
+    const pluginAuthPaths = plugin.viewPaths?.auth
+
+    const pluginView =
+      view ??
+      authView ??
+      (pluginAuthPaths &&
+        Object.keys(pluginAuthPaths).find(
+          (key) => pluginAuthPaths[key] === path
+        ))
+    if (!pluginView) continue
+
+    const PluginView = plugin.views?.auth?.[pluginView]
+    if (!PluginView) continue
+
+    return (
+      <PluginView
+        socialLayout={socialLayout}
+        socialPosition={socialPosition}
+        {...props}
+      />
+    )
+  }
+
+  // 2. Plugin fallbacks — only when the built-in `signIn` isn't viable
+  //    (password auth is off). Used by `magicLinkPlugin` to render the
+  //    magic-link form as the primary passwordless sign-in surface.
+  if (authView === "signIn" && !emailAndPassword?.enabled) {
+    const Fallback = plugins.find(
+      (plugin) => plugin.fallbackViews?.auth?.signIn
+    )?.fallbackViews?.auth?.signIn
+
+    if (Fallback) {
       return (
-        <MagicLink
+        <Fallback
           socialLayout={socialLayout}
           socialPosition={socialPosition}
           {...props}
         />
       )
-    case "forgotPassword":
-      return <ForgotPassword {...props} />
-    case "resetPassword":
-      return <ResetPassword {...props} />
-    case "signOut":
-      return <SignOut {...props} />
-    default:
-      throw new Error(
-        `[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`
-      )
+    }
   }
+
+  const AuthView = authView ? AUTH_VIEWS[authView] : undefined
+
+  if (!AuthView) {
+    throw new Error(
+      `[Better Auth UI] Unknown view "${authView}". Valid views are: ${Object.keys(AUTH_VIEWS).join(", ")}`
+    )
+  }
+
+  return (
+    <AuthView
+      socialLayout={socialLayout}
+      socialPosition={socialPosition}
+      {...props}
+    />
+  )
 }

package/src/components/{settings/security → auth/delete-user}/danger-zone.tsx

@@ -11,7 +11,7 @@ export type DangerZoneProps = {
 
 /**
  * Renders the danger zone heading and {@link DeleteUser}.
- * Gate with `deleteUser.enabled` at the call site (e.g. {@link SecuritySettings}).
+ * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
  */
 export function DangerZone({
   className,

package/src/components/{settings/security → auth/delete-user}/delete-user.tsx

@@ -1,4 +1,10 @@
-import { useAuth, useDeleteUser, useListAccounts } from "@better-auth-ui/react"
+import { authQueryKeys } from "@better-auth-ui/core"
+import {
+  useAuth,
+  useAuthPlugin,
+  useDeleteUser,
+  useListAccounts
+} from "@better-auth-ui/react"
 import { TriangleExclamation } from "@gravity-ui/icons"
 import {
   AlertDialog,
@@ -14,8 +20,11 @@ import {
   TextField,
   toast
 } from "@heroui/react"
+import { useQueryClient } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
 
+import { deleteUserPlugin } from "../../../lib/auth/delete-user-plugin"
+
 export type DeleteUserProps = {
   className?: string
   variant?: CardProps["variant"]
@@ -29,15 +38,16 @@ export function DeleteUser({
   variant,
   ...props
 }: DeleteUserProps & Omit<CardProps, "children">) {
+  const { authClient, basePaths, localization, navigate, viewPaths } = useAuth()
+
   const {
-    basePaths,
-    deleteUser: deleteUserConfig,
-    localization,
-    navigate,
-    viewPaths
-  } = useAuth()
+    localization: deleteUserLocalization,
+    sendDeleteAccountVerification
+  } = useAuthPlugin(deleteUserPlugin)
+
+  const { data: accounts } = useListAccounts(authClient)
 
-  const { data: accounts } = useListAccounts()
+  const queryClient = useQueryClient()
 
   const [confirmOpen, setConfirmOpen] = useState(false)
   const [password, setPassword] = useState("")
@@ -45,10 +55,9 @@ export function DeleteUser({
   const hasCredentialAccount = accounts?.some(
     (account) => account.providerId === "credential"
   )
-  const needsPassword =
-    !deleteUserConfig?.sendDeleteAccountVerification && hasCredentialAccount
+  const needsPassword = !sendDeleteAccountVerification && hasCredentialAccount
 
-  const { mutate: deleteUser, isPending } = useDeleteUser()
+  const { mutate: deleteUser, isPending } = useDeleteUser(authClient)
 
   const handleDialogOpenChange = (open: boolean) => {
     setConfirmOpen(open)
@@ -67,10 +76,11 @@ export function DeleteUser({
         setConfirmOpen(false)
         setPassword("")
 
-        if (deleteUserConfig?.sendDeleteAccountVerification) {
-          toast.success(localization.settings.deleteUserVerificationSent)
+        if (sendDeleteAccountVerification) {
+          toast.success(deleteUserLocalization.deleteUserVerificationSent)
         } else {
-          toast.success(localization.settings.deleteUserSuccess)
+          toast.success(deleteUserLocalization.deleteUserSuccess)
+          queryClient.removeQueries({ queryKey: authQueryKeys.all })
           navigate({
             to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
             replace: true
@@ -89,11 +99,11 @@ export function DeleteUser({
       <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <p className="text-sm font-medium leading-tight">
-            {localization.settings.deleteUser}
+            {deleteUserLocalization.deleteUser}
           </p>
 
           <p className="text-muted text-xs mt-0.5">
-            {localization.settings.deleteUserDescription}
+            {deleteUserLocalization.deleteUserDescription}
           </p>
         </div>
 
@@ -104,7 +114,7 @@ export function DeleteUser({
             variant="danger"
             onPress={() => setConfirmOpen(true)}
           >
-            {localization.settings.deleteUser}
+            {deleteUserLocalization.deleteUser}
           </Button>
 
           <AlertDialog.Backdrop
@@ -122,13 +132,13 @@ export function DeleteUser({
                     </AlertDialog.Icon>
 
                     <AlertDialog.Heading>
-                      {localization.settings.deleteUser}
+                      {deleteUserLocalization.deleteUser}
                     </AlertDialog.Heading>
                   </AlertDialog.Header>
 
                   <AlertDialog.Body className="overflow-visible">
                     <p className="text-muted text-sm">
-                      {localization.settings.deleteUserDescription}
+                      {deleteUserLocalization.deleteUserDescription}
                     </p>
 
                     {needsPassword && (
@@ -170,7 +180,7 @@ export function DeleteUser({
                     >
                       {isPending && <Spinner color="current" size="sm" />}
 
-                      {localization.settings.deleteUser}
+                      {deleteUserLocalization.deleteUser}
                     </Button>
                   </AlertDialog.Footer>
                 </Form>

package/src/components/{email → auth/email}/email-changed-email.tsx

@@ -1,10 +1,10 @@
 import {
   EmailChangedEmail as EmailChangedEmailPrimitive,
   type EmailChangedEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { EmailChangedEmailProps } from "@better-auth-ui/react"
+export type { EmailChangedEmailProps } from "@better-auth-ui/react/email"
 
 export function EmailChangedEmail({
   colors,

package/src/components/{email → auth/email}/email-verification-email.tsx

@@ -1,10 +1,10 @@
 import {
   EmailVerificationEmail as EmailVerificationEmailPrimitive,
   type EmailVerificationEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { EmailVerificationEmailProps } from "@better-auth-ui/react"
+export type { EmailVerificationEmailProps } from "@better-auth-ui/react/email"
 
 export function EmailVerificationEmail({
   colors,

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

@@ -1,10 +1,10 @@
 import {
   MagicLinkEmail as MagicLinkEmailPrimitive,
   type MagicLinkEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { MagicLinkEmailProps } from "@better-auth-ui/react"
+export type { MagicLinkEmailProps } from "@better-auth-ui/react/email"
 
 export function MagicLinkEmail({
   colors,

package/src/components/{email → auth/email}/new-device-email.tsx

@@ -1,10 +1,10 @@
 import {
   NewDeviceEmail as NewDeviceEmailPrimitive,
   type NewDeviceEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { NewDeviceEmailProps } from "@better-auth-ui/react"
+export type { NewDeviceEmailProps } from "@better-auth-ui/react/email"
 
 export function NewDeviceEmail({
   colors,

package/src/components/{email → auth/email}/otp-email.tsx

@@ -1,10 +1,10 @@
 import {
   OtpEmail as OtpEmailPrimitive,
   type OtpEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { OtpEmailProps } from "@better-auth-ui/react"
+export type { OtpEmailProps } from "@better-auth-ui/react/email"
 
 export function OtpEmail({ colors, classNames, ...props }: OtpEmailProps) {
   return (

package/src/components/{email → auth/email}/password-changed-email.tsx

@@ -1,10 +1,10 @@
 import {
   PasswordChangedEmail as PasswordChangedEmailPrimitive,
   type PasswordChangedEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { PasswordChangedEmailProps } from "@better-auth-ui/react"
+export type { PasswordChangedEmailProps } from "@better-auth-ui/react/email"
 
 export function PasswordChangedEmail({
   colors,

package/src/components/{email → auth/email}/reset-password-email.tsx

@@ -1,10 +1,10 @@
 import {
   ResetPasswordEmail as ResetPasswordEmailPrimitive,
   type ResetPasswordEmailProps
-} from "@better-auth-ui/react"
+} from "@better-auth-ui/react/email"
 import { cn } from "@heroui/react"
 
-export type { ResetPasswordEmailProps } from "@better-auth-ui/react"
+export type { ResetPasswordEmailProps } from "@better-auth-ui/react/email"
 
 export function ResetPasswordEmail({
   colors,

package/src/components/auth/forgot-password.tsx

@@ -1,4 +1,8 @@
-import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react"
+import {
+  useAuth,
+  useFetchOptions,
+  useRequestPasswordReset
+} from "@better-auth-ui/react"
 import {
   Button,
   Card,
@@ -25,7 +29,7 @@ export type ForgotPasswordProps = {
  * Render a card-based "Forgot Password" form that sends a password-reset email.
  *
  * The form displays an email input, submit button, and a link back to sign-in.
- * Toasts are displayed on success or error via the `useForgotPassword` hook.
+ * Toasts are displayed on success or error via the `useRequestPasswordReset` hook.
  *
  * @param className - Optional additional CSS class names applied to the card
  * @returns The forgot-password form UI as a JSX element
@@ -35,25 +39,42 @@ export function ForgotPassword({
   variant,
   ...props
 }: ForgotPasswordProps & Omit<CardProps, "children">) {
-  const { basePaths, localization, viewPaths, navigate } = useAuth()
+  const { authClient, basePaths, localization, viewPaths, navigate, plugins } =
+    useAuth()
+
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
 
-  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
-    onSuccess: () => {
-      toast.success(localization.auth.passwordResetEmailSent)
-      navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
+    authClient,
+    {
+      onError: (error) => {
+        toast.danger(error.error?.message || error.message)
+        resetFetchOptions()
+      },
+      onSuccess: () => {
+        toast.success(localization.auth.passwordResetEmailSent)
+        navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+      }
     }
-  })
+  )
 
   function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
     e.preventDefault()
 
     const formData = new FormData(e.currentTarget)
-    requestPasswordReset({ email: formData.get("email") as string })
+    requestPasswordReset({
+      email: formData.get("email") as string,
+      fetchOptions
+    })
   }
 
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
+
   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}
     >
@@ -63,7 +84,7 @@ export function ForgotPassword({
         </Card.Title>
       </Card.Header>
 
-      <Card.Content>
+      <Card.Content className="gap-4">
         <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
           <TextField
             name="email"
@@ -82,20 +103,24 @@ export function ForgotPassword({
             <FieldError />
           </TextField>
 
-          <Button type="submit" className="w-full" isPending={isPending}>
-            {isPending && <Spinner color="current" size="sm" />}
+          {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
+          <div className="flex flex-col gap-3">
+            <Button type="submit" className="w-full" isPending={isPending}>
+              {isPending && <Spinner color="current" size="sm" />}
 
-            {localization.auth.sendResetLink}
-          </Button>
+              {localization.auth.sendResetLink}
+            </Button>
+          </div>
         </Form>
       </Card.Content>
 
-      <Card.Footer className="flex-col">
+      <Card.Footer className="flex-col gap-3">
         <Description className="text-sm">
           {localization.auth.rememberYourPassword}{" "}
           <Link
             href={`${basePaths.auth}/${viewPaths.auth.signIn}`}
-            className="text-accent decoration-accent no-underline hover:underline"
+            className="text-accent no-underline hover:underline decoration-accent-hover"
           >
             {localization.auth.signIn}
           </Link>

package/src/components/auth/magic-link/magic-link-button.tsx

@@ -0,0 +1,61 @@
+import { type AuthView, authMutationKeys } from "@better-auth-ui/core"
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
+import { Envelope, Lock } from "@gravity-ui/icons"
+import { cn, Link } from "@heroui/react"
+import { buttonVariants } from "@heroui/styles"
+import { useIsMutating } from "@tanstack/react-query"
+
+import { magicLinkPlugin } from "../../../lib/auth/magic-link-plugin"
+
+export type MagicLinkButtonProps = {
+  /** @remarks `AuthView` */
+  view?: AuthView
+}
+
+/**
+ * Toggle button between the password sign-in and magic-link routes.
+ *
+ * @param view - Current auth view. On `"magicLink"` this links back to password sign-in.
+ */
+export function MagicLinkButton({ view }: MagicLinkButtonProps) {
+  const { basePaths, emailAndPassword, viewPaths, localization } = useAuth()
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
+
+  const { localization: magicLinkLocalization, viewPaths: magicLinkViewPaths } =
+    useAuthPlugin(magicLinkPlugin)
+
+  const isMagicLinkView = view === "magicLink"
+
+  // On the magic-link view this button switches back to password sign-in.
+  // With password auth disabled there's nowhere to switch to, so hide it.
+  // (Other views — e.g. a phone-number plugin's surface — still get a
+  // "Continue with Magic Link" link.)
+  if (isMagicLinkView && !emailAndPassword?.enabled) return null
+
+  return (
+    <Link
+      href={`${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : magicLinkViewPaths.auth.magicLink}`}
+      isDisabled={isPending}
+      className={cn(
+        buttonVariants({ variant: "tertiary" }),
+        "w-full gap-2",
+        isPending && "status-disabled"
+      )}
+    >
+      {isMagicLinkView ? <Lock /> : <Envelope />}
+
+      {localization.auth.continueWith.replace(
+        "{{provider}}",
+        isMagicLinkView
+          ? localization.auth.password
+          : magicLinkLocalization.magicLink
+      )}
+    </Link>
+  )
+}