@yackey-labs/yauth-ui-solidjs 0.12.5 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yackey-labs/yauth-ui-solidjs",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/yackey-labs/yauth"
@@ -23,8 +23,8 @@
   "dependencies": {
     "@simplewebauthn/browser": "^13.0.0",
     "solid-js": "^1.9.5",
-    "@yackey-labs/yauth-client": "0.12.5",
-    "@yackey-labs/yauth-shared": "0.12.5"
+    "@yackey-labs/yauth-client": "0.13.0",
+    "@yackey-labs/yauth-shared": "0.13.0"
   },
   "devDependencies": {
     "happy-dom": "^20.9.0",

package/src/components/consent-screen.tsx

@@ -1,23 +1,41 @@
 import { type Component, createSignal, For } from "solid-js";
 import { Show } from "solid-js/web";
+import { isSafeRedirect } from "../safe-redirect";
 
 export interface ConsentScreenProps {
+	/** Human-readable client name; falls back to clientId. */
 	clientName?: string;
-	clientId: string;
+	clientId?: string;
+	/** Scope identifiers the client requested (from the consent payload). */
 	scopes?: string[];
-	redirectUri: string;
-	responseType: string;
-	codeChallenge: string;
-	codeChallengeMethod: string;
-	state?: string;
-	/** Called when user submits their consent decision */
-	onSubmit?: (approved: boolean) => void;
-	/** Called on error */
-	onError?: (error: Error) => void;
-	/** Auth API base URL (e.g. "/api/auth") */
+	/**
+	 * Per-scope human-readable descriptions, keyed by scope name. Mirror your
+	 * server's `mcpauth.Config.Scopes` catalog here so the consent screen shows
+	 * plain language instead of raw scope strings. Scopes without an entry fall
+	 * back to showing the raw identifier.
+	 */
+	scopeDescriptions?: Record<string, string>;
+	/** Signed request id from the GET /oauth/authorize consent payload. */
+	requestId: string;
+	/** Signed CSRF token from the GET /oauth/authorize consent payload. */
+	csrfToken: string;
+	/** Auth API base URL (default "/api/auth"). */
 	authBaseUrl?: string;
+	/** Called after a decision is submitted and no redirect was returned. */
+	onResult?: (approved: boolean) => void;
+	/** Called on error. */
+	onError?: (error: Error) => void;
 }
 
+/**
+ * ConsentScreen renders the second half of the yauth oauth2-server
+ * authorization-code flow. The first half — GET {authBaseUrl}/oauth/authorize
+ * with the session cookie — returns a consent payload ({ request_id,
+ * csrf_token, scopes, client }); pass those in as props (OAuthConsentPage does
+ * this for you). On a decision it POSTs {authBaseUrl}/oauth2/consent with
+ * { request_id, csrf_token, approved } and follows the returned redirect_url
+ * back to the OAuth client.
+ */
 export const ConsentScreen: Component<ConsentScreenProps> = (props) => {
 	const [loading, setLoading] = createSignal(false);
 	const [error, setError] = createSignal<string | null>(null);
@@ -25,55 +43,46 @@ export const ConsentScreen: Component<ConsentScreenProps> = (props) => {
 	const handleDecision = async (approved: boolean) => {
 		setError(null);
 		setLoading(true);
-
 		try {
 			const baseUrl = props.authBaseUrl ?? "/api/auth";
-			const response = await fetch(`${baseUrl}/authorize`, {
+			const response = await fetch(`${baseUrl}/oauth2/consent`, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
 				body: JSON.stringify({
-					client_id: props.clientId,
-					redirect_uri: props.redirectUri,
-					response_type: props.responseType,
-					code_challenge: props.codeChallenge,
-					code_challenge_method: props.codeChallengeMethod,
-					scope: props.scopes?.join(" "),
-					state: props.state,
+					request_id: props.requestId,
+					csrf_token: props.csrfToken,
 					approved,
 				}),
 			});
 
-			if (response.redirected) {
-				window.location.href = response.url;
-				return;
-			}
-
+			const body = await response.json().catch(() => null);
 			if (!response.ok) {
-				const body = await response.json().catch(() => null);
 				throw new Error(
 					body?.error_description ?? body?.error ?? "Authorization failed",
 				);
 			}
-
-			// If the response contains a redirect URL in the Location header
-			const location = response.headers.get("Location");
-			if (location) {
-				window.location.href = location;
+			// The server mints the code and returns the redirect URL (both on
+			// approval and on denial, which carries error=access_denied).
+			if (body?.redirect_url) {
+				if (!isSafeRedirect(body.redirect_url)) {
+					throw new Error("Blocked unsafe redirect target");
+				}
+				window.location.href = body.redirect_url;
 				return;
 			}
-
-			props.onSubmit?.(approved);
+			props.onResult?.(approved);
 		} catch (err) {
-			const error = err instanceof Error ? err : new Error(String(err));
-			setError(error.message);
-			props.onError?.(error);
+			const e = err instanceof Error ? err : new Error(String(err));
+			setError(e.message);
+			props.onError?.(e);
 		} finally {
 			setLoading(false);
 		}
 	};
 
-	const displayName = () => props.clientName ?? props.clientId;
+	const displayName = () =>
+		props.clientName ?? props.clientId ?? "An application";
 
 	return (
 		<div class="mx-auto max-w-md space-y-6 p-6">
@@ -100,9 +109,9 @@ export const ConsentScreen: Component<ConsentScreenProps> = (props) => {
 					<ul class="space-y-2">
 						<For each={props.scopes}>
 							{(scope) => (
-								<li class="flex items-center gap-2 text-sm">
+								<li class="flex items-start gap-2 text-sm">
 									<svg
-										class="h-4 w-4 text-primary"
+										class="mt-0.5 h-4 w-4 shrink-0 text-primary"
 										fill="none"
 										stroke="currentColor"
 										viewBox="0 0 24 24"
@@ -116,7 +125,14 @@ export const ConsentScreen: Component<ConsentScreenProps> = (props) => {
 											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
 										/>
 									</svg>
-									<span>{scope}</span>
+									<span>
+										{props.scopeDescriptions?.[scope] ?? scope}
+										<Show when={props.scopeDescriptions?.[scope]}>
+											<code class="ml-1 text-xs text-muted-foreground">
+												{scope}
+											</code>
+										</Show>
+									</span>
 								</li>
 							)}
 						</For>

package/src/components/oauth-consent-page.tsx

@@ -0,0 +1,127 @@
+import { type Component, createResource, Show } from "solid-js";
+import { ConsentScreen } from "./consent-screen";
+import { isSafeRedirect } from "../safe-redirect";
+
+export interface OAuthConsentPageProps {
+	/** Auth API base URL (default "/api/auth"). */
+	authBaseUrl?: string;
+	/**
+	 * Where to send an unauthenticated user. The current URL (authorize request
+	 * + query) is appended as `redirect_to` so the flow resumes after login.
+	 * Default "/login".
+	 */
+	loginPath?: string;
+	/**
+	 * Per-scope descriptions, keyed by scope name — mirror your server's
+	 * `mcpauth.Config.Scopes` catalog so users see plain language.
+	 */
+	scopeDescriptions?: Record<string, string>;
+}
+
+/**
+ * The consent payload from GET /oauth/authorize. The two yauth servers spell it
+ * slightly differently — yauth-go nests `client` and returns a `scopes` array;
+ * Rust yauth returns flat `client_id`/`client_name` and a space-delimited
+ * `scope` string — so both shapes are optional here and normalized below.
+ */
+interface ConsentPayload {
+	client?: { id: string; name?: string };
+	client_id?: string;
+	client_name?: string;
+	scopes?: string[];
+	scope?: string;
+	csrf_token: string;
+	request_id: string;
+	redirect_url?: string;
+}
+
+const clientIdOf = (p: ConsentPayload) => p.client?.id ?? p.client_id;
+const clientNameOf = (p: ConsentPayload) => p.client?.name ?? p.client_name;
+const scopesOf = (p: ConsentPayload): string[] =>
+	Array.isArray(p.scopes)
+		? p.scopes
+		: typeof p.scope === "string" && p.scope.length > 0
+			? p.scope.split(/\s+/)
+			: [];
+
+/**
+ * OAuthConsentPage is a drop-in route for the SPA path you advertise as the
+ * authorization endpoint (e.g. "/authorize" — what `mcpauth.Mount` rewrites
+ * authorization_endpoint to). Mount it at that route and it handles the whole
+ * browser side of the yauth oauth2-server flow:
+ *
+ *   1. GET {authBaseUrl}/oauth/authorize{window.location.search} with the
+ *      session cookie.
+ *   2. 401 -> redirect to {loginPath}?redirect_to=<this URL> so the user logs
+ *      in and comes back.
+ *   3. { redirect_url } (consent already granted) -> follow it.
+ *   4. consent payload -> render <ConsentScreen> with the signed request_id +
+ *      csrf_token.
+ *
+ * Example (@solidjs/router):
+ *
+ *   <Route path="/authorize" component={() =>
+ *     <OAuthConsentPage scopeDescriptions={SCOPES} />} />
+ */
+export const OAuthConsentPage: Component<OAuthConsentPageProps> = (props) => {
+	const baseUrl = () => props.authBaseUrl ?? "/api/auth";
+
+	const [payload] = createResource<ConsentPayload | null>(async () => {
+		const here = window.location.pathname + window.location.search;
+		const res = await fetch(`${baseUrl()}/oauth/authorize${window.location.search}`, {
+			method: "GET",
+			credentials: "include",
+			headers: { Accept: "application/json" },
+		});
+
+		if (res.status === 401) {
+			const loginPath = props.loginPath ?? "/login";
+			window.location.href = `${loginPath}?redirect_to=${encodeURIComponent(here)}`;
+			return null;
+		}
+
+		const body = (await res.json().catch(() => null)) as ConsentPayload | null;
+		if (!res.ok) {
+			throw new Error(
+				(body as { error_description?: string; error?: string } | null)
+					?.error_description ??
+					(body as { error?: string } | null)?.error ??
+					"Failed to start authorization",
+			);
+		}
+		// Consent already on file: the server returns the redirect directly.
+		if (body?.redirect_url) {
+			if (!isSafeRedirect(body.redirect_url)) {
+				throw new Error("Blocked unsafe redirect target");
+			}
+			window.location.href = body.redirect_url;
+			return null;
+		}
+		return body;
+	});
+
+	return (
+		<Show
+			when={payload()}
+			fallback={
+				<Show when={payload.error}>
+					<div class="mx-auto max-w-md p-6 text-sm text-destructive">
+						{(payload.error as Error)?.message ?? "Authorization error"}
+					</div>
+				</Show>
+			}
+		>
+			{(p) => (
+				<ConsentScreen
+					authBaseUrl={baseUrl()}
+					clientId={clientIdOf(p())}
+					clientName={clientNameOf(p())}
+					scopes={scopesOf(p())}
+					scopeDescriptions={props.scopeDescriptions}
+					requestId={p().request_id}
+					csrfToken={p().csrf_token}
+				/>
+			)}
+		</Show>
+	);
+};

package/src/index.ts

@@ -2,6 +2,9 @@ export { AuditDestinationCreate } from "./components/audit-destination-create";
 export { AuditDestinationList } from "./components/audit-destination-list";
 export { ChangePasswordForm } from "./components/change-password-form";
 export { ConsentScreen } from "./components/consent-screen";
+export type { ConsentScreenProps } from "./components/consent-screen";
+export { OAuthConsentPage } from "./components/oauth-consent-page";
+export type { OAuthConsentPageProps } from "./components/oauth-consent-page";
 export { DomainClaim } from "./components/domain-claim";
 export { DomainList } from "./components/domain-list";
 export { DomainVerifyStep } from "./components/domain-verify-step";

package/src/safe-redirect.ts

@@ -0,0 +1,15 @@
+/**
+ * isSafeRedirect reports whether a URL is safe to navigate to via
+ * `window.location`. It rejects `javascript:`, `data:`, and any other
+ * non-HTTP(S) scheme so a malicious registered `redirect_uri` cannot execute
+ * script in this origin. Defense in depth — the authorization server also
+ * validates the scheme at client registration (OAuth 2.1 BCP §9).
+ */
+export function isSafeRedirect(url: string): boolean {
+	try {
+		const protocol = new URL(url, window.location.origin).protocol;
+		return protocol === "https:" || protocol === "http:";
+	} catch {
+		return false;
+	}
+}