Loading...
Loading...
> Complete authentication forms with email/password and social providers.
1import { SignInForm, SignUpForm } from "@/components/ui/sign-in-form"
Don't have an account? Sign up
1<SignInForm2 onSubmit={(data) => handleSignIn(data)}3 forgotPasswordHref="/forgot-password"4 signUpHref="/sign-up"5/>
Don't have an account? Sign up
1<SignInForm2 onSubmit={(data) => handleSignIn(data)}3/>
Already have an account? Sign in
1<SignUpForm2 onSubmit={(data) => handleSignUp(data)}3 termsHref="/terms"4 privacyHref="/privacy"5/>
Don't have an account? Sign up
1<SignInForm2 error="Invalid email or password"3 onSubmit={handleSignIn}4/>
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit | (data: SignInFormData) => void | Promise<void> | - | Form submission handler. |
| socialProviders | SocialProvider[] | [GitHub, Google] | Social auth providers to display. |
| forgotPasswordHref | string | "/forgot-password" | URL for forgot password link. |
| signUpHref | string | "/sign-up" | URL for sign up link. |
| showRememberMe | boolean | true | Show remember me checkbox. |
| defaultEmail | string | - | Pre-fill email field. |
| isLoading | boolean | false | Show loading state. |
| error | string | - | Error message to display. |
interface SignInFormData {
email: string;
password: string;
rememberMe: boolean;
}interface SignUpFormData {
name: string;
email: string;
password: string;
acceptTerms: boolean;
}const providers: SocialProvider[] = [
{
id: 'github',
name: 'GitHub',
icon: <Github className="h-4 w-4" />,
onClick: () => signIn('github'),
},
{
id: 'google',
name: 'Google',
icon: <GoogleIcon />,
onClick: () => signIn('google'),
},
];
<SignInForm socialProviders={providers} />