@better-auth-ui/heroui 1.6.0

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

@@ -0,0 +1,107 @@
+import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Link,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+
+export type ForgotPasswordProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * 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.
+ *
+ * @param className - Optional additional CSS class names applied to the card
+ * @returns The forgot-password form UI as a JSX element
+ */
+export function ForgotPassword({
+  className,
+  variant,
+  ...props
+}: ForgotPasswordProps & CardProps) {
+  const { basePaths, localization, viewPaths, navigate } = useAuth()
+
+  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    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 })
+  }
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm p-4 md:p-6", className)}
+      variant={variant}
+      {...props}
+    >
+      <Card.Header>
+        <Card.Title className="text-xl font-semibold mb-1">
+          {localization.auth.forgotPassword}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content>
+        <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <TextField
+            name="email"
+            type="email"
+            autoComplete="email"
+            isDisabled={isPending}
+          >
+            <Label>{localization.auth.email}</Label>
+
+            <Input
+              placeholder={localization.auth.emailPlaceholder}
+              required
+              variant={variant === "transparent" ? "primary" : "secondary"}
+            />
+
+            <FieldError />
+          </TextField>
+
+          <Button type="submit" className="w-full" isPending={isPending}>
+            {isPending && <Spinner color="current" size="sm" />}
+
+            {localization.auth.sendResetLink}
+          </Button>
+        </Form>
+      </Card.Content>
+
+      <Card.Footer className="flex-col">
+        <Description className="text-sm">
+          {localization.auth.rememberYourPassword}{" "}
+          <Link
+            href={`${basePaths.auth}/${viewPaths.auth.signIn}`}
+            className="text-accent decoration-accent no-underline hover:underline"
+          >
+            {localization.auth.signIn}
+          </Link>
+        </Description>
+      </Card.Footer>
+    </Card>
+  )
+}

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

@@ -0,0 +1,43 @@
+import type { AuthView } from "@better-auth-ui/core"
+import { useAuth } from "@better-auth-ui/react"
+import { Envelope, Lock } from "@gravity-ui/icons"
+import { cn, Link } from "@heroui/react"
+import { buttonVariants } from "@heroui/styles"
+
+export type MagicLinkButtonProps = {
+  isPending: boolean
+  view?: AuthView
+}
+
+/**
+ * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
+ *
+ * @param isPending - If true, applies disabled styling and prevents interaction
+ * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
+ * @returns The rendered Link element with the appropriate href, icon, and label
+ */
+export function MagicLinkButton({ isPending, view }: MagicLinkButtonProps) {
+  const { basePaths, viewPaths, localization } = useAuth()
+
+  const isMagicLinkView = view === "magicLink"
+
+  return (
+    <Link
+      href={`${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : viewPaths.auth.magicLink}`}
+      className={cn(
+        buttonVariants({ variant: "tertiary" }),
+        "w-full gap-2",
+        isPending && "status-disabled pointer-events-none"
+      )}
+    >
+      {isMagicLinkView ? <Lock /> : <Envelope />}
+
+      {localization.auth.continueWith.replace(
+        "{{provider}}",
+        isMagicLinkView
+          ? localization.auth.password
+          : localization.auth.magicLink
+      )}
+    </Link>
+  )
+}

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

