diff --git a/frontend/package.json b/frontend/package.json
index 9fff9e5..5732a3d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "@solidjs/router": "^0.4.3",
     "@urql/core": "^3.0.3",
     "graphql": "^16.6.0",
-    "solid-js": "^1.5.1"
+    "solid-js": "^1.5.1",
+    "supertokens-web-js": "^0.1.6"
   }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2f57b2f..8f25039 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,19 @@
 import type { Component } from "solid-js";
 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";
+
+SuperTokens.init({
+  appInfo: {
+    apiDomain: "http://localhost:3300",
+    apiBasePath: "/auth/api",
+    appName: "Fluxem",
+  },
+  recipeList: [EmailPass.init(), Session.init()],
+});
+
 const App: Component = () => {
   return <AppRouter />;
 };
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
new file mode 100644
index 0000000..7b60d66
--- /dev/null
+++ b/frontend/src/context/AuthContext.tsx
@@ -0,0 +1,22 @@
+import { useLocation, useNavigate } from "@solidjs/router";
+import { createContext } from "solid-js";
+import { createStore } from "solid-js/store";
+
+const AuthStateContext = createContext();
+const AuthDispatchContext = createContext();
+
+const initialState = {
+  isAuthenticated: false,
+  isLoading: true,
+  currentUser: null,
+  currentAccount: null,
+};
+
+const AuthProvider = (props: any) => {
+  const [store, setStore] = createStore(initialState);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+};
+
+export default AuthProvider;
diff --git a/frontend/src/hooks/auth/login.hook.ts b/frontend/src/hooks/auth/login.hook.ts
index b1733c2..2a93c66 100644
--- a/frontend/src/hooks/auth/login.hook.ts
+++ b/frontend/src/hooks/auth/login.hook.ts
@@ -1,19 +1,33 @@
 import { createSignal } from "solid-js";
 import { createStore } from "solid-js/store";
 
+import EmailPassRecipe from "supertokens-web-js/recipe/emailpassword";
+
 const useLogin = () => {
   const [loading, setLoading] = createSignal(false);
   const [form, setForm] = createStore({
-    username: "",
+    email: "",
     password: "",
   });
   const handleInput = (ev: any) => {
     setForm([ev.currentTarget.name], ev.currentTarget.value);
   };
-  const handleLogin = (ev: any) => {
+  const handleLogin = async (ev: any) => {
     ev.preventDefault();
     setLoading(true);
-    
+    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);
+    }
   };
 
   return { handleInput, loading, handleLogin, form };
diff --git a/frontend/src/hooks/auth/register.hook.ts b/frontend/src/hooks/auth/register.hook.ts
new file mode 100644
index 0000000..a27fb0a
--- /dev/null
+++ b/frontend/src/hooks/auth/register.hook.ts
@@ -0,0 +1,34 @@
+import { createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
+import EmailPassRecipe from "supertokens-web-js/recipe/emailpassword";
+
+const useRegister = () => {
+  const [loading, setLoading] = createSignal(false);
+  const [form, setForm] = createStore({
+    email: "",
+    password: "",
+  });
+  const handleInput = (ev: any) => {
+    setForm([ev.currentTarget.name], ev.currentTarget.value);
+  };
+
+  const handleRegister = async (ev: any) => {
+    ev.preventDefault();
+    setLoading(true);
+    try {
+      const login = await EmailPassRecipe.signUp({
+        formFields: [
+          { id: "email", value: form.email },
+          { id: "password", value: form.password },
+        ],
+      });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { handleInput, loading, handleRegister, form };
+};
+
+export default useRegister;
diff --git a/frontend/src/routes/views/auth/Login.tsx b/frontend/src/routes/views/auth/Login.tsx
index 0e316a5..0b06bf0 100644
--- a/frontend/src/routes/views/auth/Login.tsx
+++ b/frontend/src/routes/views/auth/Login.tsx
@@ -9,9 +9,9 @@ const Login: Component = () => {
           {/* <label for="name">Username or Email</label> */}
           <input
             type="text"
-            name="username"
+            name="email"
             placeholder="Email/Username"
-            value={form.username}
+            value={form.email}
             onInput={handleInput}
           />
         </div>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3f74082..9fc6cce 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1297,6 +1297,13 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+browser-tabs-lock@^1.2.14:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/browser-tabs-lock/-/browser-tabs-lock-1.2.15.tgz#d5012e652e2a0cb4eba471b0a2300c2fa5d92788"
+  integrity sha512-J8K9vdivK0Di+b8SBdE7EZxDr88TnATing7XoLw6+nFkXMQ6sVBh92K3NQvZlZU91AIkFRi0w3sztk5Z+vsswA==
+  dependencies:
+    lodash ">=4.17.21"
+
 browserslist@^4.20.2:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
@@ -2465,7 +2472,7 @@ lodash.once@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
-lodash@^4.17.20, lodash@^4.17.21, lodash@~4.17.0:
+lodash@>=4.17.21, lodash@^4.17.20, lodash@^4.17.21, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -3129,6 +3136,27 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+supertokens-js-override@0.0.4, supertokens-js-override@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/supertokens-js-override/-/supertokens-js-override-0.0.4.tgz#9af583fbc5e1f0195dbb358c4fcf75f44c76dc09"
+  integrity sha512-r0JFBjkMIdep3Lbk3JA+MpnpuOtw4RSyrlRAbrzMcxwiYco3GFWl/daimQZ5b1forOiUODpOlXbSOljP/oyurg==
+
+supertokens-web-js@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/supertokens-web-js/-/supertokens-web-js-0.1.6.tgz#81165f9f7604518db05088a8a527c756b3b48178"
+  integrity sha512-Cyu97r6tRJc4ryiKhOqYlqYQ+1XB5x5rJfMudg0kgANu7bvNMo39mI4KAb4eLaXQfXAPQ6Y/As+uqUVP7gbKDw==
+  dependencies:
+    supertokens-js-override "0.0.4"
+    supertokens-website "^13.0.2"
+
+supertokens-website@^13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/supertokens-website/-/supertokens-website-13.0.2.tgz#c1eba0d1745ee2d7c019fa88eb9d7029309fc6e9"
+  integrity sha512-WVCHky05ndJhPXW2khAWy3CBlWn1ZwRF32TPTiGgYLrpQYO9q5doHJi9z2H1OiSmOEFJDEKWtaPW9HxAHABo1Q==
+  dependencies:
+    browser-tabs-lock "^1.2.14"
+    supertokens-js-override "^0.0.4"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"