fix(oauth): fix oauth to use correct subblock value setter + remove unused local storage code (#628)

* fix(oauth): fixed oauth state not persisting in credential selector * remove unused local storage code for oauth * fix lint * selector clearance issue fix * fix typing issue * fix lint * remove cred id from logs * fix lint * works --------- Co-authored-by: Vikhyath Mondreti <vikhyathmondreti@Vikhyaths-Air.attlocal.net>
2026-04-28 03:00:29 -04:00 · 2025-07-07 18:40:33 -07:00
parent b4eda8fe6a
commit 5cf7d025db
18 changed files with 405 additions and 329 deletions
--- a/apps/sim/app/api/auth/oauth/token/route.ts
+++ b/apps/sim/app/api/auth/oauth/token/route.ts
@@ -14,6 +14,8 @@ const logger = createLogger('OAuthTokenAPI')
 export async function POST(request: NextRequest) {
  const requestId = crypto.randomUUID().slice(0, 8)

+  logger.info(`[${requestId}] OAuth token API POST request received`)
+
  try {
    // Parse request body
    const body = await request.json()
@@ -38,6 +40,7 @@ export async function POST(request: NextRequest) {
    const credential = await getCredential(requestId, credentialId, userId)

    if (!credential) {
+      logger.error(`[${requestId}] Credential not found: ${credentialId}`)
      return NextResponse.json({ error: 'Credential not found' }, { status: 404 })
    }

@@ -45,7 +48,8 @@ export async function POST(request: NextRequest) {
      // Refresh the token if needed
      const { accessToken } = await refreshTokenIfNeeded(requestId, credential, credentialId)
      return NextResponse.json({ accessToken }, { status: 200 })
-    } catch (_error) {
+    } catch (error) {
+      logger.error(`[${requestId}] Failed to refresh access token:`, error)
      return NextResponse.json({ error: 'Failed to refresh access token' }, { status: 401 })
    }
  } catch (error) {
--- a/apps/sim/app/api/auth/oauth/utils.ts
+++ b/apps/sim/app/api/auth/oauth/utils.ts
@@ -89,6 +89,7 @@ export async function getOAuthToken(userId: string, providerId: string): Promise
  // Check if the token is expired and needs refreshing
  const now = new Date()
  const tokenExpiry = credential.accessTokenExpiresAt
+  // Only refresh if we have an expiration time AND it's expired AND we have a refresh token
  const needsRefresh = tokenExpiry && tokenExpiry < now && !!credential.refreshToken

  if (needsRefresh) {
@@ -166,7 +167,9 @@ export async function refreshAccessTokenIfNeeded(
  // Check if we need to refresh the token
  const expiresAt = credential.accessTokenExpiresAt
  const now = new Date()
-  const needsRefresh = !expiresAt || expiresAt <= now
+  // Only refresh if we have an expiration time AND it's expired
+  // If no expiration time is set (newly created credentials), assume token is valid
+  const needsRefresh = expiresAt && expiresAt <= now

  const accessToken = credential.accessToken

@@ -233,7 +236,9 @@ export async function refreshTokenIfNeeded(
  // Check if we need to refresh the token
  const expiresAt = credential.accessTokenExpiresAt
  const now = new Date()
-  const needsRefresh = !expiresAt || expiresAt <= now
+  // Only refresh if we have an expiration time AND it's expired
+  // If no expiration time is set (newly created credentials), assume token is valid
+  const needsRefresh = expiresAt && expiresAt <= now

  // If token is still valid, return it directly
  if (!needsRefresh || !credential.refreshToken) {
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
@@ -19,7 +19,6 @@ import {
  type OAuthProvider,
  parseProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'

 const logger = createLogger('OAuthRequiredModal')

@@ -157,42 +156,11 @@ export function OAuthRequiredModal({
    (scope) => !scope.includes('userinfo.email') && !scope.includes('userinfo.profile')
  )

-  const handleRedirectToSettings = () => {
-    try {
-      // Determine the appropriate serviceId and providerId
-      const providerId = getProviderIdFromServiceId(effectiveServiceId)
-
-      // Store information about the required connection
-      saveToStorage<string>('pending_service_id', effectiveServiceId)
-      saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-      saveToStorage<string>('pending_oauth_return_url', window.location.href)
-      saveToStorage<string>('pending_oauth_provider_id', providerId)
-      saveToStorage<boolean>('from_oauth_modal', true)
-
-      // Close the modal
-      onClose()
-
-      // Open the settings modal with the credentials tab
-      const event = new CustomEvent('open-settings', {
-        detail: { tab: 'credentials' },
-      })
-      window.dispatchEvent(event)
-    } catch (error) {
-      logger.error('Error redirecting to settings:', { error })
-    }
-  }
-
  const handleConnectDirectly = async () => {
    try {
      // Determine the appropriate serviceId and providerId
      const providerId = getProviderIdFromServiceId(effectiveServiceId)

-      // Store information about the required connection
-      saveToStorage<string>('pending_service_id', effectiveServiceId)
-      saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-      saveToStorage<string>('pending_oauth_return_url', window.location.href)
-      saveToStorage<string>('pending_oauth_provider_id', providerId)
-
      // Close the modal
      onClose()

@@ -258,14 +226,6 @@ export function OAuthRequiredModal({
          <Button type='button' onClick={handleConnectDirectly} className='sm:order-3'>
            Connect Now
          </Button>
-          <Button
-            type='button'
-            variant='secondary'
-            onClick={handleRedirectToSettings}
-            className='sm:order-2'
-          >
-            Go to Settings
-          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -21,31 +21,24 @@ import {
  type OAuthProvider,
  parseProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
+import type { SubBlockConfig } from '@/blocks/types'
+import { useSubBlockValue } from '../../hooks/use-sub-block-value'
 import { OAuthRequiredModal } from './components/oauth-required-modal'

 const logger = createLogger('CredentialSelector')

 interface CredentialSelectorProps {
-  value: string
-  onChange: (value: string) => void
-  provider: OAuthProvider
-  requiredScopes?: string[]
-  label?: string
+  blockId: string
+  subBlock: SubBlockConfig
  disabled?: boolean
-  serviceId?: string
  isPreview?: boolean
  previewValue?: any | null
 }

 export function CredentialSelector({
-  value,
-  onChange,
-  provider,
-  requiredScopes = [],
-  label = 'Select credential',
+  blockId,
+  subBlock,
  disabled = false,
-  serviceId,
  isPreview = false,
  previewValue,
 }: CredentialSelectorProps) {
@@ -55,14 +48,22 @@ export function CredentialSelector({
  const [showOAuthModal, setShowOAuthModal] = useState(false)
  const [selectedId, setSelectedId] = useState('')

+  // Use collaborative state management via useSubBlockValue hook
+  const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlock.id)
+
+  // Extract values from subBlock config
+  const provider = subBlock.provider as OAuthProvider
+  const requiredScopes = subBlock.requiredScopes || []
+  const label = subBlock.placeholder || 'Select credential'
+  const serviceId = subBlock.serviceId
+
+  // Get the effective value (preview or store value)
+  const effectiveValue = isPreview && previewValue !== undefined ? previewValue : storeValue
+
  // Initialize selectedId with the effective value
  useEffect(() => {
-    if (isPreview && previewValue !== undefined) {
-      setSelectedId(previewValue || '')
-    } else {
-      setSelectedId(value)
-    }
-  }, [value, isPreview, previewValue])
+    setSelectedId(effectiveValue || '')
+  }, [effectiveValue])

  // Derive service and provider IDs using useMemo
  const effectiveServiceId = useMemo(() => {
@@ -85,7 +86,9 @@ export function CredentialSelector({
        // If we have a value but it's not in the credentials, reset it
        if (selectedId && !data.credentials.some((cred: Credential) => cred.id === selectedId)) {
          setSelectedId('')
-          onChange('')
+          if (!isPreview) {
+            setStoreValue('')
+          }
        }

        // Auto-select logic:
@@ -99,11 +102,15 @@ export function CredentialSelector({
          const defaultCred = data.credentials.find((cred: Credential) => cred.isDefault)
          if (defaultCred) {
            setSelectedId(defaultCred.id)
-            onChange(defaultCred.id)
+            if (!isPreview) {
+              setStoreValue(defaultCred.id)
+            }
          } else if (data.credentials.length === 1) {
            // If only one credential, select it
            setSelectedId(data.credentials[0].id)
-            onChange(data.credentials[0].id)
+            if (!isPreview) {
+              setStoreValue(data.credentials[0].id)
+            }
          }
        }
      }
@@ -112,7 +119,7 @@ export function CredentialSelector({
    } finally {
      setIsLoading(false)
    }
-  }, [effectiveProviderId, onChange, selectedId])
+  }, [effectiveProviderId, selectedId, isPreview, setStoreValue])

  // Fetch credentials on initial mount
  useEffect(() => {
@@ -121,11 +128,7 @@ export function CredentialSelector({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

-  // Update local state when external value changes
-  useEffect(() => {
-    const currentValue = isPreview ? previewValue : value
-    setSelectedId(currentValue || '')
-  }, [value, isPreview, previewValue])
+  // This effect is no longer needed since we're using effectiveValue directly

  // Listen for visibility changes to update credentials when user returns from settings
  useEffect(() => {
@@ -158,19 +161,13 @@ export function CredentialSelector({
  const handleSelect = (credentialId: string) => {
    setSelectedId(credentialId)
    if (!isPreview) {
-      onChange(credentialId)
+      setStoreValue(credentialId)
    }
    setOpen(false)
  }

  // Handle adding a new credential
  const handleAddCredential = () => {
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', effectiveProviderId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/confluence-file-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/confluence-file-selector.tsx
@@ -19,7 +19,6 @@ import {
  getServiceIdFromScopes,
  type OAuthProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
 import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'

 export interface ConfluenceFileInfo {
@@ -355,15 +354,6 @@ export function ConfluenceFileSelector({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/google-drive-picker.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/google-drive-picker.tsx
@@ -24,7 +24,6 @@ import {
  type OAuthProvider,
  parseProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
 import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'

 const logger = createLogger('GoogleDrivePicker')
@@ -79,6 +78,7 @@ export function GoogleDrivePicker({
  const [isLoading, setIsLoading] = useState(false)
  const [isLoadingSelectedFile, setIsLoadingSelectedFile] = useState(false)
  const [showOAuthModal, setShowOAuthModal] = useState(false)
+  const [credentialsLoaded, setCredentialsLoaded] = useState(false)
  const initialFetchRef = useRef(false)
  const [openPicker, _authResponse] = useDrivePicker()

@@ -97,6 +97,7 @@ export function GoogleDrivePicker({
  // Fetch available credentials for this provider
  const fetchCredentials = useCallback(async () => {
    setIsLoading(true)
+    setCredentialsLoaded(false)
    try {
      const providerId = getProviderId()
      const response = await fetch(`/api/auth/oauth/credentials?provider=${providerId}`)
@@ -128,6 +129,7 @@ export function GoogleDrivePicker({
      logger.error('Error fetching credentials:', { error })
    } finally {
      setIsLoading(false)
+      setCredentialsLoaded(true)
    }
  }, [provider, getProviderId, selectedCredentialId])

@@ -154,9 +156,16 @@ export function GoogleDrivePicker({
            return data.file
          }
        } else {
-          logger.error('Error fetching file by ID:', {
-            error: await response.text(),
-          })
+          const errorText = await response.text()
+          logger.error('Error fetching file by ID:', { error: errorText })
+
+          // If file not found or access denied, clear the selection
+          if (response.status === 404 || response.status === 403) {
+            logger.info('File not accessible, clearing selection')
+            setSelectedFileId('')
+            onChange('')
+            onFileInfoChange?.(null)
+          }
        }
        return null
      } catch (error) {
@@ -166,7 +175,7 @@ export function GoogleDrivePicker({
        setIsLoadingSelectedFile(false)
      }
    },
-    [selectedCredentialId, onFileInfoChange]
+    [selectedCredentialId, onChange, onFileInfoChange]
  )

  // Fetch credentials on initial mount
@@ -177,20 +186,61 @@ export function GoogleDrivePicker({
    }
  }, [fetchCredentials])

-  // Fetch the selected file metadata once credentials are loaded or changed
-  useEffect(() => {
-    // If we have a file ID selected and credentials are ready but we still don't have the file info, fetch it
-    if (value && selectedCredentialId && !selectedFile) {
-      fetchFileById(value)
-    }
-  }, [value, selectedCredentialId, selectedFile, fetchFileById])
-
  // Keep internal selectedFileId in sync with the value prop
  useEffect(() => {
    if (value !== selectedFileId) {
+      const previousFileId = selectedFileId
      setSelectedFileId(value)
+      // Only clear selected file info if we had a different file before (not initial load)
+      if (previousFileId && previousFileId !== value && selectedFile) {
+        setSelectedFile(null)
+      }
    }
-  }, [value])
+  }, [value, selectedFileId, selectedFile])
+
+  // Track previous credential ID to detect changes
+  const prevCredentialIdRef = useRef<string>('')
+
+  // Clear selected file when credentials are removed or changed
+  useEffect(() => {
+    const prevCredentialId = prevCredentialIdRef.current
+    prevCredentialIdRef.current = selectedCredentialId
+
+    if (!selectedCredentialId) {
+      // No credentials - clear everything
+      if (selectedFile) {
+        setSelectedFile(null)
+        setSelectedFileId('')
+        onChange('')
+      }
+    } else if (prevCredentialId && prevCredentialId !== selectedCredentialId) {
+      // Credentials changed (not initial load) - clear file info to force refetch
+      if (selectedFile) {
+        setSelectedFile(null)
+      }
+    }
+  }, [selectedCredentialId, selectedFile, onChange])
+
+  // Fetch the selected file metadata once credentials are loaded or changed
+  useEffect(() => {
+    // Only fetch if we have both a file ID and credentials, credentials are loaded, but no file info yet
+    if (
+      value &&
+      selectedCredentialId &&
+      credentialsLoaded &&
+      !selectedFile &&
+      !isLoadingSelectedFile
+    ) {
+      fetchFileById(value)
+    }
+  }, [
+    value,
+    selectedCredentialId,
+    credentialsLoaded,
+    selectedFile,
+    isLoadingSelectedFile,
+    fetchFileById,
+  ])

  // Fetch the access token for the selected credential
  const fetchAccessToken = async (): Promise<string | null> => {
@@ -286,15 +336,6 @@ export function GoogleDrivePicker({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
@@ -399,7 +440,7 @@ export function GoogleDrivePicker({
                  {getFileIcon(selectedFile, 'sm')}
                  <span className='truncate font-normal'>{selectedFile.name}</span>
                </div>
-              ) : selectedFileId && (isLoadingSelectedFile || !selectedCredentialId) ? (
+              ) : selectedFileId && isLoadingSelectedFile && selectedCredentialId ? (
                <div className='flex items-center gap-2'>
                  <RefreshCw className='h-4 w-4 animate-spin' />
                  <span className='text-muted-foreground'>Loading document...</span>
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/jira-issue-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/jira-issue-selector.tsx
@@ -20,7 +20,6 @@ import {
  getServiceIdFromScopes,
  type OAuthProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
 import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'

 const logger = new Logger('jira_issue_selector')
@@ -420,15 +419,6 @@ export function JiraIssueSelector({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/microsoft-file-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/microsoft-file-selector.tsx
@@ -23,7 +23,6 @@ import {
  type OAuthProvider,
  parseProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
 import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'

 const logger = createLogger('MicrosoftFileSelector')
@@ -75,6 +74,7 @@ export function MicrosoftFileSelector({
  const [availableFiles, setAvailableFiles] = useState<MicrosoftFileInfo[]>([])
  const [searchQuery, setSearchQuery] = useState<string>('')
  const [showOAuthModal, setShowOAuthModal] = useState(false)
+  const [credentialsLoaded, setCredentialsLoaded] = useState(false)
  const initialFetchRef = useRef(false)

  // Determine the appropriate service ID based on provider and scopes
@@ -92,6 +92,7 @@ export function MicrosoftFileSelector({
  // Fetch available credentials for this provider
  const fetchCredentials = useCallback(async () => {
    setIsLoading(true)
+    setCredentialsLoaded(false)
    try {
      const providerId = getProviderId()
      const response = await fetch(`/api/auth/oauth/credentials?provider=${providerId}`)
@@ -123,6 +124,7 @@ export function MicrosoftFileSelector({
      logger.error('Error fetching credentials:', { error })
    } finally {
      setIsLoading(false)
+      setCredentialsLoaded(true)
    }
  }, [provider, getProviderId, selectedCredentialId])

@@ -183,9 +185,16 @@ export function MicrosoftFileSelector({
            return data.file
          }
        } else {
-          logger.error('Error fetching file by ID:', {
-            error: await response.text(),
-          })
+          const errorText = await response.text()
+          logger.error('Error fetching file by ID:', { error: errorText })
+
+          // If file not found or access denied, clear the selection
+          if (response.status === 404 || response.status === 403) {
+            logger.info('File not accessible, clearing selection')
+            setSelectedFileId('')
+            onChange('')
+            onFileInfoChange?.(null)
+          }
        }
        return null
      } catch (error) {
@@ -224,20 +233,61 @@ export function MicrosoftFileSelector({
    }
  }, [searchQuery, selectedCredentialId, fetchAvailableFiles])

-  // Fetch the selected file metadata once credentials are loaded or changed
-  useEffect(() => {
-    // If we have a file ID selected and credentials are ready but we still don't have the file info, fetch it
-    if (value && selectedCredentialId && !selectedFile) {
-      fetchFileById(value)
-    }
-  }, [value, selectedCredentialId, selectedFile, fetchFileById])
-
  // Keep internal selectedFileId in sync with the value prop
  useEffect(() => {
    if (value !== selectedFileId) {
+      const previousFileId = selectedFileId
      setSelectedFileId(value)
+      // Only clear selected file info if we had a different file before (not initial load)
+      if (previousFileId && previousFileId !== value && selectedFile) {
+        setSelectedFile(null)
+      }
    }
-  }, [value])
+  }, [value, selectedFileId, selectedFile])
+
+  // Track previous credential ID to detect changes
+  const prevCredentialIdRef = useRef<string>('')
+
+  // Clear selected file when credentials are removed or changed
+  useEffect(() => {
+    const prevCredentialId = prevCredentialIdRef.current
+    prevCredentialIdRef.current = selectedCredentialId
+
+    if (!selectedCredentialId) {
+      // No credentials - clear everything
+      if (selectedFile) {
+        setSelectedFile(null)
+        setSelectedFileId('')
+        onChange('')
+      }
+    } else if (prevCredentialId && prevCredentialId !== selectedCredentialId) {
+      // Credentials changed (not initial load) - clear file info to force refetch
+      if (selectedFile) {
+        setSelectedFile(null)
+      }
+    }
+  }, [selectedCredentialId, selectedFile, onChange])
+
+  // Fetch the selected file metadata once credentials are loaded or changed
+  useEffect(() => {
+    // Only fetch if we have both a file ID and credentials, credentials are loaded, but no file info yet
+    if (
+      value &&
+      selectedCredentialId &&
+      credentialsLoaded &&
+      !selectedFile &&
+      !isLoadingSelectedFile
+    ) {
+      fetchFileById(value)
+    }
+  }, [
+    value,
+    selectedCredentialId,
+    credentialsLoaded,
+    selectedFile,
+    isLoadingSelectedFile,
+    fetchFileById,
+  ])

  // Handle selecting a file from the available files
  const handleFileSelect = (file: MicrosoftFileInfo) => {
@@ -251,15 +301,6 @@ export function MicrosoftFileSelector({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
@@ -381,7 +422,7 @@ export function MicrosoftFileSelector({
                  {getFileIcon(selectedFile, 'sm')}
                  <span className='truncate font-normal'>{selectedFile.name}</span>
                </div>
-              ) : selectedFileId && (isLoadingSelectedFile || !selectedCredentialId) ? (
+              ) : selectedFileId && isLoadingSelectedFile && selectedCredentialId ? (
                <div className='flex items-center gap-2'>
                  <RefreshCw className='h-4 w-4 animate-spin' />
                  <span className='text-muted-foreground'>Loading document...</span>
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/teams-message-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/file-selector/components/teams-message-selector.tsx
@@ -20,7 +20,6 @@ import {
  getServiceIdFromScopes,
  type OAuthProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
 import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'

 const logger = new Logger('TeamsMessageSelector')
@@ -399,15 +398,6 @@ export function TeamsMessageSelector({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/folder-selector/folder-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/folder-selector/folder-selector.tsx
@@ -16,7 +16,6 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { createLogger } from '@/lib/logs/console-logger'
 import { type Credential, getProviderIdFromServiceId, getServiceIdFromScopes } from '@/lib/oauth'
 import { OAuthRequiredModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/credential-selector/components/oauth-required-modal'
-import { saveToStorage } from '@/stores/workflows/persistence'

 const logger = createLogger('FolderSelector')

@@ -274,15 +273,6 @@ export function FolderSelector({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/project-selector/components/jira-project-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/project-selector/components/jira-project-selector.tsx
@@ -20,7 +20,6 @@ import {
  getServiceIdFromScopes,
  type OAuthProvider,
 } from '@/lib/oauth'
-import { saveToStorage } from '@/stores/workflows/persistence'
 import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'

 const logger = new Logger('jira_project_selector')
@@ -371,15 +370,6 @@ export function JiraProjectSelector({

  // Handle adding a new credential
  const handleAddCredential = () => {
-    const effectiveServiceId = getServiceId()
-    const providerId = getProviderId()
-
-    // Store information about the required connection
-    saveToStorage<string>('pending_service_id', effectiveServiceId)
-    saveToStorage<string[]>('pending_oauth_scopes', requiredScopes)
-    saveToStorage<string>('pending_oauth_return_url', window.location.href)
-    saveToStorage<string>('pending_oauth_provider_id', providerId)
-
    // Show the OAuth modal
    setShowOAuthModal(true)
    setOpen(false)
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/tool-credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/tool-credential-selector.tsx
@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Check, ChevronDown, ExternalLink, Plus, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { createLogger } from '@/lib/logs/console-logger'
+import {
+  type Credential,
+  OAUTH_PROVIDERS,
+  type OAuthProvider,
+  type OAuthService,
+  parseProvider,
+} from '@/lib/oauth'
+import { OAuthRequiredModal } from '../../credential-selector/components/oauth-required-modal'
+
+const logger = createLogger('ToolCredentialSelector')
+
+// Helper functions for provider icons and names
+const getProviderIcon = (providerName: OAuthProvider) => {
+  const { baseProvider } = parseProvider(providerName)
+  const baseProviderConfig = OAUTH_PROVIDERS[baseProvider]
+
+  if (!baseProviderConfig) {
+    return <ExternalLink className='h-4 w-4' />
+  }
+  // Always use the base provider icon for a more consistent UI
+  return baseProviderConfig.icon({ className: 'h-4 w-4' })
+}
+
+const getProviderName = (providerName: OAuthProvider) => {
+  const { baseProvider } = parseProvider(providerName)
+  const baseProviderConfig = OAUTH_PROVIDERS[baseProvider]
+
+  if (baseProviderConfig) {
+    return baseProviderConfig.name
+  }
+
+  // Fallback: capitalize the provider name
+  return providerName
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+interface ToolCredentialSelectorProps {
+  value: string
+  onChange: (value: string) => void
+  provider: OAuthProvider
+  requiredScopes?: string[]
+  label?: string
+  serviceId?: OAuthService
+  disabled?: boolean
+}
+
+export function ToolCredentialSelector({
+  value,
+  onChange,
+  provider,
+  requiredScopes = [],
+  label = 'Select account',
+  serviceId,
+  disabled = false,
+}: ToolCredentialSelectorProps) {
+  const [open, setOpen] = useState(false)
+  const [credentials, setCredentials] = useState<Credential[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [showOAuthModal, setShowOAuthModal] = useState(false)
+  const [selectedId, setSelectedId] = useState('')
+
+  // Update selected ID when value changes
+  useEffect(() => {
+    setSelectedId(value)
+  }, [value])
+
+  const fetchCredentials = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const response = await fetch(`/api/auth/oauth/credentials?provider=${provider}`)
+      if (response.ok) {
+        const data = await response.json()
+        setCredentials(data.credentials || [])
+
+        // If we have a selected value but it's not in the credentials list, clear it
+        if (value && !data.credentials?.some((cred: Credential) => cred.id === value)) {
+          onChange('')
+        }
+      } else {
+        logger.error('Error fetching credentials:', { error: await response.text() })
+        setCredentials([])
+      }
+    } catch (error) {
+      logger.error('Error fetching credentials:', { error })
+      setCredentials([])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [provider, value, onChange])
+
+  // Fetch credentials on mount and when provider changes
+  useEffect(() => {
+    fetchCredentials()
+  }, [fetchCredentials])
+
+  const handleSelect = (credentialId: string) => {
+    setSelectedId(credentialId)
+    onChange(credentialId)
+    setOpen(false)
+  }
+
+  const handleOAuthClose = () => {
+    setShowOAuthModal(false)
+    // Refetch credentials to include any new ones
+    fetchCredentials()
+  }
+
+  const selectedCredential = credentials.find((cred) => cred.id === selectedId)
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant='outline'
+            role='combobox'
+            aria-expanded={open}
+            className='w-full justify-between'
+            disabled={disabled}
+          >
+            {selectedCredential ? (
+              <div className='flex items-center gap-2 overflow-hidden'>
+                {getProviderIcon(provider)}
+                <span className='truncate font-normal'>{selectedCredential.name}</span>
+              </div>
+            ) : (
+              <div className='flex items-center gap-2'>
+                {getProviderIcon(provider)}
+                <span className='text-muted-foreground'>{label}</span>
+              </div>
+            )}
+            <ChevronDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-[300px] p-0' align='start'>
+          <Command>
+            <CommandList>
+              <CommandEmpty>
+                {isLoading ? (
+                  <div className='flex items-center justify-center p-4'>
+                    <RefreshCw className='h-4 w-4 animate-spin' />
+                    <span className='ml-2'>Loading...</span>
+                  </div>
+                ) : credentials.length === 0 ? (
+                  <div className='p-4 text-center'>
+                    <p className='font-medium text-sm'>No accounts connected.</p>
+                    <p className='text-muted-foreground text-xs'>
+                      Connect a {getProviderName(provider)} account to continue.
+                    </p>
+                  </div>
+                ) : (
+                  <div className='p-4 text-center'>
+                    <p className='font-medium text-sm'>No accounts found.</p>
+                  </div>
+                )}
+              </CommandEmpty>
+
+              {credentials.length > 0 && (
+                <CommandGroup>
+                  {credentials.map((credential) => (
+                    <CommandItem
+                      key={credential.id}
+                      value={credential.id}
+                      onSelect={() => handleSelect(credential.id)}
+                    >
+                      <div className='flex items-center gap-2'>
+                        {getProviderIcon(credential.provider)}
+                        <span className='font-normal'>{credential.name}</span>
+                      </div>
+                      {credential.id === selectedId && <Check className='ml-auto h-4 w-4' />}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+
+              <CommandGroup>
+                <CommandItem onSelect={() => setShowOAuthModal(true)}>
+                  <div className='flex items-center gap-2'>
+                    <Plus className='h-4 w-4' />
+                    <span className='font-normal'>Connect {getProviderName(provider)} account</span>
+                  </div>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <OAuthRequiredModal
+        isOpen={showOAuthModal}
+        onClose={handleOAuthClose}
+        provider={provider}
+        toolName={label}
+        requiredScopes={requiredScopes}
+        serviceId={serviceId}
+      />
+    </>
+  )
+}
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx
@@ -22,10 +22,10 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { getTool } from '@/tools/utils'
 import { useSubBlockValue } from '../../hooks/use-sub-block-value'
 import { ChannelSelectorInput } from '../channel-selector/channel-selector-input'
-import { CredentialSelector } from '../credential-selector/credential-selector'
 import { ShortInput } from '../short-input'
 import { type CustomTool, CustomToolModal } from './components/custom-tool-modal/custom-tool-modal'
 import { ToolCommand } from './components/tool-command/tool-command'
+import { ToolCredentialSelector } from './components/tool-credential-selector'

 interface ToolInputProps {
  blockId: string
@@ -1060,13 +1060,14 @@ export function ToolInput({
                                <div className='font-medium text-muted-foreground text-xs'>
                                  Account
                                </div>
-                                <CredentialSelector
+                                <ToolCredentialSelector
                                  value={tool.params.credential || ''}
                                  onChange={(value) => handleCredentialChange(toolIndex, value)}
                                  provider={oauthConfig.provider as OAuthProvider}
                                  requiredScopes={oauthConfig.additionalScopes || []}
                                  label={`Select ${oauthConfig.provider} account`}
                                  serviceId={oauthConfig.provider}
+                                  disabled={disabled}
                                />
                              </div>
                            )
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/webhook/webhook.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/webhook/webhook.tsx
@@ -16,7 +16,7 @@ import { createLogger } from '@/lib/logs/console-logger'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { useSubBlockValue } from '../../hooks/use-sub-block-value'
-import { CredentialSelector } from '../credential-selector/credential-selector'
+import { ToolCredentialSelector } from '../tool-input/components/tool-credential-selector'
 import { WebhookModal } from './components/webhook-modal'

 const logger = createLogger('WebhookConfig')
@@ -564,7 +564,7 @@ export function WebhookConfig({
        {error && <div className='mb-2 text-red-500 text-sm dark:text-red-400'>{error}</div>}

        <div className='mb-3'>
-          <CredentialSelector
+          <ToolCredentialSelector
            value={gmailCredentialId}
            onChange={handleCredentialChange}
            provider='google-email'
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx
@@ -297,27 +297,11 @@ export function SubBlock({
      case 'oauth-input':
        return (
          <CredentialSelector
-            value={
-              isPreview ? previewValue || '' : typeof config.value === 'string' ? config.value : ''
-            }
-            onChange={(value) => {
-              // Only allow changes in non-preview mode and when not disabled
-              if (!isPreview && !disabled) {
-                const event = new CustomEvent('update-subblock-value', {
-                  detail: {
-                    blockId,
-                    subBlockId: config.id,
-                    value,
-                  },
-                })
-                window.dispatchEvent(event)
-              }
-            }}
-            provider={config.provider as any}
-            requiredScopes={config.requiredScopes || []}
-            label={config.placeholder || 'Select a credential'}
-            serviceId={config.serviceId}
+            blockId={blockId}
+            subBlock={config}
            disabled={isDisabled}
+            isPreview={isPreview}
+            previewValue={previewValue}
          />
        )
      case 'file-selector':
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -7,7 +7,6 @@ import { useParams, usePathname, useRouter } from 'next/navigation'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useSession } from '@/lib/auth-client'
-import { env } from '@/lib/env'
 import { createLogger } from '@/lib/logs/console-logger'
 import {
  getKeyboardShortcutText,
@@ -28,7 +27,7 @@ import { WorkspaceHeader } from './components/workspace-header/workspace-header'

 const logger = createLogger('Sidebar')

-const IS_DEV = env.NODE_ENV === 'development'
+const IS_DEV = process.env.NODE_ENV === 'development'

 export function Sidebar() {
  useGlobalShortcuts()
--- a/apps/sim/stores/workflows/persistence.ts
+++ b/apps/sim/stores/workflows/persistence.ts
@@ -1,128 +0,0 @@
-/**
- * OAuth state persistence for secure OAuth redirects
- * This is the ONLY localStorage usage in the app - for temporary OAuth state during redirects
- */
-import { createLogger } from '@/lib/logs/console-logger'
-
-const logger = createLogger('OAuthPersistence')
-
-interface OAuthState {
-  providerId: string
-  serviceId: string
-  requiredScopes: string[]
-  returnUrl: string
-  context: string
-  timestamp: number
-  data?: Record<string, any>
-}
-
-const OAUTH_STATE_KEY = 'pending_oauth_state'
-const OAUTH_STATE_EXPIRY = 10 * 60 * 1000 // 10 minutes
-
-/**
- * Generic function to save data to localStorage (used by main branch OAuth flow)
- */
-export function saveToStorage<T>(key: string, data: T): boolean {
-  try {
-    localStorage.setItem(key, JSON.stringify(data))
-    return true
-  } catch (error) {
-    logger.error(`Failed to save data to ${key}:`, { error })
-    return false
-  }
-}
-
-/**
- * Generic function to load data from localStorage
- */
-export function loadFromStorage<T>(key: string): T | null {
-  try {
-    const stored = localStorage.getItem(key)
-    if (!stored) return null
-    return JSON.parse(stored) as T
-  } catch (error) {
-    logger.error(`Failed to load data from ${key}:`, { error })
-    return null
-  }
-}
-
-/**
- * Save OAuth state to localStorage before redirect
- */
-export function saveOAuthState(state: OAuthState): boolean {
-  try {
-    const stateWithTimestamp = {
-      ...state,
-      timestamp: Date.now(),
-    }
-    localStorage.setItem(OAUTH_STATE_KEY, JSON.stringify(stateWithTimestamp))
-    return true
-  } catch (error) {
-    logger.error('Failed to save OAuth state to localStorage:', error)
-    return false
-  }
-}
-
-/**
- * Load and remove OAuth state from localStorage after redirect
- */
-export function loadOAuthState(): OAuthState | null {
-  try {
-    const stored = localStorage.getItem(OAUTH_STATE_KEY)
-    if (!stored) return null
-
-    const state = JSON.parse(stored) as OAuthState
-
-    // Check if state has expired
-    if (Date.now() - state.timestamp > OAUTH_STATE_EXPIRY) {
-      localStorage.removeItem(OAUTH_STATE_KEY)
-      logger.warn('OAuth state expired, removing from localStorage')
-      return null
-    }
-
-    // Remove state after loading (one-time use)
-    localStorage.removeItem(OAUTH_STATE_KEY)
-
-    return state
-  } catch (error) {
-    logger.error('Failed to load OAuth state from localStorage:', error)
-    // Clean up corrupted state
-    localStorage.removeItem(OAUTH_STATE_KEY)
-    return null
-  }
-}
-
-/**
- * Remove OAuth state from localStorage (cleanup)
- */
-export function clearOAuthState(): void {
-  try {
-    localStorage.removeItem(OAUTH_STATE_KEY)
-  } catch (error) {
-    logger.error('Failed to clear OAuth state from localStorage:', error)
-  }
-}
-
-/**
- * Check if there's pending OAuth state
- */
-export function hasPendingOAuthState(): boolean {
-  try {
-    const stored = localStorage.getItem(OAUTH_STATE_KEY)
-    if (!stored) return false
-
-    const state = JSON.parse(stored) as OAuthState
-
-    // Check if expired
-    if (Date.now() - state.timestamp > OAUTH_STATE_EXPIRY) {
-      localStorage.removeItem(OAUTH_STATE_KEY)
-      return false
-    }
-
-    return true
-  } catch (error) {
-    logger.error('Failed to check pending OAuth state:', error)
-    localStorage.removeItem(OAUTH_STATE_KEY)
-    return false
-  }
-}
--- a/apps/sim/tools/index.ts
+++ b/apps/sim/tools/index.ts
@@ -48,6 +48,9 @@ export async function executeTool(

    // If we have a credential parameter, fetch the access token
    if (contextParams.credential) {
+      logger.info(
+        `[${requestId}] Tool ${toolId} needs access token for credential: ${contextParams.credential}`
+      )
      try {
        const baseUrl = env.NEXT_PUBLIC_APP_URL
        if (!baseUrl) {
@@ -69,6 +72,8 @@ export async function executeTool(
          }
        }

+        logger.info(`[${requestId}] Fetching access token from ${baseUrl}/api/auth/oauth/token`)
+
        const tokenUrl = new URL('/api/auth/oauth/token', baseUrl).toString()
        const response = await fetch(tokenUrl, {
          method: 'POST',
@@ -88,6 +93,10 @@ export async function executeTool(
        const data = await response.json()
        contextParams.accessToken = data.accessToken

+        logger.info(
+          `[${requestId}] Successfully got access token for ${toolId}, length: ${data.accessToken?.length || 0}`
+        )
+
        // Clean up params we don't need to pass to the actual tool
        contextParams.credential = undefined
        if (contextParams.workflowId) contextParams.workflowId = undefined