Sign Up

1"use client"
2 
3import {
4  authMutationKeys,
5  getAuthLinkURL,
6  parseAdditionalFieldValue
7} from "@better-auth-ui/core"
8import {
9  AuthPrompts,
10  useAuth,
11  useFetchOptions,
12  useSignUpEmail
13} from "@better-auth-ui/react"
14import { useIsMutating } from "@tanstack/react-query"
15import { Eye, EyeOff } from "lucide-react"
16import { type SyntheticEvent, useState } from "react"
17import { toast } from "sonner"
18import { Button } from "@/components/ui/button"
19import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
20import {
21  Field,
22  FieldDescription,
23  FieldError,
24  FieldGroup,
25  FieldLabel,
26  FieldSeparator
27} from "@/components/ui/field"
28import { Input } from "@/components/ui/input"
29import {
30  InputGroup,
31  InputGroupAddon,
32  InputGroupButton,
33  InputGroupInput
34} from "@/components/ui/input-group"
35import { Spinner } from "@/components/ui/spinner"
36import { cn } from "@/lib/utils"
37import { AdditionalField } from "./additional-field"
38import { ProviderButtons, type SocialLayout } from "./provider-buttons"
39 
40export type SignUpProps = {
41  className?: string
42  socialLayout?: SocialLayout
43  socialPosition?: "top" | "bottom"
44  /**
45   * Runs instead of the post-sign-up redirect, but only when the sign-up
46   * created an immediately usable session. Email verification still takes
47   * priority, and social sign-ups are unaffected.
48   */
49  onSignUpSuccess?: () => void
50}
51 
52/**
53 * Renders a sign-up form with name, email, and password fields, optional social provider buttons, and submission handling.
54 *
55 * Submits credentials to the configured auth client and handles the response:
56 * - If email verification is required, shows a notification and navigates to sign-in
57 * - On success, refreshes the session and navigates to the configured redirect path
58 * - On failure, displays error toasts
59 * - Manages a pending state while the request is in-flight
60 *
61 * @param className - Additional CSS classes applied to the outer container
62 * @param socialLayout - Social layout to apply to the component
63 * @param socialPosition - Social position to apply to the component
64 * @param onSignUpSuccess - Replaces the post-sign-up redirect when the new account is immediately usable
65 * @returns The sign-up form React element.
66 */
67export function SignUp({
68  className,
69  socialLayout,
70  socialPosition = "bottom",
71  onSignUpSuccess
72}: SignUpProps) {
73  const {
74    additionalFields,
75    authClient,
76    basePaths,
77    emailAndPassword,
78    localization,
79    plugins,
80    redirectTo,
81// … truncated