fix(auth): unify CLI completion screens and simplify consent

Author: waleedlatif1

apps/sim/app/(auth)/components/auth-header.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 
 interface AuthHeaderProps {
   title: string
-  description: ReactNode
+  description?: ReactNode
 }
 
 /**
@@ -15,7 +15,9 @@ export function AuthHeader({ title, description }: AuthHeaderProps) {
   return (
     <div className='space-y-1 text-center'>
       <h1 className='text-balance text-[32px] text-[var(--text-primary)] leading-[1.2]'>{title}</h1>
-      <p className='text-[var(--text-muted)] text-base leading-[1.5]'>{description}</p>
+      {description != null && (
+        <p className='text-[var(--text-muted)] text-base leading-[1.5]'>{description}</p>
+      )}
     </div>
   )
 }

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

@@ -136,11 +136,7 @@ export function OAuthConsentView({
     <div className='space-y-6'>
       <AuthHeader
         title={`Authorize ${appName}`}
-        description={
-          isCli
-            ? 'Only continue if you started this from the Sim CLI in your terminal.'
-            : 'Only continue if you started this yourself.'
-        }
+        description={isCli ? undefined : 'Only continue if you started this yourself.'}
       />
       <div className='space-y-4'>
         {scopes.length > 0 && (

apps/sim/app/cli/auth/done/cli-auth-done-view.tsx

@@ -1,15 +1,19 @@
 import { AuthHeader } from '@/app/(auth)/components'
+import type { CliAuthDoneStatus } from '@/app/cli/auth/done/search-params'
 
-/**
- * Where the CLI's listener sends the browser once it has the authorization
- * code. Static by design: the key is minted server-side during the CLI's
- * exchange and never passes through this page.
- */
-export function CliAuthDoneView() {
+interface CliAuthDoneViewProps {
+  status: CliAuthDoneStatus
+}
+
+export function CliAuthDoneView({ status }: CliAuthDoneViewProps) {
   return (
     <AuthHeader
-      title='Approved'
-      description='Your terminal is finishing up — you can close this tab.'
+      title={status === 'cancelled' ? 'Sign-in cancelled' : 'Approved'}
+      description={
+        status === 'cancelled'
+          ? 'You can close this tab and return to your terminal.'
+          : 'Your terminal is finishing up — you can close this tab.'
+      }
     />
   )
 }

apps/sim/app/cli/auth/done/page.tsx

@@ -1,21 +1,28 @@
 import type { Metadata } from 'next'
+import type { SearchParams } from 'nuqs/server'
 import { AuthShell } from '@/app/(auth)/components'
 import { CliAuthDoneView } from '@/app/cli/auth/done/cli-auth-done-view'
+import { cliAuthDoneSearchParamsCache } from '@/app/cli/auth/done/search-params'
 
 export const metadata: Metadata = {
-  title: 'Terminal connected',
+  title: 'Terminal sign-in',
   robots: { index: false, follow: false },
 }
 
 /**
- * The CLI's loopback listener redirects here, so the flow ends on Sim's own
- * chrome instead of a page served by the wizard. Public and sessionless on
- * purpose — it renders a static confirmation and never touches the API.
+ * Sessionless completion for OAuth and pairing flows. The status is informational
+ * and never exchanges credentials or changes authorization.
  */
-export default function CliAuthDonePage() {
+export default async function CliAuthDonePage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const { status } = await cliAuthDoneSearchParamsCache.parse(searchParams)
+
   return (
     <AuthShell>
-      <CliAuthDoneView />
+      <CliAuthDoneView status={status} />
     </AuthShell>
   )
 }

apps/sim/app/cli/auth/done/search-params.ts

@@ -0,0 +1,10 @@
+import { createSearchParamsCache, parseAsStringLiteral } from 'nuqs/server'
+
+const CLI_AUTH_DONE_STATUSES = ['approved', 'cancelled'] as const
+
+export type CliAuthDoneStatus = (typeof CLI_AUTH_DONE_STATUSES)[number]
+
+/** Informational only; an omitted status preserves existing pairing callbacks. */
+export const cliAuthDoneSearchParamsCache = createSearchParamsCache({
+  status: parseAsStringLiteral(CLI_AUTH_DONE_STATUSES).withDefault('approved'),
+})

packages/sim-cli/src/auth/oauth-flow.test.ts

@@ -283,15 +283,21 @@ describe('loginWithBrowser', () => {
   })
 
   it('reports a declined consent as a cancellation, not a server failure', async () => {
-    const { login, fetchMock } = await completeInBrowser((_params, state) => ({
+    const { login, fetchMock, callback } = await completeInBrowser((_params, state) => ({
       error: 'access_denied',
+      error_description: 'Do not forward provider data to the completion page',
       state,
     }))
 
     const failure = await login.catch((error) => error)
     expect(failure).toBeInstanceOf(SimApiError)
     expect(failure.message).toBe('Sign-in was declined in the browser.')
     expect(fetchMock).not.toHaveBeenCalled()
+    const response = await callback
+    expect(response.statusCode).toBe(302)
+    expect(response.headers.location).toBe(`${ENDPOINT}/cli/auth/done?status=cancelled`)
+    expect(response.headers['referrer-policy']).toBe('no-referrer')
+    expect(response.headers['cache-control']).toBe('no-store')
   })
 
   it('gives up after the timeout with the browserless fallback named', async () => {

packages/sim-cli/src/auth/oauth-flow.ts

@@ -394,13 +394,6 @@ export async function revokeToken(endpoint: string, token: string): Promise<void
   }
 }
 
-const PAGE_STYLE =
-  'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;min-height:100vh;align-items:center;justify-content:center;margin:0;color:#111;background:#fff'
-
-function callbackPage(title: string, body: string): string {
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${title}</title></head><body style="${PAGE_STYLE}"><main style="text-align:center;max-width:28rem;padding:2rem"><h1 style="font-weight:400;font-size:1.5rem;margin:0 0 .5rem">${title}</h1><p style="margin:0;color:#666">${body}</p></main></body></html>`
-}
-
 interface LoopbackResult {
   code: string
 }
@@ -468,22 +461,17 @@ function listenForCallback(
        */
       if (state !== expectedState) {
         response
-          .writeHead(400, { 'content-type': 'text/html; charset=utf-8' })
+          .writeHead(400, { 'content-type': 'text/plain; charset=utf-8' })
           .end(
-            callbackPage(
-              'Sign-in mismatch',
-              'This response did not come from the sign-in this terminal started. Return to your terminal.'
-            )
+            'Sign-in mismatch. This response did not come from the sign-in this terminal started. Return to your terminal.'
           )
         return
       }
       if (error || !code) {
         const description = url.searchParams.get('error_description') ?? undefined
-        response
-          .writeHead(200, { 'content-type': 'text/html; charset=utf-8' })
-          .end(
-            callbackPage('Sign-in cancelled', 'You can close this tab and return to your terminal.')
-          )
+        const cancelledUrl = new URL(completionUrl)
+        cancelledUrl.searchParams.set('status', 'cancelled')
+        response.writeHead(302, { location: cancelledUrl.toString() }).end()
         finish({
           ok: false,
           error:
@@ -506,7 +494,7 @@ function listenForCallback(
 
 export interface BrowserLoginOptions {
   scopes: readonly string[]
-  /** Pin the loopback port, for a container that forwards a fixed one. */
+  /** Pin the loopback port when an SSH tunnel forwards that same port. */
   callbackPort?: number
   /** Called with the authorize URL once the listener is up, before waiting. */
   onAuthorizeUrl: (url: string) => void