Auth0 free tier gives you 25,000 monthly active users.
Setup Auth0
1
Create Auth0 Account
- Go to auth0.com and sign up
- Create a new tenant
- Click Applications → Create Application
- Name your application (e.g., “My SaaS App”)
- Choose Regular Web Application → Next.js
- Click Create
Keep this tab open—you’ll need these values in the next step.
2
Configure Callback URLs
In your Auth0 application settings, add these URLs:Allowed Callback URLs:Allowed Logout URLs:Allowed Web Origins:Click Save Changes.
3
Add Keys to Your App
Copy these values from Auth0 settings:Generate Copy the output and paste it after
- Domain (e.g.,
dev-xyz123.us.auth0.com) - Client ID
- Client Secret (click “Show” to reveal)
.env.local:.env.local
AUTH0_SECRET:Terminal
AUTH0_SECRET=4
Test It
Restart your dev server:Click Sign In in your header. You should see the Auth0 login screen.Create an account and sign in. Done.
Terminal
Advanced
Advanced
Add Social Logins
Google login is enabled by default but needs verification for production.Add Google Login (Production)
Add Google Login (Production)
- Go to Google Cloud Console
- Create a new project and open it
- Create OAuth credentials
- Open OAuth consent screen and fill in the required fields
- After that, click Create OAuth client ID
- Choose Web application
- Set Authorized JavaScript origins to your domain
e.g.https://yourdomain.com - Set Authorized redirect URIs to your Auth0 callback URL
e.g.https://xxxxxxxxxx.auth0.com/login/callback - Click Create and save the credentials (Client ID and Client Secret)
- In Auth0, go to Authentication → Social → Google
- Paste the Google Client ID and Client Secret
- Save
- Done. Google social login is now configured and ready to use in production.
Add GitHub Login
Add GitHub Login
- Go to GitHub Settings
- Click New OAuth App
- Fill in:
- Application name: Your App Name
- Homepage URL:
https://yourapp.com - Callback URL:
https://YOUR_AUTH0_DOMAIN/login/callback
- Copy Client ID and Secret
- In Auth0: Authentication → Social → GitHub
- Add credentials and enable
Add More Providers
Add More Providers
Auth0 supports 30+ providers including Microsoft, Apple, Twitter/X, and LinkedIn.Go to Authentication → Social to configure additional providers.
How It Works
- User clicks “Sign In”
- Your app redirects to Auth0
- Auth0 shows login form
- User enters credentials
- Auth0 redirects back with session
- User sees dashboard
Customization
Customize Login Screen
Customize Login Screen
In Auth0 dashboard:
- Go to Branding → Universal Login
- Upload your logo
- Set brand colors
- Save changes
Require Email Verification
Require Email Verification
- Settings → Tenant Settings → General
- Enable “Require email verification”
- Customize email templates in Branding → Email Templates
Troubleshooting
Callback URL mismatch error
Callback URL mismatch error
- Check URLs in Auth0 settings match exactly
- No trailing slashes
- Include both localhost and production URLs
