A modern, secure, and production-ready authentication template built with Next.js 14 and Supabase. This template provides a complete authentication system with multiple OAuth providers, reCAPTCHA protection, and a beautiful responsive UI.

• Email/Password Authentication - Secure user registration and login
• Multiple OAuth Providers - Google, Apple, and more
• reCAPTCHA Protection - Bot prevention and spam protection
• Email Verification - Secure email confirmation system
• Password Reset - Secure password recovery flow
• JWT Token Management - Automatic session handling
• Protected Routes - Route-level authentication guards

• Modern Design - Clean, professional interface
• Responsive Layout - Perfect on desktop, tablet, and mobile
• Smooth Animations - Engaging user interactions
• Dark/Light Mode - Theme switching support
• Form Validation - Real-time input validation
• Loading States - Beautiful loading indicators

• Next.js 14 - Latest features and optimizations
• Server Components - Enhanced performance
• Optimized Images - Automatic image optimization
• Code Splitting - Efficient bundle loading
• SEO Optimized - Meta tags and structured data

• Node.js 18.0 or later
• npm, yarn, pnpm, or bun
• Supabase Account - Create one here
• Google OAuth Credentials (optional)
• Apple Developer Account (optional)
• reCAPTCHA Site Key (optional)

1. Clone the repository

git clone https://github.com/wardaowais/Supabase-Next-Auth-Template.git
cd supabase-auth-template

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Set up environment variables

Create a .env.local file in the root directory:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_SUPABASE_PROJECT_ID=your_project_id

# Database Password (for reference)
NEXT_PUBLIC_SUPABASE_PASSWORD=your_database_password

# reCAPTCHA (optional but recommended)
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key

# OAuth Providers (optional)
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
NEXT_PUBLIC_APPLE_CLIENT_ID=your_apple_client_id

4. Configure Supabase

In your Supabase dashboard:

• Go to Authentication → Settings
• Add your site URL: http://localhost:3000
• Configure OAuth providers (Google, Apple, etc.)
• Enable email confirmations if desired

5. Set up reCAPTCHA (optional)

• Go to Google reCAPTCHA
• Create a new site key
• Add your domain: localhost for development
• Copy the site key to your .env.local

6. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the result.

├── app/
│   ├── (auth)/
│   │   ├── sign-in/
│   │   ├── sign-up/
│   │   └── reset-password/
│   ├── dashboard/
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── components/
│   ├── ui/
│   ├── auth/
│   ├── Navbar.js
│   └── Footer.js
├── lib/
│   ├── supabase/
│   │   ├── client.js
│   │   └── server.js
│   └── utils.js
├── public/
└── README.md

1. Create a new Supabase project
2. Go to Settings → API
3. Copy your URL and anon key
4. Add to your .env.local file

1. Go to Google Console
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URIs:
   • https://your-project.supabase.co/auth/v1/callback
6. Add client ID to Supabase Auth settings

1. Go to Apple Developer
2. Create a new identifier
3. Configure Sign in with Apple
4. Add client ID to Supabase Auth settings

1. Visit reCAPTCHA Admin
2. Create a new site
3. Choose reCAPTCHA v2 or v3
4. Add your domains
5. Copy site key to environment variables

import { createClient } from '@/lib/supabase/client'

const supabase = createClient()

// Sign up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123'
})

// Sign in
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
})

// Sign out
const { error } = await supabase.auth.signOut()

// Google OAuth
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${origin}/auth/callback`
  }
})

// Apple OAuth
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'apple',
  options: {
    redirectTo: `${origin}/auth/callback`
  }
})

import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export default async function ProtectedPage() {
  const supabase = createClient()
  
  const { data: { user } } = await supabase.auth.getUser()
  
  if (!user) {
    redirect('/sign-in')
  }
  
  return <div>Protected content</div>
}

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

1. Push your code to GitHub
2. Import your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Update Supabase settings with your production URL
5. Deploy!

• Netlify - Static site hosting
• Railway - Full-stack deployment
• Digital Ocean - VPS deployment
• AWS Amplify - Serverless deployment

Need to update recaptcha just

• Tailwind CSS - Utility-first CSS framework
• Custom Components - Reusable UI components
• Theme Configuration - Easy color and font customization

1. Configure provider in Supabase dashboard
2. Add client credentials to environment variables
3. Update OAuth component with new provider

• Modify components in /components/auth/
• Update authentication logic in /lib/supabase/
• Add custom validation rules

• Next.js Documentation - Learn about Next.js features and API
• Learn Next.js - Interactive Next.js tutorial
• Next.js GitHub repository

• Supabase Documentation
• Supabase Auth Documentation
• Supabase JavaScript Client

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

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the documentation
• Join the Supabase Discord

If this project helped you, please give it a ⭐ on GitHub!

Built with ❤️ using Next.js and Supabase