Fetch jwt token from hasura-auth with refresh_token

front/src/hooks/__tests__/useOutsideAlerter.test.tsx

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import TableHeader from '../../components/table/table-header/TableHeader';
 import { render, fireEvent } from '@testing-library/react';
 import { useOutsideAlerter } from '../useOutsideAlerter';
 import { act } from 'react-dom/test-utils';
@@ -17,9 +16,7 @@ function TestComponent() {
   );
 }
 
-export default TableHeader;
-
-test('clicking the button toggles an answer on/off', async () => {
+test('useOutsideAlerter hook works properly', async () => {
   const { getByText } = render(<TestComponent />);
   const inside = getByText('Inside');
   const outside = getByText('Outside');

front/src/hooks/auth/__tests__/useRefreshToken.test.tsx

@@ -0,0 +1,56 @@
+import { render, waitFor } from '@testing-library/react';
+import { useRefreshToken } from '../useRefreshToken';
+
+const localStorageMock = (function () {
+  let store: { [key: string]: string } = {};
+  return {
+    getItem: function (key: string) {
+      return store[key];
+    },
+    setItem: function (key: string, value: string) {
+      store[key] = value.toString();
+    },
+    clear: function () {
+      store = {};
+    },
+    removeItem: function (key: string) {
+      delete store[key];
+    },
+  };
+})();
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+function TestComponent() {
+  const { loading } = useRefreshToken();
+
+  return <div>{!loading && <div>Refreshed</div>}</div>;
+}
+
+jest.mock('@apollo/client', () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual('@apollo/client'),
+    useQuery: () => ({
+      data: {
+        token: {
+          accessToken: 'test-access-token',
+        },
+      },
+      isLoading: false,
+      error: {},
+    }),
+  };
+});
+
+test('useRefreshToken works properly', async () => {
+  localStorage.setItem('refreshToken', 'test-refresh-token');
+  render(<TestComponent />);
+
+  await waitFor(() => {
+    expect(localStorageMock.getItem('accessToken')).toBe('test-access-token');
+  });
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});

front/src/hooks/auth/useHasAccessToken.tsx

@@ -0,0 +1,3 @@
+export const useHasAccessToken = () => {
+  return false;
+};

front/src/hooks/auth/useRedirectToSignIn.tsx

@@ -0,0 +1,3 @@
+export const redirectToSignIn = () => {
+  return false;
+};

front/src/hooks/auth/useRefreshToken.tsx

@@ -0,0 +1,32 @@
+import { gql, useQuery } from '@apollo/client';
+import { useEffect } from 'react';
+import { authClient } from '../../apollo';
+
+export const GET_TOKEN = gql`
+  fragment Payload on REST {
+    refreshToken: String
+  }
+  query jwt($input: Payload) {
+    token(input: $input) @rest(type: "string", path: "/token", method: "POST") {
+      accessToken
+    }
+  }
+`;
+
+export const useRefreshToken = () => {
+  const refreshToken = localStorage.getItem('refreshToken');
+  const { data, loading } = useQuery(GET_TOKEN, {
+    client: authClient,
+    variables: { input: { refreshToken } },
+  });
+  useEffect(() => {
+    if (!loading) {
+      const accessToken = data.token.accessToken;
+      if (refreshToken && accessToken) {
+        localStorage.setItem('accessToken', accessToken || '');
+      }
+    }
+  }, [data, refreshToken, loading]);
+
+  return { loading };
+};