@remit/web-client 0.0.1

package/src/auth/cognito/CognitoAccount.tsx

@@ -0,0 +1,48 @@
+import { useAuthenticator } from "@aws-amplify/ui-react";
+import { isCognitoConfigured } from "../amplify-config";
+import type { AuthAccountProps } from "../provider";
+import { isSignOutVisible } from "../sign-out-visibility";
+
+const cognitoUserEmail = (
+	user: { signInDetails?: { loginId?: string }; username?: string } | undefined,
+): string | null => {
+	if (!user) return null;
+	return user.signInDetails?.loginId ?? user.username ?? null;
+};
+
+const CognitoAccountInner = ({
+	children,
+	fallback = null,
+}: AuthAccountProps) => {
+	const { authStatus, signOut, user } = useAuthenticator((ctx) => [
+		ctx.authStatus,
+		ctx.signOut,
+		ctx.user,
+	]);
+
+	if (!isSignOutVisible({ configured: true, authStatus })) {
+		return <>{fallback}</>;
+	}
+
+	return (
+		<>{children({ email: cognitoUserEmail(user), signOut: () => signOut() })}</>
+	);
+};
+
+/**
+ * Cognito identity for the account affordances. `useAuthenticator` throws when
+ * called outside `Authenticator.Provider`, which `CognitoShell` only mounts
+ * once Cognito is configured — so the hook-using inner is gated on that,
+ * constant for the app's lifetime, keeping the Rules of Hooks intact.
+ */
+export const CognitoAccount = ({
+	children,
+	fallback = null,
+}: AuthAccountProps) => {
+	if (!isCognitoConfigured()) {
+		return <>{fallback}</>;
+	}
+	return (
+		<CognitoAccountInner fallback={fallback}>{children}</CognitoAccountInner>
+	);
+};

package/src/auth/cognito/CognitoShell.tsx

