From 34a99ee92e918d8efec3a610d2e8142d1f427888 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 7 Feb 2026 07:18:19 +0000
Subject: [PATCH 1/2] Update authorize flow for logged-in users

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 client/client-routes.tsx      | 191 ++++++++++++++++++++++++----------
 worker/oauth-handlers.test.ts |  48 ++++++++-
 worker/oauth-handlers.ts      |  72 +++++++++----
 3 files changed, 230 insertions(+), 81 deletions(-)

diff --git a/client/client-routes.tsx b/client/client-routes.tsx
index a8bf8c6..98e85e0 100644
--- a/client/client-routes.tsx
+++ b/client/client-routes.tsx
@@ -347,6 +347,8 @@ type OAuthAuthorizeInfo = {
 
 type OAuthAuthorizeStatus = 'idle' | 'loading' | 'ready' | 'error'
 type OAuthAuthorizeMessage = { type: 'error' | 'info'; text: string }
+type OAuthSession = { email: string }
+type OAuthSessionStatus = 'idle' | 'loading' | 'ready'
 
 function OAuthAuthorizeForm(handle: Handle) {
 	let info: OAuthAuthorizeInfo | null = null
@@ -354,6 +356,8 @@ function OAuthAuthorizeForm(handle: Handle) {
 	let message: OAuthAuthorizeMessage | null = null
 	let submitting = false
 	let lastSearch = ''
+	let session: OAuthSession | null = null
+	let sessionStatus: OAuthSessionStatus = 'idle'
 
 	function setMessage(next: OAuthAuthorizeMessage | null) {
 		message = next
@@ -420,6 +424,31 @@ function OAuthAuthorizeForm(handle: Handle) {
 		}
 	}
 
+	async function loadSession() {
+		if (sessionStatus !== 'idle') return
+		sessionStatus = 'loading'
+
+		try {
+			const response = await fetch('/session', {
+				headers: { Accept: 'application/json' },
+				credentials: 'include',
+			})
+			const payload = await response.json().catch(() => null)
+			const email =
+				response.ok &&
+				payload?.ok &&
+				typeof payload?.session?.email === 'string'
+					? payload.session.email.trim()
+					: ''
+			session = email ? { email } : null
+		} catch {
+			session = null
+		}
+
+		sessionStatus = 'ready'
+		handle.update()
+	}
+
 	async function submitDecision(
 		decision: 'approve' | 'deny',
 		form?: HTMLFormElement,
@@ -486,7 +515,11 @@ function OAuthAuthorizeForm(handle: Handle) {
 	async function handleSubmit(event: SubmitEvent) {
 		event.preventDefault()
 		if (!(event.currentTarget instanceof HTMLFormElement)) return
-		await submitDecision('approve', event.currentTarget)
+		const hasSession = Boolean(session?.email)
+		await submitDecision(
+			'approve',
+			hasSession ? undefined : event.currentTarget,
+		)
 	}
 
 	return () => {
@@ -496,12 +529,26 @@ function OAuthAuthorizeForm(handle: Handle) {
 			lastSearch = currentSearch
 			void loadInfo()
 		}
+		if (sessionStatus === 'idle') {
+			void loadSession()
+		}
 
 		const clientLabel = info?.client?.name ?? 'Unknown client'
 		const scopes = info?.scopes ?? []
 		const scopeLabel =
 			scopes.length > 0 ? scopes.join(', ') : 'No scopes requested.'
-		const actionsDisabled = status !== 'ready' || submitting
+		const sessionEmail = session?.email ?? ''
+		const isSessionReady = sessionStatus === 'ready'
+		const isSessionLoading =
+			sessionStatus === 'loading' || sessionStatus === 'idle'
+		const isLoggedIn = isSessionReady && Boolean(sessionEmail)
+		const actionsDisabled = status !== 'ready' || submitting || isSessionLoading
+		const formReady = status === 'ready' && !isSessionLoading
+		const authorizeLabel = submitting
+			? 'Submitting...'
+			: isLoggedIn
+				? 'Approve connection'
+				: 'Authorize'
 
 		return (
 			<section
@@ -548,6 +595,34 @@ function OAuthAuthorizeForm(handle: Handle) {
 					</p>
 					<p css={{ margin: 0, color: colors.textMuted }}>{scopeLabel}</p>
 				</section>
+				{isSessionLoading ? (
+					<p css={{ color: colors.textMuted }}>Checking your session…</p>
+				) : null}
+				{isLoggedIn ? (
+					<section
+						css={{
+							padding: spacing.md,
+							borderRadius: radius.md,
+							border: `1px solid ${colors.border}`,
+							backgroundColor: colors.surface,
+							display: 'grid',
+							gap: spacing.xs,
+						}}
+					>
+						<p
+							css={{
+								margin: 0,
+								fontWeight: typography.fontWeight.medium,
+								color: colors.text,
+							}}
+						>
+							Signed in as {sessionEmail}
+						</p>
+						<p css={{ margin: 0, color: colors.textMuted }}>
+							Approve to continue with this account.
+						</p>
+					</section>
+				) : null}
 				{status === 'loading' ? (
 					<p css={{ color: colors.textMuted }}>
 						Loading authorization details…
@@ -573,62 +648,66 @@ function OAuthAuthorizeForm(handle: Handle) {
 						border: `1px solid ${colors.border}`,
 						backgroundColor: colors.surface,
 						boxShadow: shadows.sm,
-						opacity: status === 'ready' ? 1 : 0.7,
+						opacity: formReady ? 1 : 0.7,
 					}}
 					on={{ submit: handleSubmit }}
 				>
-					<label css={{ display: 'grid', gap: spacing.xs }}>
-						<span
-							css={{
-								color: colors.text,
-								fontWeight: typography.fontWeight.medium,
-								fontSize: typography.fontSize.sm,
-							}}
-						>
-							Email
-						</span>
-						<input
-							type="email"
-							name="email"
-							required
-							autoComplete="email"
-							placeholder="you@example.com"
-							disabled={actionsDisabled}
-							css={{
-								padding: spacing.sm,
-								borderRadius: radius.md,
-								border: `1px solid ${colors.border}`,
-								fontSize: typography.fontSize.base,
-								fontFamily: typography.fontFamily,
-							}}
-						/>
-					</label>
-					<label css={{ display: 'grid', gap: spacing.xs }}>
-						<span
-							css={{
-								color: colors.text,
-								fontWeight: typography.fontWeight.medium,
-								fontSize: typography.fontSize.sm,
-							}}
-						>
-							Password
-						</span>
-						<input
-							type="password"
-							name="password"
-							required
-							autoComplete="current-password"
-							placeholder="Enter your password"
-							disabled={actionsDisabled}
-							css={{
-								padding: spacing.sm,
-								borderRadius: radius.md,
-								border: `1px solid ${colors.border}`,
-								fontSize: typography.fontSize.base,
-								fontFamily: typography.fontFamily,
-							}}
-						/>
-					</label>
+					{!isLoggedIn && isSessionReady ? (
+						<>
+							<label css={{ display: 'grid', gap: spacing.xs }}>
+								<span
+									css={{
+										color: colors.text,
+										fontWeight: typography.fontWeight.medium,
+										fontSize: typography.fontSize.sm,
+									}}
+								>
+									Email
+								</span>
+								<input
+									type="email"
+									name="email"
+									required
+									autoComplete="email"
+									placeholder="you@example.com"
+									disabled={actionsDisabled}
+									css={{
+										padding: spacing.sm,
+										borderRadius: radius.md,
+										border: `1px solid ${colors.border}`,
+										fontSize: typography.fontSize.base,
+										fontFamily: typography.fontFamily,
+									}}
+								/>
+							</label>
+							<label css={{ display: 'grid', gap: spacing.xs }}>
+								<span
+									css={{
+										color: colors.text,
+										fontWeight: typography.fontWeight.medium,
+										fontSize: typography.fontSize.sm,
+									}}
+								>
+									Password
+								</span>
+								<input
+									type="password"
+									name="password"
+									required
+									autoComplete="current-password"
+									placeholder="Enter your password"
+									disabled={actionsDisabled}
+									css={{
+										padding: spacing.sm,
+										borderRadius: radius.md,
+										border: `1px solid ${colors.border}`,
+										fontSize: typography.fontSize.base,
+										fontFamily: typography.fontFamily,
+									}}
+								/>
+							</label>
+						</>
+					) : null}
 					<div css={{ display: 'flex', gap: spacing.sm, flexWrap: 'wrap' }}>
 						<button
 							type="submit"
@@ -645,7 +724,7 @@ function OAuthAuthorizeForm(handle: Handle) {
 								opacity: actionsDisabled ? 0.7 : 1,
 							}}
 						>
-							{submitting ? 'Submitting...' : 'Authorize'}
+							{authorizeLabel}
 						</button>
 						<button
 							type="button"
diff --git a/worker/oauth-handlers.test.ts b/worker/oauth-handlers.test.ts
index 29aaae1..ffb8dfe 100644
--- a/worker/oauth-handlers.test.ts
+++ b/worker/oauth-handlers.test.ts
@@ -6,6 +6,10 @@ import type {
 	CompleteAuthorizationOptions,
 	OAuthHelpers,
 } from '@cloudflare/workers-oauth-provider'
+import {
+	createAuthCookie,
+	setAuthSessionSecret,
+} from '../server/auth-session.ts'
 import {
 	handleAuthorizeInfo,
 	handleAuthorizeRequest,
@@ -27,6 +31,7 @@ const baseClient: ClientInfo = {
 	clientName: 'epicflare Demo',
 	tokenEndpointAuthMethod: 'client_secret_basic',
 }
+const cookieSecret = 'test-secret'
 
 function createHelpers(overrides: Partial<OAuthHelpers> = {}): OAuthHelpers {
 	return {
@@ -104,8 +109,16 @@ async function createDatabase(password: string) {
 	} as unknown as D1Database
 }
 
-function createEnv(helpers: OAuthHelpers, appDb?: D1Database) {
-	return { OAUTH_PROVIDER: helpers, APP_DB: appDb } as unknown as Env
+function createEnv(
+	helpers: OAuthHelpers,
+	appDb?: D1Database,
+	cookieSecretValue: string = cookieSecret,
+) {
+	return {
+		OAUTH_PROVIDER: helpers,
+		APP_DB: appDb,
+		COOKIE_SECRET: cookieSecretValue,
+	} as unknown as Env
 }
 
 function createFormRequest(
@@ -186,6 +199,37 @@ test('authorize requires email and password for approval', async () => {
 	})
 })
 
+test('authorize allows approval with an existing session', async () => {
+	let capturedOptions: CompleteAuthorizationOptions | null = null
+	const helpers = createHelpers({
+		async completeAuthorization(options) {
+			capturedOptions = options
+			return { redirectTo: 'https://example.com/callback?code=session' }
+		},
+	})
+	setAuthSessionSecret(cookieSecret)
+	const cookie = await createAuthCookie(
+		{ id: 'session-id', email: 'user@example.com' },
+		false,
+	)
+
+	const response = await handleAuthorizeRequest(
+		createFormRequest(
+			{ decision: 'approve' },
+			{ Accept: 'application/json', Cookie: cookie },
+		),
+		createEnv(helpers),
+	)
+
+	expect(response.status).toBe(200)
+	const payload = await response.json()
+	expect(payload).toEqual({
+		ok: true,
+		redirectTo: 'https://example.com/callback?code=session',
+	})
+	expect(capturedOptions).not.toBeNull()
+})
+
 test('authorize uses default scopes when none requested', async () => {
 	let resolveCapturedOptions:
 		| ((value: CompleteAuthorizationOptions) => void)
diff --git a/worker/oauth-handlers.ts b/worker/oauth-handlers.ts
index 4babc61..f02b4c4 100644
--- a/worker/oauth-handlers.ts
+++ b/worker/oauth-handlers.ts
@@ -3,6 +3,11 @@ import type {
 	OAuthHelpers,
 } from '@cloudflare/workers-oauth-provider'
 import { z } from 'zod'
+import {
+	readAuthSession,
+	setAuthSessionSecret,
+} from '../server/auth-session.ts'
+import { getEnv } from '../server/env.ts'
 import { Layout } from '../server/layout.ts'
 import { render } from '../server/render.ts'
 import { createDb, sql } from './db.ts'
@@ -258,6 +263,18 @@ function respondAuthorizeError(
 		: createAuthorizeErrorRedirect(request, errorCode, message)
 }
 
+async function resolveSessionEmail(request: Request, env: Env) {
+	try {
+		const appEnv = getEnv(env)
+		setAuthSessionSecret(appEnv.COOKIE_SECRET)
+		const session = await readAuthSession(request)
+		const email = session?.email?.trim()
+		return email ? email.toLowerCase() : null
+	} catch {
+		return null
+	}
+}
+
 export async function handleAuthorizeInfo(
 	request: Request,
 	env: Env,
@@ -327,49 +344,58 @@ export async function handleAuthorizeRequest(
 	const email = String(formData.get('email') ?? '').trim()
 	const password = String(formData.get('password') ?? '')
 	const normalizedEmail = email.toLowerCase()
+	const sessionEmail = await resolveSessionEmail(request, env)
+	const hasFormCredentials = Boolean(email && password)
+	const hasSession = Boolean(sessionEmail)
 
-	if (!email || !password) {
+	if (!hasFormCredentials && !hasSession) {
 		return respondAuthorizeError(request, 'Email and password are required.')
 	}
 
-	const db = createDb(env.APP_DB)
-	const userRecord = await db.queryFirst(
-		sql`SELECT password_hash FROM users WHERE email = ${normalizedEmail}`,
-		userRecordSchema,
-	)
-	const passwordCheck = userRecord
-		? await verifyPassword(password, userRecord.password_hash)
-		: null
+	let approvedEmail = ''
+	if (hasFormCredentials) {
+		const db = createDb(env.APP_DB)
+		const userRecord = await db.queryFirst(
+			sql`SELECT password_hash FROM users WHERE email = ${normalizedEmail}`,
+			userRecordSchema,
+		)
+		const passwordCheck = userRecord
+			? await verifyPassword(password, userRecord.password_hash)
+			: null
 
-	if (!userRecord || !passwordCheck?.valid) {
-		return respondAuthorizeError(request, 'Invalid email or password.')
-	}
+		if (!userRecord || !passwordCheck?.valid) {
+			return respondAuthorizeError(request, 'Invalid email or password.')
+		}
 
-	if (passwordCheck.upgradedHash) {
-		try {
-			await db.exec(
-				sql`UPDATE users SET password_hash = ${passwordCheck.upgradedHash} WHERE email = ${normalizedEmail}`,
-			)
-		} catch {
-			// Ignore upgrade failures so valid logins still succeed.
+		if (passwordCheck.upgradedHash) {
+			try {
+				await db.exec(
+					sql`UPDATE users SET password_hash = ${passwordCheck.upgradedHash} WHERE email = ${normalizedEmail}`,
+				)
+			} catch {
+				// Ignore upgrade failures so valid logins still succeed.
+			}
 		}
+		approvedEmail = normalizedEmail
+	} else if (sessionEmail) {
+		approvedEmail = sessionEmail
 	}
 
 	const resolvedScopes = resolveScopes(authRequest.scope)
 	if (Array.isArray(resolvedScopes)) {
-		const userId = await createUserId(normalizedEmail)
-		const displayName = normalizedEmail.split('@')[0] || 'user'
+		const userId = await createUserId(approvedEmail)
+		const displayName = approvedEmail.split('@')[0] || 'user'
 		const { redirectTo } = await helpers.completeAuthorization({
 			request: authRequest,
 			userId,
 			metadata: {
-				email: normalizedEmail,
+				email: approvedEmail,
 				clientId: authRequest.clientId,
 			},
 			scope: resolvedScopes,
 			props: {
 				userId,
-				email: normalizedEmail,
+				email: approvedEmail,
 				displayName,
 			},
 		})

From 3d7368637263889f47a5fa270f0e2972140e6e5d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 7 Feb 2026 07:48:07 +0000
Subject: [PATCH 2/2] Extract shared session loader

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 client/app.tsx           | 28 ++++++----------------------
 client/client-routes.tsx | 28 ++++++++--------------------
 client/session.ts        | 22 ++++++++++++++++++++++
 3 files changed, 36 insertions(+), 42 deletions(-)
 create mode 100644 client/session.ts

diff --git a/client/app.tsx b/client/app.tsx
index 94cc85b..054c637 100644
--- a/client/app.tsx
+++ b/client/app.tsx
@@ -6,14 +6,13 @@ import {
 	OAuthCallbackRoute,
 } from './client-routes.tsx'
 import { Router } from './client-router.tsx'
+import {
+	fetchSessionInfo,
+	type SessionInfo,
+	type SessionStatus,
+} from './session.ts'
 import { colors, spacing, typography } from './styles/tokens.ts'
 
-type SessionInfo = {
-	email: string
-}
-
-type SessionStatus = 'idle' | 'loading' | 'ready'
-
 type NavLink = {
 	href: string
 	label: string
@@ -27,22 +26,7 @@ export function App(handle: Handle) {
 		if (sessionStatus !== 'idle') return
 		sessionStatus = 'loading'
 
-		try {
-			const response = await fetch('/session', {
-				headers: { Accept: 'application/json' },
-				credentials: 'include',
-			})
-			const payload = await response.json().catch(() => null)
-			const email =
-				response.ok &&
-				payload?.ok &&
-				typeof payload?.session?.email === 'string'
-					? payload.session.email.trim()
-					: ''
-			session = email ? { email } : null
-		} catch {
-			session = null
-		}
+		session = await fetchSessionInfo()
 
 		sessionStatus = 'ready'
 		handle.update()
diff --git a/client/client-routes.tsx b/client/client-routes.tsx
index 98e85e0..31b25a8 100644
--- a/client/client-routes.tsx
+++ b/client/client-routes.tsx
@@ -1,6 +1,11 @@
 import { type Handle } from 'remix/component'
 import { navigate } from './client-router.tsx'
 import { Counter } from './counter.tsx'
+import {
+	fetchSessionInfo,
+	type SessionInfo,
+	type SessionStatus,
+} from './session.ts'
 import {
 	colors,
 	radius,
@@ -347,8 +352,6 @@ type OAuthAuthorizeInfo = {
 
 type OAuthAuthorizeStatus = 'idle' | 'loading' | 'ready' | 'error'
 type OAuthAuthorizeMessage = { type: 'error' | 'info'; text: string }
-type OAuthSession = { email: string }
-type OAuthSessionStatus = 'idle' | 'loading' | 'ready'
 
 function OAuthAuthorizeForm(handle: Handle) {
 	let info: OAuthAuthorizeInfo | null = null
@@ -356,8 +359,8 @@ function OAuthAuthorizeForm(handle: Handle) {
 	let message: OAuthAuthorizeMessage | null = null
 	let submitting = false
 	let lastSearch = ''
-	let session: OAuthSession | null = null
-	let sessionStatus: OAuthSessionStatus = 'idle'
+	let session: SessionInfo | null = null
+	let sessionStatus: SessionStatus = 'idle'
 
 	function setMessage(next: OAuthAuthorizeMessage | null) {
 		message = next
@@ -428,22 +431,7 @@ function OAuthAuthorizeForm(handle: Handle) {
 		if (sessionStatus !== 'idle') return
 		sessionStatus = 'loading'
 
-		try {
-			const response = await fetch('/session', {
-				headers: { Accept: 'application/json' },
-				credentials: 'include',
-			})
-			const payload = await response.json().catch(() => null)
-			const email =
-				response.ok &&
-				payload?.ok &&
-				typeof payload?.session?.email === 'string'
-					? payload.session.email.trim()
-					: ''
-			session = email ? { email } : null
-		} catch {
-			session = null
-		}
+		session = await fetchSessionInfo()
 
 		sessionStatus = 'ready'
 		handle.update()
diff --git a/client/session.ts b/client/session.ts
new file mode 100644
index 0000000..58d65a8
--- /dev/null
+++ b/client/session.ts
@@ -0,0 +1,22 @@
+export type SessionInfo = {
+	email: string
+}
+
+export type SessionStatus = 'idle' | 'loading' | 'ready'
+
+export async function fetchSessionInfo(): Promise<SessionInfo | null> {
+	try {
+		const response = await fetch('/session', {
+			headers: { Accept: 'application/json' },
+			credentials: 'include',
+		})
+		const payload = await response.json().catch(() => null)
+		const email =
+			response.ok && payload?.ok && typeof payload?.session?.email === 'string'
+				? payload.session.email.trim()
+				: ''
+		return email ? { email } : null
+	} catch {
+		return null
+	}
+}