<SignUpForm />
When building admin dashboards, you often need to allow new team members to register for accounts. The SignUpForm provides a complete registration interface with email/password fields, password confirmation, and proper validation.
This component integrates with Refine's authentication system to handle user registration, including proper error handling and success notifications.
Installation
Add the sign-up form to your project:
npx shadcn@latest add https://ui.refine.dev/r/sign-up-form.json
This installs the complete registration form with password input and validation components.
Usage
Use the sign-up form on your registration page:
import { SignUpForm } from "@/components/refine-ui/form/sign-up-form";
export default function RegisterPage() {
return (
<div className="flex items-center justify-center min-h-screen">
<SignUpForm />
</div>
);
}
The form automatically handles user registration through your authProvider. It includes email and password fields with confirmation, plus client-side validation to ensure passwords match.
Requirements
To use the sign-up form, you need to configure an authProvider with a register method:
import { AuthProvider } from "@refinedev/core";
const authProvider: AuthProvider = {
register: async ({ email, password }) => {
// Your registration logic here
const response = await fetch("/api/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
});
if (response.ok) {
return { success: true };
}
return {
success: false,
error: { message: "Registration failed" },
};
},
// Other authProvider methods...
};