@remit/web-client 0.0.1

package/src/auth/BetterAuthShell.tsx

@@ -0,0 +1,198 @@
+import {
+	AuthCard,
+	AuthFooter,
+	AuthHero,
+	Banner,
+	Button,
+	Input,
+} from "@remit/ui";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+import { FatalErrorOverlay } from "@/components/ui/FatalErrorOverlay";
+import { authFooterNote } from "./account-menu-mode";
+import {
+	type AuthRequest,
+	authInlineMessage,
+	classifyAuthError,
+	reportFatalAuthError,
+} from "./auth-error";
+import {
+	authClient,
+	isBetterAuthEnabled,
+	isSignUpDisabledError,
+} from "./better-auth-config";
+
+type Mode = "signIn" | "signUp";
+
+interface BetterAuthShellProps {
+	children: ReactNode;
+}
+
+const SIGN_UP_REQUEST: AuthRequest = {
+	method: "POST",
+	path: "/api/auth/sign-up/email",
+};
+const SIGN_IN_REQUEST: AuthRequest = {
+	method: "POST",
+	path: "/api/auth/sign-in/email",
+};
+
+export const SignInForm = () => {
+	const [mode, setMode] = useState<Mode>("signIn");
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [submitting, setSubmitting] = useState(false);
+	// Learned from the server's rejection, never a client-side flag — the UI
+	// cannot disagree with better-auth's `disableSignUp`.
+	const [signUpClosed, setSignUpClosed] = useState(false);
+
+	const activeMode: Mode = signUpClosed ? "signIn" : mode;
+
+	const handleFailure = (failure: unknown, request: AuthRequest) => {
+		if (isSignUpDisabledError(failure)) {
+			setSignUpClosed(true);
+			setMode("signIn");
+			return;
+		}
+		const kind = classifyAuthError(failure);
+		if (kind === "fatal") {
+			reportFatalAuthError(failure, request);
+			return;
+		}
+		setError(authInlineMessage(failure, kind));
+	};
+
+	const submit = async (event: FormEvent) => {
+		event.preventDefault();
+		if (submitting) return;
+		setError(null);
+		setSubmitting(true);
+
+		const request = activeMode === "signUp" ? SIGN_UP_REQUEST : SIGN_IN_REQUEST;
+		// better-auth returns `{ error }` for a server rejection, but a network
+		// failure rejects the promise — fold both into one failure value so a
+		// broken route or contract never vanishes as an unhandled rejection.
+		const failure: unknown = await (activeMode === "signUp"
+			? authClient.signUp.email({ email, password, name })
+			: authClient.signIn.email({ email, password })
+		).then(
+			(result) => result.error ?? null,
+			(thrown: unknown) => thrown,
+		);
+
+		setSubmitting(false);
+		// On success `failure` is null; better-auth's session store updates and
+		// useSession re-renders the gate into the app.
+		if (failure) handleFailure(failure, request);
+	};
+
+	return (
+		<>
+			<FatalErrorOverlay />
+			<AuthCard>
+				<AuthHero />
+				<form
+					onSubmit={submit}
+					className="mt-6 flex flex-col gap-4 rounded-lg border border-line bg-surface p-7 shadow-lg"
+				>
+					{signUpClosed ? (
+						<Banner tone="info">
+							New signups are currently closed. Sign in with an existing
+							account, or contact your administrator for access.
+						</Banner>
+					) : (
+						<div className="flex gap-1">
+							<Button
+								size="sm"
+								variant={activeMode === "signIn" ? "secondary" : "ghost"}
+								aria-pressed={activeMode === "signIn"}
+								onClick={() => setMode("signIn")}
+							>
+								Sign in
+							</Button>
+							<Button
+								size="sm"
+								variant={activeMode === "signUp" ? "secondary" : "ghost"}
+								aria-pressed={activeMode === "signUp"}
+								onClick={() => setMode("signUp")}
+							>
+								Create account
+							</Button>
+						</div>
+					)}
+
+					{error && <Banner tone="danger">{error}</Banner>}
+
+					{activeMode === "signUp" && (
+						<div className="flex flex-col gap-1 text-sm">
+							<label htmlFor="ba-name" className="text-fg-muted">
+								Name
+							</label>
+							<Input
+								id="ba-name"
+								type="text"
+								autoComplete="name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder="Your name"
+								required
+							/>
+						</div>
+					)}
+
+					<div className="flex flex-col gap-1 text-sm">
+						<label htmlFor="ba-email" className="text-fg-muted">
+							Email
+						</label>
+						<Input
+							id="ba-email"
+							type="email"
+							autoComplete="email"
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							placeholder="you@example.com"
+							required
+						/>
+					</div>
+
+					<div className="flex flex-col gap-1 text-sm">
+						<label htmlFor="ba-password" className="text-fg-muted">
+							Password
+						</label>
+						<Input
+							id="ba-password"
+							type="password"
+							autoComplete={
+								activeMode === "signUp" ? "new-password" : "current-password"
+							}
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							placeholder="Your password"
+							required
+						/>
+					</div>
+
+					<Button type="submit">
+						{activeMode === "signUp" ? "Create account" : "Sign in"}
+					</Button>
+				</form>
+				<AuthFooter
+					note={authFooterNote({
+						betterAuthEnabled: isBetterAuthEnabled(),
+						cognitoConfigured: false,
+					})}
+				/>
+			</AuthCard>
+		</>
+	);
+};
+
+export const BetterAuthShell = ({ children }: BetterAuthShellProps) => {
+	const { data: session, isPending } = authClient.useSession();
+
+	if (isPending) return <AppShellSkeleton />;
+	if (session) return <>{children}</>;
+	return <SignInForm />;
+};

package/src/auth/account-menu-mode.test.ts

@@ -0,0 +1,64 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { COGNITO_FOOTER_NOTE } from "@remit/ui";
+import { accountMenuMode, authFooterNote } from "./account-menu-mode";
+
+describe("accountMenuMode", () => {
+	test("prefers better-auth when enabled", () => {
+		assert.equal(
+			accountMenuMode({ betterAuthEnabled: true, cognitoConfigured: false }),
+			"betterAuth",
+		);
+	});
+
+	test("better-auth wins even when cognito is also configured", () => {
+		assert.equal(
+			accountMenuMode({ betterAuthEnabled: true, cognitoConfigured: true }),
+			"betterAuth",
+		);
+	});
+
+	test("falls back to cognito when only cognito is configured", () => {
+		assert.equal(
+			accountMenuMode({ betterAuthEnabled: false, cognitoConfigured: true }),
+			"cognito",
+		);
+	});
+
+	test("renders nothing when neither identity provider is active", () => {
+		assert.equal(
+			accountMenuMode({ betterAuthEnabled: false, cognitoConfigured: false }),
+			"none",
+		);
+	});
+});
+
+describe("authFooterNote", () => {
+	test("names Cognito only when Cognito is the active provider", () => {
+		assert.equal(
+			authFooterNote({ betterAuthEnabled: false, cognitoConfigured: true }),
+			COGNITO_FOOTER_NOTE,
+		);
+	});
+
+	test("stays provider-neutral in better-auth mode", () => {
+		assert.equal(
+			authFooterNote({ betterAuthEnabled: true, cognitoConfigured: false }),
+			undefined,
+		);
+	});
+
+	test("stays provider-neutral when better-auth wins over present cognito env", () => {
+		assert.equal(
+			authFooterNote({ betterAuthEnabled: true, cognitoConfigured: true }),
+			undefined,
+		);
+	});
+
+	test("stays provider-neutral when no provider is configured", () => {
+		assert.equal(
+			authFooterNote({ betterAuthEnabled: false, cognitoConfigured: false }),
+			undefined,
+		);
+	});
+});

package/src/auth/account-menu-mode.ts

@@ -0,0 +1,28 @@
+import { COGNITO_FOOTER_NOTE } from "@remit/ui";
+
+export type AccountMenuMode = "betterAuth" | "cognito" | "none";
+
+export interface AccountMenuModeInput {
+	betterAuthEnabled: boolean;
+	cognitoConfigured: boolean;
+}
+
+export const accountMenuMode = ({
+	betterAuthEnabled,
+	cognitoConfigured,
+}: AccountMenuModeInput): AccountMenuMode => {
+	if (betterAuthEnabled) return "betterAuth";
+	if (cognitoConfigured) return "cognito";
+	return "none";
+};
+
+/**
+ * The sign-in footer caption names Cognito only when Cognito is the active
+ * provider. Every other mode falls through to the kit's provider-neutral
+ * default, so the caption can never claim an identity provider the build does
+ * not use.
+ */
+export const authFooterNote = (
+	input: AccountMenuModeInput,
+): string | undefined =>
+	accountMenuMode(input) === "cognito" ? COGNITO_FOOTER_NOTE : undefined;

package/src/auth/amplify-config.test.ts

@@ -0,0 +1,158 @@
+import assert from "node:assert";
+import { beforeEach, describe, test } from "node:test";
+
+type TestConfig = {
+	cognito?: {
+		userPoolId?: string;
+		clientId?: string;
+		domain?: string;
+		region?: string;
+	};
+	appOrigin?: string;
+};
+type AmplifyCall = {
+	Auth?: {
+		Cognito?: {
+			userPoolId?: string;
+			userPoolClientId?: string;
+			loginWith?: {
+				oauth?: {
+					domain?: string;
+					redirectSignIn?: string[];
+					redirectSignOut?: string[];
+					responseType?: string;
+					scopes?: string[];
+				};
+			};
+		};
+	};
+};
+
+declare global {
+	// eslint-disable-next-line no-var
+	var __AMPLIFY_MOCKS__: { configureCalls: AmplifyCall[] } | undefined;
+	// eslint-disable-next-line no-var
+	var __CACHE_BUST__: number | undefined;
+}
+
+let cacheBust = 0;
+
+const loadModule = async (config: TestConfig) => {
+	cacheBust += 1;
+	globalThis.__CACHE_BUST__ = cacheBust;
+	globalThis.__REMIT_CONFIG__ = config;
+	globalThis.__AMPLIFY_MOCKS__ = { configureCalls: [] };
+	return import(`./amplify-config.ts?v=${cacheBust}`);
+};
+
+const fullConfig: TestConfig = {
+	cognito: {
+		userPoolId: "us-east-1_pool",
+		clientId: "client-id",
+		domain: "example.auth.us-east-1.amazoncognito.com",
+		region: "us-east-1",
+	},
+	appOrigin: "https://app.example.com",
+};
+
+describe("isCognitoConfigured", () => {
+	test("returns true when userPoolId and clientId are present", async () => {
+		const mod = await loadModule(fullConfig);
+		assert.equal(mod.isCognitoConfigured(), true);
+	});
+
+	test("returns false when both values are missing", async () => {
+		const mod = await loadModule({});
+		assert.equal(mod.isCognitoConfigured(), false);
+	});
+
+	test("returns false when only userPoolId is set", async () => {
+		const mod = await loadModule({ cognito: { userPoolId: "pool" } });
+		assert.equal(mod.isCognitoConfigured(), false);
+	});
+
+	test("returns false when only clientId is set", async () => {
+		const mod = await loadModule({ cognito: { clientId: "client" } });
+		assert.equal(mod.isCognitoConfigured(), false);
+	});
+});
+
+describe("configureAmplify", () => {
+	let originalWarn: typeof console.warn;
+	let warnings: unknown[][];
+
+	beforeEach(() => {
+		originalWarn = console.warn;
+		warnings = [];
+		console.warn = (...args: unknown[]) => {
+			warnings.push(args);
+		};
+	});
+
+	test("warns and does not call Amplify.configure when unconfigured", async () => {
+		const mod = await loadModule({});
+		mod.configureAmplify();
+		console.warn = originalWarn;
+		assert.equal(globalThis.__AMPLIFY_MOCKS__?.configureCalls.length, 0);
+		assert.equal(warnings.length, 1);
+		const message = String(warnings[0][0]);
+		assert.ok(
+			message.includes("Cognito"),
+			`expected warning to mention Cognito, got: ${message}`,
+		);
+	});
+
+	test("passes userPoolId and clientId to Amplify.configure", async () => {
+		const mod = await loadModule(fullConfig);
+		mod.configureAmplify();
+		console.warn = originalWarn;
+		const calls = globalThis.__AMPLIFY_MOCKS__?.configureCalls ?? [];
+		assert.equal(calls.length, 1);
+		const cognito = calls[0]?.Auth?.Cognito;
+		assert.equal(cognito?.userPoolId, "us-east-1_pool");
+		assert.equal(cognito?.userPoolClientId, "client-id");
+	});
+
+	test("wires OAuth block with appOrigin in redirect arrays when domain set", async () => {
+		const mod = await loadModule(fullConfig);
+		mod.configureAmplify();
+		console.warn = originalWarn;
+		const oauth =
+			globalThis.__AMPLIFY_MOCKS__?.configureCalls[0]?.Auth?.Cognito?.loginWith
+				?.oauth;
+		assert.ok(oauth, "expected oauth block to be present");
+		assert.equal(oauth?.domain, "example.auth.us-east-1.amazoncognito.com");
+		assert.deepEqual(oauth?.redirectSignIn, ["https://app.example.com"]);
+		assert.deepEqual(oauth?.redirectSignOut, ["https://app.example.com"]);
+		assert.equal(oauth?.responseType, "code");
+	});
+
+	test("omits loginWith block when no domain configured", async () => {
+		const mod = await loadModule({
+			cognito: { userPoolId: "pool", clientId: "client" },
+		});
+		mod.configureAmplify();
+		console.warn = originalWarn;
+		const cognito =
+			globalThis.__AMPLIFY_MOCKS__?.configureCalls[0]?.Auth?.Cognito;
+		assert.equal(cognito?.loginWith, undefined);
+	});
+
+	test("uses empty redirect arrays when domain present but appOrigin missing", async () => {
+		const mod = await loadModule({
+			cognito: {
+				userPoolId: "pool",
+				clientId: "client",
+				domain: "example.auth.us-east-1.amazoncognito.com",
+			},
+		});
+		mod.configureAmplify();
+		console.warn = originalWarn;
+		const oauth =
+			globalThis.__AMPLIFY_MOCKS__?.configureCalls[0]?.Auth?.Cognito?.loginWith
+				?.oauth;
+		assert.ok(oauth);
+		assert.deepEqual(oauth?.redirectSignIn, []);
+		assert.deepEqual(oauth?.redirectSignOut, []);
+	});
+});

package/src/auth/amplify-config.ts

@@ -0,0 +1,60 @@
+import { Amplify } from "aws-amplify";
+import { getRuntimeConfig } from "../runtime-config";
+
+export interface CognitoEnv {
+	userPoolId: string;
+	userPoolClientId: string;
+	domain: string;
+	region: string;
+	appOrigin: string;
+}
+
+const readCognitoEnv = (): CognitoEnv | null => {
+	const config = getRuntimeConfig();
+	const { userPoolId, clientId, domain, region } = config.cognito;
+
+	if (!userPoolId || !clientId) return null;
+
+	return {
+		userPoolId,
+		userPoolClientId: clientId,
+		domain,
+		region,
+		appOrigin: config.appOrigin,
+	};
+};
+
+const cognitoEnv = readCognitoEnv();
+
+export const isCognitoConfigured = (): boolean => cognitoEnv !== null;
+
+export const configureAmplify = (): void => {
+	if (!cognitoEnv) {
+		console.warn(
+			"[auth] Cognito user pool is not configured. Running in local dev mode without Cognito auth.",
+		);
+		return;
+	}
+
+	const { userPoolId, userPoolClientId, domain, appOrigin } = cognitoEnv;
+
+	Amplify.configure({
+		Auth: {
+			Cognito: {
+				userPoolId,
+				userPoolClientId,
+				loginWith: domain
+					? {
+							oauth: {
+								domain,
+								scopes: ["openid", "email", "profile"],
+								redirectSignIn: appOrigin ? [appOrigin] : [],
+								redirectSignOut: appOrigin ? [appOrigin] : [],
+								responseType: "code",
+							},
+						}
+					: undefined,
+			},
+		},
+	});
+};

