🐛 logout automatically when refresh token fails

pouyio · May 12, 2024 · af3ece8 · af3ece8
1 parent fb6c523
commit af3ece8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { refreshApi } from 'utils/api';
 
 export interface Session {
@@ -12,11 +12,13 @@ export interface Session {
 
 interface AuthContextProps {
   session: Session | null;
+  logout: () => void;
   setSession: (session: Session) => void;
 }
 
 export const AuthContext = createContext<AuthContextProps>({
   session: null,
+  logout: () => null,
   setSession: () => null,
 });
 
@@ -27,6 +29,11 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
     JSON.parse(localStorage.getItem('session') || 'null')
   );
 
+  const logout = () => {
+    localStorage.removeItem('session');
+    window.location.reload();
+  };
+
   useEffect(() => {
     const session = JSON.parse(localStorage.getItem('session') || 'null');
 
@@ -35,9 +42,14 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
       if (
         new Date() > new Date((+session.created_at + session.expires_in) * 1000)
       ) {
-        refreshApi(session.refresh_token).then(({ data }) => {
-          setSession(data);
-        });
+        refreshApi(session.refresh_token)
+          .then(({ data }) => {
+            setSession(data);
+          })
+          .catch((e) => {
+            console.warn('Auth error, trying login out', e);
+            logout();
+          });
       }
     }
   }, []);
@@ -52,6 +64,7 @@ export const AuthProvider: React.FC<React.PropsWithChildren<{}>> = ({
     <AuthContext.Provider
       value={{
         session,
+        logout,
         setSession: localSetSession,
       }}
     >

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -16,7 +16,7 @@ export default function Profile() {
   const { theme, setTheme } = useContext(ThemeContext);
   const [stats, setStats] = useState<UserStats>();
   const [dev, setDev] = useState(false);
-  const { session } = useContext(AuthContext);
+  const { session, logout } = useContext(AuthContext);
   const isLogged = !!session;
   const dispatch = useAppDispatch();
   const language = useAppSelector((state) => state.config.language);
@@ -31,11 +31,6 @@ export default function Profile() {
     }
   }, [isLogged]);
 
-  const logout = () => {
-    localStorage.removeItem('session');
-    window.location.reload();
-  };
-
   const convertMinutes = (minutes: number = 0) => {
     const d = Math.floor(minutes / 1440);
     const h = Math.floor((minutes - d * 1440) / 60);