⚡ (sheets) Use Google Drive picker and remove sensitive OAuth scope

BREAKING CHANGE: The Google Picker API needs to be enabled in the Google Cloud console. You also need to enable it in
your NEXT_PUBLIC_GOOGLE_API_KEY. You also need to add the drive.file OAuth scope.

apps/builder/src/features/blocks/integrations/googleSheets/api/getAccessToken.ts

@@ -0,0 +1,60 @@
+import prisma from '@typebot.io/lib/prisma'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
+import { TRPCError } from '@trpc/server'
+import { z } from 'zod'
+import { isReadWorkspaceFobidden } from '@/features/workspace/helpers/isReadWorkspaceFobidden'
+import { decrypt } from '@typebot.io/lib/api/encryption/decrypt'
+import { GoogleSheetsCredentials } from '@typebot.io/schemas'
+import { OAuth2Client } from 'google-auth-library'
+import { env } from '@typebot.io/env'
+
+export const getAccessToken = authenticatedProcedure
+  .input(
+    z.object({
+      workspaceId: z.string(),
+      credentialsId: z.string(),
+    })
+  )
+  .query(async ({ input: { workspaceId, credentialsId }, ctx: { user } }) => {
+    const workspace = await prisma.workspace.findFirst({
+      where: {
+        id: workspaceId,
+      },
+      select: {
+        id: true,
+        members: true,
+        credentials: {
+          where: {
+            id: credentialsId,
+          },
+          select: {
+            data: true,
+            iv: true,
+          },
+        },
+      },
+    })
+    if (!workspace || isReadWorkspaceFobidden(workspace, user))
+      throw new TRPCError({ code: 'NOT_FOUND', message: 'Workspace not found' })
+
+    const credentials = workspace.credentials[0]
+    if (!credentials)
+      throw new TRPCError({
+        code: 'NOT_FOUND',
+        message: 'Credentials not found',
+      })
+    const decryptedCredentials = (await decrypt(
+      credentials.data,
+      credentials.iv
+    )) as GoogleSheetsCredentials['data']
+
+    const client = new OAuth2Client({
+      clientId: env.GOOGLE_CLIENT_ID,
+      clientSecret: env.GOOGLE_CLIENT_SECRET,
+      redirectUri: `${env.NEXTAUTH_URL}/api/credentials/google-sheets/callback`,
+    })
+
+    client.setCredentials(decryptedCredentials)
+
+    return { accessToken: (await client.getAccessToken()).token }
+  })

apps/builder/src/features/blocks/integrations/googleSheets/api/getSpreadsheetName.ts

@@ -0,0 +1,72 @@
+import prisma from '@typebot.io/lib/prisma'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
+import { TRPCError } from '@trpc/server'
+import { z } from 'zod'
+import { isReadWorkspaceFobidden } from '@/features/workspace/helpers/isReadWorkspaceFobidden'
+import { getAuthenticatedGoogleClient } from '@typebot.io/lib/google'
+import { GoogleSpreadsheet } from 'google-spreadsheet'
+
+export const getSpreadsheetName = authenticatedProcedure
+  .input(
+    z.object({
+      workspaceId: z.string(),
+      credentialsId: z.string(),
+      spreadsheetId: z.string(),
+    })
+  )
+  .query(
+    async ({
+      input: { workspaceId, credentialsId, spreadsheetId },
+      ctx: { user },
+    }) => {
+      const workspace = await prisma.workspace.findFirst({
+        where: {
+          id: workspaceId,
+        },
+        select: {
+          id: true,
+          members: true,
+          credentials: {
+            where: {
+              id: credentialsId,
+            },
+            select: {
+              id: true,
+              data: true,
+              iv: true,
+            },
+          },
+        },
+      })
+      if (!workspace || isReadWorkspaceFobidden(workspace, user))
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Workspace not found',
+        })
+
+      const credentials = workspace.credentials[0]
+      if (!credentials)
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Credentials not found',
+        })
+
+      const client = await getAuthenticatedGoogleClient(credentials.id)
+
+      if (!client)
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Google client could not be initialized',
+        })
+
+      try {
+        const googleSheet = new GoogleSpreadsheet(spreadsheetId, client)
+
+        await googleSheet.loadInfo()
+
+        return { name: googleSheet.title }
+      } catch (e) {
+        return { name: '' }
+      }
+    }
+  )

