A comprehensive user management system implementing modern authentication patterns. Features secure user registration, session management, and role-based access control with protected routes—replicating the authentication flows that real applications require.
- Complete User Lifecycle: Secure registration, email verification, password management
- Role-Based Access Control: Admin and user roles with dynamic content visibility
- Session Management: Protected routes with intelligent redirects and session handling
- Account Security: Password reset, email change verification, and account recovery flows
- ✅ User registration with email verification
- ✅ Secure login/logout with session persistence
- ✅ Password reset via email with secure token validation
- ✅ Account recovery when email address is compromised
- ✅ Role-based content rendering (User vs Admin views)
- ✅ Profile editing with necessary validation
- ✅ Email update requiring re-verification
- ✅ Password change with current password confirmation
- ✅ Protected routes preventing unauthorized access
- ✅ Unauthenticated routes redirecting logged-in users
- ✅ Comprehensive error handling with user-friendly messages
- ✅ Loading states for all asynchronous operations
- Frontend: React, Next.js (App Router), Styled Components
- Backend Services: Firebase Authentication & Firestore Database
- React Patterns: Context API, Prop Validation, Custom Hooks, Protected Route Components
- Security Features: Protected routes, role-based rendering, secure session handling
- Deployment: Vercel
-
Clone the repository:
git clone https://github.com/falsydev/user-auth.git cd user-auth -
Install dependencies:
npm install
-
Configure environment variables:
- Copy
env.exampleto.env.local - Add your Firebase config values:
NEXT_PUBLIC_FIREBASE_API_KEY="your_api_key" NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your_project_id.firebaseapp.com" NEXT_PUBLIC_FIREBASE_PROJECT_ID="your_project_id" NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your_project_id.firebasestorage.app" NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="your_sender_id" NEXT_PUBLIC_FIREBASE_APP_ID="your_app_id"
- Copy
-
Run the development server:
npm run dev
Open http://localhost:3000 to view it in the browser.
user-auth/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── dashboard/ # Protected dashboard routes
│ │ │ └── settings/ # User settings pages
│ │ │ ├── change-password/
│ │ │ ├── edit-profile/
│ │ │ └── update-email/
│ │ ├── login/ # Login page
│ │ ├── signup/ # Registration page
│ │ ├── verify-user/ # Email verifications
│ │ ├── layout.js # Root layout
│ │ └── page.js # Home page
│ ├── assets/ # Static assets
│ ├── components/ # Reusable UI components
│ ├── context/ # React Context providers
│ │ └── AuthContext.js # Authentication state management
│ ├── custom-hooks/ # Custom React hooks
│ │ ├── useInterval.js # Interval management
│ │ ├── useTimeout.js # Timeout management
│ │ └── useUpdateState.js # State update utilities
│ ├── lib/ # Utility libraries
│ │ └── firebase.js # Firebase configuration
│ │ ├── StyledComponentsRegistry.js
│ ├── styles/ # Styled Components
│ │ ├── breakpoints.js # Responsive breakpoints
│ │ └── global.css # Global styles
│ └── utils/ # Utility functions
│ ├── ActionCodeSettings.js
│ ├── constants.js # App constants
│ ├── getErrorMessage.js # Error handling
│ ├── space.js # Spacing utilities
│ └── validateFormFields.js # Form validation
├── .env.local # Environment variables (create from .env.example)
├── next.config.js # Next.js configuration
└── package.json # Dependencies and scripts
-
Create a Firebase project at Firebase Console
-
Enable Authentication:
- Go to Authentication > Sign-in method
- Enable Email/Password provider
- Configure authorized domains
-
Create Firestore Database:
- Go to Firestore Database
- Create database in production mode
- Set up security rules:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}- Configure Authentication Settings:
- Set up email templates for verification and password reset
- Configure action URLs to point to your application
Create a .env.local file with your Firebase configuration:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY="your_api_key"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your_project_id.firebaseapp.com"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="your_project_id"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your_project_id.firebasestorage.app"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="your_sender_id"
NEXT_PUBLIC_FIREBASE_APP_ID="your_app_id"# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
# Deployment
npm run deploy # Deploy to Vercel- Password Requirements: Minimum 6 characters (Add your complexity on validatePassword() in validateFormFields.js file)
- Email Verification: Required for account activation
- Session Management: Secure JWT tokens with automatic refresh
- Rate Limiting: Built-in Firebase protection against brute force attacks
- Firestore Security Rules: Server-side data validation and access control
- Role-Based Access: Dynamic content rendering based on user roles
- Input Validation: Client and server-side validation for all forms
- XSS Protection: Sanitized inputs and secure rendering
-
Connect your repository to Vercel:
- Go to vercel.com and sign up/login
- Click "New Project" and import your GitHub repository
- Configure environment variables in Vercel dashboard
-
Set environment variables:
# In Vercel Dashboard > Project Settings > Environment Variables NEXT_PUBLIC_FIREBASE_API_KEY="your_api_key" NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your_project_id.firebaseapp.com" NEXT_PUBLIC_FIREBASE_PROJECT_ID="your_project_id" NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your_project_id.firebasestorage.app" NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="your_sender_id" NEXT_PUBLIC_FIREBASE_APP_ID="your_app_id"
-
Deploy:
- Vercel will automatically deploy on every push to main branch
- Or manually deploy:
vercel --prod
- Netlify: Connect repository for automatic deployments
- Cloudflare Workers: Deploy using Wrangler CLI for edge computing
- Traditional Hosting: Build with
npm run buildand deploy static files
- OAuth Integration: Google, GitHub, and Microsoft sign-in options
- Two-Factor Authentication: Enhanced security with 2FA implementation
- PWA Features: Offline functionality and mobile app experience
- Admin Dashboard: User management with analytics and bulk operations
- Performance Optimization: Code splitting, lazy loading, and caching strategies
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow existing code style and conventions
- Write tests for new features
- Update documentation for API changes
- Ensure all tests pass before submitting PR
This project is licensed under the MIT License - see the LICENSE file for details.
- Firebase Team for providing robust authentication services
- Next.js Team for the excellent React framework
- React Community for continuous inspiration and best practices
- Open Source Contributors who make projects like this possible
- Email: hello@saravanan.dev
Built with ❤️ by Saravanan