adding auth

package.json

@@ -20,6 +20,7 @@
     "chart.js": "^3.6.0",
     "classnames": "^2.3.1",
     "eslint-plugin-import-order": "^2.1.4",
+    "firebase": "^9.9.1",
     "json2csv": "^5.0.6",
     "moment": "^2.29.1",
     "node-fetch": "^3.1.0",
@@ -30,6 +31,7 @@
     "react-chartjs-2": "^3.3.0",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
+    "react-firebase-hooks": "^5.0.3",
     "react-lottie": "^1.2.3",
     "react-redux": "^7.2.0",
     "react-router": "^6.0.2",

src/App.css

@@ -125,3 +125,36 @@
 .stopped-badge {
   background-color: #777f81 !important;
 }
+
+.background {
+  background-image: url(https://i.insider.com/5b4d0c4cd87a8e0b678b458e?width=1000&format=jpeg&auto=webp);
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.background:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to left,
+    transparent 0%,
+    transparent 35%,
+    black 100%
+  );
+}
+
+.background-overlay {
+  background: linear-gradient(
+    to left,
+    transparent 0%,
+    transparent 35%,
+    black 100%
+  );
+  height: 100%;
+  width: 100%;
+}

src/App.tsx

@@ -3,6 +3,7 @@ import "./App.css";
 
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import { Container } from "react-bootstrap";
+import { useAuthState } from "react-firebase-hooks/auth";
 import Todos from "./components/todos/Todos";
 import Projects from "./components/projects/Projects";
 import { NavTabs } from "./components/header/NavTabs";
@@ -15,9 +16,18 @@ import { modalMap } from "./components/modals/modalMap";
 import { useAppContext } from "./context/context";
 import { PomodoroDisplay } from "./components/PomodoroDisplay";
 import { Archive } from "./components/analytics/Archive";
+import { AuthPage } from "./components/AuthPage";
+import { auth } from "./firebase/firebase";
 
 export function App() {
   const { activeModal } = useAppContext();
+  const [user, loading] = useAuthState(auth);
+  if (loading) return <div>loading...</div>;
+
+  if (!user) {
+    return <AuthPage />;
+  }
+
   return (
     <Router>
       <Container>

src/components/AuthPage.tsx

@@ -0,0 +1,38 @@
+import { Button, Container, Navbar } from "react-bootstrap";
+import { signInWithGoogle } from "../firebase/firebase";
+
+export function AuthPage() {
+  const onSignIn = () => {
+    signInWithGoogle();
+  };
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <Navbar bg="dark" variant="dark" expand="lg">
+        <Container>
+          <Navbar.Brand href="#home">To Do Ron Ron</Navbar.Brand>
+        </Container>
+      </Navbar>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "calc(100% - 56px)",
+          width: "100vw",
+          position: "relative",
+        }}
+      >
+        <div className="background-overlay">
+          <div className="background"></div>
+        </div>
+
+        <div style={{ position: "absolute", left: "70px" }}>
+          <Button size="lg" onClick={onSignIn}>
+            Sign in with Google
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/header/NavTabs.tsx

@@ -1,6 +1,8 @@
+import { signOut } from "firebase/auth";
 import { useState } from "react";
-import { Container, Nav, Navbar, Offcanvas } from "react-bootstrap";
+import { Button, Container, Nav, Navbar, Offcanvas } from "react-bootstrap";
 import { Link, useLocation } from "react-router-dom";
+import { auth } from "../../firebase/firebase";
 
 export function NavTabs() {
   const [expanded, setExpanded] = useState(false);
@@ -15,6 +17,7 @@ export function NavTabs() {
     "/archive": "Archive",
   };
 
+  const onLogOut = () => signOut(auth);
   return (
     <Navbar bg="light" expand={false} expanded={expanded}>
       <Container fluid>
@@ -33,6 +36,7 @@ export function NavTabs() {
           <Offcanvas.Header closeButton onClick={() => setExpanded(false)}>
             <Offcanvas.Title id="offcanvasNavbarLabel">Menu</Offcanvas.Title>
           </Offcanvas.Header>
+
           <Offcanvas.Body>
             <Nav className="justify-content-end flex-grow-1 pe-3">
               {Object.keys(keyHeaderMap).map((pathKey) => (
@@ -45,6 +49,10 @@ export function NavTabs() {
                   {keyHeaderMap[pathKey]}
                 </Nav.Link>
               ))}
+
+              <div style={{ marginTop: "20px" }}>
+                <Button onClick={onLogOut}>Log Out</Button>
+              </div>
             </Nav>
           </Offcanvas.Body>
         </Navbar.Offcanvas>

src/firebase/config.ts

@@ -0,0 +1,9 @@
+export const firebaseConfig = {
+  apiKey: "AIzaSyCFXTYU0fRjLA_qaRZKVh-1rLAGidrizwo",
+  authDomain: "do-not-panic-d6fe7.firebaseapp.com",
+  projectId: "do-not-panic-d6fe7",
+  storageBucket: "do-not-panic-d6fe7.appspot.com",
+  messagingSenderId: "76958754800",
+  appId: "1:76958754800:web:62fc4579cee614bd5edf35",
+  measurementId: "G-XMM3DJCQ8G",
+};

src/firebase/firebase.ts

@@ -0,0 +1,41 @@
+import { initializeApp } from "firebase/app";
+import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
+import {
+  getFirestore,
+  query,
+  getDocs,
+  collection,
+  where,
+  addDoc,
+} from "firebase/firestore";
+import { firebaseConfig } from "./config";
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+const db = getFirestore(app);
+
+const googleProvider = new GoogleAuthProvider();
+googleProvider.setCustomParameters({
+  prompt: "select_account",
+});
+
+export const signInWithGoogle = async () => {
+  try {
+    const res = await signInWithPopup(auth, googleProvider);
+    const { user } = res;
+    const q = query(collection(db, "users"), where("uid", "==", user.uid));
+    const docs = await getDocs(q);
+    if (docs.docs.length === 0) {
+      await addDoc(collection(db, "users"), {
+        uid: user.uid,
+        name: user.displayName,
+        authProvider: "google",
+        email: user.email,
+      });
+    }
+  } catch (err: unknown) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+    alert((err as Error)?.message);
+  }
+};