Skip to content

A Gatsby starter in TypeScript for authenticating via Auth0 and using the JWT with Hasura over GraphQL

License

Notifications You must be signed in to change notification settings

whitebrick/gatsby-starter-typescript-auth0-hasura

Repository files navigation

gatsby-starter-typescript-auth0-hasura

A Gatsby starter in TypeScript for authenticating via Auth0 and using the JWT with Hasura over GraphQL

Although there are plenty of Gatsby+Hasura and Gatsby+Auth0 tutorials out there, at the time of writing all were out of date and using old patterns with deprecated libraries.

This starter provides a simple Gatsby Admin page that:

  1. Authenticates via Auth0 OAuth 2.0 to obtain a JSON Web Token (JWT); and
  2. Uses the JWT in the request header to make simple GraphQL query and mutation requests to Hasura.

The Admin page is styled with Bootstrap and is based on a slightly modified Dashboard Component. "Organizations" are used as an example for listing and creating objects/records, all other nav links serve as display placeholders only.

Screenshot

This starter uses:

Hasura Configuration

  1. Follow instructions to set up Hasura
  2. Create a simple table to store Organizations
  CREATE TABLE organizations(
    id SERIAL PRIMARY KEY,
    name TEXT,
    label TEXT
  );
  1. Track the table from the Hasura console Data tab
  2. Add a few test records from the Hasura console Data > Insert Row tab
  3. Allow your role (configured below) to insert and select from the Hasura console Data > Permissions tab

Auth0 Configuration

Follow these steps to set up Auth0 with custom claims for Hasura.

ENV configuration

Rename .env.example to .env.development and update accordingly

Property Example Value
GATSBY_HASURA_GRAPHQL_URL http://localhost:8080/v1/graphql
GATSBY_AUTH0_DOMAIN <my-tenant-name>.us.auth0.com
GATSBY_AUTH0_CLIENT_ID T4WN7SBfeJ0BO6CFX2nw3k2yEECHOVMe
GATSBY_AUTH0_REDIRECT_URI http://localhost:8000
GATSBY_AUTH0_AUDIENCE https://<my-tenant-name>.us.auth0.com/api/v2/

Contribute

Please help us keep this starter up to date and adhering to best practices and conventions. We are not veterans in the space and appreciate any contributions or suggestions on how things can be done better. Feel free to submit an issue, pull request or reach out: hello at whitebrick dot com

About

A Gatsby starter in TypeScript for authenticating via Auth0 and using the JWT with Hasura over GraphQL

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published