apps/builder/src/features/blocks/integrations/googleSheets/api/router.ts

@@ -0,0 +1,8 @@
+import { router } from '@/helpers/server/trpc'
+import { getAccessToken } from './getAccessToken'
+import { getSpreadsheetName } from './getSpreadsheetName'
+
+export const googleSheetsRouter = router({
+  getAccessToken,
+  getSpreadsheetName,
+})

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsConnectModal.tsx

@@ -21,11 +21,13 @@ import { getGoogleSheetsConsentScreenUrlQuery } from '../queries/getGoogleSheets
 
 type Props = {
   isOpen: boolean
+  typebotId: string
   blockId: string
   onClose: () => void
 }
 
 export const GoogleSheetConnectModal = ({
+  typebotId,
   blockId,
   isOpen,
   onClose,
@@ -38,20 +40,21 @@ export const GoogleSheetConnectModal = ({
         <ModalHeader>Connect Spreadsheets</ModalHeader>
         <ModalCloseButton />
         <ModalBody as={Stack} spacing="6">
-          <AlertInfo>
-            Typebot needs access to Google Drive in order to list all your
-            spreadsheets. It also needs access to your spreadsheets in order to
-            fetch or inject data in it.
-          </AlertInfo>
           <Text>
             Make sure to check all the permissions so that the integration works
             as expected:
           </Text>
           <Image
-            src="/images/google-spreadsheets-scopes.jpeg"
+            src="/images/google-spreadsheets-scopes.png"
             alt="Google Spreadsheets checkboxes"
             rounded="md"
           />
+          <AlertInfo>
+            Google does not provide more granular permissions than
+            &quot;read&quot; or &quot;write&quot; access. That&apos;s why it
+            states that Typebot can also delete your spreadsheets which it
+            won&apos;t.
+          </AlertInfo>
           <Flex>
             <Button
               as={Link}
@@ -62,7 +65,8 @@ export const GoogleSheetConnectModal = ({
               href={getGoogleSheetsConsentScreenUrlQuery(
                 window.location.href,
                 blockId,
-                workspace?.id
+                workspace?.id,
+                typebotId
               )}
               mx="auto"
             >

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings.tsx

@@ -22,7 +22,6 @@ import {
 import React, { useMemo } from 'react'
 import { isDefined } from '@typebot.io/lib'
 import { SheetsDropdown } from './SheetsDropdown'
-import { SpreadsheetsDropdown } from './SpreadsheetDropdown'
 import { CellWithValueStack } from './CellWithValueStack'
 import { CellWithVariableIdStack } from './CellWithVariableIdStack'
 import { GoogleSheetConnectModal } from './GoogleSheetsConnectModal'
@@ -37,6 +36,7 @@ import {
   defaultGoogleSheetsOptions,
   totalRowsToExtractOptions,
 } from '@typebot.io/schemas/features/blocks/integrations/googleSheets/constants'
+import { GoogleSpreadsheetPicker } from './GoogleSpreadsheetPicker'
 
 type Props = {
   options: GoogleSheetsBlock['options']
@@ -50,6 +50,7 @@ export const GoogleSheetsSettings = ({
   blockId,
 }: Props) => {
   const { workspace } = useWorkspace()
+  const { typebot } = useTypebot()
   const { save } = useTypebot()
   const { sheets, isLoading } = useSheets({
     credentialsId: options?.credentialsId,
@@ -95,16 +96,20 @@ export const GoogleSheetsSettings = ({
           credentialsName="Sheets account"
         />
       )}
-      <GoogleSheetConnectModal
-        blockId={blockId}
-        isOpen={isOpen}
-        onClose={onClose}
-      />
-      {options?.credentialsId && (
-        <SpreadsheetsDropdown
-          credentialsId={options.credentialsId}
+      {typebot && (
+        <GoogleSheetConnectModal
+          typebotId={typebot.id}
+          blockId={blockId}
+          isOpen={isOpen}
+          onClose={onClose}
+        />
+      )}
+      {options?.credentialsId && workspace && (
+        <GoogleSpreadsheetPicker
           spreadsheetId={options.spreadsheetId}
-          onSelectSpreadsheetId={handleSpreadsheetIdChange}
+          workspaceId={workspace.id}
+          credentialsId={options.credentialsId}
+          onSpreadsheetIdSelect={handleSpreadsheetIdChange}
         />
       )}
       {options?.spreadsheetId && options.credentialsId && (

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSpreadsheetPicker.tsx

@@ -0,0 +1,118 @@
+import { FileIcon } from '@/components/icons'
+import { trpc } from '@/lib/trpc'
+import { Button, Flex, HStack, IconButton, Text } from '@chakra-ui/react'
+import { env } from '@typebot.io/env'
+import React, { useEffect, useState } from 'react'
+import { GoogleSheetsLogo } from './GoogleSheetsLogo'
+import { isDefined } from '@typebot.io/lib'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const window: any
+
+type Props = {
+  spreadsheetId?: string
+  credentialsId: string
+  workspaceId: string
+  onSpreadsheetIdSelect: (spreadsheetId: string) => void
+}
+
+export const GoogleSpreadsheetPicker = ({
+  spreadsheetId,
+  workspaceId,
+  credentialsId,
+  onSpreadsheetIdSelect,
+}: Props) => {
+  const [isPickerInitialized, setIsPickerInitialized] = useState(false)
+
+  const { data } = trpc.sheets.getAccessToken.useQuery({
+    workspaceId,
+    credentialsId,
+  })
+  const { data: spreadsheetData, status } =
+    trpc.sheets.getSpreadsheetName.useQuery(
+      {
+        workspaceId,
+        credentialsId,
+        spreadsheetId: spreadsheetId as string,
+      },
+      { enabled: !!spreadsheetId }
+    )
+
+  useEffect(() => {
+    loadScript('gapi', 'https://apis.google.com/js/api.js', () => {
+      window.gapi.load('picker', () => {
+        setIsPickerInitialized(true)
+      })
+    })
+  }, [])
+
+  const loadScript = (
+    id: string,
+    src: string,
+    callback: { (): void; (): void; (): void }
+  ) => {
+    const existingScript = document.getElementById(id)
+    if (existingScript) {
+      callback()
+      return
+    }
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+
+    script.onload = function () {
+      callback()
+    }
+
+    script.src = src
+    document.head.appendChild(script)
+  }
+
+  const createPicker = () => {
+    if (!data) return
+    if (!isPickerInitialized) throw new Error('Google Picker not inited')
+
+    const picker = new window.google.picker.PickerBuilder()
+      .addView(window.google.picker.ViewId.SPREADSHEETS)
+      .setOAuthToken(data.accessToken)
+      .setDeveloperKey(env.NEXT_PUBLIC_GOOGLE_API_KEY)
+      .setCallback(pickerCallback)
+      .build()
+
+    picker.setVisible(true)
+  }
+
+  const pickerCallback = (data: { action: string; docs: { id: string }[] }) => {
+    if (data.action !== 'picked') return
+    const spreadsheetId = data.docs[0]?.id
+    if (!spreadsheetId) return
+    onSpreadsheetIdSelect(spreadsheetId)
+  }
+
+  if (spreadsheetData && spreadsheetData.name !== '')
+    return (
+      <Flex justifyContent="space-between">
+        <HStack spacing={2}>
+          <GoogleSheetsLogo />
+          <Text fontWeight="semibold">{spreadsheetData.name}</Text>
+        </HStack>
+        <IconButton
+          size="sm"
+          icon={<FileIcon />}
+          onClick={createPicker}
+          isLoading={!isPickerInitialized}
+          aria-label={'Pick another spreadsheet'}
+        />
+      </Flex>
+    )
+  return (
+    <Button
+      onClick={createPicker}
+      isLoading={
+        !isPickerInitialized ||
+        (isDefined(spreadsheetId) && status === 'loading')
+      }
+    >
+      Pick a spreadsheet
+    </Button>
+  )
+}