From f030234438c9930bbb30d10f854a8347dab207d5 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 11 Aug 2023 11:56:12 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(authGuard):=20add=20check=20?= =?UTF-8?q?for=20getAuthentication()=20in=20ProtectedRoute=20component=20t?= =?UTF-8?q?o=20prevent=20unauthorized=20access=20and=20logout=20user=20?= =?UTF-8?q?=E2=9C=A8=20feat(authContext):=20add=20getAuthentication()=20fu?= =?UTF-8?q?nction=20to=20check=20if=20user=20is=20authenticated=20using=20?= =?UTF-8?q?cookies=20=F0=9F=94=A7=20chore(index.tsx):=20reorganize=20conte?= =?UTF-8?q?xt=20providers=20to=20wrap=20AuthProvider=20around=20other=20pr?= =?UTF-8?q?oviders?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/authGuard/index.tsx | 6 ++-- src/frontend/src/contexts/authContext.tsx | 28 +++++++++++++++++++ src/frontend/src/contexts/index.tsx | 6 ++-- src/frontend/src/types/contexts/auth.ts | 1 + 4 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx index 25cc804ee..95d7c4131 100644 --- a/src/frontend/src/components/authGuard/index.tsx +++ b/src/frontend/src/components/authGuard/index.tsx @@ -3,10 +3,10 @@ import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedRoute = ({ children }) => { - - const { isAuthenticated } = useContext(AuthContext); + const { isAuthenticated, logout, getAuthentication } = useContext(AuthContext); - if (!isAuthenticated) { + if (!isAuthenticated && !getAuthentication()) { + logout(); return ; } diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 823b0913a..dcfadee3a 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -2,6 +2,7 @@ import { createContext, useEffect, useState } from "react"; import { AuthContextType, userData } from "../types/contexts/auth"; import { LoginType } from "../types/api"; import { api } from "../controllers/API/api"; +import Cookies from 'universal-cookie'; const initialValue: AuthContextType = { isAuthenticated: false, @@ -12,6 +13,7 @@ const initialValue: AuthContextType = { refreshAccessToken: () => Promise.resolve(), userData: null, setUserData: () => {}, + getAuthentication: () => false, }; export const AuthContext = createContext(initialValue); @@ -21,6 +23,7 @@ export function AuthProvider({ children }): React.ReactElement { const [refreshToken, setRefreshToken] = useState(null); const [isAuthenticated, setIsAuthenticated] = useState(false); const [userData, setUserData] = useState(null); + const cookies = new Cookies(); useEffect(() => { const storedAccessToken = localStorage.getItem("access_token"); @@ -29,7 +32,26 @@ export function AuthProvider({ children }): React.ReactElement { } }, []); + + function getAuthentication(){ + const storedRefreshToken = cookies.get('refresh_token'); + const storedAccess = cookies.get('refresh_token'); + if (storedAccess && storedRefreshToken) { + setAccessToken(storedAccess); + setRefreshToken(storedRefreshToken); + return true; + } + else{ + return false; + } + } + function login(newAccessToken: string, refreshToken: string) { + + //if we want to use cookie + cookies.set('access_token', newAccessToken, { path: '/' }); + cookies.set('refresh_token', refreshToken, { path: '/' }); + localStorage.setItem("access_token", newAccessToken); setAccessToken(newAccessToken); @@ -40,11 +62,16 @@ export function AuthProvider({ children }): React.ReactElement { } function logout() { + //if we want to use cookie + cookies.remove('access_token'); + cookies.remove('refresh_token'); + localStorage.removeItem("access_token"); localStorage.removeItem("refresh_token"); setAccessToken(null); setRefreshToken(null); setIsAuthenticated(false); + } async function refreshAccessToken(refreshToken: string) { @@ -81,6 +108,7 @@ export function AuthProvider({ children }): React.ReactElement { refreshAccessToken, setUserData, userData, + getAuthentication }} > {children} diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index 915f8bb8e..969a04214 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/src/frontend/src/contexts/index.tsx @@ -14,12 +14,13 @@ export default function ContextWrapper({ children }: { children: ReactNode }) { //element to wrap all context return ( <> + + - @@ -27,12 +28,13 @@ export default function ContextWrapper({ children }: { children: ReactNode }) { - + + ); } diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index 1ac47d6c2..7d6ccce12 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -7,6 +7,7 @@ export type AuthContextType = { refreshAccessToken: (refreshToken: string) => Promise; userData: userData | null; setUserData: (userData: userData | null) => void; + getAuthentication: () => boolean; }; export type userData = {