fix(ui): refine OAuth consent and app revocation DX

Author: waleedlatif1

apps/sim/app/(auth)/oauth/consent/consent-view.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, cn } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { Check } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
 import { signOut } from '@/lib/auth/auth-client'
@@ -19,7 +19,6 @@ import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { OAuthConsentLoading } from '@/app/(auth)/oauth/consent/loading'
 import { useOAuthConsent, useOAuthPublicClient } from '@/hooks/queries/oauth-provider'
 
-/** Why the page refuses to render a grant, when it does. */
 export type OAuthConsentRefusal = 'expired' | 'missing' | 'tampered' | 'unsigned'
 
 const REFUSAL_MESSAGES: Record<OAuthConsentRefusal, string> = {
@@ -81,15 +80,7 @@ export function OAuthConsentView({
   const client = useOAuthPublicClient(clientId ?? undefined, authorizationRequestKey ?? undefined)
   const consent = useOAuthConsent()
 
-  /**
-   * No grant card without a client the server itself named.
-   *
-   * A failed lookup used to fall through to the fallback name and leave Allow
-   * enabled, so an unknown or deleted client still rendered a complete,
-   * clickable authorization — with everything on it read from the URL rather
-   * than from Sim. Naming the app is this page's whole job, so not being able
-   * to name it is a refusal, not a degraded heading.
-   */
+  /** Refuses clients Sim cannot name because URL metadata alone is untrusted. */
   const reason: OAuthConsentRefusal | null = refusal ?? (clientId ? null : 'missing')
   if (reason || client.isError) {
     return (
@@ -110,11 +101,7 @@ export function OAuthConsentView({
   if (client.isPending) return <OAuthConsentLoading />
 
   const isCli = clientId === SIM_CLI_CLIENT_ID
-  /**
-   * The registered name the lookup returned, never the raw client id and never
-   * a name asserted by the URL: the id is what an impostor controls, so a
-   * client the server declines to name is one this card must not vouch for.
-   */
+  /** Uses only the server-registered name; the client ID comes from the URL. */
   const appName = client.data?.name?.trim()
   if (!appName) {
     return (
@@ -183,9 +170,10 @@ export function OAuthConsentView({
         </AuthSubmitButton>
         <Chip
           type='button'
+          variant='border'
           fullWidth
           disabled={consent.isPending}
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
+          className={AUTH_BUTTON_CLASS}
           onClick={() => decide(false)}
         >
           Deny

apps/sim/app/(auth)/oauth/consent/page.tsx

@@ -42,20 +42,8 @@ export default async function OAuthConsentPage({
   }
 
   /**
-   * Two ways a request can reach this page without Sim having authorized it,
-   * both of which must refuse before anything is rendered.
-   *
-   * A repeated parameter is tampering, not a client quirk: the card names the
-   * app and lists what it may do, and it reads those from the URL, where
-   * `URLSearchParams.get` answers with the FIRST occurrence — so a link that
-   * prepends its own `client_id` and `scope` would show a trustworthy app and
-   * one harmless permission over somebody else's request.
-   *
-   * A missing `sig` means the query was never signed by the authorize
-   * endpoint, so the whole thing is hand-written. Consent still fails at Allow
-   * (the plugin refuses an unsigned `oauth_query`), but it fails with a
-   * generic error, after the person has already read an authorization request
-   * that Sim never issued. Both are caught here so the lie is never rendered.
+   * Repeated fields can make displayed consent diverge from the signed request;
+   * unsigned requests never passed through the authorization endpoint.
    */
   const tampered = Object.entries(raw).some(
     ([key, value]) => key !== 'ba_param' && Array.isArray(value)

apps/sim/app/workspace/[workspaceId]/settings/components/authorized-apps/authorized-apps.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { ChipConfirmModal, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { formatDate } from '@sim/utils/formatting'
@@ -27,23 +27,21 @@ export function AuthorizedApps() {
   const apps = useAuthorizedApps()
   const revoke = useRevokeAuthorizedApp()
   const [searchTerm, setSearchTerm] = useSettingsSearch()
-  const [pendingRevoke, setPendingRevoke] = useState<AuthorizedApp | null>(null)
+  const [pendingRevokeClientId, setPendingRevokeClientId] = useState<string | null>(null)
 
   const list = apps.data ?? EMPTY_APPS
-  const filtered = useMemo(() => {
-    const term = searchTerm.trim().toLowerCase()
-    if (!term) return list
-    return list.filter((app) => app.name.toLowerCase().includes(term))
-  }, [list, searchTerm])
+  const pendingRevoke = list.find((app) => app.clientId === pendingRevokeClientId) ?? null
+  const term = searchTerm.trim().toLowerCase()
+  const filtered = term ? list.filter((app) => app.name.toLowerCase().includes(term)) : list
 
   const confirmRevoke = () => {
-    const app = pendingRevoke
-    if (!app) return
-    revoke.mutate(app.clientId, {
-      onSuccess: () => toast.success(`Revoked ${app.name}`),
+    if (!pendingRevokeClientId) return
+    const appName = pendingRevoke?.name ?? 'app'
+    revoke.mutate(pendingRevokeClientId, {
+      onSuccess: () => toast.success(`Revoked ${appName}`),
       onError: (error) => toast.error(getErrorMessage(error, 'Failed to revoke access')),
       /** Keep the modal open so its pending state remains visible through the mutation. */
-      onSettled: () => setPendingRevoke(null),
+      onSettled: () => setPendingRevokeClientId(null),
     })
   }
 
@@ -82,7 +80,11 @@ export function AuthorizedApps() {
                   <RowActionsMenu
                     label='Authorized app actions'
                     actions={[
-                      { label: 'Revoke', destructive: true, onSelect: () => setPendingRevoke(app) },
+                      {
+                        label: 'Revoke',
+                        destructive: true,
+                        onSelect: () => setPendingRevokeClientId(app.clientId),
+                      },
                     ]}
                   />
                 }
@@ -93,9 +95,9 @@ export function AuthorizedApps() {
       </SettingsPanel>
 
       <ChipConfirmModal
-        open={pendingRevoke !== null}
+        open={pendingRevokeClientId !== null}
         onOpenChange={(open) => {
-          if (!open) setPendingRevoke(null)
+          if (!open) setPendingRevokeClientId(null)
         }}
         srTitle='Revoke access'
         title='Revoke access'

apps/sim/hooks/queries/oauth-provider.ts

@@ -22,7 +22,6 @@ async function fetchAuthorizedApps(signal?: AbortSignal): Promise<AuthorizedApp[
   return data.apps
 }
 
-/** The apps the signed-in account has authorized, for the settings list. */
 export function useAuthorizedApps() {
   return useQuery({
     queryKey: oauthProviderKeys.authorizedApps(),