@@ -0,0 +1,266 @@
+import {
+	Authenticator,
+	createTheme,
+	ThemeProvider,
+	useAuthenticator,
+} from "@aws-amplify/ui-react";
+import { AuthCard, AuthFooter, AuthHero, Banner } from "@remit/ui";
+import type { ReactNode } from "react";
+import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+import { authFooterNote } from "../account-menu-mode";
+import { isCognitoConfigured } from "../amplify-config";
+
+interface CognitoShellProps {
+	children: ReactNode;
+}
+
+const REMIT_FONT =
+	'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+
+const cssVar = (name: string): string => `var(${name})`;
+
+/* remit-ui semantic vars (tokens.css declares these on :root / .dark).
+   We reference the raw vars — not the Tailwind `--color-*` aliases —
+   because the `@theme inline` block inlines those into utilities rather
+   than guaranteeing them as custom properties. */
+const BRAND = cssVar("--accent");
+const BRAND_HOVER = cssVar("--accent-hover");
+const BRAND_SOFT = cssVar("--accent-soft");
+const BRAND_FG = cssVar("--accent-fg");
+const CARD_BG = cssVar("--surface");
+const CARD_FG = cssVar("--fg");
+const PAGE_BG = cssVar("--surface-sunken");
+const MUTED_FG = cssVar("--fg-muted");
+const BORDER = cssVar("--line");
+
+const remitTheme = createTheme({
+	name: "remit",
+	tokens: {
+		colors: {
+			brand: {
+				primary: {
+					10: { value: BRAND_SOFT },
+					20: { value: BRAND_SOFT },
+					40: { value: BRAND },
+					60: { value: BRAND },
+					80: { value: BRAND },
+					90: { value: BRAND },
+					100: { value: BRAND },
+				},
+			},
+			background: {
+				primary: { value: CARD_BG },
+				secondary: { value: PAGE_BG },
+			},
+			font: {
+				primary: { value: CARD_FG },
+				secondary: { value: MUTED_FG },
+				tertiary: { value: MUTED_FG },
+				interactive: { value: BRAND },
+				inverse: { value: BRAND_FG },
+				hover: { value: BRAND },
+				focus: { value: BRAND },
+				active: { value: BRAND },
+			},
+			border: {
+				primary: { value: BORDER },
+				secondary: { value: BORDER },
+				focus: { value: BRAND },
+			},
+		},
+		fonts: {
+			default: {
+				variable: { value: REMIT_FONT },
+				static: { value: REMIT_FONT },
+			},
+		},
+		radii: {
+			/* Literal values from the remit-ui radius scale (2/3/5/7/10px).
+			   Tailwind's `@theme inline` only emits theme variables that are
+			   referenced from compiled CSS — var(--radius-*) lookups from
+			   this JS theme object are invisible to its scanner, so they
+			   would resolve to nothing at runtime. */
+			small: { value: "3px" },
+			medium: { value: "5px" },
+			large: { value: "7px" },
+		},
+		components: {
+			authenticator: {
+				router: {
+					borderColor: { value: BORDER },
+					borderWidth: { value: "1px" },
+					boxShadow: {
+						value:
+							"0 10px 30px -10px rgb(15 23 42 / 0.18), 0 4px 12px -6px rgb(15 23 42 / 0.1)",
+					},
+					backgroundColor: { value: CARD_BG },
+				},
+				form: {
+					padding: { value: "1.75rem" },
+				},
+				orContainer: {
+					color: { value: MUTED_FG },
+				},
+			},
+			button: {
+				color: { value: CARD_FG },
+				primary: {
+					backgroundColor: { value: BRAND },
+					color: { value: BRAND_FG },
+					_hover: {
+						backgroundColor: { value: BRAND_HOVER },
+						color: { value: BRAND_FG },
+					},
+					_focus: {
+						backgroundColor: { value: BRAND },
+						color: { value: BRAND_FG },
+					},
+					_active: {
+						backgroundColor: { value: BRAND },
+						color: { value: BRAND_FG },
+					},
+				},
+				link: {
+					color: { value: BRAND },
+					_hover: {
+						color: { value: BRAND },
+						backgroundColor: { value: "transparent" },
+					},
+					_focus: {
+						color: { value: BRAND },
+						backgroundColor: { value: "transparent" },
+					},
+					_active: {
+						color: { value: BRAND },
+						backgroundColor: { value: "transparent" },
+					},
+				},
+			},
+			fieldcontrol: {
+				color: { value: CARD_FG },
+				borderColor: { value: BORDER },
+				_focus: {
+					borderColor: { value: BRAND },
+					boxShadow: { value: `0 0 0 2px ${BRAND}` },
+				},
+			},
+			field: {
+				label: {
+					color: { value: CARD_FG },
+				},
+			},
+			tabs: {
+				borderColor: { value: BORDER },
+				item: {
+					color: { value: MUTED_FG },
+					backgroundColor: { value: "transparent" },
+					_active: {
+						color: { value: BRAND },
+						borderColor: { value: BRAND },
+						backgroundColor: { value: "transparent" },
+					},
+					_hover: {
+						color: { value: BRAND },
+					},
+					_focus: {
+						color: { value: BRAND },
+					},
+				},
+			},
+			heading: {
+				color: { value: CARD_FG },
+			},
+			text: {
+				color: { value: CARD_FG },
+			},
+		},
+	},
+});
+
+// Amplify's default placeholders are title-case ("Enter your Username"); the
+// design + app copy convention is lowercase (#883).
+const authFormFields = {
+	signIn: {
+		username: { placeholder: "Enter your username" },
+		password: { placeholder: "Enter your password" },
+	},
+	signUp: {
+		username: { placeholder: "Enter your username" },
+		password: { placeholder: "Enter your password" },
+		confirm_password: { placeholder: "Confirm your password" },
+	},
+};
+
+const LocalDevBanner = () => (
+	<Banner
+		tone="warning"
+		className="fixed top-0 left-0 right-0 z-50 h-7 sm:h-10 overflow-hidden border-x-0 border-t-0"
+	>
+		<span className="flex items-center gap-2">
+			<strong className="font-semibold shrink-0">Local dev</strong>
+			<span className="truncate hidden sm:inline">
+				— Cognito not configured. Set VITE_COGNITO_USER_POOL_ID and
+				VITE_COGNITO_CLIENT_ID in .env.local to enable sign-in.
+			</span>
+			<span className="truncate sm:hidden">— no Cognito; signed out</span>
+		</span>
+	</Banner>
+);
+
+const CognitoAuthFooter = () => (
+	<AuthFooter
+		note={authFooterNote({
+			betterAuthEnabled: false,
+			cognitoConfigured: isCognitoConfigured(),
+		})}
+	/>
+);
+
+const SignInGate = ({ children }: { children: ReactNode }) => {
+	const { authStatus } = useAuthenticator((ctx) => [ctx.authStatus]);
+
+	if (authStatus === "authenticated") {
+		return <>{children}</>;
+	}
+
+	// While Amplify hydrates a stored session, render the app-shell skeleton
+	// instead of flashing the sign-in form (or a blank screen) — most returning
+	// users resolve to `authenticated` and never see the form.
+	if (authStatus === "configuring") {
+		return <AppShellSkeleton />;
+	}
+
+	return (
+		<ThemeProvider theme={remitTheme}>
+			<AuthCard>
+				<AuthHero />
+				<Authenticator
+					hideSignUp={false}
+					formFields={authFormFields}
+					components={{ Footer: CognitoAuthFooter }}
+				/>
+			</AuthCard>
+		</ThemeProvider>
+	);
+};
+
+export const CognitoShell = ({ children }: CognitoShellProps) => {
+	if (!isCognitoConfigured()) {
+		// The dev banner is fixed at the top. Pad content below it AND shrink the
+		// inner `main` (hardcoded `h-dvh`) by the banner height — otherwise main's
+		// full 100dvh starts below the 40px padding and overflows, pushing pinned
+		// footers like the compose Send bar 40px below the fold (#788).
+		return (
+			<div className="pt-7 sm:pt-10 [&_#main-content]:h-[calc(100dvh-1.75rem)] sm:[&_#main-content]:h-[calc(100dvh-2.5rem)]">
+				<LocalDevBanner />
+				{children}
+			</div>
+		);
+	}
+
+	return (
+		<Authenticator.Provider>
+			<SignInGate>{children}</SignInGate>
+		</Authenticator.Provider>
+	);
+};

