From fc24ce1306a313e45c5d478ea7bd42cf8edd9efa Mon Sep 17 00:00:00 2001
From: Julian Cuni <julian.cuni@microservices.al>
Date: Fri, 9 Sep 2022 12:39:10 +0200
Subject: [PATCH] Authstate, Login, Logout. Store, dispatch etc

---
 frontend/src/context/AuthContext.tsx     |  6 +-
 frontend/src/hooks/auth/login.hook.ts    | 14 +++-
 frontend/src/routes/views/auth/Login.tsx | 87 +++++++++++++-----------
 frontend/src/routes/views/home/Home.tsx  | 10 ++-
 frontend/src/services/auth.service.ts    | 10 ++-
 5 files changed, 77 insertions(+), 50 deletions(-)

diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 7789666..ad6d1a0 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -15,13 +15,12 @@ interface InitState {
 }
 
 const initialState: InitState = {
-  isLoading: false,
+  isLoading: true,
   isAuthenticated: false,
   currentUser: null,
 };
 
 const AuthProvider = (props: any) => {
-  
   const [store, setStore] = createStore(initialState);
   const navigate = useNavigate();
 
@@ -35,16 +34,17 @@ const AuthProvider = (props: any) => {
 
   onMount(async () => {
     await loadCurrentUser();
+    setStore("isLoading", false);
   });
 
   const setCurrentUser = (user: UserType) => {
     setStore("isAuthenticated", true);
     setStore("currentUser", user);
-    setStore("isLoading", false);
   };
   const removeCurrentUser = () => {
     setStore("isAuthenticated", false);
     setStore("currentUser", null);
+    localStorage.removeItem("current_user");
   };
 
   return (
diff --git a/frontend/src/hooks/auth/login.hook.ts b/frontend/src/hooks/auth/login.hook.ts
index 78f8a4c..104651a 100644
--- a/frontend/src/hooks/auth/login.hook.ts
+++ b/frontend/src/hooks/auth/login.hook.ts
@@ -5,7 +5,7 @@ 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 } from "../../services/auth.service";
+import { loginService, logoutService } from "../../services/auth.service";
 const useLogin = () => {
   const [loading, setLoading] = createSignal(false);
   const [form, setForm] = createStore({
@@ -13,7 +13,7 @@ const useLogin = () => {
     password: "",
   });
 
-  const { setCurrentUser } = useAuthDispatch();
+  const { setCurrentUser, removeCurrentUser } = useAuthDispatch();
   const navigate = useNavigate();
 
   const handleInput = (ev: any) => {
@@ -66,7 +66,15 @@ const useLogin = () => {
   };
 
   const handleLogout = async () => {
-    const logout = await EmailPassRecipe.signOut();
+    setLoading(true);
+    setLoading(false);
+    try {
+      await logoutService();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      removeCurrentUser();
+    }
   };
 
   const handleJwt = async () => {
diff --git a/frontend/src/routes/views/auth/Login.tsx b/frontend/src/routes/views/auth/Login.tsx
index fa9225d..a5775d2 100644
--- a/frontend/src/routes/views/auth/Login.tsx
+++ b/frontend/src/routes/views/auth/Login.tsx
@@ -1,45 +1,52 @@
+import { useNavigate } from "@solidjs/router";
 import { Component, Show } from "solid-js";
+import { useAuthState } from "../../../context/AuthContext";
 import useLogin from "../../../hooks/auth/login.hook";
-const { handleLogin, handleLogout, handleInput, handleJwt, loading, form } = useLogin();
 const Login: Component = () => {
-  return (
-    <div>
-      <form onsubmit={handleLogin}>
-        <div>
-          {/* <label for="name">Username or Email</label> */}
-          <input
-            type="text"
-            name="email"
-            placeholder="Email/Username"
-            value={form.email}
-            onInput={handleInput}
-          />
-        </div>
-        <div>
-          {/* <label for="name">Password</label> */}
-          <input
-            type="password"
-            name="password"
-            placeholder="Password"
-            value={form.password}
-            onInput={handleInput}
-          />
-        </div>
-
-        <button disabled={loading()} type="submit">
-          <Show when={!loading()} fallback="Logging in...">
-            Log In
-          </Show>
-        </button>
-      </form>
-      <button type="button" onclick={handleLogout}>
-        Logout
-      </button>
-      <button type="button" onclick={handleJwt}>
-        GetJWT
-      </button>
-    </div>
-  );
+  const navigate = useNavigate();
+  const { handleLogin, handleInput, loading, form } = useLogin();
+  const authState: any = useAuthState();
+  if (authState.isAuthenticated) {
+    navigate("/");
+  } else {
+    return (
+      <div>
+        <form onsubmit={handleLogin}>
+          <div>
+            <label for="email">Username or Email</label>
+            <br />
+            <input
+              id="email"
+              type="email"
+              name="email"
+              placeholder="Email/Username"
+              value={form.email}
+              onInput={handleInput}
+              required
+            />
+          </div>
+          <div>
+            <label for="password">Password</label>
+            <br />
+            <input
+              id="password"
+              type="password"
+              name="password"
+              placeholder="Password"
+              value={form.password}
+              onInput={handleInput}
+              required
+            />
+          </div>
+          <br />
+          <button disabled={loading()} type="submit">
+            <Show when={!loading()} fallback="Logging in...">
+              Log In
+            </Show>
+          </button>
+        </form>
+      </div>
+    );
+  }
 };
-
 export default Login;
diff --git a/frontend/src/routes/views/home/Home.tsx b/frontend/src/routes/views/home/Home.tsx
index f3f9d5a..6f26cf5 100644
--- a/frontend/src/routes/views/home/Home.tsx
+++ b/frontend/src/routes/views/home/Home.tsx
@@ -1,18 +1,24 @@
 import { Component, Show } from "solid-js";
 import { useAuthState } from "../../../context/AuthContext";
+import useLogin from "../../../hooks/auth/login.hook";
 
 const Home: Component = () => {
   const authState: any = useAuthState();
-
+  const { handleLogout } = useLogin();
   return (
     <div>
       <p>Home</p>
 
       <Show when={authState?.isAuthenticated}>
         <div>
-          <p>{JSON.parse(authState?.currentUser)}</p>
+          <p>Authenticated</p>
+          <button onclick={handleLogout}>Logout</button>
+          <p>{JSON.stringify(authState)}</p>
         </div>
       </Show>
+      <Show when={!authState?.isAuthenticated}>
+        <a href="/auth/login">Login</a>
+      </Show>
     </div>
   );
 };
diff --git a/frontend/src/services/auth.service.ts b/frontend/src/services/auth.service.ts
index 07c913c..b76ae5f 100644
--- a/frontend/src/services/auth.service.ts
+++ b/frontend/src/services/auth.service.ts
@@ -17,7 +17,9 @@ const currentUser = async () => {
     (await Session.doesSessionExist())
   ) {
     let sessionUserId = await Session.getUserId();
-    const user: EmailPassRecipe.UserType = JSON.parse(localStorage.getItem("current_user")!);
+    const user: EmailPassRecipe.UserType = JSON.parse(
+      localStorage.getItem("current_user")!
+    );
     if (sessionUserId === user.id) {
       return user;
     }
@@ -29,4 +31,8 @@ const loginService = async (loginData: AuthData) => {
   return await EmailPassRecipe.signIn(loginData);
 };
 
-export { loginService, currentUser };
+const logoutService = async () => {
+  await EmailPassRecipe.signOut();
+};
+
+export { loginService, logoutService, currentUser };