Version: 5.xx.xx
Source Code<SignInForm />
The SignInForm component provides a ready-to-use sign-in interface for Refine applications. It handles user authentication through email/password and can be extended for social logins.
Installation
Add the sign-in form to your project:
npx shadcn@latest add https://ui.refine.dev/r/sign-in-form.json
This installs the complete sign-in form with email and password input components.
Usage
The SignInForm is typically used on a dedicated login page. It relies on Refine's useLogin hook and authProvider for its functionality.
import { SignInForm } from "@/components/refine-ui/form/sign-in-form";
import { cn } from "@/lib/utils";
export default function LoginPage() {
return (
<div
className={cn(
"flex",
"items-center",
"justify-center",
"h-screen",
"w-screen",
)}
>
<SignInForm />
</div>
);
}
The form automatically handles user authentication through your authProvider. It includes email and password fields, along with client-side validation.
Requirements
To use the sign-in form, you need to configure an authProvider with a login method:
import { AuthProvider } from "@refinedev/core";
const authProvider: AuthProvider = {
login: async ({ email, password }) => {
// Your authentication logic here
const response = await fetch("/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
});
if (response.ok) {
return { success: true };
}
return { success: false, error: new Error("Invalid credentials") };
},
// Other authProvider methods...
};