Refactored app.js and index.js to follow hasura examples of managing state. Now using hooks for user auth and only user auth.

client/src/App/App.container.jsx

@@ -1,36 +1,73 @@
-import React from "react";
-import { Mutation, Query } from "react-apollo";
-import { gql } from "apollo-boost";
+//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
 
+import React, { useState, useEffect } from "react";
+import firebase from "../firebase/firebase.utils";
 import App from "./App";
+import { Spin } from "antd";
 
-const SET_CURRENT_USER = gql`
-  mutation SetCurrentUser($user: User!) {
-    setCurrentUser(user: $user) @client
+export default function Auth() {
+  const [authState, setAuthState] = useState({ status: "loading" });
+
+  useEffect(() => {
+    return firebase.auth().onAuthStateChanged(async user => {
+      console.log("user", user);
+      if (user) {
+        const token = await user.getIdToken();
+        const idTokenResult = await user.getIdTokenResult();
+        const hasuraClaim =
+          idTokenResult.claims["https://hasura.io/jwt/claims"];
+
+        if (hasuraClaim) {
+          setAuthState({ status: "in", user, token });
+        } else {
+          // Check if refresh is required.
+          const metadataRef = firebase
+            .database()
+            .ref("metadata/" + user.uid + "/refreshTime");
+
+          metadataRef.on("value", async () => {
+            // Force refresh to pick up the latest custom claims changes.
+            const token = await user.getIdToken(true);
+            setAuthState({ status: "in", user, token });
+          });
+        }
+      } else {
+        setAuthState({ status: "out" });
+      }
+    });
+  }, []);
+
+  const signOut = async () => {
+    try {
+      setAuthState({ status: "loading" });
+      await firebase.auth().signOut();
+      setAuthState({ status: "out" });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  let content;
+  if (authState.status === "loading") {
+    content = <Spin size="large" />;
+  } else {
+    content = (
+      <>
+        <div>
+          {authState.status === "in" ? (
+            <div>
+              <h2>Welcome, {authState.user.displayName}</h2>
+              <button onClick={signOut}>Sign out</button>
+            </div>
+          ) : (
+            <div>Sign in</div>
+          )}
+        </div>
+
+        <App authState={authState} />
+      </>
+    );
   }
-`;
 
-const GET_CURRENT_USER = gql`
-  {
-    currentUser @client
-  }
-`;
-
-const AppContainer = () => (
-  <Query query={GET_CURRENT_USER}>
-    {({ data: { currentUser } }) => (
-      <Mutation mutation={SET_CURRENT_USER}>
-        {setCurrentUser => (
-          <App
-            currentUser={currentUser}
-            setCurrentUser={user => {
-              setCurrentUser({ variables: { user } });
-            }}
-          />
-        )}
-      </Mutation>
-    )}
-  </Query>
-);
-
-export default AppContainer;
+  return <div className="auth">{content}</div>;
+}