feat: implement external google drive picker integration

- Added `useDriveExternalPicker` hook to manage Google Drive file selection
via external flows (desktop and browser extension).
- Introduced `GoogleFileSelectorExternalButton` and `GoogleFolderSelectorExternalButton`
 components for selecting files and folders from Google Drive.
- Updated existing file download modals to support external Google Drive integration.
- Enhanced Google sign-in components to handle external authentication flows.
- Modified type definitions to accommodate new Google Drive integration features.

Author: paustint

apps/api/src/app/controllers/desktop-app.controller.ts

@@ -13,12 +13,15 @@ import { UserProfileUiSchema } from '@jetstream/types';
 import { fromUnixTime } from 'date-fns';
 import { z } from 'zod';
 import * as userSyncDbService from '../db/data-sync.db';
+import * as orgGroupsDb from '../db/organization.db';
+import * as salesforceOrgsDb from '../db/salesforce-org.db';
 import * as userDbService from '../db/user.db';
 import { checkUserEntitlement } from '../db/user.db';
 import * as webExtDb from '../db/web-extension.db';
 import { emitRecordSyncEventsToOtherClients, SyncEvent } from '../services/data-sync-broadcast.service';
 import * as externalAuthService from '../services/external-auth.service';
 import { decryptJwtTokenOrPlaintext } from '../services/jwt-token-encryption.service';
+import { UserFacingError } from '../utils/error-handler';
 import { redirect, sendJson } from '../utils/response.handlers';
 import { createRoute, RouteValidator } from '../utils/route.utils';
 import { routeDefinition as dataSyncController } from './data-sync.controller';
@@ -100,6 +103,13 @@ export const routeDefinition = {
       hasSourceOrg: false,
     } satisfies RouteValidator,
   },
