Merge pull request #64 from twentyhq/cbo-fetch-jwt-token

Refresh JWT when expired

front/src/pages/auth/Callback.tsx

@@ -1,18 +1,26 @@
 import { useSearchParams, useNavigate } from 'react-router-dom';
-import { useRefreshToken } from '../../hooks/auth/useRefreshToken';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { refreshAccessToken } from '../../services/AuthService';
 
 function Callback() {
   const [searchParams] = useSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+
   const refreshToken = searchParams.get('refreshToken');
   localStorage.setItem('refreshToken', refreshToken || '');
-  const { loading } = useRefreshToken();
   const navigate = useNavigate();
+
   useEffect(() => {
-    if (!loading) {
+    async function getAccessToken() {
+      await refreshAccessToken();
+      setIsLoading(false);
       navigate('/');
     }
-  }, [navigate, loading]);
+
+    if (isLoading) {
+      getAccessToken();
+    }
+  }, [isLoading, navigate]);
 
   return <></>;
 }

front/src/pages/auth/Login.tsx

@@ -1,18 +1,17 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useHasAccessToken } from '../../hooks/auth/useHasAccessToken';
+import { hasAccessToken } from '../../services/AuthService';
 
 function Login() {
-  const hasAccessToken = useHasAccessToken();
   const navigate = useNavigate();
   useEffect(() => {
-    if (!hasAccessToken) {
+    if (!hasAccessToken()) {
       window.location.href =
         process.env.REACT_APP_AUTH_URL + '/signin/provider/google' || '';
     } else {
       navigate('/');
     }
-  }, [hasAccessToken, navigate]);
+  }, [navigate]);
 
   return <></>;
 }

front/src/pages/auth/__tests__/Callback.test.tsx

@@ -1,15 +1,10 @@
 import { render } from '@testing-library/react';
 
 import { CallbackDefault } from '../__stories__/Callback.stories';
+import { act } from 'react-dom/test-utils';
 
-jest.mock('../../../hooks/auth/useRefreshToken', () => ({
-  useRefreshToken: () => ({ loading: false }),
-}));
-
-it('Checks the Callback page render', () => {
-  render(<CallbackDefault />);
-});
-
-afterEach(() => {
-  jest.clearAllMocks();
+it('Checks the Callback page render', async () => {
+  await act(async () => {
+    render(<CallbackDefault />);
+  });
 });