Moved from axios to Fetch API, Added user object to the AuthState

frontend/app/context/AuthContext.js

@@ -1,5 +1,4 @@
 import { createContext, useContext, useEffect, useState } from "react";
-import axios from "axios";
 import storageUtil from "./storage";
 
 const TOKEN_KEY = "my-jwt";
@@ -26,12 +25,17 @@ export function AuthProvider({ children }) {
       const token = await storageUtil.getItem(TOKEN_KEY);
       console.log(`stored: ${token}`);
 
-      if (token) {
-        axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+      const resUser = await fetch(`${API_URL}/auth/status`, {
+        credentials: "include",
+      });
 
+      const userData = await resUser.json();
+
+      if (token && resUser.status == 200) {
         setAuthState({
           token: token,
           authenticated: true,
+          user: userData.data,
         });
 
         return;
@@ -39,6 +43,7 @@ export function AuthProvider({ children }) {
       setAuthState({
         authenticated: false,
         token: null,
+        user: null,
       });
     }
     loadToken();
@@ -46,49 +51,80 @@ export function AuthProvider({ children }) {
 
   async function register(username, email, password) {
     try {
-      const res = await axios.post(`${API_URL}/auth/signup`, {
-        username,
-        email,
-        password,
-      });
-      return res
+      const res = await fetch(`${API_URL}/auth/signup`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          username,
+          email,
+          password
+        })
+      })
+      return res;
     } catch (err) {
-      return { error: true, msg: err.response.data};
+      return { error: true, msg: err.response.data };
     }
   }
 
   async function login(email, password) {
     try {
-      const res = await axios.post(`${API_URL}/auth/signin`, {
-        email,
-        password,
+      const resLogin = await fetch(`${API_URL}/auth/signin`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
       });
 
+      const loginData = await resLogin.json();
+
+      const resUser = await fetch(`${API_URL}/auth/status`, {
+        credentials: "include",
+      });
+
+      if (resUser.status != 200) {
+        throw Error("user does not have user data");
+      }
+
+      const userData = await resUser.json();
+
       setAuthState({
-        token: res.data.data.jwt,
+        token: loginData.data.jwt,
         authenticated: true,
+        user: userData.data,
       });
 
-      //axios.defaults.headers.common[
-      //  "Authorization"
-      //] = `Bearer ${res.data.data.jwt}`;
-
-      await storageUtil.setItem(TOKEN_KEY, res.data.data.jwt);
-
-      return res
+      await storageUtil.setItem(TOKEN_KEY, loginData.data.jwt);
     } catch (err) {
+      console.error("Failed to log in", err)
       return { error: true, msg: err.res };
     }
   }
 
   async function logout() {
-    await storageUtil.delItem(TOKEN_KEY);
+    let res = await fetch(`${API_URL}/auth/logout`, {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({}),
+    });
+    res = await res.json();
 
-    axios.defaults.headers.common["Authorization"] = "";
+    await storageUtil.delItem(TOKEN_KEY);
 
     setAuthState({
       token: null,
       authenticated: false,
+      user: null,
     });
   }