@ferdiunal/refine-shadcn-auth

Authentication components for refine.dev with shadcn-ui and better-auth integration.

Features

• 🔐 Complete authentication forms (Login, Register, Forgot Password)
• 📱 Responsive design with shadcn/ui components
• 🎨 Tailwind CSS styling
• 🌍 i18n support (English & Turkish)
• ✅ Form validation with react-hook-form and zod
• 🔧 TypeScript support
• 🚀 Better-auth integration
• 📦 Lightweight and tree-shakeable

Installation

npm install @ferdiunal/refine-shadcn-auth @ferdiunal/refine-shadcn
# or
yarn add @ferdiunal/refine-shadcn-auth @ferdiunal/refine-shadcn
# or
pnpm add @ferdiunal/refine-shadcn-auth @ferdiunal/refine-shadcn
# or
bun add @ferdiunal/refine-shadcn-auth @ferdiunal/refine-shadcn

Usage

Basic Usage

import { LoginForm, RegisterForm, ForgotPasswordForm } from "@ferdiunal/refine-shadcn-auth";

function LoginPage() {
  const handleLogin = (data) => {
    console.log('Login data:', data);
    // Handle login logic
  };

  return (
    <LoginForm
      onSubmit={handleLogin}
      loading={false}
    />
  );
}

With Auth Layout

import { AuthLayout, LoginForm } from "@ferdiunal/refine-shadcn-auth";

function LoginPage() {
  return (
    <AuthLayout
      title="My App"
      subtitle="Welcome back to our platform"
      backgroundImage="/path/to/background.jpg"
    >
      <LoginForm onSubmit={handleLogin} />
    </AuthLayout>
  );
}

Components

LoginForm

<LoginForm
  onSubmit={(data) => console.log(data)}
  loading={false}
  className="w-full max-w-sm"
  defaultValues={{ email: "[email protected]" }}
/>

RegisterForm

<RegisterForm
  onSubmit={(data) => console.log(data)}
  loading={false}
  termsRequired={true}
  className="w-full max-w-sm"
/>

ForgotPasswordForm

<ForgotPasswordForm
  onSubmit={(data) => console.log(data)}
  loading={false}
  backToLoginEnabled={true}
  onBackToLogin={() => navigate('/login')}
/>

AuthLayout

<AuthLayout
  title="My Application"
  subtitle="Secure authentication for modern web apps"
  logo={<MyLogo />}
  backgroundImage="/auth-bg.jpg"
  className="min-h-screen"
>
  {children}
</AuthLayout>

Validation Schemas

The package includes pre-built zod validation schemas:

import {
  loginSchema,
  registerSchema,
  forgotPasswordSchema,
  type LoginFormData,
  type RegisterFormData,
  type ForgotPasswordFormData
} from "@ferdiunal/refine-shadcn-auth";

Internationalization

The package supports i18n through the refine.dev translation system. Make sure to set up your i18n provider with the required translation keys.

Required Translation Keys

{
  "auth": {
    "login": {
      "title": "Login to your account",
      "description": "Enter your email and password below to login to your account",
      "email": "Email",
      "password": "Password",
      "submit": "Login",
      "emailPlaceholder": "[email protected]",
      "passwordPlaceholder": "Enter your password",
      "showPassword": "Show password",
      "hidePassword": "Hide password"
    },
    "register": {
      "title": "Create an account",
      "description": "Enter your information below to create your account",
      "name": "Full name",
      "email": "Email",
      "password": "Password",
      "confirmPassword": "Confirm Password",
      "submit": "Create account",
      "termsLabel": "I agree to the {{terms}} and {{privacy}}",
      "termsLink": "Terms of Service",
      "privacyLink": "Privacy Policy"
    },
    "forgotPassword": {
      "title": "Forgot your password?",
      "description": "Enter your email address and we'll send you a link to reset your password",
      "email": "Email",
      "submit": "Send reset link",
      "backToLogin": "Back to login"
    },
    "form": {
      "emailRequired": "Email is required",
      "emailInvalid": "Please enter a valid email address",
      "passwordRequired": "Password is required",
      "passwordMinLength": "Password must be at least 6 characters",
      "passwordStrength": "Password must contain at least one uppercase letter, one lowercase letter, and one number",
      "nameRequired": "Name is required",
      "confirmPasswordRequired": "Please confirm your password",
      "termsRequired": "You must accept the terms and conditions"
    }
  }
}

Dependencies

This package requires:

• @ferdiunal/refine-shadcn - UI components and theming
• react-hook-form - Form management
• @hookform/resolvers - Form validation resolvers
• zod - Schema validation
• better-auth - Authentication library
• lucide-react - Icons

License

MIT © Ferdi UNAL