feat: oauth for chrome extension (#4870)

Previously we had to create a separate API key to give access to chrome extension so we can make calls to the DB. This PR includes logic to initiate a oauth flow with PKCE method which redirects to the `Authorise` screen to give access to server tokens. Implemented in this PR- 1. make `redirectUrl` a non-nullable parameter 2. Add `NODE_ENV` to environment variable service 3. new env variable `CHROME_EXTENSION_REDIRECT_URL` on server side 4. strict checks for redirectUrl 5. try catch blocks on utils db query methods 6. refactor Apollo Client to handle `unauthorized` condition 7. input field to enter server url (for self-hosting) 8. state to show user if its already connected 9. show error if oauth flow is cancelled by user Follow up PR - Renew token logic --------- Co-authored-by: Félix Malfait <felix@twenty.com>
2024-04-24 10:45:16 +01:00
parent 0a7f82333b
commit c63ee519ea
33 changed files with 18564 additions and 15049 deletions
--- a/packages/twenty-chrome-extension/src/utils/apolloClient.ts
+++ b/packages/twenty-chrome-extension/src/utils/apolloClient.ts
@ -1,18 +1,75 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
+
+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 { apiKey } = await chrome.storage.local.get('apiKey');
-  const { serverBaseUrl } = await chrome.storage.local.get('serverBaseUrl');
+  const store = await chrome.storage.local.get();
+  const serverUrl = `${
+    isDefined(store.serverBaseUrl)
+      ? store.serverBaseUrl
+      : import.meta.env.VITE_SERVER_BASE_URL
+  }/graphql`;

-  return new ApolloClient({
-    cache: new InMemoryCache(),
-    uri: `${
-      serverBaseUrl ? serverBaseUrl : import.meta.env.VITE_SERVER_BASE_URL
-    }/graphql`,
-    headers: {
-      Authorization: `Bearer ${apiKey}`,
-    },
+  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;
+          }
+          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}`);
+    }
  });
+
+  const httpLink = new HttpLink({
+    uri: serverUrl,
+    headers: isDefined(store.accessToken)
+      ? {
+          Authorization: `Bearer ${store.accessToken.token}`,
+        }
+      : {},
+  });
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: from([errorLink, httpLink]),
+  });
+
+  return client;
 };

 export default getApolloClient;