Fetch jwt token from hasura-auth with refresh_token

front/src/pages/auth/Callback.tsx

@@ -1,15 +1,18 @@
-import { useEffect } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useRefreshToken } from '../../hooks/auth/useRefreshToken';
+import { useEffect } from 'react';
 
 function Callback() {
   const [searchParams] = useSearchParams();
   const refreshToken = searchParams.get('refreshToken');
   localStorage.setItem('refreshToken', refreshToken || '');
-
+  const { loading } = useRefreshToken();
   const navigate = useNavigate();
   useEffect(() => {
-    navigate('/');
-  }, [navigate]);
+    if (!loading) {
+      navigate('/');
+    }
+  }, [navigate, loading]);
 
   return <></>;
 }

front/src/pages/auth/Login.tsx

@@ -6,7 +6,8 @@ function Login() {
   const navigate = useNavigate();
   useEffect(() => {
     if (!refreshToken) {
-      window.location.href = process.env.REACT_APP_LOGIN_PROVIDER_URL || '';
+      window.location.href =
+        process.env.REACT_APP_AUTH_URL + '/signin/provider/google' || '';
     }
     navigate('/');
   }, [refreshToken, navigate]);

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

@@ -2,6 +2,14 @@ import { render } from '@testing-library/react';
 
 import { CallbackDefault } from '../__stories__/Callback.stories';
 
+jest.mock('../../../hooks/auth/useRefreshToken', () => ({
+  useRefreshToken: () => ({ loading: false }),
+}));
+
 it('Checks the Callback page render', () => {
   render(<CallbackDefault />);
 });
+
+afterEach(() => {
+  jest.clearAllMocks();
+});

front/src/pages/people/People.tsx

@@ -14,8 +14,8 @@ const StyledPeopleContainer = styled.div`
 `;
 
 export const GET_PEOPLE = gql`
-  query GetPeople($orderBy: [person_order_by!]) {
-    person(order_by: $orderBy) {
+  query GetPeople($orderBy: [persons_order_by!]) {
+    persons(order_by: $orderBy) {
       id
       phone
       email
@@ -57,7 +57,7 @@ function People() {
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
   };
 
-  const { data } = useQuery<{ person: GraphqlPerson[] }>(GET_PEOPLE, {
+  const { data } = useQuery<{ persons: GraphqlPerson[] }>(GET_PEOPLE, {
     variables: { orderBy: orderBy },
   });
 
@@ -66,7 +66,7 @@ function People() {
       <StyledPeopleContainer>
         {
           <Table
-            data={data ? data.person.map(mapPerson) : []}
+            data={data ? data.persons.map(mapPerson) : []}
             columns={peopleColumns}
             viewName="All People"
             viewIcon={faList}

front/src/pages/people/__stories__/People.stories.tsx

@@ -22,7 +22,7 @@ const mocks = [
     },
     result: {
       data: {
-        person: defaultData,
+        persons: defaultData,
       },
     },
   },