diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a5fc245..9b49da6 100644 --- a/frontend/src/App.tsx +++ b/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 ; + return ( + + + + ); }; export default App; diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx index ad6d1a0..aa37a69 100644 --- a/frontend/src/context/AuthContext.tsx +++ b/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 ( diff --git a/frontend/src/hooks/auth/login.hook.ts b/frontend/src/hooks/auth/login.hook.ts index 104651a..83e2da2 100644 --- a/frontend/src/hooks/auth/login.hook.ts +++ b/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; diff --git a/frontend/src/hooks/auth/logout.hook.ts b/frontend/src/hooks/auth/logout.hook.ts new file mode 100644 index 0000000..72c8999 --- /dev/null +++ b/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; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index dc4b645..2e2537d 100644 --- a/frontend/src/index.tsx +++ b/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( () => ( - - - + ), document.getElementById("main-container") as HTMLElement diff --git a/frontend/src/routes/views/home/Home.tsx b/frontend/src/routes/views/home/Home.tsx index 6f26cf5..37a2daf 100644 --- a/frontend/src/routes/views/home/Home.tsx +++ b/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 (

Home

@@ -12,7 +13,11 @@ const Home: Component = () => {

Authenticated

- +

{JSON.stringify(authState)}

diff --git a/frontend/src/services/auth.service.ts b/frontend/src/services/auth.service.ts index b76ae5f..4660e5c 100644 --- a/frontend/src/services/auth.service.ts +++ b/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, +};