<AuthView />
The <AuthView /> component provides an interactive and customizable authentication interface that seamlessly integrates with your authentication flow. It supports multiple authentication methods, including email/password, magic links, passkey (WebAuthn), and social providers.
Reference
The following props can be passed to <AuthView /> for customization:
| Prop | Type | Default |
|---|---|---|
otpSeparators? | 0 | 1 | 2 | - |
view? | "CALLBACK" | "EMAIL_OTP" | "FORGOT_PASSWORD" | "MAGIC_LINK" | "RECOVER_ACCOUNT" | "RESET_PASSWORD" | "SIGN_IN" | "SIGN_OUT" | "SIGN_UP" | "TWO_FACTOR" | "ACCEPT_INVITATION" | - |
socialLayout? | "auto" | "horizontal" | "grid" | "vertical" | - |
redirectTo? | string | - |
pathname? | string | - |
path? | string | - |
localization? | Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 356 more ...; SLUG_DOES_NOT_MATCH: string; }> | - |
cardHeader? | any | - |
callbackURL? | string | - |
classNames? | AuthViewClassNames | - |
className? | string | - |
Examples
Below are practical usage examples demonstrating common scenarios:
Specifying Initial View
You can specify the current view manually using the view prop:
<AuthView view="SIGN_IN" />Custom Redirect After Authentication
Customize the navigation after successful authentication using the redirectTo prop:
<AuthView redirectTo="/dashboard" />Localization
You can pass custom localization texts to fit different languages or contexts:
<AuthView
localization={{
SIGN_IN: "Log in",
SIGN_UP: "Register",
MAGIC_LINK: "Sign in with Email",
}}
/>Styling
You can thoroughly customize <AuthView /> components using TailwindCSS utility classes and the provided classNames prop:
<AuthView
classNames={{
base: "border-2 border-destructive max-w-xs",
header: "bg-destructive/30",
title: "text-xl text-destructive font-semibold",
footerLink: "text-destructive hover:text-foreground",
}}
/>