Here it is folks, I can not take the time maintaining this project anymore, also since then the Hasura team is offering a guide to have a setup with Nextjs and Auth0 that is definitely better and more secure than this one. Thank you for your interest.
This repo sits on the shoulders of the following giants:
- https://github.com/auth0/nextjs-auth0
- https://github.com/sandrinodimattia/nextjs-auth0-example
- https://github.com/zeit/next.js/tree/canary/examples/auth0
- ⚡️ compatible with Next.js 9's Automatic Static Optimization
- 🚫 no custom server code
Try it here
Please note: the heroku instance might be inactive when you try logging in, resulting in a failed attempt. Try again and it will work. Damn cold starts!
One way I found to avoid this is to make a dummy http call to the heroku instance in an _app.js
file:
import App from 'next/app';
import fetch from 'isomorphic-unfetch';
fetch(process.env.HASURA_GRAPHQL_URL); // wake up that darn instance!
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
export default MyApp;
- The profile page won't display user data initially. I am shrugging this one off as my goal here is to demonstrate consuming Hasura's gql endpoint and only rely on auth0's idToken to do so.
- I can't find out how to seamlessly pass the token via cookies as suggested from Apollo's documentation and issues. The current workaround is to set cookie manually after auth, but it's ugly and feels unnecessary when if should be provided out of the box by Apollo.
- the idToken is set/get in a cookie with
js-cookie
in order to add to the headers for calls to hasura (look for all the "TODO remove when cookie solution found" comments). It should be handled out of the box bynextjs-auth0
, so this might be a mistake/overlook of mine. - login is janky when using a social button. I don't have much time to troubleshoot this either.
- a proxi api route should be used to avoid exposing the id token in the client, as explained here
- git clone this repository
- spin up an Hasura instance
- generate JWT secret, add it to env vars (HASURA_GRAPHQL_JWT_SECRET)
- optionally add the HASURA_GRAPHQL_UNAUTHORIZED_ROLE var
- set an HASURA_GRAPHQL_ADMIN_SECRET
- setup an Auth0 account
- copy domain, client ID, secret into
.env
file - add rules found in
auth0
folder (looks likeupsert-user.js
should be above the claim one) - add env vars so the rules work
- ADMIN_SECRET (same than HASURA_GRAPHQL_ADMIN_SECRET)
- HASURA_GRAPHQL_URL
- set callback/redirect URL in your app
- copy domain, client ID, secret into
- fill in
hasura/config.yaml
file -
cd hasura hasura migrate apply
-
yarn yarn dev
- Update
REDIRECT_URI
andPOST_LOGOUT_REDIRECT_URI
in thenow.json
file - add all the secrets (start with @ in the file) with the cli
- How to set up public access on hasura.