+  googleConfig: {
+    controllerFn: () => googleConfig,
+    responseType: z.object({ appId: z.string(), apiKey: z.string(), clientId: z.string() }),
+    validators: {
+      hasSourceOrg: false,
+    } satisfies RouteValidator,
+  },
 };
 
 /**
@@ -262,6 +272,14 @@ const dataSyncPush = createRoute(routeDefinition.dataSyncPush.validators, async
   sendJson(res, response);
 });
 
+const googleConfig = createRoute(routeDefinition.googleConfig.validators, async (_params, _req, res) => {
+  sendJson(res, {
+    appId: ENV.GOOGLE_APP_ID,
+    apiKey: ENV.GOOGLE_API_KEY,
+    clientId: ENV.GOOGLE_CLIENT_ID,
+  });
+});
+
 const notifications = createRoute(routeDefinition.notifications.validators, async ({ query, user }, req, res) => {
   // TODO: reserved for future use (e.g. check if there is a critical update required, or auto-update is broken etc..)
   const { os, version } = query;

apps/api/src/app/controllers/web-extension.controller.ts

@@ -84,6 +84,13 @@ export const routeDefinition = {
       ...dataSyncController.push.validators,
     } satisfies RouteValidator,
   },
+  googleConfig: {
+    controllerFn: () => googleConfig,
+    responseType: z.object({ appId: z.string(), apiKey: z.string(), clientId: z.string() }),
+    validators: {
+      hasSourceOrg: false,
+    } satisfies RouteValidator,
+  },
 };
 
 /**
@@ -229,3 +236,11 @@ const dataSyncPush = createRoute(routeDefinition.dataSyncPush.validators, async
 
   sendJson(res, response);
 });
+
+const googleConfig = createRoute(routeDefinition.googleConfig.validators, async (_params, _req, res) => {
+  sendJson(res, {
+    appId: ENV.GOOGLE_APP_ID,
+    apiKey: ENV.GOOGLE_API_KEY,
+    clientId: ENV.GOOGLE_CLIENT_ID,
+  });
+});

apps/api/src/app/routes/desktop-app.routes.ts

@@ -36,12 +36,13 @@ routes.use(
         blockAllMixedContent: [],
         fontSrc: ["'self'", 'https:'],
         frameAncestors: ["'self'"],
-        imgSrc: ["'self'", '*.cloudinary.com'],
+        frameSrc: ["'self'", 'https://accounts.google.com', 'https://docs.google.com', 'https://drive.google.com'],
+        imgSrc: ["'self'", '*.cloudinary.com', '*.googleusercontent.com'],
         objectSrc: ["'none'"],
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        scriptSrc: ["'self'", (_, res) => `'nonce-${(res as any)?.locals?.nonce}'`],
+        scriptSrc: ["'self'", 'https://apis.google.com', 'https://accounts.google.com'],
         scriptSrcAttr: ["'none'"],
         styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
+        connectSrc: ["'self'", 'https://www.googleapis.com', 'https://oauth2.googleapis.com'],
         upgradeInsecureRequests: [],
       },
     },
@@ -83,6 +84,8 @@ routes.get('/orgs', authMiddleware, desktopAppController.routeDefinition.getOrgs
 routes.get('/data-sync/pull', authMiddleware, desktopAppController.routeDefinition.dataSyncPull.controllerFn());
 routes.post('/data-sync/push', authMiddleware, desktopAppController.routeDefinition.dataSyncPush.controllerFn());
 
+routes.get('/google-config', LAX_AuthRateLimit, authMiddleware, desktopAppController.routeDefinition.googleConfig.controllerFn());
+
 routes.get('/v1/notifications', STRICT_2X_AuthRateLimit, authMiddleware, desktopAppController.routeDefinition.notifications.controllerFn());
 
 routes.post(

apps/api/src/app/routes/web-extension-server.routes.ts

@@ -36,12 +36,19 @@ routes.use(
         blockAllMixedContent: [],
         fontSrc: ["'self'", 'https:'],
         frameAncestors: ["'self'"],
-        imgSrc: ["'self'", '*.cloudinary.com'],
+        frameSrc: ["'self'", 'https://accounts.google.com', 'https://docs.google.com', 'https://drive.google.com'],
+        imgSrc: ["'self'", '*.cloudinary.com', '*.googleusercontent.com'],
         objectSrc: ["'none'"],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        scriptSrc: ["'self'", (_, res) => `'nonce-${(res as any)?.locals?.nonce}'`],
+        scriptSrc: [
+          "'self'",
+          'https://apis.google.com',
+          'https://accounts.google.com',
+          (_, res) => `'nonce-${(res as any)?.locals?.nonce}'`,
+        ],
         scriptSrcAttr: ["'none'"],
         styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
+        connectSrc: ["'self'", 'https://www.googleapis.com', 'https://oauth2.googleapis.com'],
         upgradeInsecureRequests: [],
       },
     },
@@ -100,6 +107,8 @@ routes.delete('/auth/logout', STRICT_AuthRateLimit, authMiddleware, webExtension
 routes.get('/data-sync/pull', authMiddleware, webExtensionController.routeDefinition.dataSyncPull.controllerFn());
 routes.post('/data-sync/push', authMiddleware, webExtensionController.routeDefinition.dataSyncPush.controllerFn());
 
+routes.get('/google-config', LAX_AuthRateLimit, authMiddleware, webExtensionController.routeDefinition.googleConfig.controllerFn());
+
 routes.post(
   '/feedback',
   feedbackRateLimit,

apps/jetstream-desktop/src/preload.ts

@@ -38,6 +38,11 @@ const API: ElectronAPI = {
     ipcRenderer.on(IpcEventChannel.openSettings, handler);
     return () => ipcRenderer.removeListener(IpcEventChannel.openSettings, handler);
   },
+  onGooglePickerResult: (callback) => {
+    const handler = (_event, payload) => callback(payload);
+    ipcRenderer.on(IpcEventChannel.googlePickerResult, handler);
+    return () => ipcRenderer.removeListener(IpcEventChannel.googlePickerResult, handler);
+  },
   // One-Way from Client
   login: () => ipcRenderer.invoke('login'),
   logout: () => ipcRenderer.invoke('logout'),
@@ -55,6 +60,7 @@ const API: ElectronAPI = {
   checkForUpdates: (userInitiated) => ipcRenderer.invoke('checkForUpdates', userInitiated),
   getUpdateStatus: () => ipcRenderer.invoke('getUpdateStatus'),
   installUpdate: () => ipcRenderer.invoke('installUpdate'),
+  openGooglePicker: (payload) => ipcRenderer.invoke('openGooglePicker', payload),
 };
 
 contextBridge.exposeInMainWorld('electronAPI', API);

apps/jetstream-desktop/src/services/api.service.ts

@@ -66,6 +66,29 @@ export async function logout({ accessToken, deviceId }: { deviceId: string; acce
   return results.data;
 }
 
+export async function fetchGoogleConfig({ accessToken, deviceId }: { deviceId: string; accessToken: string }) {
+  const response = await net.fetch(`${ENV.SERVER_URL}/desktop-app/google-config`, {
+    method: 'GET',
+    headers: {
+      Accept: 'application/json',
+      Authorization: `Bearer ${accessToken}`,
+      [HTTP.HEADERS.X_APP_VERSION]: app.getVersion(),
+      [HTTP.HEADERS.X_EXT_DEVICE_ID]: deviceId,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch Google configuration');
+  }
+
+  const { data } = await response.json();
+  const parsed = z.object({ appId: z.string(), apiKey: z.string(), clientId: z.string() }).safeParse(data);
+  if (!parsed.success) {
+    throw new Error('Invalid Google configuration response');
+  }
+  return parsed.data;
+}
+
 export async function checkNotifications({
   accessToken,
   deviceId,

apps/jetstream-desktop/src/services/ipc.service.ts

@@ -6,6 +6,7 @@ import {
   DownloadFileResult,
   DownloadZipPayload,
   ElectronApiRequestResponse,
+  GooglePickerResult,
   IcpResponse,
   IpcEventChannel,
 } from '@jetstream/desktop/types';
@@ -23,7 +24,7 @@ import { checkForUpdates, getCurrentUpdateStatus, installUpdate } from '../confi
 import { ENV } from '../config/environment';
 import { desktopRoutes } from '../controllers/desktop.routes';
 import { getOrgFromHeaderOrQuery, initApiConnection } from '../utils/route.utils';
-import { AuthResponseSuccess, logout, verifyAuthToken } from './api.service';
+import { AuthResponseSuccess, fetchGoogleConfig, logout, verifyAuthToken } from './api.service';
 import { deepLink } from './deep-link.service';
 import { downloadAndZipFilesToDisk, downloadBulkApiFileAndSaveToDisk } from './file-download.service';
 import * as dataService from './persistence.service';
@@ -83,6 +84,8 @@ export function registerIpc(): void {
   registerHandler('checkForUpdates', handleCheckForUpdatesEvent);
   registerHandler('getUpdateStatus', handleGetUpdateStatusEvent);
   registerHandler('installUpdate', handleInstallUpdateEvent);
+  // Handle Google Picker
+  registerHandler('openGooglePicker', handleOpenGooglePickerEvent);
 }
 
 const handleSelectFolderEvent: MainIpcHandler<'selectFolder'> = async () => {
@@ -247,6 +250,114 @@ const handleAddOrgEvent: MainIpcHandler<'addOrg'> = async (event, payload) => {
   }, 900000); // 15 minutes in milliseconds
 };
 
+const handleOpenGooglePickerEvent: MainIpcHandler<'openGooglePicker'> = async (event, payload) => {
+  const { mode } = payload;
+  const { deviceId, accessToken } = dataService.getAppData();
+
+  if (!accessToken || !deviceId) {
+    event.sender.send(IpcEventChannel.toastMessage, {
+      type: 'error',
+      message: 'You must be logged in to use Google Drive integration',
+    });
+    return;
+  }
+
+  let googleConfig: { appId: string; apiKey: string; clientId: string };
+  try {
+    googleConfig = await fetchGoogleConfig({ accessToken, deviceId });
+  } catch (ex) {
+    logger.error('Error fetching Google config', ex);
+    event.sender.send(IpcEventChannel.toastMessage, {
+      type: 'error',
+      message: 'Failed to load Google Drive configuration. Please try again.',
+    });
+    return;
+  }
+
+  const nonce = crypto.randomUUID();
+  const pickerParams = new URLSearchParams({
+    mode,
+    nonce,
+    appId: googleConfig.appId,
+    apiKey: googleConfig.apiKey,
+    clientId: googleConfig.clientId,
+  });
+  if (payload.accessToken) {
+    pickerParams.set('accessToken', payload.accessToken);
+  }
+  if (payload.accessTokenExpiresAt) {
+    pickerParams.set('accessTokenExpiresAt', `${payload.accessTokenExpiresAt}`);
+  }
+  const pickerUrl = `${ENV.SERVER_URL}/desktop-app/google-picker?${pickerParams.toString()}`;
+
+  await shell.openExternal(pickerUrl);
+
+  const handleCallback = async (queryParams: Record<string, string>) => {
+    try {
+      const parsed = z
+        .discriminatedUnion('status', [
+          z.object({
+            nonce: z.literal(nonce),
+            status: z.literal('success'),
+            mode: z.enum(['file', 'folder', 'auth']).default(mode),
+            googleAccessToken: z.string(),
+            googleAccessTokenExpiresAt: z.coerce.number().optional(),
+            fileId: z.string().optional(),
+            fileName: z.string().optional(),
+            mimeType: z.string().optional(),
+            folderId: z.string().optional(),
+            folderName: z.string().optional(),
+          }),
+          z.object({
+            nonce: z.literal(nonce),
+            status: z.literal('cancelled'),
+          }),
+          z.object({
+            nonce: z.literal(nonce),
+            status: z.literal('error'),
+            errorMessage: z.string().optional(),
+          }),
+        ])
+        .parse(queryParams);
+
+      let result: GooglePickerResult;
+
+      if (parsed.status === 'cancelled') {
+        result = { status: 'cancelled' };
+      } else if (parsed.status === 'error') {
+        result = { status: 'error', error: parsed.errorMessage || 'Unknown error' };
+      } else {
+        result = {
+          status: 'success',
+          mode: parsed.mode || mode,
+          googleAccessToken: parsed.googleAccessToken,
+          googleAccessTokenExpiresAt: parsed.googleAccessTokenExpiresAt,
+          fileId: parsed.fileId,
+          fileName: parsed.fileName,
+          mimeType: parsed.mimeType,
+          folderId: parsed.folderId,
+          folderName: parsed.folderName,
+        };
+      }
+
+      event.sender.send(IpcEventChannel.googlePickerResult, result);
+    } catch (ex) {
+      logger.error('Error handling Google Picker callback', ex);
+      const result: GooglePickerResult = { status: 'error', error: 'Invalid response from Google Picker' };
+      event.sender.send(IpcEventChannel.googlePickerResult, result);
+    } finally {
+      clearTimeout(timeout);
+    }
+  };
+
+  deepLink.once('googlePicker', handleCallback);
+
+  // Remove the listener if it was not already removed - e.g. picker flow did not complete within 15 minutes
+  const timeout = setTimeout(() => {
+    deepLink.remove('googlePicker', handleCallback);
+  }, 900000); // 15 minutes in milliseconds
+};
+
 const handleCheckAuthEvent: MainIpcHandler<'checkAuth'> = async (): Promise<
   { userProfile: UserProfileUi; authInfo: DesktopAuthInfo } | undefined
 > => {

apps/jetstream-desktop/src/utils/utils.ts

@@ -18,6 +18,7 @@ const CspPolicy = {
     `ws://${SERVER_URL.host}`,
     `wss://${SERVER_URL.host}`,
     'https://*.salesforce.com',
+    'https://www.googleapis.com',
   ],
   'font-src': [`'self'`, 'data:'],
   'frame-ancestors': ["'self'", 'getjetstream.app', '*.google.com', '*.googleapis.com', '*.gstatic.com'],

apps/jetstream-web-extension/src/core/AppInitializer.tsx

@@ -7,15 +7,18 @@ import { getErrorMessage } from '@jetstream/shared/utils';
 import { JetstreamEventSaveSoqlQueryFormatOptionsPayload, UserProfileUi } from '@jetstream/types';
 import { ScopedNotification } from '@jetstream/ui';
 import { AppLoading, fromJetstreamEvents } from '@jetstream/ui-core';
+import { getDefaultAppState } from '@jetstream/shared/utils';
 import { fromAppState } from '@jetstream/ui/app-state';
 import { initDexieDb } from '@jetstream/ui/db';
 import { useObservable } from 'dexie-react-hooks';
+import { getBrowserExtensionVersion } from '@jetstream/shared/ui-utils';
 import { useAtomValue, useSetAtom } from 'jotai';
 import localforage from 'localforage';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Observable } from 'rxjs';
 import browser from 'webextension-polyfill';
+import { environment } from '../environments/environment';
 import { chromeLocalStorage, chromeSyncStorage, UserProfileState } from '../utils/extension.store';
 import { sendMessage } from '../utils/web-extension.utils';
 import { GlobalExtensionError } from './GlobalExtensionError';
@@ -41,6 +44,7 @@ export const AppInitializer: FunctionComponent<AppInitializerProps> = ({ allowWi
   const { options } = useAtomValue(chromeLocalStorage);
   const chromeUserProfile = useAtomValue(UserProfileState);
   const { serverUrl } = useAtomValue(fromAppState.applicationCookieState);
+  const setAppInfo = useSetAtom(fromAppState.appInfoState);
   const setUserProfile = useSetAtom(fromAppState.userProfileState);
 
   const setSelectedOrgId = useSetAtom(fromAppState.selectedOrgIdState);
@@ -53,6 +57,19 @@ export const AppInitializer: FunctionComponent<AppInitializerProps> = ({ allowWi
 
   const [fatalError, setFatalError] = useState<string>();
 
+  // Ensure the appInfoState has the correct serverUrl from the extension environment
+  // The default is 'https://getjetstream.app' which is incorrect in dev
+  useEffect(() => {
+    setAppInfo({
+      appInfo: getDefaultAppState({
+        serverUrl: environment.serverUrl,
+        environment: environment.production ? 'production' : 'development',
+      }),
+      version: getBrowserExtensionVersion(),
+      announcements: [],
+    });
+  }, [setAppInfo]);
+
   useEffect(() => {
     // wait until this data has initialized before proceeding
     if (!authTokens?.accessToken || !extIdentifier?.id) {