add auth context and update path to constants

Author: DystoriaX

src/App.tsx

@@ -1,16 +1,26 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Login from "pages/Login";
 import Signup from "pages/Signup";
+import { MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+import { HOME_PATH, LOGIN_PATH, SIGNUP_PATH } from "routes/constants";
+import { AuthProvider } from "context/AuthContext";
+import { getUserData } from "api/profile";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<div>L:o</div>} />
-        <Route path="login" element={<Login />} />
-        <Route path="signup" element={<Signup />} />
-      </Routes>
-    </BrowserRouter>
+    <MantineProvider withNormalizeCSS withGlobalStyles>
+      <AuthProvider>
+        <Notifications />
+        <BrowserRouter>
+          <Routes>
+            <Route path={HOME_PATH} element={<></>} />
+            <Route path={LOGIN_PATH} element={<Login />} />
+            <Route path={SIGNUP_PATH} element={<Signup />} />
+          </Routes>
+        </BrowserRouter>
+      </AuthProvider>
+    </MantineProvider>
   );
 }
 

src/api/profile.ts

@@ -1,6 +1,6 @@
 import { UserCredential } from "firebase/auth";
 import { auth, db } from "../firebase/config";
-import { doc, setDoc, updateDoc } from "@firebase/firestore";
+import { doc, setDoc, updateDoc, getDoc } from "@firebase/firestore";
 import { UserProfile } from "../types/profile";
 
 const USER_PATH = "users";
@@ -31,3 +31,20 @@ export async function updateUserData(params: UpdateUserRequest) {
 
   await updateDoc(doc(db, USER_PATH, uid), profile);
 }
+
+export async function getUserData(): Promise<UserProfile> {
+  if (!auth.currentUser) {
+    throw new Error("User needs to log in");
+  }
+
+  const uid = auth.currentUser.uid;
+
+  const docSnap = await getDoc(doc(db, USER_PATH, uid));
+
+  if (!docSnap.exists()) {
+    throw new Error("User does not exist");
+  }
+
+  const data = docSnap.data() as UserProfile;
+  return data;
+}

src/context/AuthContext.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { onAuthStateChanged } from "firebase/auth";
+import { auth } from "../firebase/config";
+import { getUserData } from "api/profile";
+import { UserProfile } from "types/profile";
+
+type AuthContextType = {
+  user: UserProfile | null;
+};
+
+const AuthContext = React.createContext<AuthContextType | null>(null);
+
+// Call this hook if you need user data or check whether user is logged in
+// If user is not authenticated, the value will be null
+export const useAuth = () => {
+  const context = React.useContext(AuthContext);
+
+  if (!context) {
+    throw new Error("useAuth has to be used within AuthProvider");
+  }
+
+  return context;
+};
+
+export function AuthProvider(props: React.PropsWithChildren) {
+  const { children } = props;
+
+  const [user, setUser] = React.useState<UserProfile | null>(null);
+
+  React.useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user) {
+        // Get details
+        getUserData().then((data) => {
+          setUser(data);
+        });
+      } else {
+        setUser(user);
+      }
+    });
+
+    return unsubscribe;
+  });
+
+  return (
+    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
+  );
+}

src/routes/constants.ts

@@ -0,0 +1,3 @@
+export const HOME_PATH = "/";
+export const LOGIN_PATH = "login";
+export const SIGNUP_PATH = "signup";