Auth0 Authentication Guide
This guide will help you set up Auth0 for secure user authentication and authorization.
Buildfast includes Auth0 integration for secure user authentication and authorization, so you can easily protect routes and pages.
Create an Auth0 Account
Sign up for Auth0 if you haven't already
- Visit auth0.com
- Click "Sign up" and choose "Sign up for free"
- Fill in your information and verify your email
- Choose your region (closest to your users)
- Complete the onboarding questions
Create a New Application
Set up a Regular Web Application for your React app
1. Navigate to Applications
In your Auth0 dashboard, go to Applications → Applications
2. Create Application
- Click "Create Application"
- Name: "Your App Name" (or your preferred name)
- Type: "Regular Web Application"
- Click "Create"
Configure Auth0 Application Settings
Set up URLs in Auth0 dashboard and get your credentials
1. Basic Information
Domain: Copy this (e.g., your-tenant.us.auth0.com)
Client ID: Copy this long string
Client Secret: Copy this long string
Client ID: Copy this long string
Client Secret: Copy this long string
2. Application URIs
Allowed Callback URLs:
http://localhost:3000, https://yourdomain.comAllowed Logout URLs:
http://localhost:3000, https://yourdomain.com3. Save Changes
Scroll down and click "Save Changes"
Set Up Environment Variables
Add your Auth0 credentials to your project
Add to your .env file:
# Auth0 Configuration
AUTH0_DOMAIN=your-tenant.us.auth0.com
AUTH0_CLIENT_ID=your_client_id_here
AUTH0_CLIENT_SECRET=your_client_secret_here
AUTH0_SECRET=your_secret_here
AUTH0_DOMAIN=your-tenant.us.auth0.com
AUTH0_CLIENT_ID=your_client_id_here
AUTH0_CLIENT_SECRET=your_client_secret_here
AUTH0_SECRET=your_secret_here
You can use [openssl rand -hex 32] in terminal to generate a 32 bytes value for AUTH0_SECRET
Your Auth0 client is ready to be used in your app in lib/auth0.js. This instance provides methods for handling authentication, sessions and user data.
Customize Login Experience
Optional: Customize the Auth0 Universal Login page
1. Universal Login
Go to Branding → Universal Login to customize:
- Logo and colors
- Custom CSS
- Background
2. Social Connections (Optional)
Enable social logins in Authentication → Social
- GitHub
- And many others
Protect Routes and Pages
Protect routes and pages with Auth0
You can protect routes and pages with Auth0 by using the auth0 instance from lib/auth0. Here's how to implement authentication checks in your pages:
- Use middleware to protect routes and pages (see example middleware.ts).
- Use the auth0 instance to get the session and user data (see example app/layout.tsx).
- Use the auth0 instance to redirect to the login page if the user is not authenticated (see example app/dashboard/layout.tsx).
Remember: Always check for a session on protected pages. The auth0 instance provides all the methods you need for authentication.
Test Your Integration
Verify authentication is working
- Start your development server:pnpm dev
- Click the login button in your app
- You should be redirected to Auth0's login page
- Create a test account or login
- You should be redirected back to your app, now logged in
- Check the browser's developer tools to see the user object or console.log(session.user) in the root layout.tsx file and check the console for the user object