logo My Digital Garden

Template for building a Gatsby project with Hasura and Auth0

By James Kolean on Jul 22, 2020
Source repository: https://gitlab.com/jameskolean/gatsby-reservation
GatsbyAuthentication & AuthorizationGraphQL

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) {

    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 2023 Digital Garden cultivated by James Kolean.