package/src/auth/cognito/cognito-token.test.ts

@@ -0,0 +1,110 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+
+type AmplifyAuthMocks = {
+	session: unknown;
+	fetchCalls: number;
+	fetchImpl: null | (() => unknown);
+};
+
+declare global {
+	// eslint-disable-next-line no-var
+	var __AMPLIFY_AUTH_MOCKS__: AmplifyAuthMocks | undefined;
+	// eslint-disable-next-line no-var
+	var __AMPLIFY_CONFIG_MOCKS__:
+		| { configured: boolean; configureCalls: number }
+		| undefined;
+}
+
+let cacheBust = 2000;
+
+const FAR_FUTURE_EXP = Math.floor(Date.now() / 1000) + 3600;
+
+const idToken = (value: string, exp: number = FAR_FUTURE_EXP) => ({
+	toString: () => value,
+	payload: { exp },
+});
+
+// `configured` drives `isCognitoConfigured` (the amplify-config stub reads it
+// fresh); the session itself comes from the `aws-amplify/auth` stub via
+// `__AMPLIFY_AUTH_MOCKS__`.
+const loadCognitoToken = async (
+	configured: boolean,
+	authMocks: Partial<AmplifyAuthMocks>,
+) => {
+	cacheBust += 1;
+	globalThis.__REMIT_CONFIG__ = {};
+	globalThis.__AMPLIFY_CONFIG_MOCKS__ = { configured, configureCalls: 0 };
+	globalThis.__AMPLIFY_AUTH_MOCKS__ = {
+		session: { tokens: {} },
+		fetchCalls: 0,
+		fetchImpl: null,
+		...authMocks,
+	};
+	return import(`./cognito-token.ts?v=${cacheBust}`);
+};
+
+describe("getCognitoToken", () => {
+	test("returns the Cognito id token when configured", async () => {
+		const mod = await loadCognitoToken(true, {
+			session: { tokens: { idToken: idToken("ID-TOKEN-123") } },
+		});
+		assert.equal(await mod.getCognitoToken(), "ID-TOKEN-123");
+	});
+
+	test("returns null when the session has no idToken", async () => {
+		const mod = await loadCognitoToken(true, { session: { tokens: {} } });
+		assert.equal(await mod.getCognitoToken(), null);
+	});
+
+	test("returns null when the tokens field is absent", async () => {
+		const mod = await loadCognitoToken(true, { session: {} });
+		assert.equal(await mod.getCognitoToken(), null);
+	});
+
+	test("returns null when cognito is not configured", async () => {
+		const mod = await loadCognitoToken(false, {
+			session: { tokens: { idToken: idToken("UNUSED") } },
+		});
+		assert.equal(await mod.getCognitoToken(), null);
+		assert.equal(globalThis.__AMPLIFY_AUTH_MOCKS__?.fetchCalls, 0);
+	});
+
+	test("propagates errors when fetchAuthSession rejects (let it crash)", async () => {
+		const mod = await loadCognitoToken(true, {
+			fetchImpl: () => {
+				throw new Error("session fetch failed");
+			},
+		});
+		await assert.rejects(() => mod.getCognitoToken(), /session fetch failed/);
+	});
+
+	test("reuses the cached token across calls without re-fetching the session", async () => {
+		const mod = await loadCognitoToken(true, {
+			session: { tokens: { idToken: idToken("CACHED") } },
+		});
+		assert.equal(await mod.getCognitoToken(), "CACHED");
+		assert.equal(await mod.getCognitoToken(), "CACHED");
+		assert.equal(globalThis.__AMPLIFY_AUTH_MOCKS__?.fetchCalls, 1);
+	});
+
+	test("re-fetches the session when the cached token is near expiry", async () => {
+		const almostExpired = Math.floor(Date.now() / 1000) + 5;
+		const mod = await loadCognitoToken(true, {
+			session: { tokens: { idToken: idToken("STALE", almostExpired) } },
+		});
+		await mod.getCognitoToken();
+		await mod.getCognitoToken();
+		assert.equal(globalThis.__AMPLIFY_AUTH_MOCKS__?.fetchCalls, 2);
+	});
+
+	test("resetCognitoTokenCache forces the next call to re-fetch the session", async () => {
+		const mod = await loadCognitoToken(true, {
+			session: { tokens: { idToken: idToken("CACHED") } },
+		});
+		await mod.getCognitoToken();
+		mod.resetCognitoTokenCache();
+		await mod.getCognitoToken();
+		assert.equal(globalThis.__AMPLIFY_AUTH_MOCKS__?.fetchCalls, 2);
+	});
+});

