Add TOTP-based two-factor authentication

- Add 2FA setup, enable, disable, and backup code management
- Integrate 2FA challenge flow into login process
- Add frontend modal for 2FA configuration
- Support backup codes for account recovery

frontend/src/context/AuthContext.tsx

@@ -1,13 +1,28 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { createContext, type ReactNode, useContext, useState } from "react";
 import { useIntervalWhen } from "rooks";
-import { getToken, loginAsUser, refreshToken, type TokenResponse } from "src/api/backend";
+import {
+	getToken,
+	isTwoFactorChallenge,
+	loginAsUser,
+	refreshToken,
+	verify2FA,
+	type TokenResponse,
+} from "src/api/backend";
 import AuthStore from "src/modules/AuthStore";
 
+// 2FA challenge state
+export interface TwoFactorChallenge {
+	challengeToken: string;
+}
+
 // Context
 export interface AuthContextType {
 	authenticated: boolean;
+	twoFactorChallenge: TwoFactorChallenge | null;
 	login: (username: string, password: string) => Promise<void>;
+	verifyTwoFactor: (code: string) => Promise<void>;
+	cancelTwoFactor: () => void;
 	loginAs: (id: number) => Promise<void>;
 	logout: () => void;
 	token?: string;
@@ -24,17 +39,35 @@ interface Props {
 function AuthProvider({ children, tokenRefreshInterval = 5 * 60 * 1000 }: Props) {
 	const queryClient = useQueryClient();
 	const [authenticated, setAuthenticated] = useState(AuthStore.hasActiveToken());
+	const [twoFactorChallenge, setTwoFactorChallenge] = useState<TwoFactorChallenge | null>(null);
 
 	const handleTokenUpdate = (response: TokenResponse) => {
 		AuthStore.set(response);
 		setAuthenticated(true);
+		setTwoFactorChallenge(null);
 	};
 
 	const login = async (identity: string, secret: string) => {
 		const response = await getToken(identity, secret);
+		if (isTwoFactorChallenge(response)) {
+			setTwoFactorChallenge({ challengeToken: response.challengeToken });
+			return;
+		}
 		handleTokenUpdate(response);
 	};
 
+	const verifyTwoFactor = async (code: string) => {
+		if (!twoFactorChallenge) {
+			throw new Error("No 2FA challenge pending");
+		}
+		const response = await verify2FA(twoFactorChallenge.challengeToken, code);
+		handleTokenUpdate(response);
+	};
+
+	const cancelTwoFactor = () => {
+		setTwoFactorChallenge(null);
+	};
+
 	const loginAs = async (id: number) => {
 		const response = await loginAsUser(id);
 		AuthStore.add(response);
@@ -69,7 +102,15 @@ function AuthProvider({ children, tokenRefreshInterval = 5 * 60 * 1000 }: Props)
 		true,
 	);
 
-	const value = { authenticated, login, logout, loginAs };
+	const value = {
+		authenticated,
+		twoFactorChallenge,
+		login,
+		verifyTwoFactor,
+		cancelTwoFactor,
+		loginAs,
+		logout,
+	};
 
 	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }