@yackey-labs/yauth-ui-solidjs 0.1.0

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@yackey-labs/yauth-ui-solidjs",
+	"version": "0.1.0",
+	"type": "module",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "src/index.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./src/index.ts",
+			"default": "./src/index.ts"
+		}
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"scripts": {
+		"build": "vite build",
+		"typecheck": "tsc --noEmit",
+		"test": "bun test --conditions browser"
+	},
+	"dependencies": {
+		"@simplewebauthn/browser": "^13.0.0",
+		"@yackey-labs/yauth-client": "0.1.0",
+		"@yackey-labs/yauth-shared": "0.1.0",
+		"solid-js": "^1.9.5"
+	},
+	"devDependencies": {
+		"typescript": "^5.7.2",
+		"vite": "^7.3.1",
+		"vite-plugin-solid": "^2.11.10"
+	}
+}

package/src/components/change-password-form.tsx

@@ -0,0 +1,140 @@
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+
+export interface ChangePasswordFormProps {
+	onSuccess?: () => void;
+	onError?: (error: Error) => void;
+}
+
+export const ChangePasswordForm: Component<ChangePasswordFormProps> = (
+	props,
+) => {
+	const { client } = useYAuth();
+	const [currentPassword, setCurrentPassword] = createSignal("");
+	const [newPassword, setNewPassword] = createSignal("");
+	const [confirmPassword, setConfirmPassword] = createSignal("");
+	const [error, setError] = createSignal<string | null>(null);
+	const [success, setSuccess] = createSignal(false);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setError(null);
+		setSuccess(false);
+
+		const form = e.currentTarget as HTMLFormElement;
+		const formData = new FormData(form);
+		const currentPw =
+			(formData.get("current_password") as string) || currentPassword();
+		const newPw = (formData.get("new_password") as string) || newPassword();
+		const confirmPw =
+			(formData.get("confirm_password") as string) || confirmPassword();
+
+		if (newPw !== confirmPw) {
+			setError("Passwords do not match");
+			return;
+		}
+
+		setLoading(true);
+
+		try {
+			await client.emailPassword.changePassword(currentPw, newPw);
+			setSuccess(true);
+			setCurrentPassword("");
+			setNewPassword("");
+			setConfirmPassword("");
+			props.onSuccess?.();
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+			props.onError?.(error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<form class="space-y-4" onSubmit={handleSubmit}>
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={success()}>
+				<div class="rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-600 dark:text-emerald-400">
+					Password changed successfully.
+				</div>
+			</Show>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-current-password"
+				>
+					Current password
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-current-password"
+					name="current_password"
+					type="password"
+					value={currentPassword()}
+					onInput={(e) => setCurrentPassword(e.currentTarget.value)}
+					required
+					autocomplete="current-password"
+					disabled={loading()}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-new-password"
+				>
+					New password
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-new-password"
+					name="new_password"
+					type="password"
+					value={newPassword()}
+					onInput={(e) => setNewPassword(e.currentTarget.value)}
+					required
+					autocomplete="new-password"
+					disabled={loading()}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-confirm-password"
+				>
+					Confirm new password
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-confirm-password"
+					name="confirm_password"
+					type="password"
+					value={confirmPassword()}
+					onInput={(e) => setConfirmPassword(e.currentTarget.value)}
+					required
+					autocomplete="new-password"
+					disabled={loading()}
+				/>
+			</div>
+
+			<button
+				class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				type="submit"
+				disabled={loading()}
+			>
+				{loading() ? "Changing password..." : "Change password"}
+			</button>
+		</form>
+	);
+};

package/src/components/consent-screen.tsx

@@ -0,0 +1,152 @@
+import { type Component, createSignal, For } from "solid-js";
+import { Show } from "solid-js/web";
+
+export interface ConsentScreenProps {
+	clientName?: string;
+	clientId: string;
+	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") */
+	authBaseUrl?: string;
+}
+
+export const ConsentScreen: Component<ConsentScreenProps> = (props) => {
+	const [loading, setLoading] = createSignal(false);
+	const [error, setError] = createSignal<string | null>(null);
+
+	const handleDecision = async (approved: boolean) => {
+		setError(null);
+		setLoading(true);
+
+		try {
+			const baseUrl = props.authBaseUrl ?? "/api/auth";
+			const response = await fetch(`${baseUrl}/authorize`, {
+				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,
+					approved,
+				}),
+			});
+
+			if (response.redirected) {
+				window.location.href = response.url;
+				return;
+			}
+
+			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;
+				return;
+			}
+
+			props.onSubmit?.(approved);
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+			props.onError?.(error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const displayName = () => props.clientName ?? props.clientId;
+
+	return (
+		<div class="mx-auto max-w-md space-y-6 p-6">
+			<div class="space-y-2 text-center">
+				<h2 class="text-2xl font-semibold tracking-tight">
+					Authorize {displayName()}
+				</h2>
+				<p class="text-sm text-muted-foreground">
+					<strong>{displayName()}</strong> is requesting access to your account.
+				</p>
+			</div>
+
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={props.scopes && props.scopes.length > 0}>
+				<div class="rounded-md border p-4 space-y-3">
+					<p class="text-sm font-medium">
+						This application is requesting the following permissions:
+					</p>
+					<ul class="space-y-2">
+						<For each={props.scopes}>
+							{(scope) => (
+								<li class="flex items-center gap-2 text-sm">
+									<svg
+										class="h-4 w-4 text-primary"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+										aria-label="Checkmark"
+										role="img"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+									<span>{scope}</span>
+								</li>
+							)}
+						</For>
+					</ul>
+				</div>
+			</Show>
+
+			<div class="flex gap-3">
+				<button
+					class="inline-flex h-9 flex-1 cursor-pointer items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+					type="button"
+					disabled={loading()}
+					onClick={() => handleDecision(false)}
+				>
+					Deny
+				</button>
+				<button
+					class="inline-flex h-9 flex-1 cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+					type="button"
+					disabled={loading()}
+					onClick={() => handleDecision(true)}
+				>
+					{loading() ? "Authorizing..." : "Authorize"}
+				</button>
+			</div>
+
+			<p class="text-center text-xs text-muted-foreground">
+				By authorizing, you allow this application to access your account with
+				the permissions listed above.
+			</p>
+		</div>
+	);
+};

package/src/components/forgot-password-form.tsx

@@ -0,0 +1,83 @@
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+
+export interface ForgotPasswordFormProps {
+	onSuccess?: (message: string) => void;
+}
+
+export const ForgotPasswordForm: Component<ForgotPasswordFormProps> = (
+	props,
+) => {
+	const { client } = useYAuth();
+	const [email, setEmail] = createSignal("");
+	const [error, setError] = createSignal<string | null>(null);
+	const [success, setSuccess] = createSignal<string | null>(null);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setError(null);
+		setSuccess(null);
+		setLoading(true);
+
+		try {
+			const form = e.currentTarget as HTMLFormElement;
+			const formData = new FormData(form);
+			const result = await client.emailPassword.forgotPassword(
+				(formData.get("email") as string) || email(),
+			);
+			setSuccess(result.message);
+			props.onSuccess?.(result.message);
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<form class="space-y-4" onSubmit={handleSubmit}>
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={success()}>
+				<div class="rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-600 dark:text-emerald-400">
+					{success()}
+				</div>
+			</Show>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-forgot-password-email"
+				>
+					Email
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-forgot-password-email"
+					name="email"
+					type="email"
+					value={email()}
+					onInput={(e) => setEmail(e.currentTarget.value)}
+					required
+					autocomplete="email"
+					disabled={loading()}
+				/>
+			</div>
+
+			<button
+				class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				type="submit"
+				disabled={loading()}
+			>
+				{loading() ? "Sending..." : "Send reset link"}
+			</button>
+		</form>
+	);
+};

package/src/components/login-form.tsx

@@ -0,0 +1,128 @@
+import type { AuthUser } from "@yackey-labs/yauth-shared";
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+import { PasskeyButton } from "./passkey-button";
+
+export interface LoginFormProps {
+	onSuccess?: (user: AuthUser) => void;
+	onMfaRequired?: (pendingSessionId: string) => void;
+	onError?: (error: Error) => void;
+	showPasskey?: boolean;
+}
+
+export const LoginForm: Component<LoginFormProps> = (props) => {
+	const { client, refetch } = useYAuth();
+	const [email, setEmail] = createSignal("");
+	const [password, setPassword] = createSignal("");
+	const [error, setError] = createSignal<string | null>(null);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setError(null);
+		setLoading(true);
+
+		try {
+			const form = e.currentTarget as HTMLFormElement;
+			const formData = new FormData(form);
+			const result = await client.emailPassword.login({
+				email: (formData.get("email") as string) || email(),
+				password: (formData.get("password") as string) || password(),
+			});
+
+			if ("mfa_required" in result && result.mfa_required) {
+				props.onMfaRequired?.(result.pending_session_id);
+			} else {
+				// Session cookie is set — refetch and await so reactive store updates
+				const user = await refetch();
+				props.onSuccess?.(user!);
+			}
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+			props.onError?.(error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<form class="space-y-6" on:submit={handleSubmit}>
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<div class="space-y-2">
+				<label class="text-sm font-medium leading-none" for="yauth-login-email">
+					Email
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-login-email"
+					name="email"
+					type="email"
+					value={email()}
+					on:input={(e) => setEmail(e.currentTarget.value)}
+					required
+					autocomplete="email"
+					disabled={loading()}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-login-password"
+				>
+					Password
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-login-password"
+					name="password"
+					type="password"
+					value={password()}
+					on:input={(e) => setPassword(e.currentTarget.value)}
+					required
+					autocomplete="current-password"
+					disabled={loading()}
+				/>
+			</div>
+
+			<button
+				class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				type="submit"
+				disabled={loading()}
+			>
+				{loading() ? "Signing in..." : "Sign in"}
+			</button>
+
+			<Show when={props.showPasskey}>
+				<div class="relative">
+					<div
+						class="absolute inset-0 flex items-center"
+						style="pointer-events:none"
+					>
+						<span class="w-full border-t" />
+					</div>
+					<div class="relative flex justify-center text-xs uppercase">
+						<span class="bg-background px-2 text-muted-foreground">or</span>
+					</div>
+				</div>
+
+				<PasskeyButton
+					mode="login"
+					email={email()}
+					onSuccess={(user) => {
+						void refetch();
+						props.onSuccess?.(user);
+					}}
+					onError={props.onError}
+				/>
+			</Show>
+		</form>
+	);
+};

package/src/components/magic-link-form.tsx

@@ -0,0 +1,84 @@
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+
+export interface MagicLinkFormProps {
+	onSuccess?: (message: string) => void;
+}
+
+export const MagicLinkForm: Component<MagicLinkFormProps> = (props) => {
+	const { client } = useYAuth();
+	const [email, setEmail] = createSignal("");
+	const [error, setError] = createSignal<string | null>(null);
+	const [success, setSuccess] = createSignal<string | null>(null);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setError(null);
+		setSuccess(null);
+		setLoading(true);
+
+		try {
+			const form = e.currentTarget as HTMLFormElement;
+			const formData = new FormData(form);
+			const result = await client.magicLink.send(
+				(formData.get("email") as string) || email(),
+			);
+			setSuccess(result.message);
+			props.onSuccess?.(result.message);
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<form class="space-y-4" onSubmit={handleSubmit}>
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={success()}>
+				<div class="rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-600 dark:text-emerald-400">
+					{success()}
+				</div>
+			</Show>
+
+			<Show when={!success()}>
+				<div class="space-y-2">
+					<label
+						class="text-sm font-medium leading-none"
+						for="yauth-magic-link-email"
+					>
+						Email
+					</label>
+					<input
+						class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+						id="yauth-magic-link-email"
+						name="email"
+						type="email"
+						value={email()}
+						onInput={(e) => setEmail(e.currentTarget.value)}
+						required
+						autocomplete="email"
+						disabled={loading()}
+						placeholder="you@example.com"
+					/>
+				</div>
+
+				<button
+					class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+					type="submit"
+					disabled={loading()}
+				>
+					{loading() ? "Sending..." : "Send magic link"}
+				</button>
+			</Show>
+		</form>
+	);
+};