In progress sign in changes.

client/src/App/App.container.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Mutation, Query } from "react-apollo";
+import { gql } from "apollo-boost";
+
+import App from "./App";
+
+const SET_CURRENT_USER = gql`
+  mutation SetCurrentUser($user: User!) {
+    setCurrentUser(user: $user) @client
+  }
+`;
+
+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;

client/src/App/App.css

@@ -0,0 +1,24 @@
+@import '~antd/dist/antd.css';
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #09d3ac;
+}

client/src/App/App.js

@@ -0,0 +1,83 @@
+import React from "react";
+import "./App.css";
+
+import { auth, createUserProfileDocument } from "../firebase/firebase.utils";
+import { gql } from "apollo-boost";
+
+import HeaderAppBar from "../components/header-app-bar/header-app-bar.component";
+
+const SET_CURRENT_USER = gql`
+  mutation SetCurrentUser($user: User!) {
+    setCurrentUser(user: $user) @client
+  }
+`;
+
+const GET_CURRENT_USER = gql`
+  {
+    currentUser @client
+  }
+`;
+
+class App extends React.Component {
+  unsubscribeFromAuth = null;
+
+  componentDidMount() {
+    const { setCurrentUser } = this.props;
+    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
+      console.log("userAuth", userAuth);
+      if (userAuth) {
+        const token = await userAuth.getIdToken();
+        console.log("token", token);
+        const idTokenResult = await userAuth.getIdTokenResult();
+        const hasuraClaim =
+          idTokenResult.claims["https://hasura.io/jwt/claims"];
+
+        if (hasuraClaim) {
+          console.log("status should be in");
+          //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 });
+            console.log("status should be in");
+          });
+        }
+      } else {
+        //setAuthState({ status: "out" });
+      }
+
+      // if (userAuth) {
+      //   const userRef = await createUserProfileDocument(userAuth);
+
+      //   userRef.onSnapshot(snapShot => {
+      //     setCurrentUser({
+      //       id: snapShot.id,
+      //       ...snapShot.data()
+      //     });
+      //   });
+      // } else {
+      //   setCurrentUser(userAuth);
+      // }
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeFromAuth();
+  }
+
+  render() {
+    return (
+      <div>
+        <HeaderAppBar />
+      </div>
+    );
+  }
+}
+
+export default App;

client/src/App/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});