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  and API , configuring a rule on Auth0  to add custom claims to vended JWTs, and finally configuring Cube to use Auth0.

Create an application

First, go to the Auth0 dashboard , 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  and the Auth0 SPA SDK . We recommend using the SPA SDK wherever possible, as per Auth0’s own developer advice . 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 . First, go to the Auth0 dashboard  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  or Vue  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  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  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 . You can use it as a starting point for your own Cube application.