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:
- Authenticates via Auth0 OAuth 2.0 to obtain a JSON Web Token (JWT); and
- 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.
This starter uses:
- TypeScript
- auth0-react for Auth0 OAuth 2.0 authentication with JWTs
- urgql for the GraphQL client
- react-bootstrap and react-feather for styling
- Follow instructions to set up Hasura
- Create a simple table to store Organizations
CREATE TABLE organizations(
id SERIAL PRIMARY KEY,
name TEXT,
label TEXT
);- Track the table from the Hasura console Data tab
- Add a few test records from the Hasura console Data > Insert Row tab
- Allow your role (configured below) to
insertandselectfrom the Hasura console Data > Permissions tab
Follow these steps to set up Auth0 with custom claims for Hasura.
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/ |