148 | )
149 | }}
150 |
151 |
152 | )
153 | }
154 |
--------------------------------------------------------------------------------
/react-web-app/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
20 | ),
21 | )
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config)
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA',
47 | )
48 | })
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config)
52 | }
53 | })
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing
63 | if (installingWorker == null) {
64 | return
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.',
75 | )
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration)
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.')
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration)
90 | }
91 | }
92 | }
93 | }
94 | }
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error)
98 | })
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type')
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload()
115 | })
116 | })
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config)
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.',
125 | )
126 | })
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister()
133 | })
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Build a real-time app with authentication and authorization in Hasura
2 |
3 | Hasura helps you build production-level [3factor](https://3factor.app/) apps really fast. In addition to generating CRUD GraphQL APIs from your PostgreSQL database, it also provides ways to **authenticate** users using webhooks or JWT and helps you define granular access controls rules for your GraphQL schema (**authorization**). However, integrating an auth system with Hasura backend and some frontend still requires a lot of effort, and can be tricky sometimes. This tutorial aims to demonstrate how to do that by making a real-time voting app like the [official sample](https://realtime-poll.demo.hasura.app/) but with auth built in. We are going to use Hasura for the backend, Firebase Authentication for authentication and React for the frontend.
4 |
5 | It takes mainly 3 steps:
6 |
7 | 1. Set up Hasura and create the data model using the Hasura Console.
8 | 2. Set up Authentication.
9 | 3. Build the React web app.
10 |
11 | ## Prerequisites
12 |
13 | - React
14 | - GraphQL
15 | - Some SQL
16 |
17 | ## Try the demo
18 |
19 | The demo is live at [hasura-vote.now.sh](https://hasura-vote.now.sh/), you can try it! It's a simple app in which you can vote for your favorite programming languages. The votes are updated in real time. After you signed in, you can also mark languages as "loved".
20 |
21 | ## Using Firebase Authentication versus building your own
22 |
23 | Building a robust authentication system is no small effort. It's so important that it can break or make your app. Because the main focus of this tutorial is to **integrate** an auth system with Hasura and React, we are going to use the off-the-shelf Firebase Authentication. It's secure, has many useful features such as third-party sign-in and passwordless sign-in and has a generous free tier.
24 |
25 | ## Step One: Hasura
26 |
27 | It's very easy to get Hasura running. Just follow the [Deploy Hasura to Heroku Guide](https://docs.hasura.io/1.0/graphql/manual/getting-started/heroku-simple.html) and in the end, you will have a brand new instance running at a domain that looks like "https://[your-heroku-project-name].herokuapp.com".
28 |
29 | 
30 |
31 | We need to set some environment variables as we are in the Heroku console. Set `HASURA_GRAPHQL_ADMIN_SECRET` to some secret and write it down before you forget it, thus out API can't be accessed by some random guy on the Internet. Since we will use JWT from Firebase, set `HASURA_GRAPHQL_JWT_SECRET` to `{"type":"RS512", "jwk_url": "https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com"}`. Finally, set `HASURA_GRAPHQL_UNAUTHORIZED_ROLE` to `anonymous` because we do allow unauthenticated users to write and read some data.
32 |
33 | Now it's time for data modeling. First, we need a "programming_language" table with "name" and "vote_count" field.
34 |
35 | 
36 |
37 | Also, we need a "loved_language" table to record whether a language is loved by some user. Since a user can only love a language once, we need to set the primary key as name and user_id combined. There is no way to do that in the "Add Table" UI, but Hasura conveniently provides a way to execute raw SQL:
38 |
39 | ```sql
40 | CREATE TABLE "public"."loved_language" (
41 | "name" text NOT NULL,
42 | "user_id" text NOT NULL,
43 | CONSTRAINT loved_language_pkey PRIMARY KEY (name, user_id),
44 | CONSTRAINT loved_language_programming_language_fky FOREIGN KEY (name) REFERENCES programming_language(name),
45 | )
46 | ```
47 |
48 | 
49 |
50 | After you create these two tables, Hasura would notice the one-to-many relationship between them and help you create the corresponding GraphQL relationship.
51 |
52 | 
53 |
54 | Hooray! Now that we have a data model, you can play with the API in GraphiQL. Insert some of your favorite languages. Give them some vote. Love them by some random "user_id". Since we are signed in as admin, we can do anything we want. But we need to set proper permissions for the "anonymous" and "user" role. We allow both of them to select and update "programming_language":
55 |
56 | 
57 |
58 | For "loved_language", we only allow the "user" role to insert, select and delete. Notice for insert the "user_id" must come from "X-Hasura-User-Id".
59 |
60 | 
61 |
62 | With permissions set, all we need is a secure way to get the "X-Hasura-User-Id".
63 |
64 | ## Step Two: Firebase Auth
65 |
66 | Go to the [Firebase website](https://firebase.google.com/) to create a new project. By default it's on the free plan, so don't worry about the charge.
67 |
68 | In the Authentication section of the Firebase console, turn on the Google sign-in provider. In this tutorial, we only use Google sign-in, but adding other providers is trivial. Notice at the bottom of the page, in "Authorized domains", `localhost` and a Firebase domain are automatically added. If you later decide to deploy the React app to another domain, you need to add it here for Google sign-in to work.
69 |
70 | 
71 |
72 | Now we can sign in users and get their id token for Hasura in the React app, using the Firebase JS SDK. But for Hasura to know the identity of these users, whose data are stored in Firebase, we need to add some specific "custom claims" required by Hasura to the token. We will use Cloud Functions for Firebase to do that, following the [example](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/firebase-jwt) in the Hasura repo.
73 |
74 | A cloud function is, well, some function that automatically runs "in response to events triggered by Firebase features and HTTPS requests". In our case the event is firebase user creation. When that happens, we'd like to add some extra data to the user's id token. The code is straghtforward:
75 |
76 | ```js
77 | const functions = require("firebase-functions");
78 | const admin = require("firebase-admin");
79 | admin.initializeApp(functions.config().firebase);
80 |
81 | // On sign up.
82 | exports.processSignUp = functions.auth.user().onCreate(user => {
83 | const customClaims = {
84 | "https://hasura.io/jwt/claims": {
85 | "x-hasura-default-role": "user",
86 | "x-hasura-allowed-roles": ["user"],
87 | "x-hasura-user-id": user.uid
88 | }
89 | };
90 |
91 | return admin
92 | .auth()
93 | .setCustomUserClaims(user.uid, customClaims)
94 | .then(() => {
95 | // Update real-time database to notify client to force refresh.
96 | const metadataRef = admin.database().ref("metadata/" + user.uid);
97 | // Set the refresh time to the current UTC timestamp.
98 | // This will be captured on the client to force a token refresh.
99 | return metadataRef.set({ refreshTime: new Date().getTime() });
100 | })
101 | .catch(error => {
102 | console.log(error);
103 | });
104 | });
105 | ```
106 |
107 | The code with comments needs some more explanation. When a user signs in our React app, Firebase immediately gives us that user's data, including the id token we need to send to Hasura. But if it's the first time, in which the user is just created, the token may not include those custom claims. That's the reason we use Firebase real-time database to listen to a token refresh.
108 |
109 | Deploying cloud function is simple. Follow the official [Get started guide](https://firebase.google.com/docs/functions/get-started), replace `index.js` with the code above and run `firebase deploy --only functions`. That's it.
110 |
111 | Before you leave the Firebase console, you need to do one more setting. Go to the Realtime Database Rules section and change "read" from "false" to "true". Otherwise, the client won't be able to listen to the token refresh.
112 |
113 | 
114 |
115 | ## Step Three: React
116 |
117 | Finally, it's time for us to build the exciting UI. We will use Apollo Client to query our GraphQL API. Follow the [client setup guide](https://www.apollographql.com/docs/react/advanced/subscriptions.html#subscriptions-client) to add all the needed npm packages.
118 |
119 | Since the app is simple, we are only going to build two components: "Auth" and "App". "Auth" uses Firebase SDK to sign in users and pass that state to "App". "App" includes all the business logic: subscribing to the real-time data, voting and loving languages.
120 |
121 | Auth:
122 |
123 | ```js
124 | import firebase from "firebase/app";
125 | import "firebase/auth";
126 | import "firebase/database";
127 | import React, { useState, useEffect } from "react";
128 | import App from "./App";
129 |
130 | const provider = new firebase.auth.GoogleAuthProvider();
131 |
132 | // Find these options in your Firebase console
133 | firebase.initializeApp({
134 | apiKey: "xxx",
135 | authDomain: "xxx",
136 | databaseURL: "xxx",
137 | projectId: "xxx",
138 | storageBucket: "xxx",
139 | messagingSenderId: "xxx"
140 | });
141 |
142 | export default function Auth() {
143 | const [authState, setAuthState] = useState({ status: "loading" });
144 |
145 | useEffect(() => {
146 | return firebase.auth().onAuthStateChanged(async user => {
147 | if (user) {
148 | const token = await user.getIdToken();
149 | const idTokenResult = await user.getIdTokenResult();
150 | const hasuraClaim =
151 | idTokenResult.claims["https://hasura.io/jwt/claims"];
152 |
153 | if (hasuraClaim) {
154 | setAuthState({ status: "in", user, token });
155 | } else {
156 | // Check if refresh is required.
157 | const metadataRef = firebase
158 | .database()
159 | .ref("metadata/" + user.uid + "/refreshTime");
160 |
161 | metadataRef.on("value", async data => {
162 | if (!data.exists) {
163 | return;
164 | }
165 | // Force refresh to pick up the latest custom claims changes.
166 | const token = await user.getIdToken(true);
167 | setAuthState({ status: "in", user, token });
168 | });
169 | }
170 | } else {
171 | setAuthState({ status: "out" });
172 | }
173 | });
174 | }, []);
175 |
176 | const signInWithGoogle = async () => {
177 | try {
178 | await firebase.auth().signInWithPopup(provider);
179 | } catch (error) {
180 | console.log(error);
181 | }
182 | };
183 |
184 | const signOut = async () => {
185 | try {
186 | setAuthState({ status: "loading" });
187 | await firebase.auth().signOut();
188 | setAuthState({ status: "out" });
189 | } catch (error) {
190 | console.log(error);
191 | }
192 | };
193 |
194 | let content;
195 | if (authState.status === "loading") {
196 | content = null;
197 | } else {
198 | content = (
199 | <>
200 |