feat(app/auth): logout user when tokens expire

packages/apps/human-app/frontend/src/auth-web3/web3-auth-context.tsx

@@ -9,6 +9,7 @@ const web3userDataSchema = z.object({
   userId: z.number(),
   address: z.string(),
   reputation_network: z.string(),
+  exp: z.number(),
 });
 
 type Web3UserData = z.infer<typeof web3userDataSchema>;
@@ -38,7 +39,6 @@ export function Web3AuthProvider({ children }: { children: React.ReactNode }) {
     status: AuthStatus;
   }>({ user: null, status: 'loading' });
 
-  // TODO update SignInSuccessResponse according to new endpoint web3/auth/signin
   const handleSignIn = () => {
     try {
       const accessToken = browserAuthProvider.getAccessToken();

packages/apps/human-app/frontend/src/auth/auth-context.tsx

@@ -17,6 +17,7 @@ const userDataSchema = z
     userId: z.number(),
     reputation_network: z.string(),
     email_notifications: z.boolean().optional(), // TODO that should be verified when email notifications feature is done
+    exp: z.number(),
   })
   .merge(extendableUserDataSchema);
 

packages/apps/human-app/frontend/src/contexts/jwt-expiration-check.tsx

@@ -0,0 +1,34 @@
+import type React from 'react';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useGetAccessTokenMutation } from '@/api/servieces/common/get-access-token';
+import { useWeb3Auth } from '@/auth-web3/use-web3-auth';
+import { useAuth } from '@/auth/use-auth';
+
+export function JWTExpirationCheck({
+  children,
+}: {
+  children: React.ReactElement;
+}) {
+  const web3Auth = useWeb3Auth();
+  const web2Auth = useAuth();
+  const location = useLocation();
+  const { mutate: getAccessTokenMutation } = useGetAccessTokenMutation();
+
+  useEffect(() => {
+    if (web3Auth.user?.exp && web3Auth.user.exp < Date.now() / 1000) {
+      getAccessTokenMutation('web3');
+    }
+
+    if (web2Auth.user?.exp && web2Auth.user.exp < Date.now() / 1000) {
+      getAccessTokenMutation('web2');
+    }
+  }, [
+    location,
+    web3Auth.user?.exp,
+    web2Auth.user?.exp,
+    getAccessTokenMutation,
+  ]);
+
+  return children;
+}

packages/apps/human-app/frontend/src/main.tsx

@@ -17,6 +17,7 @@ import '@fontsource/inter/600.css';
 import '@fontsource/inter/800.css';
 import { WalletConnectProvider } from '@/contexts/wallet-connect';
 import { Web3AuthProvider } from '@/auth-web3/web3-auth-context';
+import { JWTExpirationCheck } from '@/contexts/jwt-expiration-check';
 
 const root = document.getElementById('root');
 if (!root) throw Error('root element is undefined');
@@ -39,7 +40,9 @@ createRoot(root).render(
           <WalletConnectProvider>
             <Web3AuthProvider>
               <AuthProvider>
-                <Router />
+                <JWTExpirationCheck>
+                  <Router />
+                </JWTExpirationCheck>
               </AuthProvider>
             </Web3AuthProvider>
             <ReactQueryDevtools client={queryClient} initialIsOpen={false} />