Authentication Components
Relevant source files
The following files were used as context for generating this wiki page:- packages/libraries/ui/registry/new-york/sign-in/sign-in.tsx
- packages/libraries/ui/registry/new-york/sign-up/sign-up.tsx
- packages/libraries/ui/registry/new-york/forgot-password/forgot-password.tsx
- packages/libraries/ui/registry/new-york/reset-password/reset-password.tsx
- packages/libraries/ui/registry.json
- packages/libraries/ui/package.json
The better-auth-kit UI library provides a collection of pre-built, dynamic React components to handle common user authentication flows. These components are designed to be easily integrated into applications using better-auth, offering a streamlined user experience for signing in, signing up, and managing passwords. They are built upon a modern tech stack including react-hook-form for form state management, zod for schema validation, and sonner for displaying toast notifications.
The core of the library is a set of components registered within the project, each corresponding to a specific authentication action. These components encapsulate the UI, state management, validation, and API communication logic, providing developers with a simple and extensible way to implement authentication frontends.
Sources: packages/libraries/ui/package.json, packages/libraries/ui/registry.json, README.md:12-14
Component Overview
The UI library offers several key components for authentication, each defined in the registry.json file. These components can be composed to create a complete authentication experience.
| Component | Description | Source Files |
|---|---|---|
SignIn | A sign-in form with email/password fields and OAuth options. | registry/new-york/sign-in/sign-in.tsx |
SignUp | A sign-up form with name, email, and password fields. | registry/new-york/sign-up/sign-up.tsx |
ForgotPassword | A form for users to submit their email to initiate a password reset. | registry/new-york/forgot-password/forgot-password.tsx |
ResetPassword | A form for users to set a new password after following a reset link. | registry/new-york/reset-password/reset-password.tsx |
OAuth | A component that provides buttons for various OAuth providers. | registry/new-york/oauth/oauth.tsx |
Sources: packages/libraries/ui/registry.json:6-96
Core Dependencies
The authentication components rely on several key third-party libraries to function.
| Library | Usage |
|---|---|
react-hook-form | Manages form state, submission, and errors. |
zod | Defines validation schemas for form inputs. |
@hookform/resolvers | Connects zod schemas to react-hook-form. |
sonner | Displays success or error toast notifications to the user. |
lucide-react | Provides icons, such as the loading spinner. |
Sources: packages/libraries/ui/package.json:28-42
Component Dependency Structure
The main authentication components (SignIn, SignUp) are composed of smaller, reusable field components. This diagram illustrates the dependencies as defined in the registry.
This diagram shows how components like SignIn and SignUp reuse common field components.
Sources: packages/libraries/ui/registry.json:8-60
Detailed Component Analysis
Sign-In Component
The SignIn component provides a complete user interface for email and password authentication.
Sources: packages/libraries/ui/registry/new-york/sign-in/sign-in.tsx
Properties
| Prop | Type | Description |
|---|---|---|
onSuccess | (context: SuccessContext) => void | Optional callback function executed on successful sign-in. |
onError | (context: ErrorContext) => void | Optional callback function executed on sign-in failure. |
callbackURL | string | Optional URL to redirect to after a successful sign-in. |
className | string | Optional CSS class to apply to the root container. |
Sources: packages/libraries/ui/registry/new-york/sign-in/sign-in.tsx:28-33
Validation Schema
Input validation is handled by zod. The schema requires a valid email and a password of at least 6 characters.
const formSchema = z.object({
email: z.string().email(),
password: z.string().min(6, {
message: "Password must be at least 6 characters",
}),
});
Sources: packages/libraries/ui/registry/new-york/sign-in/sign-in.tsx:20-26
Data Flow
The following sequence diagram illustrates the sign-in process when a user submits the form.
This diagram shows the interaction between the user, the React component, and the authClient during the sign-in process, including success and error paths.
Sources: packages/libraries/ui/registry/new-york/sign-in/sign-in.tsx:45-66
Sign-Up Component
The SignUp component is used for creating a new user account. It includes an additional field for the user's name.
Sources: packages/libraries/ui/registry/new-york/sign-up/sign-up.tsx
Properties
The SignUp component accepts the same properties as the SignIn component (onSuccess, onError, callbackURL, className).
Sources: packages/libraries/ui/registry/new-york/sign-up/sign-up.tsx:30-35
Validation Schema
The validation schema for sign-up is stricter, requiring a name, email, and password.
const formSchema = z.object({
name: z.string().min(2, {
message: "Name must be at least 2 characters",
}),
email: z.string().email(),
password: z.string().min(6, {
message: "Password must be at least 6 characters",
}),
});
Sources: packages/libraries/ui/registry/new-york/sign-up/sign-up.tsx:19-28
Data Flow
The sign-up flow is similar to the sign-in flow but calls a different authClient method.
This diagram shows the interaction during the sign-up process.
Sources: packages/libraries/ui/registry/new-york/sign-up/sign-up.tsx:47-68
Conclusion
The authentication components in better-auth-kit provide a comprehensive, ready-to-use solution for handling user authentication in React applications. By leveraging standard libraries like react-hook-form and zod, they offer a robust and developer-friendly experience. The modular design, with distinct components for each authentication action and shared sub-components, promotes code reuse and simplifies the process of building secure and user-friendly login and registration flows.