Baseline Schema changes.

client/src/components/test-auth.component.jsx

@@ -0,0 +1,91 @@
+import firebase from "firebase/app";
+import "firebase/auth";
+import "firebase/database";
+import React, { useState, useEffect } from "react";
+import App from "./App";
+
+const provider = new firebase.auth.GoogleAuthProvider();
+
+// Find these options in your Firebase console
+firebase.initializeApp({
+  apiKey: "xxx",
+  authDomain: "xxx",
+  databaseURL: "xxx",
+  projectId: "xxx",
+  storageBucket: "xxx",
+  messagingSenderId: "xxx"
+});
+
+export default function Auth() {
+  const [authState, setAuthState] = useState({ status: "loading" });
+
+  useEffect(() => {
+    return firebase.auth().onAuthStateChanged(async 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 signInWithGoogle = async () => {
+    try {
+      await firebase.auth().signInWithPopup(provider);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  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 = null;
+  } else {
+    content = (
+      <>
+        <div>
+          {authState.status === "in" ? (
+            <div>
+              <h2>Welcome, {authState.user.displayName}</h2>
+              <button onClick={signOut}>Sign out</button>
+            </div>
+          ) : (
+            <button onClick={signInWithGoogle}>Sign in with Google</button>
+          )}
+        </div>
+
+        <App authState={authState} />
+      </>
+    );
+  }
+
+  return <div className="auth">{content}</div>;
+}

client/src/index.js

@@ -1,16 +1,41 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
+import { ApolloProvider } from "react-apollo";
+import { createHttpLink } from "apollo-link-http";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { ApolloClient } from "apollo-boost";
+// require('dotenv').config()
 
 import * as serviceWorker from "./serviceWorker";
 
 import "./index.css";
 import App from "./App";
 
+const httpLink = createHttpLink({
+  uri: "https://bodyshop-dev-db.herokuapp.com/v1/graphql"
+});
+
+const cache = new InMemoryCache();
+
+const client = new ApolloClient({
+  link: httpLink,
+  cache
+});
+
+client.writeData({
+  data: {
+    cartHidden: true,
+    cartItems: []
+  }
+});
+
 ReactDOM.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <ApolloProvider client={client}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ApolloProvider>,
   document.getElementById("root")
 );