can login with google to view boxes

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reach/router": "^1.2.1",
     "firebase": "^7.2.2",
     "node-sass": "^4.13.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-firebaseui": "^4.1.0",
     "react-redux": "^7.1.1",
     "react-scripts": "3.2.0",
     "redux": "^4.0.4",

src/App.js

@@ -1,20 +1,58 @@
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+import firebase from'firebase'
 import { Provider } from "react-redux";
+import { Router, Link } from "@reach/router";
 import Boxes from "./boxes/Boxes";
 import styles from "./App.module.css";
 import setupStore from "./store/setupStore.js";
-
+const config = {
+  apiKey: "AIzaSyC5krz4RBiT87RK7cEidh3n-A4H63uGcyM",
+  authDomain: "retrod-7e2cd.firebaseapp.com",
+};
+const uiConfig = {
+  signInFlow: 'popup',
+  signInSuccessUrl: '/signedIn',
+  signInOptions: [
+    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+  ]
+};
 function App() {
-  const [sprint, setSprint] = useState(1)
+  const [sprint, setSprint] = useState(1);
+  const [isSignedIn, setSignIn] = useState(false)
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged(user => {
+      setSignIn(!!user)
+    })
+  })
   return (
     <Provider store={setupStore()}>
-    <button onClick={() => setSprint(sprint + 1)}>Sprint (+))</button>
+    <Router>
-    <h3>Sprint {sprint}</h3>
+      <Boxes exact path={`/` + sprint} />
-      <div className={styles.grid}>
+    </Router>
-        <Boxes sectionName={"What Went Well"}  sprint={sprint} boxId={'1'}/>
+    <div>
-        <Boxes sectionName={"What Could Be Better"}  sprint={sprint} boxId={'2'}/>
+    {isSignedIn ? (
-        <Boxes sectionName={"Questions"} sprint={sprint} boxId={'3'}/>
+      <>
-      </div>
+      <h1>You're Signed In</h1>
+      <button onClick={() => firebase.auth().signOut()}>Sign Out</button>
+      <nav>
+      <Link onClick={() => setSprint(sprint + 1)} to={`/` + sprint}>Sprint (+))</Link>
+      </nav>
+      <h3>Sprint {sprint}</h3>
+        <div className={styles.grid}>
+          <Boxes sectionName={"What Went Well"}  sprint={sprint} boxId={'1'}/>
+          <Boxes sectionName={"What Could Be Better"}  sprint={sprint} boxId={'2'}/>
+          <Boxes sectionName={"Questions"} sprint={sprint} boxId={'3'}/>
+        </div>
+      </>
+    ) : (
+      <>
+      <h1>You're Not Signed In</h1>
+      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
+      </>
+    )
+    }
+    </div>
     </Provider>
   );
 }