package/src/auth/auth-error.test.ts

@@ -0,0 +1,109 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { __resetFatalError, getCurrentFatalError } from "@/lib/fatal-error";
+import {
+	type AuthRequest,
+	authInlineMessage,
+	buildFatalAuthMessage,
+	classifyAuthError,
+	reportFatalAuthError,
+} from "./auth-error";
+
+const SIGN_UP: AuthRequest = {
+	method: "POST",
+	path: "/api/auth/sign-up/email",
+};
+
+describe("classifyAuthError", () => {
+	it("treats a 404 on our own route as fatal", () => {
+		assert.equal(
+			classifyAuthError({ status: 404, statusText: "Not Found" }),
+			"fatal",
+		);
+	});
+
+	it("treats a 5xx as fatal", () => {
+		assert.equal(
+			classifyAuthError({ status: 503, statusText: "Service Unavailable" }),
+			"fatal",
+		);
+	});
+
+	it("treats an unexpected 4xx with no message as fatal", () => {
+		assert.equal(classifyAuthError({ status: 418 }), "fatal");
+	});
+
+	it("treats an expected, server-described 4xx as validation", () => {
+		assert.equal(
+			classifyAuthError({
+				status: 422,
+				code: "USER_ALREADY_EXISTS",
+				message: "User already exists.",
+			}),
+			"validation",
+		);
+		assert.equal(
+			classifyAuthError({
+				status: 401,
+				code: "INVALID_EMAIL_OR_PASSWORD",
+				message: "Invalid email or password.",
+			}),
+			"validation",
+		);
+	});
+
+	it("treats a statusless failure as network", () => {
+		assert.equal(classifyAuthError(new Error("Failed to fetch")), "network");
+	});
+
+	it("treats better-auth's Fetch Error sentinel as network", () => {
+		assert.equal(
+			classifyAuthError({
+				status: 500,
+				statusText: "Fetch Error",
+				message: "Fetch related error.",
+			}),
+			"network",
+		);
+	});
+});
+
+describe("authInlineMessage", () => {
+	it("surfaces the server's message for a validation error", () => {
+		assert.equal(
+			authInlineMessage(
+				{ status: 422, message: "User already exists." },
+				"validation",
+			),
+			"User already exists.",
+		);
+	});
+
+	it("gives a connection hint for a network error", () => {
+		assert.match(authInlineMessage(new Error("boom"), "network"), /offline/i);
+	});
+});
+
+describe("buildFatalAuthMessage", () => {
+	it("names the method, path, and status, with 404 troubleshooting guidance", () => {
+		const message = buildFatalAuthMessage(
+			{ status: 404, statusText: "Not Found" },
+			SIGN_UP,
+		);
+		assert.match(message, /POST \/api\/auth\/sign-up\/email/);
+		assert.match(message, /404 Not Found/);
+		assert.match(message, /backend is running and up to date/);
+	});
+});
+
+describe("reportFatalAuthError", () => {
+	afterEach(() => __resetFatalError());
+
+	it("escalates to a non-recoverable fatal carrying the request detail", () => {
+		reportFatalAuthError({ status: 404, statusText: "Not Found" }, SIGN_UP);
+		const fatal = getCurrentFatalError();
+		assert.ok(fatal);
+		assert.equal(fatal.recoverable, false);
+		assert.match(fatal.message, /POST \/api\/auth\/sign-up\/email failed: 404/);
+	});
+});