package/src/auth/cognito/cognito-token.ts

@@ -0,0 +1,47 @@
+import { fetchAuthSession } from "aws-amplify/auth";
+import { isCognitoConfigured } from "../amplify-config";
+
+const EXPIRY_SKEW_SECONDS = 60;
+
+interface CachedToken {
+	value: string;
+	expiresAt: number;
+}
+
+let cached: CachedToken | null = null;
+
+const nowSeconds = (): number => Math.floor(Date.now() / 1000);
+
+const isUsable = (token: CachedToken | null): token is CachedToken =>
+	token !== null && token.expiresAt - EXPIRY_SKEW_SECONDS > nowSeconds();
+
+const refreshCognitoToken = async (): Promise<string | null> => {
+	const session = await fetchAuthSession();
+	const idToken = session.tokens?.idToken;
+	if (!idToken) {
+		cached = null;
+		return null;
+	}
+	cached = {
+		value: idToken.toString(),
+		expiresAt: idToken.payload.exp ?? nowSeconds() + EXPIRY_SKEW_SECONDS,
+	};
+	return cached.value;
+};
+
+/**
+ * The Cognito bearer token: the Amplify session's ID token, cached until it
+ * nears expiry. Returns `null` when Cognito is not configured (local dev), so
+ * the request simply carries no token. This is the `getToken` behind the
+ * Cognito auth provider — the `aws-amplify/auth` dependency lives here, never in
+ * the shell or a screen.
+ */
+export const getCognitoToken = async (): Promise<string | null> => {
+	if (!isCognitoConfigured()) return null;
+	if (isUsable(cached)) return cached.value;
+	return refreshCognitoToken();
+};
+
+export const resetCognitoTokenCache = (): void => {
+	cached = null;
+};

package/src/auth/cognito/cognito.css