@@ -0,0 +1,181 @@
+import {
+  useAuth,
+  useSignInMagicLink,
+  useSignInSocial
+} from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Link,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+import { FieldSeparator } from "./field-separator"
+import { MagicLinkButton } from "./magic-link-button"
+import { ProviderButtons, type SocialLayout } from "./provider-buttons"
+
+export type MagicLinkProps = {
+  className?: string
+  socialLayout?: SocialLayout
+  socialPosition?: "top" | "bottom"
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
+ *
+ * @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
+ */
+export function MagicLink({
+  className,
+  socialLayout,
+  socialPosition = "bottom",
+  variant,
+  ...props
+}: MagicLinkProps & CardProps) {
+  const {
+    basePaths,
+    baseURL,
+    localization,
+    redirectTo,
+    socialProviders,
+    viewPaths
+  } = useAuth()
+
+  const [email, setEmail] = useState("")
+
+  const { mutate: signInMagicLink, isPending: magicLinkPending } =
+    useSignInMagicLink({
+      onError: (error) => toast.danger(error.error?.message || error.message),
+      onSuccess: () => {
+        setEmail("")
+        toast.success(localization.auth.magicLinkSent)
+      }
+    })
+
+  const [socialRedirecting, setSocialRedirecting] = useState(false)
+
+  const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => {
+      setSocialRedirecting(true)
+
+      setTimeout(() => {
+        setSocialRedirecting(false)
+      }, 5000)
+    }
+  })
+
+  const isPending = magicLinkPending || socialPending || socialRedirecting
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    signInMagicLink({ email, callbackURL: `${baseURL}${redirectTo}` })
+  }
+
+  const showSeparator = !!socialProviders?.length
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm p-4 md:p-6", className)}
+      variant={variant}
+      {...props}
+    >
+      <Card.Header>
+        <Card.Title className="text-xl font-semibold mb-1">
+          {localization.auth.signIn}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content className="gap-4">
+        {socialPosition === "top" && (
+          <>
+            {!!socialProviders?.length && (
+              <ProviderButtons
+                socialLayout={socialLayout}
+                signInSocial={signInSocial}
+                isPending={isPending}
+              />
+            )}
+
+            {showSeparator && (
+              <FieldSeparator>{localization.auth.or}</FieldSeparator>
+            )}
+          </>
+        )}
+
+        <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <TextField
+            name="email"
+            type="email"
+            autoComplete="email"
+            isDisabled={isPending}
+            value={email}
+            onChange={setEmail}
+          >
+            <Label>{localization.auth.email}</Label>
+
+            <Input
+              placeholder={localization.auth.emailPlaceholder}
+              required
+              variant={variant === "transparent" ? "primary" : "secondary"}
+            />
+
+            <FieldError />
+          </TextField>
+
+          <div className="flex flex-col gap-3">
+            <Button type="submit" className="w-full" isPending={isPending}>
+              {isPending && <Spinner color="current" size="sm" />}
+
+              {localization.auth.sendMagicLink}
+            </Button>
+
+            <MagicLinkButton view="magicLink" isPending={isPending} />
+          </div>
+        </Form>
+
+        {socialPosition === "bottom" && (
+          <>
+            {showSeparator && (
+              <FieldSeparator>{localization.auth.or}</FieldSeparator>
+            )}
+
+            {!!socialProviders?.length && (
+              <ProviderButtons
+                socialLayout={socialLayout}
+                signInSocial={signInSocial}
+                isPending={isPending}
+              />
+            )}
+          </>
+        )}
+      </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>
+    </Card>
+  )
+}

package/src/components/auth/provider-buttons.tsx

