From cd28031637b589955abcd170f6cbf5bd30a9732f Mon Sep 17 00:00:00 2001 From: Julian Cuni Date: Thu, 8 Sep 2022 11:31:44 +0200 Subject: [PATCH] Fontend supertokens, authprovider. --- frontend/package.json | 3 ++- frontend/src/App.tsx | 13 +++++++++ frontend/src/context/AuthContext.tsx | 22 +++++++++++++++ frontend/src/hooks/auth/login.hook.ts | 20 +++++++++++--- frontend/src/hooks/auth/register.hook.ts | 34 ++++++++++++++++++++++++ frontend/src/routes/views/auth/Login.tsx | 4 +-- frontend/yarn.lock | 30 ++++++++++++++++++++- 7 files changed, 119 insertions(+), 7 deletions(-) create mode 100644 frontend/src/context/AuthContext.tsx create mode 100644 frontend/src/hooks/auth/register.hook.ts 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 ; }; 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 = () => { {/* */} 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"