shadcn/ui Sign In Form Component | UI Component in Refine v5 - Refine

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:

bash

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.

tsx

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:

tsx

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...
};