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>

Author: icecrasher321

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,14 +40,16 @@ 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 })
     }
 
     try {
       // 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) {

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) {

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>

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)

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)