Setting up Auth0

Added in eventcatalog@2.43.1

i

This feature is available on the Enterprise plan.

info

This guide takes your through setting up a protected sign-in screen for your docs. Before going through this guide, make sure you've first gone through Enabling authentication.

To setup your EventCatalog site with visitor authentication using Auth0, the process looks as follows:

1. Create a new Auth0 application
2. Configure the Auth0 app in EventCatalog
3. Test the authentication

Create a new Auth0 application

First, you will need to create a new Auth0 application in your Auth0 Dashboard.

1. Go to auth0.com and sign up for a free account or login
2. In the Auth0 Dashboard, navigate to Applications → Applications
3. Click Create Application
4. Fill in the application details:
   • Name: EventCatalog
   • Application Type: Select Regular Web Applications
5. Click Create
6. In your new application's Settings tab, configure the following:
   • Allowed Callback URLs:
     • Production: {YOUR_EVENTCATALOG_SITE_URL}/api/auth/callback/auth0
     • Local development: http://localhost:3000/api/auth/callback/auth0
   • Allowed Logout URLs:
     • Production: {YOUR_EVENTCATALOG_SITE_URL}
     • Local development: http://localhost:3000
   • Allowed Web Origins:
     • Production: {YOUR_EVENTCATALOG_SITE_URL}
     • Local development: http://localhost:3000
   • Allowed Origins (CORS):
     • Production: {YOUR_EVENTCATALOG_SITE_URL}
     • Local development: http://localhost:3000
7. Leave Initiate Login URI empty (not required)
8. Click Save Changes
9. Copy the Domain, Client ID, and Client Secret from the app settings

Configure the Auth0 app in EventCatalog

Add your Auth0 Domain, Client ID, and Client Secret to your .env file.

.env

AUTH_AUTH0_ID={YOUR_AUTH0_CLIENT_ID}
AUTH_AUTH0_SECRET={YOUR_AUTH0_CLIENT_SECRET}
AUTH_AUTH0_ISSUER=https://{YOUR_AUTH0_DOMAIN}

Your Auth0 issuer URL should be in the format: https://your-tenant.auth0.com (this is the Domain from your Auth0 application settings).

In your eventcatalog.auth.js file, add the following:

eventcatalog.auth.js

module.exports = {
  enabled: true,
  providers: {
    auth0: {
      clientId: process.env.AUTH_AUTH0_ID,
      clientSecret: process.env.AUTH_AUTH0_SECRET,
      issuer: process.env.AUTH_AUTH0_ISSUER,
    },
  },
};

Test the authentication

Restart your EventCatalog server and test the authentication.

npm run dev

All pages should now be protected and require an Auth0 account to access.

1. Navigate to your EventCatalog site
2. You should be redirected to the sign-in page
3. Click Sign in with Auth0
4. You'll be redirected to your Auth0 login page
5. Enter your credentials or sign up for a new account
6. After successful authentication, you'll be redirected back to EventCatalog

Found an issue?

Remember to setup the prerequisites for this guide:

• Enabling authentication

If you still have problems, please let us know.