Live Demo

Auth0 Authentication

Learn how to secure your application with Auth0 Authentication.

Empower your users with effortless login using our built-in Auth0 integration. This robust solution leverages the power of Auth0, offering unparalleled security features, a wide range of social login options for added convenience, and a user-friendly management dashboard for seamless user control.

You're free to add (or remove) any of the methods supported by Auth0's Authentication.

Configuration

If you open the global configuration at src/config.ts, you'll find the auth object:

import { AuthStrategy } from '@/lib/auth/strategy';
 
export const config = {
  // ...
  auth: {
    strategy: AuthStrategy.AUTH0,
  },
  // ...
};

To use this method, you need to set the auth.strategy to AuthStrategy.AUTH0.

Getting Started

To get started with Auth0 Authentication, you'll need a Auth0 account. If you don't have one yet, you can sign up at https://auth0.com.

Once you have a Auth0 account, follow these steps:

  • Set Up Your Tenant in Auth0: Create a new tenant in your Auth0 account.
  • Create Your Application: Create a new application in your Auth0 account and configure the settings to match your application's requirements.
  • Retrieve Auth0 API Credentials: In your Auth0 application settings, you'll find API credentials that you'll need to integrate authentication into your application.
  • Set Up Environment Variables: Set up environment variables to use your Auth0 API credentials. These variables will be used securely in your application.

Setup

Auth0 needs a few settings to be configured in their Dashboard to work correctly. This guide will walk you through the steps to get your Auth0 authentication setup.

Authentication URLs

The first thing you need to do is to set the authentication URLs in the Auth0 Dashboard. These URLs are used to redirect users to the correct page after they have logged in or signed up.

  1. Go to the Auth0 Dashboard.
  2. Select the application you want to use.
  3. Go to the Application URIs section.
  4. Add your Redirect URLs to Allowed Callback URLS. This is the URL of your site with /auth/auth0/callback appended to it (e.g. https://my-site.com/auth/auth0/callback).
  5. Add your Site URL to Allowed Logout URLs. This is the URL where users will be redirected after they log out (e.g. https://my-site.com).
  6. Add your Site URL to Allowed Web Origins. This is the URL where your application is hosted (e.g. https://my-site.com).
  7. Add your Site URL to Allowed Origins (CORS). This is the URL where your application is hosted (e.g. https://my-site.com).

How it Works

  1. User Login: When a user tries to access a protected route, they will be redirected to the Auth0 login page.
  2. Creating a Session: Upon successful validation, they will be redirected back to your application and a session will be created and stored in a secure cookie (or localStorage for client side integrations).
  3. React Server Components: With the session token in place, React Server Components come into play. These components are used to fetch user-specific data directly on the server, utilizing the session token for authentication. This ensures that sensitive user information remains secure.
  4. Rendering React Components: The data fetched by React Server Components is then passed to the relevant React components for rendering. This allows us to provide a personalized user experience without exposing sensitive information to the client-side JavaScript.

Explore More

Auth0 offers a wide range of features and integrations that you can use to enhance your application's security and user experience. Here are a few resources to help you get started: