Introduction
Welcome to the Next.js Authentication Template documentation. This template provides a complete authentication solution with multiple providers, internationalization, and a modern UI.
Screens Overview
The template includes the following screens for authentication and user management:
Authentication Screens
| Screen | Route | Component | Description |
|---|
| Login | /login | LoginForm | Email/password login with social providers |
| Register | /register | RegisterForm | User registration with validation |
| Forgot Password | /forgot-password | ForgotPasswordForm | Send password reset email |
| Reset Password | /reset-password | ResetPasswordForm | Set new password with token |
| OTP Verification | /otp | OtpForm | 6-digit code verification with 60s countdown |
Protected Screens
| Screen | Route | Description | Auth Required |
|---|
| Dashboard | /dashboard | Main dashboard after login | Yes |
Auth Components
Reusable components available in the auth feature:
| Component | Path | Description |
|---|
LoginForm | features/auth/components/login-form.tsx | Email/password form with social login buttons |
RegisterForm | features/auth/components/register-form.tsx | Registration form with password validation |
ForgotPasswordForm | features/auth/components/forgot-password-form.tsx | Email input to request password reset |
ResetPasswordForm | features/auth/components/reset-password-form.tsx | New password form with confirmation |
OtpForm | features/auth/components/otp-form.tsx | 6-digit OTP input with countdown timer |
Social Login Components
| Component | Provider | Props |
|---|
GoogleLoginButton | Google OAuth | mode, callbackUrl, disabled, iconOnly, className |
FacebookLoginButton | Facebook OAuth | mode, callbackUrl, disabled, iconOnly, className |
InstagramLoginButton | Instagram OAuth | mode, callbackUrl, disabled, iconOnly, className |
LineLoginButton | LINE OAuth | mode, callbackUrl, disabled, iconOnly, className |
SocialLoginDivider | - | (no props) - Displays "or continue with" |
Utility Components
| Component | Description | Props |
|---|
UserButton | Displays user info or login link | (no props) |
LogoutButton | Sign out button with loading state | variant, size, showIcon, className |
Features
- Multiple Auth Providers - Google, Facebook, Instagram, LINE, and Credentials
- Internationalization - Built-in support for English and Japanese
- Modern UI - Built with Shadcn UI and Tailwind CSS
- Form Validation - Zod schemas with React Hook Form
- Type Safety - Full TypeScript support
- Feature-based Architecture - Organized and scalable code structure
Next Steps
Ready to get started? Follow these guides:
