Supabase Auth Template

A complete Next.js authentication template with Supabase including all auth providers.

A production-ready Next.js authentication template powered by Supabase, including all authentication providers (email, OAuth, password reset, email confirmation) with a modern UI.

Video Tutorial

Link: Coming Soon

📸 Gallery

Click image or here to view full gallery →

🚀 Quick Start

Using npx (Recommended)

npx osdev-auth-supabase my-app
cd my-app
npm run dev

Manual Setup

If you cloned the repository directly:

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your Supabase credentials

# Run development server
npm run dev

See INSTRUCTIONS.md for detailed setup steps.

✨ What's Included

• ✅ Complete Authentication Flows

  • Sign up with email/password
  • Login with email/password
  • Password reset flow
  • Email confirmation
  • OAuth callback handling

• ✅ All Supabase Auth Providers Supported

  • Google, GitHub, and more
  • Easy to add additional providers

• ✅ User Data Storage

  • User data stored in raw_user_meta_data:

    {
      first_name: "Omran",
      last_name: "Soliman"
    }

• ✅ Modern UI

  • Built with shadcn/ui components
  • Dark/Light theme support
  • Toast notifications
  • Responsive design

• ✅ Error Handling

  • Custom error pages
  • 404 not found page
  • Proper error messages

• ✅ TypeScript

  • Fully typed for better DX
  • Type-safe Supabase client

📦 Dependencies

All required dependencies are included in package.json:

• Supabase: @supabase/supabase-js, @supabase/ssr
• UI Components: shadcn/ui (alert, button, card, input, label, sonner)
• Icons: react-icons, lucide-react
• Theme: next-themes

📁 Project Structure

├── app/
│   ├── (auth)/
│   │   ├── login/              # Login page
│   │   ├── signup/             # Signup page
│   │   ├── forgot-password/    # Password reset request
│   │   ├── reset-password/     # Update password page
│   │   └── auth/
│   │       ├── callback/       # OAuth callback handler
│   │       ├── confirm/        # Email confirmation handler
│   │       └── confirmed/      # Confirmation success page
│   ├── error/                  # Custom error page
│   ├── not-found/              # 404 page
│   └── home/                   # Protected home page (example)
├── components/
│   ├── LoginForm.tsx
│   ├── SignupForm.tsx
│   ├── RequestResetForm.tsx
│   ├── UpdatePasswordForm.tsx
│   ├── ProvidersButtons.tsx
│   └── ThemeToggle.tsx
├── lib/
│   ├── auth-functions.ts       # All auth operations
│   ├── auth-utils.ts           # Server-side utilities
│   └── auth-utils-client.ts    # Client-side utilities
├── hooks/
│   └── useAuthRedirectClient.ts
├── utils/supabase/
│   ├── client.ts
│   ├── server.ts
│   └── middleware.ts
├── IMPORTANT/
│   ├── EmailConfirmSignUp.md   # Email template
│   └── EmailResetPassword.md   # Email template
├── middleware.ts               # Auth middleware
└── INSTRUCTIONS.md             # Complete setup guide

🔧 Setup Requirements

Prerequisites

• Node.js 18.0 or higher
• npm or yarn
• Supabase account (Sign up here)

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Get these from your Supabase Dashboard → Settings → API

Supabase Configuration

1. Email Templates (Authentication → Email Templates):

   • Update "Confirm Signup" template (see IMPORTANT/EmailConfirmSignUp.md)
   • Update "Reset Password" template (see IMPORTANT/EmailResetPassword.md)

2. URL Configuration (Authentication → URL Configuration):

   • Site URL: http://localhost:3000
   • Redirect URLs:
     • http://localhost:3000/auth/callback
     • http://localhost:3000/auth/confirm

3. OAuth Providers (Optional):

   • Enable providers in Authentication → Providers
   • Add OAuth credentials

🛠️ Commands

# Development
npm run dev          # Start dev server at http://localhost:3000

# Production
npm run build        # Build for production
npm start           # Start production server

# Code Quality
npm run lint        # Run ESLint

🌐 Deploy

Vercel (Recommended)

1. Push code to GitHub
2. Import to Vercel
3. Add environment variables
4. Deploy

Don't forget to update Supabase URLs with your production domain!

📚 Documentation

• INSTRUCTIONS.md - Complete setup guide with troubleshooting
• IMPORTANT/ - Email templates for Supabase
• Code Comments - Every file is well-documented

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Omran Soliman

🔗 Links

• GitHub Repository
• Report Issues
• npm Package

⭐ Support

If this template helped you, please:

• Give it a ⭐ on GitHub
• Share it with others
• Report issues if you find any

🎯 Perfect For

• SaaS applications
• Social platforms
• Community websites
• E-commerce sites
• Any project requiring authentication

---

Made with ❤️ by Omran Soliman