Add multi-tenancy support for WebAuthn authentication

src/App.jsx

@@ -8,6 +8,7 @@ import Spinner from './components/Shared/Spinner';
 
 import UpdateNotification from './components/Notifications/UpdateNotification';
 import CredentialDetails from './pages/Home/CredentialDetails';
+import { TenantProvider } from './lib/TenantContext';
 
 const lazyWithDelay = (importFunction, delay = 1000) => {
 	return React.lazy(() =>
@@ -36,6 +37,47 @@ const Login = lazyWithDelay(() => import('./pages/Login/Login'), 400);
 const LoginState = lazyWithDelay(() => import('./pages/Login/LoginState'), 400);
 const NotFound = lazyWithDelay(() => import('./pages/NotFound/NotFound'), 400);
 
+/**
+ * Protected routes layout - wraps authenticated content with Layout and transitions.
+ * Used for both global routes (/) and tenant-scoped routes (/:tenantId/).
+ */
+const ProtectedLayout = () => {
+	const location = useLocation();
+	return (
+		<PrivateRoute>
+			<Layout>
+				<Suspense fallback={<Spinner size='small' />}>
+					<FadeInContentTransition appear reanimateKey={location.pathname}>
+						<NotificationOfflineWarning />
+						<Outlet />
+					</FadeInContentTransition>
+				</Suspense>
+			</Layout>
+		</PrivateRoute>
+	);
+};
+
+/**
+ * Routes that require authentication.
+ * These are the same for both global and tenant-scoped contexts.
+ */
+const AuthenticatedRoutes = () => (
+	<>
+		<Route path="settings" element={<Settings />} />
+		<Route index element={<Home />} />
+		<Route path="credential/:batchId" element={<Credential />} />
+		<Route path="credential/:batchId/history" element={<CredentialHistory />} />
+		<Route path="credential/:batchId/details" element={<CredentialDetails />} />
+		<Route path="history" element={<History />} />
+		<Route path="pending" element={<Pending />} />
+		<Route path="history/:transactionId" element={<HistoryDetail />} />
+		<Route path="add" element={<AddCredentials />} />
+		<Route path="send" element={<SendCredentials />} />
+		<Route path="verification/result" element={<VerificationResult />} />
+		<Route path="cb/*" element={<Home />} />
+	</>
+);
+
 function App() {
 	const location = useLocation();
 	return (
@@ -44,18 +86,36 @@ function App() {
 			<Suspense fallback={<Spinner />}>
 				<UpdateNotification />
 				<Routes>
-					<Route element={
-						<PrivateRoute>
-							<Layout>
-								<Suspense fallback={<Spinner size='small' />}>
-									<FadeInContentTransition appear reanimateKey={location.pathname}>
-										<NotificationOfflineWarning />
-										<Outlet />
-									</FadeInContentTransition>
-								</Suspense>
-							</Layout>
-						</PrivateRoute>
-					}>
+					{/*
+					 * Tenant-scoped routes (/:tenantId/*)
+					 * These routes extract the tenant ID from the URL path and provide it
+					 * via TenantContext. Used for multi-tenant deployments where users
+					 * access the wallet via tenant-specific URLs like /acme-corp/login.
+					 */}
+					<Route path="/:tenantId/*" element={<TenantProvider><Outlet /></TenantProvider>}>
+						{/* Tenant-scoped protected routes */}
+						<Route element={<ProtectedLayout />}>
+							{AuthenticatedRoutes()}
+						</Route>
+						{/* Tenant-scoped public routes */}
+						<Route element={
+							<FadeInContentTransition reanimateKey={location.pathname}>
+								<Outlet />
+							</FadeInContentTransition>
+						}>
+							<Route path="login" element={<Login />} />
+							<Route path="login-state" element={<LoginState />} />
+						</Route>
+					</Route>
+
+					{/*
+					 * Global routes (no tenant prefix)
+					 * These routes are used for:
+					 * 1. Single-tenant deployments (backward compatible)
+					 * 2. Global login page where tenant is discovered from passkey
+					 * 3. Returning users who already have passkeys
+					 */}
+					<Route element={<ProtectedLayout />}>
 						<Route path="/settings" element={<Settings />} />
 						<Route path="/" element={<Home />} />
 						<Route path="/credential/:batchId" element={<Credential />} />

src/api/index.ts

@@ -12,6 +12,7 @@ import { UseStorageHandle, useClearStorages, useLocalStorage, useSessionStorage
 import { addItem, getItem, EXCLUDED_INDEXEDDB_PATHS } from '../indexedDB';
 import { loginWebAuthnBeginOffline } from './LocalAuthentication';
 import { withAuthenticatorAttachmentFromHints, withHintsFromAllowCredentials } from '@/util-webauthn';
+import { getStoredTenant, setStoredTenant, clearStoredTenant, buildTenantApiPath } from '../lib/tenant';
 
 const walletBackendUrl = config.BACKEND_URL;
 
@@ -73,6 +74,7 @@ export interface BackendApi {
 		promptForPrfRetry: () => Promise<boolean | AbortSignal>,
 		webauthnHints: string[],
 		retryFrom?: SignupWebauthnRetryParams,
+		tenantId?: string,
 	): Promise<Result<void, SignupWebauthnError>>,
 	updatePrivateData(newPrivateData: EncryptedContainer): Promise<void>,
 	updatePrivateDataEtag(resp: AxiosResponse): AxiosResponse,
@@ -94,6 +96,11 @@ export interface BackendApi {
 		| 'passkeyLoginFailedServerError'
 		| 'x-private-data-etag'
 	>>;
+
+	/** Get the current tenant ID (from session storage) */
+	getTenantId(): string | undefined,
+	/** Set the current tenant ID (stored in session storage) */
+	setTenantId(tenantId: string): void,
 }
 
 export function useApi(isOnlineProp: boolean = true): BackendApi {
@@ -339,6 +346,7 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 	const clearSession = useCallback((): void => {
 		clearSessionStorage();
 		removePrivateDataEtag();
+		clearStoredTenant(); // Clear tenant on logout
 		events.dispatchEvent(new CustomEvent<ClearSessionEvent>(CLEAR_SESSION_EVENT));
 	}, [clearSessionStorage, removePrivateDataEtag]);
 
@@ -629,6 +637,13 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 								return Err('loginKeystoreFailed');
 							}
 						}
+
+						// Store the tenant from the login response
+						// The backend discovers tenant from the passkey's userHandle
+						if (finishResp?.data?.tenantId) {
+							setStoredTenant(finishResp.data.tenantId);
+						}
+
 						await setSession(finishResp, credential, 'login');
 						return Ok.EMPTY;
 					} catch (e) {
@@ -654,10 +669,21 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 		keystore: LocalStorageKeystore,
 		promptForPrfRetry: () => Promise<boolean | AbortSignal>,
 		webauthnHints: string[],
-		retryFrom?: SignupWebauthnRetryParams
+		retryFrom?: SignupWebauthnRetryParams,
+		tenantId?: string
 	): Promise<Result<void, SignupWebauthnError>> => {
+		// Use tenant-scoped registration endpoints if a tenant ID is provided
+		// This ensures the passkey's userHandle encodes the tenant for proper isolation
+		const storedTenant = tenantId || getStoredTenant();
+		const registerBeginPath = storedTenant
+			? buildTenantApiPath(storedTenant, '/user/register-webauthn-begin')
+			: '/user/register-webauthn-begin';
+		const registerFinishPath = storedTenant
+			? buildTenantApiPath(storedTenant, '/user/register-webauthn-finish')
+			: '/user/register-webauthn-finish';
+
 		try {
-			const beginData = retryFrom?.beginData || (await post('/user/register-webauthn-begin', {})).data;
+			const beginData = retryFrom?.beginData || (await post(registerBeginPath, {})).data;
 			console.log("begin", beginData);
 
 			try {
@@ -694,7 +720,7 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 					);
 
 					try {
-						const finishResp = updatePrivateDataEtag(await post('/user/register-webauthn-finish', {
+						const finishResp = updatePrivateDataEtag(await post(registerFinishPath, {
 							challengeId: beginData.challengeId,
 							displayName: name,
 							privateData: serializePrivateData(privateData),
@@ -711,6 +737,13 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 								clientExtensionResults: credential.getClientExtensionResults(),
 							},
 						}));
+
+						// Store the tenant from the response if available
+						// (tenant-scoped registration returns tenantId)
+						if (finishResp?.data?.tenantId) {
+							setStoredTenant(finishResp.data.tenantId);
+						}
+
 						await setSession(finishResp, credential, 'signup');
 						return Ok.EMPTY;
 
@@ -790,6 +823,10 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 		removeEventListener,
 
 		syncPrivateData,
+
+		// Tenant utilities
+		getTenantId: getStoredTenant,
+		setTenantId: setStoredTenant,
 	}), [
 		del,
 		get,

src/lib/TenantContext.tsx

@@ -0,0 +1,127 @@
+/**
+ * TenantContext - React context for multi-tenancy support.
+ *
+ * The tenant ID can come from multiple sources (in order of precedence):
+ * 1. URL path parameter (/:tenantId/*) - for path-based routing
+ * 2. Explicitly passed tenantId prop - for components that know the tenant
+ * 3. SessionStorage - cached from previous login/registration
+ *
+ * Usage:
+ *   // In App.tsx, wrap tenant-scoped routes:
+ *   <Route path="/:tenantId/*" element={<TenantProvider><TenantRoutes /></TenantProvider>} />
+ *
+ *   // In components:
+ *   const { tenantId } = useTenant();
+ *   api.signupWebauthn(name, keystore, ..., tenantId);
+ *
+ * See go-wallet-backend/docs/adr/011-multi-tenancy.md for full design.
+ */
+
+import React, { createContext, useContext, useEffect, useMemo, ReactNode } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { getStoredTenant, setStoredTenant, clearStoredTenant } from './tenant';
+
+export interface TenantContextValue {
+	/** Current tenant ID (from URL, prop, or storage) */
+	tenantId: string | undefined;
+	/** Whether we're in a tenant-scoped context */
+	isMultiTenant: boolean;
+	/** Switch to a different tenant (navigates to new tenant's home) */
+	switchTenant: (newTenantId: string) => void;
+	/** Clear tenant context (on logout) */
+	clearTenant: () => void;
+}
+
+const TenantContext = createContext<TenantContextValue | null>(null);
+
+interface TenantProviderProps {
+	children: ReactNode;
+	/** Optional explicit tenant ID (overrides URL parsing) */
+	tenantId?: string;
+}
+
+/**
+ * TenantProvider extracts tenant from URL path and provides it to children.
+ *
+ * For path-based routing, the URL structure is:
+ *   /{tenantId}/settings
+ *   /{tenantId}/add
+ *   /{tenantId}/cb?code=...
+ *
+ * The provider:
+ * 1. Reads tenantId from URL params (useParams)
+ * 2. Falls back to sessionStorage if not in URL
+ * 3. Stores tenant in sessionStorage when found in URL
+ */
+export function TenantProvider({ children, tenantId: propTenantId }: TenantProviderProps) {
+	const navigate = useNavigate();
+
+	// Get tenant from URL path parameter
+	// This requires the route to be defined as /:tenantId/*
+	const { tenantId: urlTenantId } = useParams<{ tenantId: string }>();
+
+	// Determine effective tenant ID (prop > URL > storage)
+	const effectiveTenantId = propTenantId || urlTenantId || getStoredTenant();
+
+	// Sync URL tenant to storage when available
+	useEffect(() => {
+		if (urlTenantId) {
+			setStoredTenant(urlTenantId);
+		}
+	}, [urlTenantId]);
+
+	const switchTenant = (newTenantId: string) => {
+		setStoredTenant(newTenantId);
+		navigate(`/${newTenantId}/`);
+	};
+
+	const clearTenant = () => {
+		clearStoredTenant();
+	};
+
+	const value = useMemo<TenantContextValue>(() => ({
+		tenantId: effectiveTenantId,
+		isMultiTenant: !!effectiveTenantId,
+		switchTenant,
+		clearTenant,
+	}), [effectiveTenantId]);
+
+	return (
+		<TenantContext.Provider value={value}>
+			{children}
+		</TenantContext.Provider>
+	);
+}
+
+/**
+ * Hook to access tenant context.
+ * Must be used within a TenantProvider.
+ */
+export function useTenant(): TenantContextValue {
+	const context = useContext(TenantContext);
+	if (!context) {
+		// Return a default context for components outside TenantProvider
+		// This allows the app to work in single-tenant mode
+		return {
+			tenantId: getStoredTenant(),
+			isMultiTenant: false,
+			switchTenant: () => {
+				console.warn('switchTenant called outside TenantProvider');
+			},
+			clearTenant: clearStoredTenant,
+		};
+	}
+	return context;
+}
+
+/**
+ * Hook to get tenant ID, throwing if not available.
+ * Use this when tenant is required (e.g., in tenant-scoped routes).
+ */
+export function useRequiredTenant(): string {
+	const { tenantId } = useTenant();
+	if (!tenantId) {
+		throw new Error('Tenant ID is required but not available. Ensure this component is within a tenant-scoped route.');
+	}
+	return tenantId;
+}