Robust Codes

Create auth0 Application | ScreenShots

June 15, 2020

Go to Auth0 and sign in or if you don’t have an acount sing up

Sign up to Auth0

Choose your tenant domain and region

Choose Tenant

Create acount

We are on auth0 dashboard

We choose Applications

There is already a default Application but let’s create a new one



For this example I choose a single page application


We can choose a sample code from quick start

Althought on this post we are going to demostrate a more complete example using a PostgreSQL database, React and GraphQL

We are going to use HASURA, an engine that connects to PostgreSQL database for a production ready GraphQL backend

From Hasura’s github repo we are going to use the Integrating Todo app with Auth0 and JWT authorization with Hasura GraphQL Engine

If we don’t have a heroku account we are going to create one

Heroku SignUP

Then click on button bellow to deploy Hasura GraphQL Engine on Heroku

Deploy HGE on heroku

We choose an application name and click Deploy app

Heroku app create

When deploy finish we click Manage App and go to Settings and click on Reveal Congig Vars

Heroku app settigns

To secure the GraphQL endpoint we need to add a HASURA_GRAPHQL_ADMIN_SECRET and the secret code we are going to use for authetication

Super secret code

Now we go on Open app and add admin secret

Hasura Admin

We download the github project

git clone 

Add moving to prefered app

cd community/sample-apps/todo-auth0-jwt

From community/sample-apps/todo-auth0-jwt directory

cd hasura

We modify config.yaml with our Hasura credentials

admin_secret: MySuperSecretCode

We install the Hasura CLI from npm

npm i --g hasura-cli

And on graphql-engine\community\sample-apps\todo-auth0-jwt\hasura directory we type

hasura migrate apply

Now we are going back to app and we see that a new table named todo added with columns id, task, completed, user_id and if we browse on Permissions tab we can see that the {"user_id":{"_eq":"X-HASURA-USER-ID"}} custom check added

Hasura Permitions

Let’s add a sample todo with a graphQL POST request and x-hasura-admin-secret on headers

mutation insert_todo ($objects: [todo_insert_input!]!){
    insert_todo(objects: $objects) {
      returning {
	"objects": [
			"task": "This is a super todo",
			"user_id": "Admin",
			"completed": true

Hasura GraphQL Query

The x-hasura-admin-secret header is only for use from administator/developer

In any other case we need to pass a JSON Web Token with x-hasura-user-id field

To do we are going to auth0 dashboard on Auth Pipeline -> Rules -> CREATE RULE

Create Rule

We give a rule name and we add the following script

function (user, context, callback) {
  const namespace = "";
  context.idToken[namespace] =
      'x-hasura-default-role': 'user',
      // do some custom logic to decide allowed roles
      'x-hasura-allowed-roles': === '' ? ['user', 'admin'] : ['user'],
      'x-hasura-user-id': user.user_id
  callback(null, user, context);

Save Rule

We copy the application domain


And we are going to to automaticaly create the JWT config


Then we store the JWT secret on HASURA_GRAPHQL_JWT_SECRET enviroment variable


On graphql-engine\community\sample-apps\todo-auth0-jwt\todo-app directory we update the values of src\constants.js

export const GRAPHQL_URL = '';
export const authClientId = "fsYSoT3FcYLzbonYqwDqg5PA1kLtFWeH";
export const authDomain = "";

Now we run the application with

npm i
npm run start

And browse on http://localhost:3000/


On Auth0 dashboad application settings we add the http://localhost:3000/callback on Allowed Callback URLs


We choose login and we redirected to autho0 page to add our credentials



Let’s add a todo


If we decode the JWT token we can see that namespace with x-hasura-user-id from our rule exists on payload


The GraphQL queries return data only for current x-hasura-user-id


Personal blog by Alex Kantas