Two-Step Verification
A secure and user-friendly two-step verification component with a 5-digit code input interface. Features automatic focus management, paste support, and elegant Mac-style design with dark mode compatibility.
Preview
Sign In With Two-Step Verification
We've sent a 5 digit code to **********060
Enter the code you received
Didn't receive a code?
Installation
You can add this component to your project using the CLI or by manually copying the code.
Basic Usage
After installation, import and use the component in your React application:
Component Structure
The two-step verification component consists of several key elements:
1. Mac-Style Card Design
- Clean white/dark card with rounded corners and shadow
- Mac-style window controls (red, yellow, green dots)
- Responsive padding and layout
2. Logo Display
- Customizable logo with glow effect
- Fallback placeholder if image fails to load
- Responsive sizing for different screen sizes
3. Input Fields
- 5 individual input fields for verification code
- Auto-focus progression as user types
- Numeric-only input validation
- Visual focus states and hover effects
4. Smart Interactions
- Auto-advance: Moves to next field when digit is entered
- Backspace navigation: Returns to previous field when backspacing on empty field
- Paste handling: Intelligently distributes pasted codes across fields
- Focus management: Automatically focuses first field on mount
Customization
Styling
The component uses Tailwind CSS classes and can be customized by modifying the className properties:
Logo Customization
Replace the default logo by modifying the image source:
Phone Number Display
Customize the masked phone number display:
Advanced Features
Code Validation
Add validation logic to handle the complete verification code:
Resend Functionality
Implement the resend code functionality: