@better-auth-ui/heroui 1.6.0

package/src/components/auth/sign-in.tsx

@@ -0,0 +1,260 @@
+import {
+  useAuth,
+  useSendVerificationEmail,
+  useSignInEmail,
+  useSignInSocial
+} from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  Checkbox,
+  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 interface SignInProps {
+  className?: string
+  socialLayout?: SocialLayout
+  socialPosition?: "top" | "bottom"
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render the sign-in UI using auth context for configuration and localization.
+ *
+ * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
+ */
+export function SignIn({
+  className,
+  socialLayout,
+  socialPosition = "bottom",
+  variant,
+  ...props
+}: SignInProps & CardProps) {
+  const {
+    basePaths,
+    baseURL,
+    emailAndPassword,
+    localization,
+    magicLink,
+    redirectTo,
+    socialProviders,
+    viewPaths,
+    navigate
+  } = useAuth()
+
+  const [password, setPassword] = useState("")
+
+  const { mutate: sendVerificationEmail } = useSendVerificationEmail({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+  })
+
+  const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
+    onError: (error, { email }) => {
+      setPassword("")
+
+      if (error.error?.code === "EMAIL_NOT_VERIFIED") {
+        toast.danger(error.error?.message || error.message, {
+          actionProps: {
+            children: localization.auth.resend,
+            onClick: () =>
+              sendVerificationEmail({
+                email,
+                callbackURL: `${baseURL}${redirectTo}`
+              })
+          }
+        })
+      } else {
+        toast.danger(error.error?.message || error.message)
+      }
+    },
+    onSuccess: () => navigate({ to: redirectTo })
+  })
+
+  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 handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get("email") as string
+    const rememberMe = formData.get("rememberMe") === "on"
+
+    signInEmail({
+      email,
+      password,
+      ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+    })
+  }
+
+  const isPending = signInPending || socialPending || socialRedirecting
+
+  const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm gap-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>
+            )}
+          </>
+        )}
+
+        {emailAndPassword?.enabled && (
+          <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}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+                required
+              />
+
+              <FieldError />
+            </TextField>
+
+            <TextField
+              minLength={emailAndPassword?.minPasswordLength}
+              maxLength={emailAndPassword?.maxPasswordLength}
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              isDisabled={isPending}
+              value={password}
+              onChange={setPassword}
+            >
+              <Label>{localization.auth.password}</Label>
+
+              <Input
+                placeholder={localization.auth.passwordPlaceholder}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+                required
+              />
+
+              <FieldError />
+            </TextField>
+
+            {emailAndPassword?.rememberMe && (
+              <Checkbox
+                name="rememberMe"
+                isDisabled={isPending}
+                variant={variant === "transparent" ? "primary" : "secondary"}
+              >
+                <Checkbox.Control>
+                  <Checkbox.Indicator />
+                </Checkbox.Control>
+
+                <Checkbox.Content>
+                  <Label>{localization.auth.rememberMe}</Label>
+                </Checkbox.Content>
+              </Checkbox>
+            )}
+
+            <div className="flex flex-col gap-3">
+              <Button type="submit" className="w-full" isPending={isPending}>
+                {isPending && <Spinner color="current" size="sm" />}
+
+                {localization.auth.signIn}
+              </Button>
+
+              {magicLink && (
+                <MagicLinkButton view="signIn" 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 gap-3">
+        {emailAndPassword?.forgotPassword && (
+          <Link
+            href={`${basePaths.auth}/${viewPaths.auth.forgotPassword}`}
+            className="no-underline hover:underline"
+          >
+            {localization.auth.forgotPasswordLink}
+          </Link>
+        )}
+
+        {emailAndPassword?.enabled && (
+          <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/auth/sign-out.tsx

@@ -0,0 +1,44 @@
+import { useAuth, useSignOut } from "@better-auth-ui/react"
+import { cn, Spinner, toast } from "@heroui/react"
+import { useEffect, useRef } from "react"
+
+export type SignOutProps = {
+  className?: string
+}
+
+/**
+ * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
+ *
+ * @returns A Card containing a centered Spinner shown during the sign-out process
+ */
+export function SignOut({ className }: SignOutProps) {
+  const { basePaths, navigate, viewPaths } = useAuth()
+
+  const { mutate: signOut } = useSignOut({
+    onError: (error) => {
+      toast.danger(error.error?.message || error.message)
+      navigate({
+        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+        replace: true
+      })
+    },
+    onSuccess: () =>
+      navigate({
+        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+        replace: true
+      })
+  })
+
+  const hasSignedOut = useRef(false)
+
+  useEffect(() => {
+    if (hasSignedOut.current) return
+    hasSignedOut.current = true
+
+    signOut()
+  }, [signOut])
+
+  return (
+    <Spinner className={cn("mx-auto my-auto", className)} color="current" />
+  )
+}

package/src/components/auth/sign-up.tsx

@@ -0,0 +1,314 @@
+import { useAuth, useSignInSocial, useSignUpEmail } from "@better-auth-ui/react"
+import { Eye, EyeSlash } from "@gravity-ui/icons"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  FieldError,
+  Form,
+  Input,
+  InputGroup,
+  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 SignUpProps = {
+  className?: string
+  socialLayout?: SocialLayout
+  socialPosition?: "top" | "bottom"
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
+ *
+ * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param socialLayout - Social layout to apply to the provider buttons component
+ * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
+ * @returns The sign-up form React element
+ */
+export function SignUp({
+  className,
+  socialLayout,
+  socialPosition = "bottom",
+  variant,
+  ...props
+}: SignUpProps & CardProps) {
+  const {
+    basePaths,
+    emailAndPassword,
+    localization,
+    magicLink,
+    redirectTo,
+    socialProviders,
+    viewPaths,
+    navigate
+  } = useAuth()
+
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+
+  const { mutate: signUpEmail, isPending: signUpPending } = useSignUpEmail({
+    onError: (error) => {
+      setPassword("")
+      setConfirmPassword("")
+      toast.danger(error.error?.message || error.message)
+    },
+    onSuccess: () => {
+      if (emailAndPassword?.requireEmailVerification) {
+        toast.success(localization.auth.verifyYourEmail)
+        navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+      } else {
+        navigate({ to: redirectTo })
+      }
+    }
+  })
+
+  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 [isPasswordVisible, setIsPasswordVisible] = useState(false)
+  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
+    useState(false)
+
+  const isPending = signUpPending || socialPending || socialRedirecting
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.currentTarget)
+    const name = formData.get("name") as string
+    const email = formData.get("email") as string
+
+    if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+      toast.danger(localization.auth.passwordsDoNotMatch)
+      setPassword("")
+      setConfirmPassword("")
+      return
+    }
+
+    signUpEmail({ name, email, password })
+  }
+
+  const showSeparator = emailAndPassword?.enabled && !!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.signUp}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content className="gap-4">
+        {socialPosition === "top" && (
+          <>
+            {!!socialProviders?.length && (
+              <ProviderButtons
+                isPending={isPending}
+                socialLayout={socialLayout}
+                signInSocial={signInSocial}
+              />
+            )}
+
+            {showSeparator && (
+              <FieldSeparator>{localization.auth.or}</FieldSeparator>
+            )}
+          </>
+        )}
+
+        {emailAndPassword?.enabled && (
+          <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            <TextField
+              name="name"
+              type="text"
+              autoComplete="name"
+              isDisabled={isPending}
+            >
+              <Label>{localization.auth.name}</Label>
+
+              <Input
+                placeholder={localization.auth.namePlaceholder}
+                required
+                variant={variant === "transparent" ? "primary" : "secondary"}
+              />
+
+              <FieldError />
+            </TextField>
+
+            <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>
+
+            <TextField
+              minLength={emailAndPassword?.minPasswordLength}
+              maxLength={emailAndPassword?.maxPasswordLength}
+              name="password"
+              autoComplete="new-password"
+              isDisabled={isPending}
+              value={password}
+              onChange={setPassword}
+            >
+              <Label>{localization.auth.password}</Label>
+
+              <InputGroup
+                variant={variant === "transparent" ? "primary" : "secondary"}
+              >
+                <InputGroup.Input
+                  placeholder={localization.auth.passwordPlaceholder}
+                  type={isPasswordVisible ? "text" : "password"}
+                  name="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}
+                value={confirmPassword}
+                onChange={setConfirmPassword}
+              >
+                <Label>{localization.auth.confirmPassword}</Label>
+
+                <InputGroup
+                  variant={variant === "transparent" ? "primary" : "secondary"}
+                >
+                  <InputGroup.Input
+                    name="confirmPassword"
+                    placeholder={localization.auth.confirmPasswordPlaceholder}
+                    type={isConfirmPasswordVisible ? "text" : "password"}
+                    required
+                  />
+
+                  <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.signUp}
+              </Button>
+
+              {magicLink && (
+                <MagicLinkButton view="signUp" 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.alreadyHaveAnAccount}{" "}
+          <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/email/email-changed-email.tsx

@@ -0,0 +1,38 @@
+import {
+  EmailChangedEmail as EmailChangedEmailPrimitive,
+  type EmailChangedEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { EmailChangedEmailProps } from "@better-auth-ui/react"
+
+export function EmailChangedEmail({
+  colors,
+  classNames,
+  ...props
+}: EmailChangedEmailProps) {
+  return (
+    <EmailChangedEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/email/email-verification-email.tsx

@@ -0,0 +1,38 @@
+import {
+  EmailVerificationEmail as EmailVerificationEmailPrimitive,
+  type EmailVerificationEmailProps
+} from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
+
+export type { EmailVerificationEmailProps } from "@better-auth-ui/react"
+
+export function EmailVerificationEmail({
+  colors,
+  classNames,
+  ...props
+}: EmailVerificationEmailProps) {
+  return (
+    <EmailVerificationEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}