@@ -0,0 +1,21 @@
+/* Amplify ships an unlayered reset (`button, input { font-size: inherit }`)
+   that, being unlayered, outranks every Tailwind utility on form elements —
+   so text-sm/text-2xs on sidebar header buttons were ignored and inherited
+   the 16px body size. Importing it into the `amplify` cascade layer, declared
+   here before Tailwind, lets Tailwind's utilities win. Must be imported as
+   CSS (not via a JS `import "...styles.css"`, which lands unlayered).
+
+   This sheet ships ONLY in a build that composes the Cognito shell. A build
+   that omits Cognito never imports it, so the Amplify reset and the
+   Authenticator overrides below stay out of that bundle entirely. */
+@layer amplify;
+@import "@aws-amplify/ui-react/styles.css" layer(amplify);
+
+/* ------------------------------------------------------------------ */
+/* Auth page                                                          */
+/* The page frame (radial-gradient bg, centring, card max-width) lives */
+/* in the remit-ui <AuthCard> component. Amplify structural overrides  */
+/* below are unlayered so they beat both @layer amplify and Tailwind   */
+/* preflight; scoped to [data-auth-page] so nothing else is affected.  */
+/* ------------------------------------------------------------------ */
+@import "../auth.css";

package/src/auth/cognito-provider.tsx

@@ -0,0 +1,22 @@
+import { configureAmplify } from "./amplify-config";
+import { CognitoAccount } from "./cognito/CognitoAccount";
+import { CognitoShell } from "./cognito/CognitoShell";
+import {
+	getCognitoToken,
+	resetCognitoTokenCache,
+} from "./cognito/cognito-token";
+import type { AuthProvider } from "./provider";
+
+/**
+ * Cognito (AWS Amplify) identity. Importing this module is what pulls Amplify
+ * into a build — a distributor that composes a different provider never
+ * references it, so `aws-amplify` and `@aws-amplify/ui-react` stay out of that
+ * bundle.
+ */
+export const cognitoAuthProvider: AuthProvider = {
+	configure: configureAmplify,
+	getToken: getCognitoToken,
+	resetToken: resetCognitoTokenCache,
+	Shell: CognitoShell,
+	Account: CognitoAccount,
+};

package/src/auth/combined-provider.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { configureAmplify } from "./amplify-config";
+import { isBetterAuthEnabled } from "./better-auth-config";
+import { betterAuthProvider } from "./better-auth-provider";
+import { cognitoAuthProvider } from "./cognito-provider";
+import type { AuthAccountProps, AuthProvider } from "./provider";
+
+/**
+ * Both identity systems in one build, selected at runtime by
+ * `betterAuthEnabled`. This is the default composition and what
+ * `@remit/web-client-dist` ships — one artifact that serves a Cognito or a
+ * better-auth deployment depending on `config.js`. A distributor that wants a
+ * single provider composes `cognitoAuthProvider` or `betterAuthProvider`
+ * directly and omits the other.
+ */
+const CombinedShell = ({ children }: { children: ReactNode }) =>
+	isBetterAuthEnabled() ? (
+		<betterAuthProvider.Shell>{children}</betterAuthProvider.Shell>
+	) : (
+		<cognitoAuthProvider.Shell>{children}</cognitoAuthProvider.Shell>
+	);
+
+const CombinedAccount = (props: AuthAccountProps) =>
+	isBetterAuthEnabled() ? (
+		<betterAuthProvider.Account {...props} />
+	) : (
+		<cognitoAuthProvider.Account {...props} />
+	);
+
+export const combinedAuthProvider: AuthProvider = {
+	configure: configureAmplify,
+	getToken: () =>
+		isBetterAuthEnabled()
+			? betterAuthProvider.getToken()
+			: cognitoAuthProvider.getToken(),
+	resetToken: () => {
+		betterAuthProvider.resetToken();
+		cognitoAuthProvider.resetToken();
+	},
+	Shell: CombinedShell,
+	Account: CombinedAccount,
+};

package/src/auth/composition.test.ts

