Authentication Form

Installation

pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add https://ui.sanjid.shop/r/auth-form.json

Backend Integration

The form expects backend endpoints for authentication. Here's how to set up a complete auth system:

1. Login Route: /app/api/auth/login/route.ts

1import { NextResponse } from "next/server";2import bcrypt from "bcryptjs";3import jwt from "jsonwebtoken";4
5export async function POST(request: Request) {6  try {7    const { email, password } = await request.json();8
9    if (!email || !password) {10      return NextResponse.json(11        { error: "Email and password are required" },12        { status: 400 },13      );14    }15
16    // Validate user credentials (replace with your database logic)17    const user = await getUserByEmail(email);18
19    if (!user || !bcrypt.compareSync(password, user.hashedPassword)) {20      return NextResponse.json(21        { error: "Invalid credentials" },22        { status: 401 },23      );24    }25
26    // Generate JWT token27    const token = jwt.sign(28      { userId: user.id, email: user.email },29      process.env.JWT_SECRET!,30      { expiresIn: "7d" },31    );32
33    return NextResponse.json({34      success: true,35      message: "Login successful",36      user: { id: user.id, email: user.email, name: user.name },37      token,38    });39  } catch (error) {40    console.error("Login error:", error);41    return NextResponse.json(42      { error: "Authentication failed" },43      { status: 500 },44    );45  }46}

2. Signup Route: /app/api/auth/signup/route.ts

1import { NextResponse } from "next/server";2import bcrypt from "bcryptjs";3
4export async function POST(request: Request) {5  try {6    const { name, email, password } = await request.json();7
8    if (!name || !email || !password) {9      return NextResponse.json(10        { error: "All fields are required" },11        { status: 400 },12      );13    }14
15    // Check if user already exists16    const existingUser = await getUserByEmail(email);17    if (existingUser) {18      return NextResponse.json(19        { error: "User already exists" },20        { status: 409 },21      );22    }23
24    // Hash password and create user25    const hashedPassword = bcrypt.hashSync(password, 12);26    const user = await createUser({27      name,28      email,29      hashedPassword,30    });31
32    return NextResponse.json({33      success: true,34      message: "Account created successfully",35      user: { id: user.id, email: user.email, name: user.name },36    });37  } catch (error) {38    console.error("Signup error:", error);39    return NextResponse.json(40      { error: "Account creation failed" },41      { status: 500 },42    );43  }44}

3. Environment Variables

Add these to .env.local:

1JWT_SECRET=your_super_secret_jwt_key_here2DATABASE_URL=your_database_connection_string3GOOGLE_CLIENT_ID=your_google_oauth_client_id4GITHUB_CLIENT_ID=your_github_oauth_client_id

Props

Usage Examples

Features

• Seamless Mode Switching: Switch between login and signup with smooth animations
• Real-time Validation: Live validation with visual feedback and error messages
• Password Strength: Built-in password validation with visibility toggle
• Social Authentication: Pre-built social auth buttons with icons
• Micro-interactions: Smooth animations and hover effects throughout
• Accessibility: Full keyboard navigation and screen reader support
• Responsive Design: Works perfectly on mobile and desktop
• Dark Mode: Full dark mode support with proper contrast
• Form State Management: Automatic form state handling and validation
• Customizable: Highly customizable with props and className overrides
• TypeScript: Full TypeScript support with proper type definitions

Animation Details

The component uses Framer Motion for smooth animations:

• Form Entry: Scale and fade-in animation with staggered children
• Field Transitions: Blur-to-focus transitions when fields appear
• Mode Switching: Smooth transitions between login and signup modes
• Validation Feedback: Animated success/error indicators
• Button States: Loading states with spinner animations
• Hover Effects: Subtle scale and color transitions

Customization

1<AuthForm className="mx-auto max-w-lg bg-white/80 backdrop-blur-md">2  <AuthHeader className="space-y-4 text-center" />3  <AuthField name="email" label="Email Address" className="mb-6" />4  <AuthSubmit className="bg-gradient-to-r from-blue-500 to-purple-600" />5</AuthForm>

1<AuthHeader2  title={{3    login: "Welcome Back!",4    signup: "Join Our Community",5  }}6  subtitle={{7    login: "We missed you",8    signup: "Start your journey today",9  }}10/>

1<AuthField name="company" label="Company" showOnlyFor="signup" />2<AuthField name="remember" label="Remember me" type="checkbox" showOnlyFor="login" />