From 7f8f5d3f7b99d4294b067f381bb57127bc18d43c Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 5 Jan 2024 18:52:44 -0300 Subject: [PATCH] refactored authentication --- src/frontend/src/App.tsx | 6 +-- .../src/components/authAdminGuard/index.tsx | 10 +---- .../src/components/authGuard/index.tsx | 4 +- .../src/components/authLoginGuard/index.tsx | 4 +- src/frontend/src/contexts/authContext.tsx | 41 +++++++++---------- .../src/pages/AdminPage/LoginPage/index.tsx | 17 +------- src/frontend/src/pages/loginPage/index.tsx | 19 +-------- src/frontend/src/types/contexts/auth.ts | 1 - 8 files changed, 31 insertions(+), 71 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index e2ead96d9..4f3187b58 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -130,13 +130,13 @@ export default function App() { ); }; - const { getAuthentication } = useContext(AuthContext); + const { isAuthenticated } = useContext(AuthContext); const { refreshFlows, setVersion } = useContext(FlowsContext); const { getTypes } = useContext(typesContext); useEffect(() => { // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks. - if (getAuthentication() === true) { + if (isAuthenticated === true) { // get data from db refreshFlows(); getTypes(); @@ -145,7 +145,7 @@ export default function App() { getVersion().then((data) => { setVersion(data.version); }); - }, [getAuthentication()]); + }, [isAuthenticated]); return ( //need parent component with width and height diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx index 724d39f5a..e0edab387 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -7,18 +7,12 @@ export const ProtectedAdminRoute = ({ children }) => { isAdmin, isAuthenticated, logout, - getAuthentication, userData, autoLogin, } = useContext(AuthContext); - useEffect(() => { - if (!isAuthenticated && !getAuthentication()) { - window.location.replace("/login"); - logout(); - } - }, [isAuthenticated, getAuthentication, logout, userData]); - if (!isAuthenticated && !getAuthentication()) { + if (!isAuthenticated) { + logout(); return ; } diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx index 9b21a1c9f..713862e00 100644 --- a/src/frontend/src/components/authGuard/index.tsx +++ b/src/frontend/src/components/authGuard/index.tsx @@ -3,9 +3,9 @@ import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedRoute = ({ children }) => { - const { isAuthenticated, logout, getAuthentication } = + const { isAuthenticated, logout} = useContext(AuthContext); - if (!isAuthenticated && !getAuthentication()) { + if (!isAuthenticated) { logout(); return ; } diff --git a/src/frontend/src/components/authLoginGuard/index.tsx b/src/frontend/src/components/authLoginGuard/index.tsx index 980528023..ed12d0f54 100644 --- a/src/frontend/src/components/authLoginGuard/index.tsx +++ b/src/frontend/src/components/authLoginGuard/index.tsx @@ -3,14 +3,14 @@ import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedLoginRoute = ({ children }) => { - const { getAuthentication, autoLogin } = useContext(AuthContext); + const { isAuthenticated, autoLogin } = useContext(AuthContext); if (autoLogin === true) { window.location.replace("/"); return ; } - if (getAuthentication()) { + if (isAuthenticated) { window.location.replace("/"); return ; } diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 68e0701c2..ee2a0c35c 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -15,7 +15,6 @@ const initialValue: AuthContextType = { logout: () => {}, userData: null, setUserData: () => {}, - getAuthentication: () => false, authenticationErrorCount: 0, autoLogin: false, setAutoLogin: () => {}, @@ -34,7 +33,9 @@ export function AuthProvider({ children }): React.ReactElement { const [refreshToken, setRefreshToken] = useState( cookies.get("refresh_tkn_lflw") ); - const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isAuthenticated, setIsAuthenticated] = useState( + cookies.get("refresh_tkn_lflw") && cookies.get("access_tkn_lflw") + ); const [isAdmin, setIsAdmin] = useState(false); const [userData, setUserData] = useState(null); const [autoLogin, setAutoLogin] = useState(false); @@ -72,29 +73,26 @@ export function AuthProvider({ children }): React.ReactElement { }) .catch((error) => { setAutoLogin(false); - if (getAuthentication() && !isLoginPage) { - getLoggedUser() - .then((user) => { - setUserData(user); - setLoading(false); - const isSuperUser = user!.is_superuser; - setIsAdmin(isSuperUser); - }) - .catch((error) => { - console.log("auth context"); - setLoading(false); - }); + if (isAuthenticated && !isLoginPage) { + getUser(); } else { setLoading(false); } }); }, [setUserData, setLoading, autoLogin, setIsAdmin]); - function getAuthentication() { - const storedRefreshToken = cookies.get("refresh_tkn_lflw"); - const storedAccess = cookies.get("access_tkn_lflw"); - const auth = storedAccess && storedRefreshToken ? true : false; - return auth; + function getUser(){ + getLoggedUser() + .then((user) => { + setUserData(user); + setLoading(false); + const isSuperUser = user!.is_superuser; + setIsAdmin(isSuperUser); + }) + .catch((error) => { + console.log("auth context"); + setLoading(false); + }); } function login(newAccessToken: string, refreshToken: string) { @@ -103,6 +101,8 @@ export function AuthProvider({ children }): React.ReactElement { setAccessToken(newAccessToken); setRefreshToken(refreshToken); setIsAuthenticated(true); + setTimeout(() => {getUser();}, 500) + } function logout() { @@ -127,14 +127,13 @@ export function AuthProvider({ children }): React.ReactElement { value={{ isAdmin, setIsAdmin, - isAuthenticated: !!accessToken, + isAuthenticated, accessToken, refreshToken, login, logout, setUserData, userData, - getAuthentication, authenticationErrorCount: 0, setAutoLogin, autoLogin, diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx index c62bc5eb2..3d0530932 100644 --- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx @@ -17,7 +17,7 @@ export default function LoginAdminPage() { const [inputState, setInputState] = useState(CONTROL_LOGIN_STATE); - const { login, getAuthentication, setUserData } = useContext(AuthContext); + const { login, isAuthenticated, setUserData } = useContext(AuthContext); const { password, username } = inputState; const setErrorData = useAlertStore((state) => state.setErrorData); @@ -35,7 +35,6 @@ export default function LoginAdminPage() { onLogin(user) .then((user) => { login(user.access_token, user.refresh_token); - getUser(); navigate("/admin/"); }) .catch((error) => { @@ -46,20 +45,6 @@ export default function LoginAdminPage() { }); } - function getUser() { - if (getAuthentication()) { - setTimeout(() => { - getLoggedUser() - .then((user) => { - setUserData(user); - }) - .catch((error) => { - console.log("login admin page", error); - }); - }, 1000); - } - } - return (
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx index bc781011e..c8dc0815c 100644 --- a/src/frontend/src/pages/loginPage/index.tsx +++ b/src/frontend/src/pages/loginPage/index.tsx @@ -19,7 +19,7 @@ export default function LoginPage(): JSX.Element { useState(CONTROL_LOGIN_STATE); const { password, username } = inputState; - const { login, getAuthentication, setUserData, setIsAdmin } = + const { login, isAuthenticated, setUserData, setIsAdmin } = useContext(AuthContext); const navigate = useNavigate(); const setErrorData = useAlertStore((state) => state.setErrorData); @@ -38,7 +38,6 @@ export default function LoginPage(): JSX.Element { onLogin(user) .then((user) => { login(user.access_token, user.refresh_token); - getUser(); navigate("/"); }) .catch((error) => { @@ -49,22 +48,6 @@ export default function LoginPage(): JSX.Element { }); } - function getUser() { - if (getAuthentication()) { - setTimeout(() => { - getLoggedUser() - .then((user) => { - const isSuperUser = user!.is_superuser; - setIsAdmin(isSuperUser); - setUserData(user); - }) - .catch((error) => { - console.log("login page", error); - }); - }, 500); - } - } - return ( { diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index f062181d2..b104e51bc 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -10,7 +10,6 @@ export type AuthContextType = { logout: () => void; userData: Users | null; setUserData: (userData: Users | null) => void; - getAuthentication: () => boolean; authenticationErrorCount: number; autoLogin: boolean; setAutoLogin: (autoLogin: boolean) => void;