@maxal_studio/kratosjs-react 1.0.0

package/src/auth/AuthContext.tsx

@@ -0,0 +1,188 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { AuthUser, LoginCredentials, PendingChallenge } from './types';
+import { AuthApiClient } from './authApiClient';
+
+interface AuthContextValue {
+	user: AuthUser | null;
+	loading: boolean;
+	/** A challenge (e.g. 2FA) awaiting the user's response, or null. */
+	pendingChallenge: PendingChallenge | null;
+	login: (provider: string, credentials: LoginCredentials) => Promise<void>;
+	/** Submit a response to the active `pendingChallenge`. */
+	verifyChallenge: (payload: unknown) => Promise<void>;
+	/** Abandon the active challenge and return to the login form. */
+	cancelChallenge: () => void;
+	logout: () => Promise<void>;
+	refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+interface AuthProviderProps {
+	children: React.ReactNode;
+	apiBaseUrl: string;
+}
+
+export function AuthProvider({ children, apiBaseUrl }: AuthProviderProps) {
+	const [user, setUser] = useState<AuthUser | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [pendingChallenge, setPendingChallenge] = useState<PendingChallenge | null>(null);
+	const apiClient = useRef(new AuthApiClient(apiBaseUrl));
+	const refreshTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+	const scheduleTokenRefresh = useCallback((expiresIn: number) => {
+		if (refreshTimerRef.current) {
+			clearTimeout(refreshTimerRef.current);
+		}
+
+		// Refresh 1 minute before expiry, minimum 1 minute
+		const refreshTime = Math.max((expiresIn - 60) * 1000, 60000);
+
+		refreshTimerRef.current = setTimeout(async () => {
+			try {
+				const tokens = await apiClient.current.refreshToken();
+				if (tokens?.expiresIn) {
+					scheduleTokenRefresh(tokens.expiresIn);
+				} else {
+					setUser(null);
+				}
+			} catch {
+				setUser(null);
+			}
+		}, refreshTime);
+	}, []);
+
+	/**
+	 * Fetch the current user from /auth/me.
+	 * On 401, attempts a silent token refresh via the cookie before giving up.
+	 * Seeds the proactive refresh timer when a refresh response includes expiresIn.
+	 */
+	const fetchUser = useCallback(async () => {
+		try {
+			const currentUser = await apiClient.current.getCurrentUser();
+			setUser(currentUser);
+			return currentUser;
+		} catch (error: any) {
+			if (error?.status === 401) {
+				try {
+					const tokens = await apiClient.current.refreshToken();
+					if (tokens) {
+						if (tokens.expiresIn) scheduleTokenRefresh(tokens.expiresIn);
+						const currentUser = await apiClient.current.getCurrentUser();
+						setUser(currentUser);
+						return currentUser;
+					}
+				} catch {
+					// refresh failed — fall through to null
+				}
+			}
+			setUser(null);
+			return null;
+		}
+	}, [scheduleTokenRefresh]);
+
+	/** Apply an `authenticated` result: set the user and seed the refresh timer. */
+	const applyAuthenticated = useCallback(
+		(authUser: AuthUser, expiresIn?: number) => {
+			setPendingChallenge(null);
+			setUser(authUser);
+			if (expiresIn) {
+				scheduleTokenRefresh(expiresIn);
+			}
+		},
+		[scheduleTokenRefresh],
+	);
+
+	const login = useCallback(
+		async (provider: string, credentials: LoginCredentials) => {
+			const result = await apiClient.current.login(provider, credentials);
+			if (result.status === 'authenticated') {
+				applyAuthenticated(result.user, result.tokens?.expiresIn);
+			} else {
+				// Pause here: a challenge (e.g. 2FA) must be satisfied before tokens are issued.
+				setPendingChallenge(result.challenge);
+			}
+		},
+		[applyAuthenticated],
+	);
+
+	const verifyChallenge = useCallback(
+		async (payload: unknown) => {
+			if (!pendingChallenge) {
+				throw new Error('No challenge in progress');
+			}
+			const result = await apiClient.current.verifyChallenge(
+				pendingChallenge.challengeToken,
+				pendingChallenge.type,
+				payload,
+			);
+			if (result.status === 'authenticated') {
+				applyAuthenticated(result.user, result.tokens?.expiresIn);
+			} else {
+				// Chained step: replace with the next pending challenge.
+				setPendingChallenge(result.challenge);
+			}
+		},
+		[pendingChallenge, applyAuthenticated],
+	);
+
+	const cancelChallenge = useCallback(() => {
+		setPendingChallenge(null);
+	}, []);
+
+	const logout = useCallback(async () => {
+		try {
+			await apiClient.current.logout();
+		} catch {
+			// ignore
+		} finally {
+			setUser(null);
+			setPendingChallenge(null);
+			if (refreshTimerRef.current) {
+				clearTimeout(refreshTimerRef.current);
+				refreshTimerRef.current = null;
+			}
+		}
+	}, []);
+
+	const refreshUser = useCallback(async () => {
+		await fetchUser();
+	}, [fetchUser]);
+
+	useEffect(() => {
+		const init = async () => {
+			setLoading(true);
+			await fetchUser();
+			setLoading(false);
+		};
+
+		init();
+
+		return () => {
+			if (refreshTimerRef.current) {
+				clearTimeout(refreshTimerRef.current);
+			}
+		};
+	}, [fetchUser]);
+
+	const value: AuthContextValue = {
+		user,
+		loading,
+		pendingChallenge,
+		login,
+		verifyChallenge,
+		cancelChallenge,
+		logout,
+		refreshUser,
+	};
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+	const context = useContext(AuthContext);
+	if (!context) {
+		throw new Error('useAuth must be used within an AuthProvider');
+	}
+	return context;
+}

package/src/auth/LoginPage.tsx

@@ -0,0 +1,380 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { AuthProvider, LoginCredentials, PendingChallenge } from './types';
+import { AuthApiClient } from './authApiClient';
+import { useAuth } from './AuthContext';
+import { useAuthChallengeRegistry } from '../contexts/AuthChallengeRegistryContext';
+import { Icon } from '../components/utils/Icon';
+import { cn } from '../utils/classNames';
+import { Button, IconButton, Input, Label, ErrorAlert, Spinner } from '../components/ui';
+import { PanelBrandMark } from '../components/layout/PanelBrandMark';
+import { Moon, Sun, ArrowLeft } from 'lucide-react';
+import { useTranslation } from '../i18n/useTranslation';
+import { LocaleSwitcher } from '../i18n/LocaleSwitcher';
+import { Slot } from '../slots/Slot';
+import { translate } from '../i18n/activeLocale';
+
+interface PanelBranding {
+	title?: string;
+	icon?: string;
+	favicon?: string;
+}
+
+interface LoginPageProps {
+	apiBaseUrl: string;
+	onSuccess?: () => void;
+}
+
+function useDarkMode() {
+	const [darkMode, setDarkMode] = useState(() => {
+		const stored = localStorage.getItem('darkMode');
+		if (stored !== null) {
+			return stored === 'true';
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches;
+	});
+
+	useEffect(() => {
+		document.documentElement.classList.toggle('dark', darkMode);
+		localStorage.setItem('darkMode', String(darkMode));
+	}, [darkMode]);
+
+	return [darkMode, setDarkMode] as const;
+}
+
+/** Returns the i18n key for the login subtitle (translated at the call site). */
+function getSubtitleKey(providers: AuthProvider[], selectedProvider: AuthProvider | null): string {
+	if (providers.length > 1 && !selectedProvider) {
+		return 'core:auth.choose_provider';
+	}
+
+	const provider = selectedProvider ?? providers[0];
+	if (provider?.type === 'oauth') {
+		return 'core:auth.continue';
+	}
+
+	return 'core:auth.enter_credentials';
+}
+
+interface ProviderButtonProps {
+	provider: AuthProvider;
+	onSelect: (provider: AuthProvider) => void;
+}
+
+function ProviderButton({ provider, onSelect }: ProviderButtonProps) {
+	const hasCustomStyle = Boolean(provider.buttonStyle?.backgroundColor);
+
+	return (
+		<Button
+			type="button"
+			variant={hasCustomStyle ? 'primary' : 'secondary'}
+			className={cn('w-full h-11', hasCustomStyle && 'border-transparent')}
+			style={
+				hasCustomStyle
+					? {
+							backgroundColor: provider.buttonStyle!.backgroundColor,
+							color: provider.buttonStyle!.textColor || '#ffffff',
+							borderColor: provider.buttonStyle!.borderColor || provider.buttonStyle!.backgroundColor,
+						}
+					: undefined
+			}
+			icon={
+				provider.icon ? (
+					<Icon name={provider.icon as any} className={cn('h-4 w-4', !hasCustomStyle && 'text-fg')} />
+				) : undefined
+			}
+			onClick={() => onSelect(provider)}>
+			{provider.label}
+		</Button>
+	);
+}
+
+/**
+ * Renders the active login challenge (e.g. 2FA) using the plugin-registered component for
+ * its `type`. Owns the per-attempt submitting/error state and wires the challenge UI to
+ * `verifyChallenge` / `cancelChallenge` from the auth context.
+ */
+function ChallengeStep({ challenge }: { challenge: PendingChallenge }) {
+	const { t } = useTranslation();
+	const { verifyChallenge, cancelChallenge } = useAuth();
+	const registry = useAuthChallengeRegistry();
+	const ChallengeComponent = registry[challenge.type];
+	const [error, setError] = useState<string | null>(null);
+	const [submitting, setSubmitting] = useState(false);
+
+	if (!ChallengeComponent) {
+		return (
+			<div className="space-y-4">
+				<ErrorAlert message={`No UI is registered for challenge type "${challenge.type}".`} />
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					className="-ml-2 h-8 px-2 text-fg-secondary"
+					icon={<ArrowLeft className="h-4 w-4" />}
+					onClick={cancelChallenge}>
+					{t('core:auth.back_to_signin')}
+				</Button>
+			</div>
+		);
+	}
+
+	const handleSubmit = async (payload: unknown) => {
+		setSubmitting(true);
+		setError(null);
+		try {
+			await verifyChallenge(payload);
+		} catch (err: any) {
+			setError(err.message || t('core:auth.verification_failed'));
+		} finally {
+			setSubmitting(false);
+		}
+	};
+
+	return (
+		<ChallengeComponent
+			data={challenge.data}
+			onSubmit={handleSubmit}
+			onCancel={cancelChallenge}
+			error={error}
+			submitting={submitting}
+		/>
+	);
+}
+
+/**
+ * LoginPage - Displays authentication providers and handles login
+ */
+export function LoginPage({ apiBaseUrl, onSuccess }: LoginPageProps) {
+	const { t } = useTranslation();
+	const { login, pendingChallenge } = useAuth();
+	const [providers, setProviders] = useState<AuthProvider[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [selectedProvider, setSelectedProvider] = useState<AuthProvider | null>(null);
+	const [credentials, setCredentials] = useState<LoginCredentials>({ email: '', password: '' });
+	const [submitting, setSubmitting] = useState(false);
+	const [panelBranding, setPanelBranding] = useState<PanelBranding>({});
+	const [darkMode, setDarkMode] = useDarkMode();
+
+	const apiClient = useMemo(() => new AuthApiClient(apiBaseUrl), [apiBaseUrl]);
+
+	const showProviderPicker = providers.length > 1 && !selectedProvider;
+	const activeProvider = selectedProvider ?? (providers.length === 1 ? providers[0] : null);
+	const showCredentialsForm = activeProvider?.type === 'credentials';
+	const showOAuthPrompt = activeProvider?.type === 'oauth' && !showProviderPicker;
+	const showBackLink = providers.length > 1 && selectedProvider?.type === 'credentials';
+
+	const subtitle = useMemo(() => t(getSubtitleKey(providers, selectedProvider)), [providers, selectedProvider, t]);
+
+	// Load panel branding for the login screen (meta endpoint allows unauthenticated access)
+	useEffect(() => {
+		const fetchBranding = async () => {
+			try {
+				const response = await fetch(`${apiBaseUrl}/meta`);
+				if (!response.ok) return;
+				const meta = await response.json();
+				setPanelBranding({
+					title: meta.title,
+					icon: meta.icon,
+					favicon: meta.favicon,
+				});
+			} catch {
+				// Branding is optional — fall back to defaults
+			}
+		};
+
+		fetchBranding();
+	}, [apiBaseUrl]);
+
+	// Fetch available providers
+	useEffect(() => {
+		const fetchProviders = async () => {
+			try {
+				const providerList = await apiClient.getProviders();
+				setProviders(providerList);
+				if (providerList.length === 1) {
+					setSelectedProvider(providerList[0]);
+				}
+			} catch (err: any) {
+				setError(err.message || t('core:auth.providers_load_failed'));
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchProviders();
+	}, [apiClient]);
+
+	const handleProviderSelect = (provider: AuthProvider) => {
+		if (provider.type === 'oauth') {
+			const redirectUri = encodeURIComponent(window.location.origin + window.location.pathname);
+			const authUrl = `${apiBaseUrl}/auth/oauth/${provider.name}?redirect_uri=${redirectUri}`;
+			window.location.href = authUrl;
+			return;
+		}
+
+		setSelectedProvider(provider);
+		setError(null);
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!activeProvider) return;
+
+		setSubmitting(true);
+		setError(null);
+
+		try {
+			await login(activeProvider.name, credentials);
+			onSuccess?.();
+		} catch (err: any) {
+			setError(err.message || t('core:auth.login_failed'));
+		} finally {
+			setSubmitting(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className="flex min-h-screen items-center justify-center bg-base px-6">
+				<div className="text-center">
+					<Spinner size="lg" className="mx-auto text-accent" />
+					<p className="mt-4 text-sm text-fg-secondary">{translate('core:auth.preparing')}</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="relative flex min-h-screen items-center justify-center bg-base px-6 py-12">
+			<div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+				<div className="absolute -top-32 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-accent-soft/50 blur-3xl" />
+				<div className="absolute bottom-0 right-0 h-72 w-72 translate-x-1/4 translate-y-1/4 rounded-full bg-accent-soft/25 blur-3xl" />
+			</div>
+
+			<IconButton
+				variant="secondary"
+				size="sm"
+				aria-label={darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark')}
+				title={darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark')}
+				onClick={() => setDarkMode(!darkMode)}
+				className="absolute right-4 top-4 z-10 sm:right-6 sm:top-6">
+				{darkMode ? <Sun className="h-4 w-4 text-warning" /> : <Moon className="h-4 w-4" />}
+			</IconButton>
+
+			<div className="relative w-full max-w-[420px]">
+				<header className="mb-8 text-center">
+					<div className="mx-auto mb-5 flex justify-center">
+						<PanelBrandMark icon={panelBranding.icon} favicon={panelBranding.favicon} size="lg" />
+					</div>
+					<h1 className="text-2xl font-semibold tracking-tight text-fg">
+						{pendingChallenge
+							? t('core:auth.verify_identity')
+							: panelBranding.title
+								? t('core:auth.sign_in_to', { title: panelBranding.title })
+								: t('core:auth.welcome_back')}
+					</h1>
+					<p className="mt-2 text-sm text-fg-secondary">
+						{pendingChallenge ? 'Complete the additional step to finish signing in' : subtitle}
+					</p>
+				</header>
+
+				<Slot name="login.top" as="div" className="mb-6 space-y-4 empty:hidden" />
+
+				<div className="rounded-xl border border-border bg-surface p-6 shadow-soft sm:p-8">
+					{pendingChallenge && <ChallengeStep challenge={pendingChallenge} />}
+
+					{!pendingChallenge && error && (
+						<ErrorAlert message={error} onDismiss={() => setError(null)} className="mb-6" />
+					)}
+
+					{!pendingChallenge && showProviderPicker && (
+						<div className="space-y-3">
+							{providers.map(provider => (
+								<ProviderButton
+									key={provider.name}
+									provider={provider}
+									onSelect={handleProviderSelect}
+								/>
+							))}
+						</div>
+					)}
+
+					{!pendingChallenge && showOAuthPrompt && activeProvider && (
+						<div className="space-y-4">
+							<ProviderButton provider={activeProvider} onSelect={handleProviderSelect} />
+							<p className="text-center text-xs text-fg-muted">
+								You will be redirected to {activeProvider.label} to complete sign in.
+							</p>
+						</div>
+					)}
+
+					{!pendingChallenge && showCredentialsForm && (
+						<form onSubmit={handleSubmit} className="space-y-5">
+							{showBackLink && (
+								<Button
+									type="button"
+									variant="ghost"
+									size="sm"
+									className="-ml-2 h-8 px-2 text-fg-secondary"
+									icon={<ArrowLeft className="h-4 w-4" />}
+									onClick={() => {
+										setSelectedProvider(null);
+										setError(null);
+										setCredentials({ email: '', password: '' });
+									}}>
+									{t('core:auth.back_to_options')}
+								</Button>
+							)}
+
+							<div className="space-y-2">
+								<Label htmlFor="email" required>
+									{t('core:auth.email')}
+								</Label>
+								<Input
+									id="email"
+									type="email"
+									required
+									value={credentials.email}
+									onChange={e => setCredentials({ ...credentials, email: e.target.value })}
+									placeholder={t('core:auth.email_placeholder')}
+									autoComplete="email"
+									autoFocus
+								/>
+							</div>
+
+							<div className="space-y-2">
+								<Label htmlFor="password" required>
+									{t('core:auth.password')}
+								</Label>
+								<Input
+									id="password"
+									type="password"
+									required
+									value={credentials.password}
+									onChange={e => setCredentials({ ...credentials, password: e.target.value })}
+									placeholder={t('core:auth.password_placeholder')}
+									autoComplete="current-password"
+								/>
+							</div>
+
+							<Button type="submit" loading={submitting} className="w-full h-11">
+								{t('core:auth.sign_in')}
+							</Button>
+						</form>
+					)}
+
+					{!pendingChallenge && !showProviderPicker && !showOAuthPrompt && !showCredentialsForm && (
+						<p className="text-center text-sm text-fg-secondary">{t('core:auth.no_providers')}</p>
+					)}
+				</div>
+
+				<Slot name="login.belowForm" as="div" className="mt-6 space-y-4 empty:hidden" />
+
+				<div className="mt-6 flex justify-center">
+					<LocaleSwitcher />
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useAuth } from './AuthContext';
+import { Loader2 } from 'lucide-react';
+import { LoginPage } from './LoginPage';
+import { translate } from '../i18n/activeLocale';
+
+interface ProtectedRouteProps {
+	children: React.ReactNode;
+	apiBaseUrl: string;
+	fallback?: React.ReactNode;
+}
+
+/**
+ * ProtectedRoute - Wraps content that requires authentication
+ * Shows LoginPage if not authenticated, otherwise shows children
+ */
+export function ProtectedRoute({ children, apiBaseUrl, fallback }: ProtectedRouteProps) {
+	const { user, loading } = useAuth();
+
+	if (loading) {
+		return (
+			<div className="min-h-screen bg-base flex items-center justify-center">
+				<div className="text-center">
+					<Loader2 className="w-12 h-12 text-accent animate-spin mx-auto" />
+					<p className="mt-4 text-fg-secondary">{translate('core:common.loading_ellipsis')}</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (!user) {
+		if (fallback) {
+			return <>{fallback}</>;
+		}
+		return <LoginPage apiBaseUrl={apiBaseUrl} />;
+	}
+
+	return <>{children}</>;
+}