fix(oauth): fail closed when reconnect target disappears

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Button, Combobox, type ComboboxOptionGroup } from '@sim/emcn'
 import { Key, SquareArrowUpRight } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
@@ -209,6 +209,13 @@ export function CredentialSelector({
     !isPreview &&
     !credentialsLoading
 
+  useEffect(() => {
+    if (showOAuthModal && selectedId && !selectedCredential) {
+      consumeOAuthReturnContext()
+      setShowOAuthModal(false)
+    }
+  }, [showOAuthModal, selectedId, selectedCredential])
+
   const handleSelect = useCallback(
     (credentialId: string) => {
       if (isPreview) return
@@ -497,7 +504,7 @@ export function CredentialSelector({
         />
       )}
 
-      {showOAuthModal && (
+      {showOAuthModal && selectedCredential && (
         <ConnectOAuthModal
           mode='reauthorize'
           open={showOAuthModal}
@@ -515,16 +522,12 @@ export function CredentialSelector({
           // A reauthorize must return to the authorization server that issued
           // the credential — deriving it from the service id would send a
           // sandbox user to production, where they cannot sign in at all.
-          providerId={selectedCredential?.provider ?? effectiveProviderId}
-          reconnectTarget={
-            selectedCredential
-              ? {
-                  workspaceId,
-                  credentialId: selectedCredential.id,
-                  displayName: selectedCredential.name,
-                }
-              : undefined
-          }
+          providerId={selectedCredential.provider}
+          reconnectTarget={{
+            workspaceId,
+            credentialId: selectedCredential.id,
+            displayName: selectedCredential.name,
+          }}
         />
       )}
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Combobox } from '@sim/emcn'
 import { SquareArrowUpRight } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
@@ -147,6 +147,13 @@ export function ToolCredentialSelector({
   const needsUpdate =
     hasSelection && missingRequiredScopes.length > 0 && !disabled && !credentialsLoading
 
+  useEffect(() => {
+    if (showOAuthModal && selectedId && !selectedCredential) {
+      consumeOAuthReturnContext()
+      setShowOAuthModal(false)
+    }
+  }, [showOAuthModal, selectedId, selectedCredential])
+
   const handleSelect = useCallback(
     (credentialId: string) => {
       onChange(credentialId)
@@ -279,7 +286,7 @@ export function ToolCredentialSelector({
         />
       )}
 
-      {showOAuthModal && (
+      {showOAuthModal && selectedCredential && (
         <ConnectOAuthModal
           mode='reauthorize'
           open={showOAuthModal}
@@ -297,16 +304,12 @@ export function ToolCredentialSelector({
           // A reauthorize must return to the authorization server that issued
           // the credential — deriving it from the service id would send a
           // sandbox user to production, where they cannot sign in at all.
-          providerId={selectedCredential?.provider ?? effectiveProviderId}
-          reconnectTarget={
-            selectedCredential
-              ? {
-                  workspaceId,
-                  credentialId: selectedCredential.id,
-                  displayName: selectedCredential.name,
-                }
-              : undefined
-          }
+          providerId={selectedCredential.provider}
+          reconnectTarget={{
+            workspaceId,
+            credentialId: selectedCredential.id,
+            displayName: selectedCredential.name,
+          }}
         />
       )}
     </div>