@@ -0,0 +1,136 @@
+import assert from "node:assert/strict";
+import { dirname, join } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+
+/**
+ * Proves the auth shell is a composition choice, not a runtime toggle inside
+ * one bundle: a build that composes the better-auth provider contains no
+ * Amplify/Cognito code, and one that composes the Cognito provider does. The
+ * app shell and screens are walked from the real entry each time, so this fails
+ * the moment any surface reaches back to a specific identity SDK.
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const srcDir = join(here, "..");
+const packageDir = join(srcDir, "..");
+
+interface Variant {
+	specifier: string;
+	name: string;
+}
+
+const VARIANTS: Record<"betterAuth" | "cognito", Variant> = {
+	betterAuth: {
+		specifier: "@/auth/better-auth-provider",
+		name: "betterAuthProvider",
+	},
+	cognito: {
+		specifier: "@/auth/cognito-provider",
+		name: "cognitoAuthProvider",
+	},
+};
+
+interface Graph {
+	inputs: string[];
+	importPaths: string[];
+}
+
+// Externalize third-party packages, but bundle in-repo `@remit/*` workspace
+// source so the walk matches what the real vite build includes. A shared
+// primitive (e.g. `@remit/ui`) that pulled in Amplify would then surface in this
+// graph and fail the test, rather than hiding behind an external edge.
+const externalizeThirdParty = {
+	name: "externalize-third-party",
+	setup(build: import("esbuild").PluginBuild) {
+		build.onResolve({ filter: /.*/ }, (args) => {
+			const path = args.path;
+			if (path.startsWith(".") || path.startsWith("/")) return null;
+			if (path === "@" || path.startsWith("@/")) return null;
+			if (path.startsWith("@remit/")) return null;
+			return { path, external: true };
+		});
+	},
+};
+
+const bundleGraph = async (variant: Variant): Promise<Graph> => {
+	const entry = [
+		'import { mountApp } from "@/shell";',
+		`import { ${variant.name} } from "${variant.specifier}";`,
+		`mountApp({ authProvider: ${variant.name} });`,
+		"",
+	].join("\n");
+
+	const result = await build({
+		stdin: {
+			contents: entry,
+			resolveDir: packageDir,
+			loader: "tsx",
+			sourcefile: "compose-entry.tsx",
+		},
+		bundle: true,
+		write: false,
+		metafile: true,
+		logLevel: "silent",
+		format: "esm",
+		platform: "browser",
+		jsx: "automatic",
+		jsxImportSource: "react",
+		plugins: [externalizeThirdParty],
+		loader: { ".css": "empty", ".png": "empty", ".svg": "empty" },
+		absWorkingDir: packageDir,
+		alias: { "@": srcDir },
+	});
+
+	const inputs = Object.keys(result.metafile.inputs);
+	const importPaths = new Set<string>();
+	for (const input of Object.values(result.metafile.inputs)) {
+		for (const imported of input.imports) importPaths.add(imported.path);
+	}
+	return { inputs, importPaths: [...importPaths] };
+};
+
+const mentionsAmplify = ({ inputs, importPaths }: Graph): boolean =>
+	[...inputs, ...importPaths].some((path) => /aws-amplify/.test(path));
+
+const composesCognitoShell = ({ inputs }: Graph): boolean =>
+	inputs.some(
+		(path) =>
+			path.includes("auth/cognito/") || path.includes("cognito-provider"),
+	);
+
+describe("web-client composition", () => {
+	it("omits every Amplify/Cognito module when composing the better-auth provider", async () => {
+		const graph = await bundleGraph(VARIANTS.betterAuth);
+
+		assert.ok(
+			graph.inputs.some((path) => path.includes("shell/index")),
+			"the app shell should be walked from the entry",
+		);
+		assert.equal(
+			mentionsAmplify(graph),
+			false,
+			"a better-auth build must not reference aws-amplify anywhere in its graph",
+		);
+		assert.equal(
+			composesCognitoShell(graph),
+			false,
+			"a better-auth build must not pull the Cognito shell",
+		);
+	});
+
+	it("includes the Amplify/Cognito modules when composing the cognito provider", async () => {
+		const graph = await bundleGraph(VARIANTS.cognito);
+
+		assert.equal(
+			mentionsAmplify(graph),
+			true,
+			"a cognito build must reference aws-amplify",
+		);
+		assert.equal(
+			composesCognitoShell(graph),
+			true,
+			"a cognito build must pull the Cognito shell",
+		);
+	});
+});