Some cleanups, added logout hook

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import AppRouter from "./routes";
 import SuperTokens from "supertokens-web-js";
 import EmailPass from "supertokens-web-js/recipe/emailpassword";
 import Session from "supertokens-web-js/recipe/session";
+import AuthProvider from "./context/AuthContext";
 
 SuperTokens.init({
   appInfo: {
@@ -11,14 +12,15 @@ SuperTokens.init({
     apiBasePath: "/auth/api",
     appName: "Fluxem",
   },
-  recipeList: [
-    EmailPass.init(),
-    Session.init(),
-  ],
+  recipeList: [EmailPass.init(), Session.init()],
 });
 
 const App: Component = () => {
-  return <AppRouter />;
+  return (
+    <AuthProvider>
+      <AppRouter />
+    </AuthProvider>
+  );
 };
 
 export default App;

frontend/src/context/AuthContext.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from "@solidjs/router";
+import { useNavigate } from "@solidjs/router";
 import { createContext, onMount, Show, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { UserType } from "supertokens-web-js/recipe/emailpassword";
@@ -37,14 +37,15 @@ const AuthProvider = (props: any) => {
     setStore("isLoading", false);
   });
 
-  const setCurrentUser = (user: UserType) => {
-    setStore("isAuthenticated", true);
-    setStore("currentUser", user);
+  const setCurrentUser = (user?: UserType) => {
+    if (user) {
+      setStore("isAuthenticated", true);
+      setStore("currentUser", user);
+    }
   };
   const removeCurrentUser = () => {
     setStore("isAuthenticated", false);
     setStore("currentUser", null);
-    localStorage.removeItem("current_user");
   };
 
   return (

frontend/src/hooks/auth/login.hook.ts

@@ -2,10 +2,14 @@ import { useNavigate } from "@solidjs/router";
 import { createSignal } from "solid-js";
 import { createStore } from "solid-js/store";
 
-import EmailPassRecipe from "supertokens-web-js/recipe/emailpassword";
-import Session from "supertokens-web-js/recipe/session";
 import { useAuthDispatch } from "../../context/AuthContext";
-import { loginService, logoutService } from "../../services/auth.service";
+import {
+  delUserFromLocalStorage,
+  loginService,
+  logoutService,
+  setUserInLocalStorage,
+} from "../../services/auth.service";
+
 const useLogin = () => {
   const [loading, setLoading] = createSignal(false);
   const [form, setForm] = createStore({
@@ -13,7 +17,8 @@ const useLogin = () => {
     password: "",
   });
 
-  const { setCurrentUser, removeCurrentUser } = useAuthDispatch();
+  const { setCurrentUser } = useAuthDispatch();
+
   const navigate = useNavigate();
 
   const handleInput = (ev: any) => {
@@ -30,9 +35,8 @@ const useLogin = () => {
         ],
       });
       if (loginData.status === "OK") {
-        //TODO: Add user in store. Set Authenticated true.
-        localStorage.setItem("current_user", JSON.stringify(loginData.user));
         setCurrentUser(loginData.user);
+        setUserInLocalStorage(loginData.user);
         navigate("/", { replace: true });
       }
       if (loginData.status === "FIELD_ERROR") {
@@ -49,50 +53,9 @@ const useLogin = () => {
     } finally {
       setLoading(false);
     }
-
-    // try {
-    //   const login = await EmailPassRecipe.signIn({
-    //     formFields: [
-    //       { id: "email", value: form.email },
-    //       { id: "password", value: form.password },
-    //     ],
-    //   });
-    //   console.log(login)
-    // } catch (error) {
-    //   console.error(error);
-    // } finally {
-    //   setLoading(false);
-    // }
   };
 
-  const handleLogout = async () => {
-    setLoading(true);
-    setLoading(false);
-    try {
-      await logoutService();
-    } catch (error) {
-      console.log(error);
-    } finally {
-      removeCurrentUser();
-    }
-  };
-
-  const handleJwt = async () => {
-    const session = await Session.doesSessionExist();
-    if (session) {
-      let userId = await Session.getUserId();
-      let jwt = (await Session.getAccessTokenPayloadSecurely()).jwt;
-      // console.log(userId, jwt);
-      const { isVerified } = await EmailPassRecipe.isEmailVerified();
-      console.log(isVerified);
-      if (!isVerified) {
-        const sendEmail = await EmailPassRecipe.sendVerificationEmail();
-        console.log(sendEmail);
-      }
-    }
-  };
-
-  return { handleInput, loading, handleLogin, handleLogout, handleJwt, form };
+  return { handleInput, loading, handleLogin, form };
 };
 
 export default useLogin;

frontend/src/hooks/auth/logout.hook.ts

@@ -0,0 +1,28 @@
+import { createSignal } from "solid-js";
+import { useAuthDispatch } from "../../context/AuthContext";
+import {
+  delUserFromLocalStorage,
+  logoutService,
+} from "../../services/auth.service";
+
+const useLogout = () => {
+  const [loading, setLoading] = createSignal(false);
+  const { removeCurrentUser } = useAuthDispatch();
+
+  const handleLogout = async () => {
+    try {
+      setLoading(true);
+      await logoutService();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      removeCurrentUser();
+      delUserFromLocalStorage();
+      setLoading(false);
+    }
+  };
+
+  return { handleLogout, loading };
+};
+
+export default useLogout;

frontend/src/index.tsx

@@ -4,14 +4,10 @@ import { render } from "solid-js/web";
 import "./index.css";
 import App from "./App";
 import { Router } from "@solidjs/router";
-import AuthProvider from "./context/AuthContext";
-
 render(
   () => (
     <Router>
-      <AuthProvider>
-        <App />
-      </AuthProvider>
+      <App />
     </Router>
   ),
   document.getElementById("main-container") as HTMLElement

frontend/src/routes/views/home/Home.tsx

@@ -1,10 +1,11 @@
 import { Component, Show } from "solid-js";
 import { useAuthState } from "../../../context/AuthContext";
 import useLogin from "../../../hooks/auth/login.hook";
+import useLogout from "../../../hooks/auth/logout.hook";
 
 const Home: Component = () => {
   const authState: any = useAuthState();
-  const { handleLogout } = useLogin();
+  const { handleLogout, loading } = useLogout();
   return (
     <div>
       <p>Home</p>
@@ -12,7 +13,11 @@ const Home: Component = () => {
       <Show when={authState?.isAuthenticated}>
         <div>
           <p>Authenticated</p>
-          <button onclick={handleLogout}>Logout</button>
+          <button onclick={handleLogout} disabled={loading()}>
+            <Show when={!loading()} fallback="Signing out...">
+              Sign Out
+            </Show>
+          </button>
           <p>{JSON.stringify(authState)}</p>
         </div>
       </Show>

frontend/src/services/auth.service.ts

@@ -1,6 +1,10 @@
-import EmailPassRecipe from "supertokens-web-js/recipe/emailpassword";
+import EmailPassRecipe, {
+  UserType,
+} from "supertokens-web-js/recipe/emailpassword";
 import Session from "supertokens-web-js/recipe/session";
 
+const curentUserKey = "current_user";
+
 export interface AuthData {
   formFields: FormFields[];
 }
@@ -17,11 +21,11 @@ const currentUser = async () => {
     (await Session.doesSessionExist())
   ) {
     let sessionUserId = await Session.getUserId();
-    const user: EmailPassRecipe.UserType = JSON.parse(
-      localStorage.getItem("current_user")!
-    );
-    if (sessionUserId === user.id) {
-      return user;
+    const user = getUserFromLocaStorage();
+    if (user) {
+      if (sessionUserId === user.id) {
+        return user;
+      }
     }
   }
   return null;
@@ -35,4 +39,23 @@ const logoutService = async () => {
   await EmailPassRecipe.signOut();
 };
 
-export { loginService, logoutService, currentUser };
+const setUserInLocalStorage = (user: UserType) => {
+  localStorage.setItem(curentUserKey, JSON.stringify(user));
+};
+
+const getUserFromLocaStorage = () => {
+  const user: UserType = JSON.parse(localStorage.getItem(curentUserKey)!);
+  return user;
+};
+
+const delUserFromLocalStorage = () => {
+  localStorage.removeItem(curentUserKey);
+};
+
+export {
+  loginService,
+  logoutService,
+  currentUser,
+  setUserInLocalStorage,
+  delUserFromLocalStorage,
+};