Modern authentication system built with Next.js 16, Supabase, Shadcn UI, and TypeScript. Features beautiful, accessible UI components with context-based state management, custom hooks, and a clean component architecture. Perfect starter template for projects requiring user authentication.
- 🔐 Complete Authentication Flow - Login, signup, password recovery with OTP verification
- ✉️ Email Verification - 6-digit OTP code verification using Resend
- 📧 Custom Email Templates - Beautiful emails built with React-Email
- 🛡️ Middleware Protection - Automatic redirect for unverified users
- 🎨 Beautiful UI - Built with Shadcn UI components
- ✅ Zod Validation - Type-safe form and data validation
- 🎯 TypeScript - Fully typed for better developer experience
- ⚡ Next.js 16 - Latest Next.js features with App Router
- 🗄️ Supabase - Powerful backend-as-a-service
- 📱 Responsive Design - Works seamlessly on all devices
- ♿ Accessibility - WCAG compliant components
- 🗺️ Centralized Routing - All routes defined in app/routes.ts
- 🎭 Clean Architecture - Well-organized component structure
- Node.js 18.x or higher
- npm
- Supabase account and project
- Resend account for email delivery
- Docker Desktop (optional, for containerization)
- Clone the repository
git clone https://github.com/gal1aoui/Next.js-Supabase-Authentication-System.git
cd Next.js-Supabase-Authentication-System- Install dependencies
npm install- Set up environment variables
Rename .env.example.local to .env.local file in the root directory:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_supabase_publish_key
RESEND_API_KEY=your_resend_api_key
FROM_EMAIL=onboarding@resend.devGet these values from your Supabase Project Settings → API.
- Run the development server
npm run dev- Open your browser
Navigate to http://localhost:3000 to see the application.
.
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── not-found.tsx # Not found page
│ ├── (auth)/ # Authentication pages
│ ├── (root)/ # Dashboard pages
│ ├── routes.ts # App routes
│ └── ...
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ ├── emails/ # Mailing components
│ ├── Logo.tsx/ # App logo component
│ └── ...
├── lib/ # Utility functions
│ ├── supabase/ # Supabase setup
│ └── ...
├── hooks/ # Custom React hooks
├── services/ # App services provider
├── contexts/ # React context providers
├── types/ # TypeScript type definitions
└── public/ # Static assets
- Framework: Next.js 16
- Language: TypeScript
- Authentication: Supabase Auth
- Database: Supabase
- Email Service: Resend
- Email Templates: React Email
- UI Components: Shadcn UI
- Styling: Tailwind CSS
- Validation: Zod
- Font: Geist
- Linter/Formatter: Biome.js
- Containerization: Docker
# 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 Biome linter
npm run format # Format code with Biome
npm run check # Run Biome checks (lint + format check)
# Docker (optional)
# Build
docker build -t image-name:latest .
# Run
docker run -p 3000:3000 --env-file .env.local image-name:latest- Create a new project on Supabase
- Go to Authentication → Sign In/Providers and disable Confirm email
- Configure email templates within project
components/emails(optional) - Rename
.env.example.localto.env.localand paste your keys
Customize the theme by editing app/globals.css. The project uses CSS variables for theming:
:root {
--background: ...;
--foreground: ...;
/* Add your custom variables */
}Publish your Docker image to GitHub Packages for easy distribution and deployment:
- Build and tag your image:
docker build -t ghcr.io/your-username/your-image-name:latest .- Login to GitHub Container Registry:
docker login ghcr.io
# Username: your-github-username
# Password: ********
# for the password you can generate a new token with write:packages rights enabled- Push to registry:
docker push ghcr.io/your-username/your-image-name:latest- Pull and run on any server:
docker pull ghcr.io/your-username/your-image-name:latest
docker run -d -p 3000:3000 --env-file .env.local ghcr.io/your-username/your-image-name:latestBenefits of GitHub Packages:
- Free for public repositories
- Integrated with your GitHub repository
- Version control for Docker images
- Easy team collaboration
- Automated builds with GitHub Actions
All UI components are located in components/ and can be customized individually.
- Next.js Documentation - Learn about Next.js features and API
- Supabase Documentation - Learn about Supabase features
- Shadcn UI Documentation - Browse available components
- Biome.js Documentation - Learn about linting and formatting
The easiest way to deploy your Next.js app is to use the Vercel Platform.
- Push your code to GitHub
- Import your repository on Vercel
- Add environment variables in Vercel project settings
- Deploy!
Check out the Next.js deployment documentation for more details.
This application can be deployed to any platform that supports Next.js:
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin main) - Open a Pull Request
This project is open source and available under the MIT License.
Achref Gallaoui
- GitHub: @gal1aoui
Give a ⭐️ if this project helped you!
For questions or feedback, please open an issue on GitHub.
Made with ❤️ using Next.js and Supabase