Template for building a Gatsby project with Hasura and Auth0

This post is a quickstart template for new projects that are written in Gatsby and use Hasura for data persistence and Auth0 for Authentication and Authorization. Other posts go into details of setting up Gatsby and Hasura and Auth0. This post's purpose is to provide a working example and show where settings in Netlify, Hasura, and Auth0 are.

Auth0 settings

Auth0 App Setup

Auth0 App URL Setup

Auth0 Rule Setup

function (user, context, callback) {
  const defaultUser = 'user';
  let assignedRoles = (context.authorization || {}).roles;
  if (! assignedRoles) {
    assignedRoles = [defaultUser];
   } else if (assignedRoles.indexOf(defaultUser) === -1) {
     assignedRoles.push(defaultUser);
   }

  const namespace = "https://hasura.io/jwt/claims";
  context.idToken[namespace] =
    {
      'x-hasura-default-role': defaultUser,
      // do some custom logic to decide allowed roles
      'x-hasura-allowed-roles': assignedRoles,
      'x-hasura-user-id': user.user_id
    };
  callback(null, user, context);
}

Netlify settings

Netlify Environmental Variables

Hasura settings

Example Hasura Permission


Copyright © 2020 Code Green LLC