Email verification frontend.

frontend/src/App.tsx

@@ -11,7 +11,10 @@ SuperTokens.init({
     apiBasePath: "/auth/api",
     appName: "Fluxem",
   },
-  recipeList: [EmailPass.init(), Session.init()],
+  recipeList: [
+    EmailPass.init(),
+    Session.init(),
+  ],
 });
 
 const App: Component = () => {

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

@@ -2,6 +2,7 @@ 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";
 
 const useLogin = () => {
   const [loading, setLoading] = createSignal(false);
@@ -22,7 +23,7 @@ const useLogin = () => {
           { id: "password", value: form.password },
         ],
       });
-      console.log(login);
+      console.log(login)
     } catch (error) {
       console.error(error);
     } finally {
@@ -30,7 +31,26 @@ const useLogin = () => {
     }
   };
 
-  return { handleInput, loading, handleLogin, form };
+  const handleLogout = async () => {
+    const logout = await EmailPassRecipe.signOut();
+  };
+
+  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 };
 };
 
 export default useLogin;

frontend/src/routes/index.tsx

@@ -5,7 +5,7 @@ const Home = lazy(() => import("./views/home/Home"));
 const AuthLayout = lazy(() => import("./views/auth/AuthLayout"));
 const Login = lazy(() => import("./views/auth/Login"));
 const Register = lazy(() => import("./views/auth/Register"));
-
+const VerifyEmail = lazy(() => import("./views/auth/VerifyEmail"));
 const AppRouter: Component = () => {
   return (
     <Routes>
@@ -13,6 +13,7 @@ const AppRouter: Component = () => {
       <Route path="/auth" element={<AuthLayout />}>
         <Route path="/login" element={<Login />}></Route>
         <Route path="/register" element={<Register />}></Route>
+        <Route path="/verify-email" element={<VerifyEmail />}></Route>
       </Route>
     </Routes>
   );

frontend/src/routes/views/auth/Login.tsx

@@ -1,6 +1,6 @@
 import { Component, Show } from "solid-js";
 import useLogin from "../../../hooks/auth/login.hook";
-const { handleLogin, handleInput, loading, form } = useLogin();
+const { handleLogin, handleLogout, handleInput, handleJwt, loading, form } = useLogin();
 const Login: Component = () => {
   return (
     <div>
@@ -32,6 +32,12 @@ const Login: Component = () => {
           </Show>
         </button>
       </form>
+      <button type="button" onclick={handleLogout}>
+        Logout
+      </button>
+      <button type="button" onclick={handleJwt}>
+        GetJWT
+      </button>
     </div>
   );
 };

frontend/src/routes/views/auth/VerifyEmail.tsx

@@ -0,0 +1,18 @@
+import EmailPassRecipe from "supertokens-web-js/recipe/emailpassword";
+
+const VerifyEmail = () => {
+  let text = "Verifying email";
+  const verifyEmail = EmailPassRecipe.verifyEmail();
+  verifyEmail.then((data) => {
+    console.log(data);
+    text = "Email verified successfully";
+  });
+  //   console.log(verifyEmail);
+  return (
+    <div>
+      <h2>{text}</h2>
+    </div>
+  );
+};
+
+export default VerifyEmail;