Authenticate requests to Cube with Auth0

Introduction

In this guide, you'll learn how to integrate Auth0 authentication with a Cube deployment. If you already have a pre-existing application on Auth0 that you'd like to re-use, please skip ahead to Configure Cube.

We'll be creating an Auth0 application (opens in a new tab) and API (opens in a new tab), configuring a rule on Auth0 (opens in a new tab) to add custom claims to vended JWTs, and finally configuring Cube to use Auth0.

Create an application

First, go to the Auth0 dashboard (opens in a new tab), and click on the Applications menu option on the left and then click the Create Application button.

In the popup, set the name of your application and select Single Page Web Applications.

Next, go to the application's settings and add the appropriate callback URLs for your application (http://localhost:4000 for the Developer Playground).

Custom claims

You can also configure custom claims for your JWT token. Auth0 has two SDKs available; Auth0.js (opens in a new tab) and the Auth0 SPA SDK (opens in a new tab). We recommend using the SPA SDK wherever possible, as per Auth0's own developer advice (opens in a new tab). If you're using @auth0/auth0-angular or @auth0/auth0-react, then the SPA SDK is automatically included.

Open the Auth0 dashboard, click on 'Rules' and add a rule to add any custom claims to the JWT.

Auth0 SPA SDK

function (user, context, callback) {
  const namespace = "http://localhost:4000/";
  context.accessToken[namespace] =
    {
      'company_id': 'company1',
      'user_id': user.user_id,
      'roles': ['user'],
    };
  callback(null, user, context);
}

Create an API

If you're using the Auth0 SPA SDK, you'll also need to create an API (opens in a new tab). First, go to the Auth0 dashboard (opens in a new tab) and click on the APIs menu option from the left sidebar, then click the Create API button.

In the 'New API' popup, set a name for this API and an identifier (e.g. cube-app), then click the Create button.

In your application code, configure your API identifier as the audience when initializing Auth0. If you're using the @auth0/auth-react package for your application front-end, this might look something like this:

<Auth0Provider
  domain={process.env.AUTH_DOMAIN}
  client_id={process.env.AUTH_CLIENT_ID}
  redirect_uri={window.location.origin}
  onRedirectCallback={() => {}}
  audience="cube"
>

Refer to Auth0's documentation for instructions on configuring Angular (opens in a new tab) or Vue (opens in a new tab) applications.

Configure Cube

Now we're ready to configure Cube to use Auth0. Go to your Cube project and open the .env file and add the following, replacing the values wrapped in <>.

CUBEJS_JWK_URL=https://<AUTH0-SUBDOMAIN>.auth0.com/.well-known/jwks.json
CUBEJS_JWT_AUDIENCE=<APPLICATION_URL>
CUBEJS_JWT_ISSUER=https://<AUTH0-SUBDOMAIN>.auth0.com/
CUBEJS_JWT_ALGS=RS256
CUBEJS_JWT_CLAIMS_NAMESPACE=<CLAIMS_NAMESPACE>

Testing with the Developer Playground

Retrieving a JWT

Go to the OpenID Playground from Auth0 (opens in a new tab) to and click Configuration.

Enter the following values:

• Auth0 domain: <AUTH0-SUBDOMAIN>.auth0.com
• OIDC Client ID: Retrieve from Auth0 Application settings page
• OIDC Client Secret: Retrieve from Auth0 Application settings page
• Audience: Retrieve from Auth0 API settings

Click 'Use Auth0 Discovery Document' to auto-fill the remaining values, then click Save.

Now click Start; if the login is successful, you should see the code, as well as a button called 'Exchange'. Click on it to exchange the code for your tokens:

Copy the access_token from the response, and use the JWT.IO Debugger (opens in a new tab) to decode the token and verify any custom claims were successfully added.

Set JWT in Developer Playground

Now open the Developer Playground (at http://localhost:4000) and on the Build page, click Add Security Context.

Click the Token tab, paste the JWT from OpenID Playground and click the Save button.

Close the popup and use the Developer Playground to make a request. Any data models using the Security Context should now work as expected.

Example

To help you get up and running, we have an example project which is configured to use Auth0 (opens in a new tab). You can use it as a starting point for your own Cube application. You can also use our Multi-Tenant Analytics with Auth0 and Cube guide (opens in a new tab) for a more detailed walkthrough.