Sign In

1"use client"
2 
3import { authMutationKeys } from "@better-auth-ui/core"
4import {
5  AuthPrompts,
6  useAuth,
7  useFetchOptions,
8  useSignInEmail
9} from "@better-auth-ui/react"
10import { useIsMutating } from "@tanstack/react-query"
11import { Eye, EyeOff } from "lucide-react"
12import { type SyntheticEvent, useState } from "react"
13 
14import { Button } from "@/components/ui/button"
15import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
16import { Checkbox } from "@/components/ui/checkbox"
17import {
18  Field,
19  FieldDescription,
20  FieldError,
21  FieldGroup,
22  FieldLabel,
23  FieldSeparator
24} from "@/components/ui/field"
25import { Input } from "@/components/ui/input"
26import {
27  InputGroup,
28  InputGroupAddon,
29  InputGroupButton,
30  InputGroupInput
31} from "@/components/ui/input-group"
32import { Spinner } from "@/components/ui/spinner"
33import { useSignInContinuation } from "@/lib/auth/use-sign-in-continuation"
34import { cn } from "@/lib/utils"
35import { LastUsedBadge } from "./last-login-method/last-used-badge"
36import { ProviderButtons, type SocialLayout } from "./provider-buttons"
37 
38export type SignInProps = {
39  className?: string
40  socialLayout?: SocialLayout
41  socialPosition?: "top" | "bottom"
42}
43 
44/**
45 * Render the sign-in form UI with email/password, magic link, and social provider options.
46 *
47 * @param className - Optional additional container class names
48 * @param socialLayout - Layout style for social provider buttons
49 * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
50 * @returns The rendered sign-in UI as a JSX element
51 */
52export function SignIn({
53  className,
54  socialLayout,
55  socialPosition = "bottom"
56}: SignInProps) {
57  const {
58    authClient,
59    basePaths,
60    emailAndPassword,
61    localization,
62    plugins,
63    socialProviders,
64    viewPaths,
65    navigate,
66    Link
67  } = useAuth()
68 
69  const { fetchOptions, resetFetchOptions } = useFetchOptions()
70  const continueSignIn = useSignInContinuation()
71 
72  const [password, setPassword] = useState("")
73 
74  const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(
75    authClient,
76    {
77      onError: (error, { email }) => {
78        setPassword("")
79 
80        if (error.error?.code === "EMAIL_NOT_VERIFIED") {
81          sessionStorage.setItem("better-auth-ui.verify-email", email)
82          navigate({
83            to: `${basePaths.auth}/${viewPaths.auth.verifyEmail}`
84          })
85        }
86 
87        resetFetchOptions()
88      },
89// … truncated