feat: add renew token query for apollo client (chrome-extension)

packages/twenty-chrome-extension/src/db/auth.db.ts

@@ -18,9 +18,3 @@ export const exchangeAuthorizationCode = async (
     return data.exchangeAuthorizationCode;
   else return null;
 };
-
-// export const RenewToken = async (appToken: string): Promise<Tokens | null> => {
-//   const data = await callQuery<Tokens>(RENEW_TOKEN, { appToken });
-//   if (isDefined(data)) return data;
-//   else return null;
-// };

packages/twenty-chrome-extension/src/db/token.db.ts

@@ -0,0 +1,34 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+import { Tokens } from '~/db/types/auth.types';
+import { RENEW_TOKEN } from '~/graphql/auth/queries';
+import { isDefined } from '~/utils/isDefined';
+
+export const renewToken = async (appToken: string): Promise<Tokens | null> => {
+  const store = await chrome.storage.local.get();
+  const serverUrl = `${
+    isDefined(store.serverBaseUrl)
+      ? store.serverBaseUrl
+      : import.meta.env.VITE_SERVER_BASE_URL
+  }/graphql`;
+
+  // Create new client to call refresh token graphql mutation
+  const client = new ApolloClient({
+    uri: serverUrl,
+    cache: new InMemoryCache({}),
+  });
+
+  const { data } = await client.query({
+    query: RENEW_TOKEN,
+    variables: {
+      appToken,
+    },
+    fetchPolicy: 'network-only',
+  });
+
+  if (isDefined(data)) {
+    return data;
+  } else {
+    return null;
+  }
+};

packages/twenty-chrome-extension/src/graphql/auth/queries.ts

@@ -1,20 +1,20 @@
-// import { gql } from '@apollo/client';
+import { gql } from '@apollo/client';
 
-// export const RENEW_TOKEN = gql`
-//   query RenewToken($appToken: String!) {
-//     renewToken(appToken: $appToken) {
-//       loginToken {
-//         token
-//         expiresAt
-//       }
-//       accessToken {
-//         token
-//         expiresAt
-//       }
-//       refreshToken {
-//         token
-//         expiresAt
-//       }
-//     }
-//   }
-// `;
+export const RENEW_TOKEN = gql`
+  query RenewToken($appToken: String!) {
+    renewToken(appToken: $appToken) {
+      loginToken {
+        token
+        expiresAt
+      }
+      accessToken {
+        token
+        expiresAt
+      }
+      refreshToken {
+        token
+        expiresAt
+      }
+    }
+  }
+`;

packages/twenty-chrome-extension/src/utils/apolloClient.ts

@@ -1,67 +1,110 @@
-import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
+import {
+  ApolloClient,
+  from,
+  fromPromise,
+  HttpLink,
+  InMemoryCache,
+} from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 
+import { renewToken } from '~/db/token.db';
+import { Tokens } from '~/db/types/auth.types';
 import { isDefined } from '~/utils/isDefined';
 
 const clearStore = () => {
   chrome.storage.local.remove('loginToken');
-
   chrome.storage.local.remove('accessToken');
-
   chrome.storage.local.remove('refreshToken');
-
   chrome.storage.local.set({ isAuthenticated: false });
 };
 
-const getApolloClient = async () => {
+const setStore = (tokens: Tokens) => {
+  chrome.storage.local.set({
+    loginToken: tokens.loginToken,
+  });
+  chrome.storage.local.set({
+    accessToken: tokens.accessToken,
+  });
+  chrome.storage.local.set({
+    refreshToken: tokens.refreshToken,
+  });
+};
+
+export const getServerUrl = async () => {
   const store = await chrome.storage.local.get();
   const serverUrl = `${
     isDefined(store.serverBaseUrl)
       ? store.serverBaseUrl
       : import.meta.env.VITE_SERVER_BASE_URL
   }/graphql`;
+  return serverUrl;
+};
 
-  const errorLink = onError(({ graphQLErrors, networkError }) => {
-    if (isDefined(graphQLErrors)) {
-      for (const graphQLError of graphQLErrors) {
-        if (graphQLError.message === 'Unauthorized') {
-          //TODO: replace this with renewToken mutation
-          clearStore();
-          return;
-        }
-        switch (graphQLError?.extensions?.code) {
-          case 'UNAUTHENTICATED': {
-            //TODO: replace this with renewToken mutation
-            clearStore();
-            break;
+const getAuthToken = async () => {
+  const store = await chrome.storage.local.get();
+  if (isDefined(store.accessToken)) return `Bearer ${store.accessToken.token}`;
+  else return '';
+};
+
+const getApolloClient = async () => {
+  const store = await chrome.storage.local.get();
+  const errorLink = onError(
+    ({ graphQLErrors, networkError, forward, operation }) => {
+      if (isDefined(graphQLErrors)) {
+        for (const graphQLError of graphQLErrors) {
+          if (graphQLError.message === 'Unauthorized') {
+            return fromPromise(
+              renewToken(store.refreshToken.token)
+                .then((tokens) => {
+                  if (isDefined(tokens)) {
+                    setStore(tokens);
+                  }
+                })
+                .catch(() => {
+                  clearStore();
+                }),
+            ).flatMap(() => forward(operation));
+          }
+          switch (graphQLError?.extensions?.code) {
+            case 'UNAUTHENTICATED': {
+              return fromPromise(
+                renewToken(store.refreshToken.token)
+                  .then((tokens) => {
+                    if (isDefined(tokens)) {
+                      setStore(tokens);
+                    }
+                  })
+                  .catch(() => {
+                    clearStore();
+                  }),
+              ).flatMap(() => forward(operation));
+            }
+            default:
+              // eslint-disable-next-line no-console
+              console.error(
+                `[GraphQL error]: Message: ${graphQLError.message}, Location: ${
+                  graphQLError.locations
+                    ? JSON.stringify(graphQLError.locations)
+                    : graphQLError.locations
+                }, Path: ${graphQLError.path}`,
+              );
+              break;
           }
-          default:
-            // eslint-disable-next-line no-console
-            console.error(
-              `[GraphQL error]: Message: ${graphQLError.message}, Location: ${
-                graphQLError.locations
-                  ? JSON.stringify(graphQLError.locations)
-                  : graphQLError.locations
-              }, Path: ${graphQLError.path}`,
-            );
-            break;
         }
       }
-    }
 
-    if (isDefined(networkError)) {
-      // eslint-disable-next-line no-console
-      console.error(`[Network error]: ${networkError}`);
-    }
-  });
+      if (isDefined(networkError)) {
+        // eslint-disable-next-line no-console
+        console.error(`[Network error]: ${networkError}`);
+      }
+    },
+  );
 
   const httpLink = new HttpLink({
-    uri: serverUrl,
-    headers: isDefined(store.accessToken)
-      ? {
-          Authorization: `Bearer ${store.accessToken.token}`,
-        }
-      : {},
+    uri: await getServerUrl(),
+    headers: {
+      Authorization: await getAuthToken(),
+    },
   });
 
   const client = new ApolloClient({