vgrafe / Nextjs Auth0 Hasura
Template project for Nextjs + Auth0 + Hasura with Apollo.
Stars: ✭ 59
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Nextjs Auth0 Hasura
Graphcool Templates
📗 Collection of Graphcool Templates
Stars: ✭ 354 (+500%)
Mutual labels: graphql, auth0
Pizzaql
🍕 Modern OSS Order Management System for Pizza Restaurants
Stars: ✭ 631 (+969.49%)
Mutual labels: graphql, auth0
Bootcamp 2021
Fusing Serverless Cloud Computing, Infrastructure as Code, Graph Databases, AI, and IoT Technologies and preparing for Operation Unicorn Startups
Stars: ✭ 55 (-6.78%)
Mutual labels: graphql
Starter
Opinionated SaaS quick-start with pre-built user account and organization system for full-stack application development in React, Node.js, GraphQL and PostgreSQL. Powered by PostGraphile, TypeScript, Apollo Client, Graphile Worker, Graphile Migrate, GraphQL Code Generator, Ant Design and Next.js
Stars: ✭ 1,082 (+1733.9%)
Mutual labels: graphql
Next React Graphql Apollo boostrap
React + GraphQL + Next.js project architecture that I play with right now
Stars: ✭ 59 (+0%)
Mutual labels: graphql
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-8.47%)
Mutual labels: graphql
Vulcan
🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
Stars: ✭ 8,027 (+13505.08%)
Mutual labels: graphql
Store Graphql
GraphQL schema and resolvers for the VTEX Commerce Stores API
Stars: ✭ 56 (-5.08%)
Mutual labels: graphql
Laravel Graphql
GraphQL implementation with power of Laravel
Stars: ✭ 56 (-5.08%)
Mutual labels: graphql
Format Graphql
Formats GraphQL schema definition language (SDL) document.
Stars: ✭ 55 (-6.78%)
Mutual labels: graphql
Graphql Api Gateway
An open-sourced example of a GraphQL API Gateway. This service queries and joins data across different back-ends into one GraphQL schema.
Stars: ✭ 57 (-3.39%)
Mutual labels: graphql
Apollo Invalidation Policies
An extension of the Apollo 3 cache with support for type-based invalidation policies.
Stars: ✭ 55 (-6.78%)
Mutual labels: graphql
Up
Up focuses on deploying "vanilla" HTTP servers so there's nothing new to learn, just develop with your favorite existing frameworks such as Express, Koa, Django, Golang net/http or others.
Stars: ✭ 8,439 (+14203.39%)
Mutual labels: graphql
Graphql Vigilant Bot
Github Bot to find breaking changes in your schema.graphql
Stars: ✭ 54 (-8.47%)
Mutual labels: graphql
Auth0 Socketio Jwt
Authenticate socket.io incoming connections with JWTs
Stars: ✭ 1,093 (+1752.54%)
Mutual labels: auth0
Wertik Js
💪 A library that powers your app with GraphQL + Rest API
Stars: ✭ 56 (-5.08%)
Mutual labels: graphql
Subscriptions Transport Sse
A Server-Side-Events (SSE) client + server for GraphQL subscriptions
Stars: ✭ 55 (-6.78%)
Mutual labels: graphql
Deprecated!
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.
NextJS - Auth0 - Hasura
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
Features
- ⚡️ compatible with Next.js 9's Automatic Static Optimization
- 🚫 no custom server code
Demo
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;
Shortcomings - Help needed!
- 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
Setup
- 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
Deploy with zeit's now
- Update
REDIRECT_URI
andPOST_LOGOUT_REDIRECT_URI
in thenow.json
file - add all the secrets (start with @ in the file) with the cli
Notes
- How to set up public access on hasura.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].