Authorize page logged-in state (#10)

* Update authorize flow for logged-in users

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

* Extract shared session loader

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

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

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,
@@ -355,6 +360,8 @@ function OAuthAuthorizeForm(handle: Handle) {
 	let message: OAuthAuthorizeMessage | null = null
 	let submitting = false
 	let lastSearch = ''
+	let session: SessionInfo | null = null
+	let sessionStatus: SessionStatus = 'idle'
 
 	function setMessage(next: OAuthAuthorizeMessage | null) {
 		message = next
@@ -421,6 +428,16 @@ function OAuthAuthorizeForm(handle: Handle) {
 		}
 	}
 
+	async function loadSession() {
+		if (sessionStatus !== 'idle') return
+		sessionStatus = 'loading'
+
+		session = await fetchSessionInfo()
+
+		sessionStatus = 'ready'
+		handle.update()
+	}
+
 	async function submitDecision(
 		decision: 'approve' | 'deny',
 		form?: HTMLFormElement,
@@ -487,7 +504,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 () => {
@@ -497,12 +518,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
@@ -549,6 +584,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…
@@ -574,62 +637,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"
@@ -646,7 +713,7 @@ function OAuthAuthorizeForm(handle: Handle) {
 								opacity: actionsDisabled ? 0.7 : 1,
 							}}
 						>
-							{submitting ? 'Submitting...' : 'Authorize'}
+							{authorizeLabel}
 						</button>
 						<button
 							type="button"

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
+	}
+}

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)