From d8470f0573b31c8f914bcaf9f551269106be1939 Mon Sep 17 00:00:00 2001
From: Dennis Chen <dchen@mathadvance.org>
Date: Wed, 12 Jun 2024 09:58:58 -0700
Subject: [PATCH] finish frontend FUNCTIONALITY (still looks bad)

---
 frontend/src/App.tsx                          |  48 +++---
 .../src/components/auth/AuthComponent.tsx     |  38 -----
 .../components/auth/AuthenticationModal.tsx   |  15 +-
 .../components/auth/GoogleAuthComponent.tsx   |  89 -----------
 frontend/src/components/nav/TopNavbar.tsx     |  13 +-
 frontend/src/hooks/api.tsx                    |  41 +++++
 frontend/src/hooks/auth.tsx                   |  96 ++----------
 frontend/src/pages/Home.tsx                   | 148 +++++++++---------
 frontend/src/pages/Login.tsx                  |  61 ++++++++
 frontend/src/pages/Logout.tsx                 |  17 ++
 frontend/src/pages/Register.tsx               |  80 ++++++++++
 store/app/crud/users.py                       |   4 +-
 12 files changed, 324 insertions(+), 326 deletions(-)
 delete mode 100644 frontend/src/components/auth/AuthComponent.tsx
 delete mode 100644 frontend/src/components/auth/GoogleAuthComponent.tsx
 create mode 100644 frontend/src/pages/Login.tsx
 create mode 100644 frontend/src/pages/Logout.tsx
 create mode 100644 frontend/src/pages/Register.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b8916ee7..6cf0555b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,15 +3,18 @@ import Footer from "components/nav/Footer";
 import TopNavbar from "components/nav/TopNavbar";
 import NotFoundRedirect from "components/NotFoundRedirect";
 import { AlertQueue, AlertQueueProvider } from "hooks/alerts";
-import { AuthenticationProvider, OneTimePasswordWrapper } from "hooks/auth";
+import { AuthenticationProvider } from "hooks/auth";
 import { ThemeProvider } from "hooks/theme";
 import About from "pages/About";
 import EditRobotForm from "pages/EditRobotForm";
 import Home from "pages/Home";
+import Login from "pages/Login";
+import Logout from "pages/Logout";
 import NotFound from "pages/NotFound";
 import PartDetails from "pages/PartDetails";
 import PartForm from "pages/PartForm";
 import Parts from "pages/Parts";
+import Register from "pages/Register";
 import RobotDetails from "pages/RobotDetails";
 import RobotForm from "pages/RobotForm";
 import Robots from "pages/Robots";
