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>

packages/twenty-chrome-extension/src/manifest.ts

@@ -2,6 +2,15 @@ import { defineManifest } from '@crxjs/vite-plugin';
 
 import packageData from '../package.json';
 
+const host_permissions =
+  process.env.VITE_MODE === 'development'
+    ? ['https://www.linkedin.com/*', 'http://localhost:3001/*']
+    : ['https://www.linkedin.com/*'];
+const external_sites =
+  process.env.VITE_MODE === 'development'
+    ? [`https://app.twenty.com/*`, `http://localhost:3001/*`]
+    : [`https://app.twenty.com/*`];
+
 export default defineManifest({
   manifest_version: 3,
   name: 'Twenty',
@@ -32,11 +41,18 @@ export default defineManifest({
     },
   ],
 
-  permissions: ['activeTab', 'storage'],
+  web_accessible_resources: [
+    {
+      resources: ['options.html'],
+      matches: ['https://www.linkedin.com/*'],
+    },
+  ],
 
-  host_permissions: ['https://www.linkedin.com/*'],
+  permissions: ['activeTab', 'storage', 'identity'],
+
+  host_permissions: host_permissions,
 
   externally_connectable: {
-    matches: [`https://app.twenty.com/*`, `http://localhost:3001/*`],
+    matches: external_sites,
   },
 });