@@ -0,0 +1,85 @@
+import { getProviderName } from "@better-auth-ui/core"
+import { providerIcons, useAuth } from "@better-auth-ui/react"
+import { Button, cn } from "@heroui/react"
+import type { SocialProvider } from "better-auth/social-providers"
+import { useMemo } from "react"
+
+export type ProviderButtonsProps = {
+  isPending: boolean
+  socialLayout?: SocialLayout
+  signInSocial: (params: {
+    provider: SocialProvider
+    callbackURL: string
+  }) => void
+}
+
+export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid"
+
+/**
+ * Render social provider sign-in buttons and handle initiation and pending state.
+ *
+ * @param isPending - Disables all provider buttons when true.
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export function ProviderButtons({
+  isPending,
+  socialLayout = "auto",
+  signInSocial
+}: ProviderButtonsProps) {
+  const { baseURL, localization, redirectTo, socialProviders } = useAuth()
+
+  const callbackURL = `${baseURL}${redirectTo}`
+
+  const resolvedSocialLayout = useMemo(() => {
+    if (socialLayout === "auto") {
+      if (socialProviders?.length && socialProviders.length >= 4) {
+        return "horizontal"
+      }
+
+      return "vertical"
+    }
+
+    return socialLayout
+  }, [socialLayout, socialProviders?.length])
+
+  return (
+    <div
+      className={cn(
+        "gap-3",
+        resolvedSocialLayout === "grid" && "grid grid-cols-2",
+        resolvedSocialLayout === "vertical" && "flex flex-col",
+        resolvedSocialLayout === "horizontal" && "flex flex-wrap"
+      )}
+    >
+      {socialProviders?.map((provider) => {
+        const ProviderIcon = providerIcons[provider]
+
+        return (
+          <Button
+            key={provider}
+            className={cn(
+              "w-full",
+              resolvedSocialLayout === "horizontal" && "flex-1"
+            )}
+            variant="tertiary"
+            isPending={isPending}
+            onPress={() => signInSocial({ provider, callbackURL })}
+          >
+            <ProviderIcon />
+
+            {resolvedSocialLayout === "vertical"
+              ? localization.auth.continueWith.replace(
+                  "{{provider}}",
+                  getProviderName(provider)
+                )
+              : resolvedSocialLayout === "grid"
+                ? getProviderName(provider)
+                : null}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,210 @@
+import { useAuth, useResetPassword } from "@better-auth-ui/react"
+import { Eye, EyeSlash } from "@gravity-ui/icons"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  FieldError,
+  Form,
+  InputGroup,
+  Label,
+  Link,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { type SyntheticEvent, useEffect, useState } from "react"
+
+export type ResetPasswordProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export function ResetPassword({
+  className,
+  variant,
+  ...props
+}: ResetPasswordProps & CardProps) {
+  const { basePaths, emailAndPassword, localization, viewPaths, navigate } =
+    useAuth()
+
+  const { mutate: resetPassword, isPending } = useResetPassword({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => {
+      toast.success(localization.auth.passwordResetSuccess)
+      navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+    }
+  })
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
+    useState(false)
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    const token = searchParams.get("token") as string
+
+    if (!token) {
+      toast.danger(localization.auth.invalidResetPasswordToken)
+      navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+    }
+  }, [
+    basePaths.auth,
+    localization.auth.invalidResetPasswordToken,
+    viewPaths.auth.signIn,
+    navigate
+  ])
+
+  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault()
+
+    const searchParams = new URLSearchParams(window.location.search)
+    const token = searchParams.get("token") as string
+
+    if (!token) {
+      toast.danger(localization.auth.invalidResetPasswordToken)
+      navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+      return
+    }
+
+    const formData = new FormData(e.currentTarget)
+    const password = formData.get("password") as string
+    const confirmPassword = formData.get("confirmPassword") as string
+
+    if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+      toast.danger(localization.auth.passwordsDoNotMatch)
+      return
+    }
+
+    resetPassword({ token, newPassword: password })
+  }
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm p-4 md:p-6", className)}
+      variant={variant}
+      {...props}
+    >
+      <Card.Header>
+        <Card.Title className="text-xl font-semibold mb-1">
+          {localization.auth.resetPassword}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content>
+        <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <TextField
+            minLength={emailAndPassword?.minPasswordLength}
+            maxLength={emailAndPassword?.maxPasswordLength}
+            name="password"
+            autoComplete="new-password"
+            isDisabled={isPending}
+          >
+            <Label>{localization.auth.password}</Label>
+
+            <InputGroup
+              variant={variant === "transparent" ? "primary" : "secondary"}
+            >
+              <InputGroup.Input
+                name="password"
+                placeholder={localization.auth.newPasswordPlaceholder}
+                type={isPasswordVisible ? "text" : "password"}
+                required
+              />
+
+              <InputGroup.Suffix className="px-0">
+                <Button
+                  isIconOnly
+                  aria-label={
+                    isPasswordVisible
+                      ? localization.auth.hidePassword
+                      : localization.auth.showPassword
+                  }
+                  size="sm"
+                  variant="ghost"
+                  onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+                  isDisabled={isPending}
+                >
+                  {isPasswordVisible ? <EyeSlash /> : <Eye />}
+                </Button>
+              </InputGroup.Suffix>
+            </InputGroup>
+
+            <FieldError />
+          </TextField>
+
+          {emailAndPassword?.confirmPassword && (
+            <TextField
+              minLength={emailAndPassword?.minPasswordLength}
+              maxLength={emailAndPassword?.maxPasswordLength}
+              name="confirmPassword"
+              autoComplete="new-password"
+              isDisabled={isPending}
+            >
+              <Label>{localization.auth.confirmPassword}</Label>
+
+              <InputGroup
+                variant={variant === "transparent" ? "primary" : "secondary"}
+              >
+                <InputGroup.Input
+                  placeholder={localization.auth.confirmPasswordPlaceholder}
+                  type={isConfirmPasswordVisible ? "text" : "password"}
+                  required
+                  name="confirmPassword"
+                />
+
+                <InputGroup.Suffix className="px-0">
+                  <Button
+                    isIconOnly
+                    aria-label={
+                      isConfirmPasswordVisible
+                        ? localization.auth.hidePassword
+                        : localization.auth.showPassword
+                    }
+                    size="sm"
+                    variant="ghost"
+                    onPress={() =>
+                      setIsConfirmPasswordVisible(!isConfirmPasswordVisible)
+                    }
+                    isDisabled={isPending}
+                  >
+                    {isConfirmPasswordVisible ? <EyeSlash /> : <Eye />}
+                  </Button>
+                </InputGroup.Suffix>
+              </InputGroup>
+
+              <FieldError />
+            </TextField>
+          )}
+
+          <div className="flex flex-col gap-3">
+            <Button type="submit" className="w-full" isPending={isPending}>
+              {isPending && <Spinner color="current" size="sm" />}
+
+              {localization.auth.resetPassword}
+            </Button>
+          </div>
+        </Form>
+      </Card.Content>
+
+      <Card.Footer className="flex-col">
+        <Description className="text-sm">
+          {localization.auth.rememberYourPassword}{" "}
+          <Link
+            href={`${basePaths.auth}/${viewPaths.auth.signIn}`}
+            className="text-accent decoration-accent no-underline hover:underline"
+          >
+            {localization.auth.signIn}
+          </Link>
+        </Description>
+      </Card.Footer>
+    </Card>
+  )
+}