@@ -28,29 +31,30 @@ const App = () => {
         <AuthenticationProvider>
           <AlertQueueProvider>
             <AlertQueue>
-              <OneTimePasswordWrapper>
-                <TopNavbar />
+              <TopNavbar />
 
-                <Container className="content">
-                  <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/about" element={<About />} />
-                    <Route path="/robots/" element={<Robots />} />
-                    <Route path="/robots/add" element={<RobotForm />} />
-                    <Route path="/parts/add" element={<PartForm />} />
-                    <Route path="/robot/:id" element={<RobotDetails />} />
-                    <Route path="/edit-robot/:id" element={<EditRobotForm />} />
-                    <Route path="/parts/" element={<Parts />} />
-                    <Route path="/part/:id" element={<PartDetails />} />
-                    <Route path="robots/your" element={<YourRobots />} />
-                    <Route path="/parts/your" element={<YourParts />} />
-                    <Route path="/404" element={<NotFound />} />
-                    <Route path="*" element={<NotFoundRedirect />} />
-                  </Routes>
-                </Container>
+              <Container className="content">
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/about" element={<About />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/register" element={<Register />} />
+                  <Route path="/logout" element={<Logout />} />
+                  <Route path="/robots/" element={<Robots />} />
+                  <Route path="/robots/add" element={<RobotForm />} />
+                  <Route path="/parts/add" element={<PartForm />} />
+                  <Route path="/robot/:id" element={<RobotDetails />} />
+                  <Route path="/edit-robot/:id" element={<EditRobotForm />} />
+                  <Route path="/parts/" element={<Parts />} />
+                  <Route path="/part/:id" element={<PartDetails />} />
+                  <Route path="robots/your" element={<YourRobots />} />
+                  <Route path="/parts/your" element={<YourParts />} />
+                  <Route path="/404" element={<NotFound />} />
+                  <Route path="*" element={<NotFoundRedirect />} />
+                </Routes>
+              </Container>
 
-                <Footer />
-              </OneTimePasswordWrapper>
+              <Footer />
             </AlertQueue>
           </AlertQueueProvider>
         </AuthenticationProvider>
diff --git a/frontend/src/components/auth/AuthComponent.tsx b/frontend/src/components/auth/AuthComponent.tsx
deleted file mode 100644
index 496d9d61..00000000
--- a/frontend/src/components/auth/AuthComponent.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useAuthentication } from "hooks/auth";
-import { Button, Col, Row } from "react-bootstrap";
-import EmailAuthComponent from "./EmailAuthComponent";
-import GoogleAuthComponent from "./GoogleAuthComponent";
-
-const AuthComponent = () => {
-  const { isAuthenticated, logout } = useAuthentication();
-
-  if (isAuthenticated) {
-    return (
-      <Row>
-        <Col xs="auto">
-          <Button onClick={() => logout()}>
-            <span style={{ display: "flex", alignItems: "center" }}>
-              Sign Out
-            </span>
-          </Button>
-        </Col>
-      </Row>
-    );
-  }
-  return (
-    <>
-      <Row>
-        <Col>
-          <EmailAuthComponent />
-        </Col>
-      </Row>
-      <Row className="d-flex justify-content-center">
-        <Col xs="auto">
-          <GoogleAuthComponent />
-        </Col>
-      </Row>
-    </>
-  );
-};
-
-export default AuthComponent;
diff --git a/frontend/src/components/auth/AuthenticationModal.tsx b/frontend/src/components/auth/AuthenticationModal.tsx
index 3b2bc443..a38eda11 100644
--- a/frontend/src/components/auth/AuthenticationModal.tsx
+++ b/frontend/src/components/auth/AuthenticationModal.tsx
@@ -1,6 +1,5 @@
-import { Col, Modal, Row } from "react-bootstrap";
+import { Modal } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import AuthComponent from "./AuthComponent";
 
 const LogInModal = () => {
   const navigate = useNavigate();
@@ -12,17 +11,7 @@ const LogInModal = () => {
   return (
     <Modal show={true} onHide={navigateToPreviousPage} centered>
       <Modal.Body>
-        <Row>
-          <Col>
-            <Row className="mb-3 text-center">
-              <Col>
-                <h5>Sign in to see this page</h5>
-              </Col>
-            </Row>
-
-            <AuthComponent />
-          </Col>
-        </Row>
+        <p>Sign in to see this page</p>
       </Modal.Body>
       <Modal.Footer>
         <small>
diff --git a/frontend/src/components/auth/GoogleAuthComponent.tsx b/frontend/src/components/auth/GoogleAuthComponent.tsx
deleted file mode 100644
index 1de8bd7a..00000000
--- a/frontend/src/components/auth/GoogleAuthComponent.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { faGoogle } from "@fortawesome/free-brands-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";
-import { humanReadableError } from "constants/backend";
-import { useAlertQueue } from "hooks/alerts";
-import { useAuthentication } from "hooks/auth";
-import { useEffect, useState } from "react";
-import { Button } from "react-bootstrap";
-
-const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
-
-interface UserLoginResponse {
-  token: string;
-  token_type: string;
-}
-
-const GoogleAuthComponentInner = () => {
-  const [credential, setCredential] = useState<string | null>(null);
-  const [disableButton, setDisableButton] = useState(false);
-
-  const { setApiKey, api } = useAuthentication();
-  const { addAlert } = useAlertQueue();
-
-  useEffect(() => {
-    (async () => {
-      if (credential !== null) {
-        try {
-          const response = await api.post<UserLoginResponse>("/users/google", {
-            token: credential,
-          });
-          setApiKey(response.data.token);
-        } catch (error) {
-          addAlert(humanReadableError(error), "error");
-        } finally {
-          setCredential(null);
-        }
-      }
-    })();
-  }, [credential, setApiKey, api, addAlert]);
-
-  const login = useGoogleLogin({
-    onSuccess: (tokenResponse) => {
-      const returnedCredential = tokenResponse.access_token;
-      if (returnedCredential === undefined) {
-        addAlert("Failed to login using Google OAuth.", "error");
-      } else {
-        setCredential(returnedCredential);
-      }
-    },
-    onError: () => {
-      addAlert("Failed to login using Google OAuth.", "error");
-      setDisableButton(false);
-    },
-    onNonOAuthError: () => {
-      addAlert("Failed to login using Google OAuth.", "error");
-      setDisableButton(false);
-    },
-  });
-
-  return (
-    <Button
-      onClick={() => {
-        setDisableButton(true);
-        login();
-      }}
-      disabled={disableButton || credential !== null}
-    >
-      <span style={{ display: "flex", alignItems: "center" }}>
-        Sign In with Google
-        <FontAwesomeIcon icon={faGoogle} style={{ marginLeft: 15 }} />
-      </span>
-    </Button>
-  );
-};
-
-const GoogleAuthComponent = () => {
-  // Fatal error if GOOGLE_CLIENT_ID is not set
-  if (GOOGLE_CLIENT_ID === undefined) {
-    throw new Error(`REACT_APP_GOOGLE_CLIENT_ID is ${GOOGLE_CLIENT_ID}.`);
-  }
-
-  return (
-    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
-      <GoogleAuthComponentInner />
-    </GoogleOAuthProvider>
-  );
-};
-
-export default GoogleAuthComponent;
diff --git a/frontend/src/components/nav/TopNavbar.tsx b/frontend/src/components/nav/TopNavbar.tsx
index fa439f5d..0982e9dc 100644
--- a/frontend/src/components/nav/TopNavbar.tsx
+++ b/frontend/src/components/nav/TopNavbar.tsx
@@ -27,13 +27,7 @@ const TopNavbar = () => {
                 {theme === "dark" ? <MoonFill /> : <SunFill />}
               </Nav.Link>
             </Boop>
-            {!isAuthenticated && (
-              <>
-                <Nav.Link href="/login">Login</Nav.Link>
-                <Nav.Link href="/register">Register</Nav.Link>
-              </>
-            )}
-            {isAuthenticated && (
+            {isAuthenticated ? (
               <>
                 <Boop timing={100}>
                   <Nav.Link onClick={() => setShowSidebar(true)}>
@@ -42,6 +36,11 @@ const TopNavbar = () => {
                 </Boop>
                 <Nav.Link href="/logout">Log Out</Nav.Link>
               </>
+            ) : (
+              <>
+                <Nav.Link href="/login">Login</Nav.Link>
+                <Nav.Link href="/register">Register</Nav.Link>
+              </>
             )}
           </div>
         </Container>
diff --git a/frontend/src/hooks/api.tsx b/frontend/src/hooks/api.tsx
index 22a841e1..04475845 100644
--- a/frontend/src/hooks/api.tsx
+++ b/frontend/src/hooks/api.tsx
@@ -33,6 +33,47 @@ export class api {
   constructor(api: AxiosInstance) {
     this.api = api;
   }
+
+  public async register(
+    email: string,
+    username: string,
+    password: string,
+  ): Promise<void> {
+    try {
+      await this.api.post("/users/register/", { email, username, password });
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error registering:", error.response?.data);
+        throw new Error(
+          error.response?.data?.detail ||
+            "Error registering with email " + email,
+        );
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+
+  public async login(email: string, password: string): Promise<void> {
+    try {
+      await this.api.post("/users/login/", { email, password });
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error("Error logging in:", error.response?.data);
+        throw new Error(
+          error.response?.data?.detail ||
+            "Error logging in with email " + email,
+        );
+      } else {
+        console.error("Unexpected error:", error);
+        throw new Error("Unexpected error");
+      }
+    }
+  }
+  public async logout(): Promise<void> {
+    await this.api.delete("/users/logout/");
+  }
   public async getUserById(userId: string | undefined): Promise<string> {
     const response = await this.api.get(`/users/${userId}`);
     return response.data.email;
diff --git a/frontend/src/hooks/auth.tsx b/frontend/src/hooks/auth.tsx
index e26d34fc..de79f5e2 100644
--- a/frontend/src/hooks/auth.tsx
+++ b/frontend/src/hooks/auth.tsx
@@ -1,34 +1,26 @@
 import axios, { AxiosInstance } from "axios";
 import { BACKEND_URL } from "constants/backend";
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { createContext, ReactNode, useCallback, useContext } from "react";
+import { useNavigate } from "react-router-dom";
 
-const API_KEY_ID = "__API_KEY";
+const AUTH_KEY_ID = "AUTH";
 
-const getLocalStorageApiKey = (): string | null => {
-  return localStorage.getItem(API_KEY_ID);
+const getLocalStorageAuth = (): string | null => {
+  return localStorage.getItem(AUTH_KEY_ID);
 };
 
-const setLocalStorageApiKey = (token: string) => {
-  localStorage.setItem(API_KEY_ID, token);
+export const setLocalStorageAuth = (email: string) => {
+  localStorage.setItem(AUTH_KEY_ID, email);
 };
 
-const deleteLocalStorageApiKey = () => {
-  localStorage.removeItem(API_KEY_ID);
+export const deleteLocalStorageAuth = () => {
+  localStorage.removeItem(AUTH_KEY_ID);
 };
 
 interface AuthenticationContextProps {
-  apiKey: string | null;
-  setApiKey: (token: string) => void;
   logout: () => void;
   isAuthenticated: boolean;
+  email: string | null;
   api: AxiosInstance;
 }
 
@@ -43,43 +35,21 @@ interface AuthenticationProviderProps {
 export const AuthenticationProvider = (props: AuthenticationProviderProps) => {
   const { children } = props;
 
-  const [apiKey, setApiKey] = useState<string | null>(getLocalStorageApiKey());
-
   const navigate = useNavigate();
 
-  const isAuthenticated = apiKey !== null;
+  const isAuthenticated = getLocalStorageAuth() !== null;
+  const email = getLocalStorageAuth();
 
   const api = axios.create({
     baseURL: BACKEND_URL,
     withCredentials: true,
   });
 
-  if (isAuthenticated && apiKey !== null) {
-    // Adds the API key to the request header since it is set.
-    api.interceptors.request.use(
-      (config) => {
-        config.headers.Authorization = `Bearer ${apiKey}`;
-        return config;
-      },
-      (error) => {
-        return Promise.reject(error);
-      },
-    );
-  }
-
-  useEffect(() => {
-    if (apiKey === null) {
-      deleteLocalStorageApiKey();
-    } else {
-      setLocalStorageApiKey(apiKey);
-    }
-  }, [apiKey]);
-
   const logout = useCallback(() => {
     (async () => {
       try {
         await api.delete<boolean>("/users/logout");
-        setApiKey(null);
+        deleteLocalStorageAuth();
         navigate("/");
       } catch (error) {
         // Do nothing
@@ -90,10 +60,9 @@ export const AuthenticationProvider = (props: AuthenticationProviderProps) => {
   return (
     <AuthenticationContext.Provider
       value={{
-        apiKey,
-        setApiKey,
         logout,
         isAuthenticated,
+        email,
         api,
       }}
     >
@@ -111,40 +80,3 @@ export const useAuthentication = (): AuthenticationContextProps => {
   }
   return context;
 };
-
-interface OneTimePasswordWrapperProps {
-  children: ReactNode;
-}
-
-interface UserLoginResponse {
-  api_key: string;
-}
-
-export const OneTimePasswordWrapper = ({
-  children,
-}: OneTimePasswordWrapperProps) => {
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const { setApiKey, api } = useAuthentication();
-
-  useEffect(() => {
-    (async () => {
-      const payload = searchParams.get("otp");
-      if (payload !== null) {
-        try {
-          const response = await api.post<UserLoginResponse>("/users/otp", {
-            payload,
-          });
-          setApiKey(response.data.api_key);
-          navigate("/");
-        } catch (error) {
-          // Do nothing
-        } finally {
-          searchParams.delete("otp");
-        }
-      }
-    })();
-  }, []);
-
-  return <>{children}</>;
-};
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 199be686..82a875d2 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -31,80 +31,80 @@ const Home = () => {
         </Col>
       </Row>
       {isAuthenticated && (
-        <Row className="row-two">
-          <Col md={6} sm={12}>
-            <Button
-              variant="primary"
-              size="lg"
-              style={{
-                backgroundColor: "light-purple",
-                borderColor: "black",
-                padding: "10px",
-                width: "100%",
-              }}
-              onClick={() => {
-                navigate("/robots/your/");
-              }}
-            >
-              View Your Robots
-            </Button>
-          </Col>
-          <Col md={6} sm={12}>
-            <Button
-              variant="primary"
-              size="lg"
-              style={{
-                backgroundColor: "dark-purple",
-                borderColor: "black",
-                padding: "10px",
-                width: "100%",
-              }}
-              onClick={() => {
-                navigate("/parts/your/");
-              }}
-            >
-              View Your Parts
-            </Button>
-          </Col>
-        </Row>
-      )}
-      {isAuthenticated && (
-        <Row className="row-two">
-          <Col md={6} sm={12}>
-            <Button
-              variant="success"
-              size="lg"
-              style={{
-                backgroundColor: "light-green",
-                borderColor: "black",
-                padding: "10px",
-                width: "100%",
-              }}
-              onClick={() => {
-                navigate("/robots/add");
-              }}
-            >
-              Make a Robot
-            </Button>
-          </Col>
-          <Col md={6} sm={12}>
-            <Button
-              variant="success"
-              size="lg"
-              style={{
-                backgroundColor: "light-green",
-                borderColor: "black",
-                padding: "10px",
-                width: "100%",
-              }}
-              onClick={() => {
-                navigate("/parts/add");
-              }}
-            >
-              Make a Part
-            </Button>
-          </Col>
-        </Row>
+        <>
+          <Row className="row-two">
+            <Col md={6} sm={12}>
+              <Button
+                variant="primary"
+                size="lg"
+                style={{
+                  backgroundColor: "light-purple",
+                  borderColor: "black",
+                  padding: "10px",
+                  width: "100%",
+                }}
+                onClick={() => {
+                  navigate("/robots/your/");
+                }}
+              >
+                View Your Robots
+              </Button>
+            </Col>
+            <Col md={6} sm={12}>
+              <Button
+                variant="primary"
+                size="lg"
+                style={{
+                  backgroundColor: "dark-purple",
+                  borderColor: "black",
+                  padding: "10px",
+                  width: "100%",
+                }}
+                onClick={() => {
+                  navigate("/parts/your/");
+                }}
+              >
+                View Your Parts
+              </Button>
+            </Col>
+          </Row>
+          <Row className="row-two">
+            <Col md={6} sm={12}>
+              <Button
+                variant="success"
+                size="lg"
+                style={{
+                  backgroundColor: "light-green",
+                  borderColor: "black",
+                  padding: "10px",
+                  width: "100%",
+                }}
+                onClick={() => {
+                  navigate("/robots/add");
+                }}
+              >
+                Make a Robot
+              </Button>
+            </Col>
+            <Col md={6} sm={12}>
+              <Button
+                variant="success"
+                size="lg"
+                style={{
+                  backgroundColor: "light-green",
+                  borderColor: "black",
+                  padding: "10px",
+                  width: "100%",
+                }}
+                onClick={() => {
+                  navigate("/parts/add");
+                }}
+              >
+                Make a Part
+              </Button>
+            </Col>
+          </Row>
+        </>
       )}
     </div>
   );
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 00000000..0f386848
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,61 @@
+import { api } from "hooks/api";
+import { setLocalStorageAuth, useAuthentication } from "hooks/auth";
+import { FormEvent, useState } from "react";
+import { Button, Form } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+
+const Login = () => {
+  const auth = useAuthentication();
+  const auth_api = new api(auth.api);
+
+  const navigate = useNavigate();
+
+  const [password, setPassword] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    try {
+      await auth_api.login(email, password);
+      setLocalStorageAuth(email);
+      navigate("/");
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Login</h1>
+      <Form onSubmit={handleSubmit}>
+        <label htmlFor="email">Email:</label>
+        <Form.Control
+          id="email"
+          className="mb-3"
+          type="text"
+          placeholder="Email"
+          onChange={(e) => {
+            setEmail(e.target.value);
+          }}
+          value={email}
+          required
+        />
+        Description:
+        <Form.Control
+          id="password"
+          className="mb-3"
+          type="password"
+          placeholder="Password"
+          onChange={(e) => {
+            setPassword(e.target.value);
+          }}
+          value={password}
+          required
+        />
+        <Button type="submit">Login</Button>
+      </Form>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/frontend/src/pages/Logout.tsx b/frontend/src/pages/Logout.tsx
new file mode 100644
index 00000000..b99ac7b6
--- /dev/null
+++ b/frontend/src/pages/Logout.tsx
@@ -0,0 +1,17 @@
+import { api } from "hooks/api";
+import { deleteLocalStorageAuth, useAuthentication } from "hooks/auth";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Logout = () => {
+  const navigate = useNavigate();
+  const auth = useAuthentication();
+  const auth_api = new api(auth.api);
+  useEffect(() => {
+    deleteLocalStorageAuth();
+    auth_api.logout();
+    navigate("/");
+  }, [auth_api, navigate]);
+  return <></>;
+};
+export default Logout;
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
new file mode 100644
index 00000000..e0ee3f2d
--- /dev/null
+++ b/frontend/src/pages/Register.tsx
@@ -0,0 +1,80 @@
+import { useAlertQueue } from "hooks/alerts";
+import { api } from "hooks/api";
+import { setLocalStorageAuth, useAuthentication } from "hooks/auth";
+import { FormEvent, useState } from "react";
+import { Button, Form } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+
+const Register = () => {
+  const auth = useAuthentication();
+  const auth_api = new api(auth.api);
+  const { addAlert } = useAlertQueue();
+
+  const navigate = useNavigate();
+
+  const [password, setPassword] = useState<string>("");
+  const [username, setUsername] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    try {
+      await auth_api.register(email, username, password);
+      setLocalStorageAuth(email);
+      navigate("/");
+    } catch (err) {
+      if (err instanceof Error) {
+        addAlert(err.message, "error");
+      } else {
+        addAlert("Unexpected error.", "error");
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h1>Register</h1>
+      <Form onSubmit={handleSubmit}>
+        <label htmlFor="email">Email:</label>
+        <Form.Control
+          id="email"
+          className="mb-3"
+          type="text"
+          placeholder="Email"
+          onChange={(e) => {
+            setEmail(e.target.value);
+          }}
+          value={email}
+          required
+        />
+        <label htmlFor="username">Username:</label>
+        <Form.Control
+          id="username"
+          className="mb-3"
+          type="text"
+          placeholder="Username"
+          onChange={(e) => {
+            setUsername(e.target.value);
+          }}
+          value={username}
+          required
+        />
+        Description:
+        <Form.Control
+          id="password"
+          className="mb-3"
+          type="password"
+          placeholder="Password"
+          onChange={(e) => {
+            setPassword(e.target.value);
+          }}
+          value={password}
+          required
+        />
+        <Button type="submit">Register</Button>
+      </Form>
+    </div>
+  );
+};
+
+export default Register;
diff --git a/store/app/crud/users.py b/store/app/crud/users.py
index 403f0f23..9af34f4d 100644
--- a/store/app/crud/users.py
+++ b/store/app/crud/users.py
@@ -14,7 +14,9 @@ class UserCrud(BaseCrud):
     async def add_user(self, user: User) -> None:
         # Then, add the user object to the Users table.
         table = await self.db.Table("Users")
-        await table.put_item(Item=user.model_dump(), ConditionExpression="attribute_not_exists(email) AND attribute_not_exists(username)")
+        await table.put_item(
+            Item=user.model_dump(), ConditionExpression="attribute_not_exists(email) AND attribute_not_exists(username)"
+        )
 
     async def get_user(self, user_id: str) -> User | None:
         table = await self.db.Table("Users")