feat: oauth login

package.json

@@ -19,20 +19,17 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.0.1",
     "bootstrap": "^5.3.2",
-    "brown-university-styles": "git+https://github.com/BrownUniversity/brown-university-styles.git",
     "firebase": "^10.7.2",
     "formik": "^2.4.5",
     "lodash": "^4.17.11",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.2",
-    "react-bulma-components": "^4.1.0",
+    "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.21.2",
     "react-scripts": "^5.0.1",
     "react-spinners": "^0.13.8",
     "react-table": "^6.10.0",
-    "reactstrap": "^9.2.1",
     "redux": "^5.0.1",
     "sass": "^1.69.7",
     "seamless-immutable": "^7.1.4",

src/App.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Navbar from './components/react-ccv-components/Navbar';
+import { Navbar } from './components/react-ccv-components/Navbar.tsx';
 import Footer from './components/react-ccv-components/Footer';
 
 import { ContentPage } from './components/ContentPage';
-import { usePublicationsCollection } from './utils/firebase.ts';
+import { useAuthStateChanged, usePublicationsCollection } from './utils/firebase.ts';
 
 export function App() {
+  useAuthStateChanged();
   usePublicationsCollection();
 
   return (

src/components/ContentPage.jsx

@@ -4,19 +4,22 @@ import { faBook } from '@fortawesome/free-solid-svg-icons';
 // import YearChart from "./YearChart";
 // import WordCloud from "./WordCloud";
 import { useSelector } from 'react-redux';
-import { selectPublications } from '../store/slice/appState';
+import { selectPublications, selectUser } from '../store/slice/appState';
 import { PubsTable } from './PubsTable';
 import Spinner from './Spinner';
 import { AddPublicationModal } from './AddPublicationModal.tsx';
 
 export function ContentPage() {
   const publications = useSelector(selectPublications);
+  const user = useSelector(selectUser);
 
   return (
     <div className="ContentPage main-content">
-      <div align="right">
-        <AddPublicationModal />
-      </div>
+      {user ? (
+        <div align="right">
+          <AddPublicationModal />
+        </div>
+      ) : null}
       <div className="d-flex flex-row justify-content-center align-items-center">
         <div className="pub-title bg-dark rounded-circle p-2 mx-2">
           <FontAwesomeIcon icon={faBook} color="white" />

src/components/LoginButton.tsx

@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from 'react-bootstrap';
+import { handleLogin } from '../utils/firebase.ts';
+
+type LoginButtonProps = ButtonProps;
+
+export const LoginButton = ({ ...buttonProps }: LoginButtonProps) => {
+  return (
+    <Button onClick={handleLogin} {...buttonProps}>
+      Log In
+    </Button>
+  );
+};

src/components/react-ccv-components/Navbar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import { Nav, Navbar as DefaultNavbar, NavDropdown } from 'react-bootstrap';
+import { useSelector } from 'react-redux';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { handleLogin, handleLogout } from '../../utils/firebase.ts';
+import { selectUser } from '../../store/slice/appState';
+import { ReactComponent as CCVLogo } from './assets/svg/ccv-logo.svg';
+import { ReactComponent as BrownLogo } from './assets/svg/brown-logo.svg';
+
+export const Navbar = () => {
+  const user = useSelector(selectUser);
+
+  return (
+    <DefaultNavbar expand="lg" className="bg-body-tertiary">
+      <Container>
+        <DefaultNavbar.Brand href="https://www.brown.edu">
+          <BrownLogo style={{ height: 50 }} />
+        </DefaultNavbar.Brand>
+        <DefaultNavbar.Brand href="https://ccv.brown.edu/">
+          <CCVLogo style={{ height: 50 }} />
+        </DefaultNavbar.Brand>
+        <DefaultNavbar.Toggle aria-controls="basic-navbar-nav" />
+        <DefaultNavbar.Collapse id="basic-navbar-nav" role="" className="justify-content-end">
+          <Nav className="ml-auto">
+            {user ? (
+              <NavDropdown
+                title={
+                  <>
+                    <FontAwesomeIcon icon={faUser} /> {user.displayName}
+                  </>
+                }
+                id="userMenu"
+              >
+                <NavDropdown.Item onClick={handleLogout}>Logout</NavDropdown.Item>
+              </NavDropdown>
+            ) : (
+              <Nav.Link onClick={handleLogin}>Login</Nav.Link>
+            )}
+          </Nav>
+        </DefaultNavbar.Collapse>
+      </Container>
+    </DefaultNavbar>
+  );
+};