Add MFA to login screen

backend/server/main/settings.py

@@ -47,7 +47,7 @@ INSTALLED_APPS = (
     "allauth_ui",
     'allauth',
     'allauth.account',
-    # 'allauth.mfa',
+    'allauth.mfa',
     'allauth.headless',
     'allauth.socialaccount',
     "widget_tweaks",

frontend/src/routes/login/+page.server.ts

@@ -1,6 +1,6 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { fail, redirect, type RequestEvent } from '@sveltejs/kit';
 
-import type { Actions, PageServerLoad } from './$types';
+import type { Actions, PageServerLoad, RouteParams } from './$types';
 import { getRandomBackground, getRandomQuote } from '$lib';
 import { fetchCSRFToken } from '$lib/index.server';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
@@ -25,15 +25,14 @@ export const actions: Actions = {
 	default: async (event) => {
 		const formData = await event.request.formData();
 		const formUsername = formData.get('username');
-
+		const username = formUsername?.toString().toLowerCase();
-		let username = formUsername?.toString().toLocaleLowerCase();
-
 		const password = formData.get('password');
+		const totp = formData.get('totp');
 
 		const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
-
 		const csrfToken = await fetchCSRFToken();
 
+		// Initial login attempt
 		const loginFetch = await event.fetch(`${serverEndpoint}/_allauth/browser/v1/auth/login`, {
 			method: 'POST',
 			headers: {
@@ -41,50 +40,84 @@ export const actions: Actions = {
 				'Content-Type': 'application/json',
 				Cookie: `csrftoken=${csrfToken}`
 			},
-			body: JSON.stringify({
+			body: JSON.stringify({ username, password }),
-				username,
-				password
-			}),
 			credentials: 'include'
 		});
 
-		const loginResponse = await loginFetch.json();
+		if (loginFetch.status === 200) {
-		if (!loginFetch.ok) {
+			// Login successful without MFA
-			// get the value of the first key in the object
+			handleSuccessfulLogin(event, loginFetch);
-			const firstKey = Object.keys(loginResponse)[0] || 'error';
+			return redirect(302, '/');
-			const error = loginResponse[firstKey][0] || 'Invalid username or password';
+		} else if (loginFetch.status === 401) {
-			return fail(400, {
+			// MFA required
-				message: error
+			if (!totp) {
-			});
+				return fail(401, {
-		} else {
+					message: 'Multi-factor authentication required',
-			const setCookieHeader = loginFetch.headers.get('Set-Cookie');
+					mfa_required: true
+				});
+			} else {
+				// Attempt MFA authentication
+				const sessionId = extractSessionId(loginFetch.headers.get('Set-Cookie'));
+				const mfaLoginFetch = await event.fetch(
+					`${serverEndpoint}/_allauth/browser/v1/auth/2fa/authenticate`,
+					{
+						method: 'POST',
+						headers: {
+							'X-CSRFToken': csrfToken,
+							'Content-Type': 'application/json',
+							Cookie: `csrftoken=${csrfToken}; sessionid=${sessionId}`
+						},
+						body: JSON.stringify({ code: totp }),
+						credentials: 'include'
+					}
+				);
 
-			console.log('setCookieHeader:', setCookieHeader);
+				if (mfaLoginFetch.ok) {
-
+					// MFA successful
-			if (setCookieHeader) {
+					handleSuccessfulLogin(event, mfaLoginFetch);
-				// Regular expression to match sessionid cookie and its expiry
+					return redirect(302, '/');
-				const sessionIdRegex = /sessionid=([^;]+).*?expires=([^;]+)/;
+				} else {
-				const match = setCookieHeader.match(sessionIdRegex);
+					// MFA failed
-
+					const mfaLoginResponse = await mfaLoginFetch.json();
-				if (match) {
+					return fail(401, {
-					const sessionId = match[1];
+						message: mfaLoginResponse.error || 'Invalid MFA code',
-					const expiryString = match[2];
+						mfa_required: true
-					const expiryDate = new Date(expiryString);
-
-					console.log('Session ID:', sessionId);
-					console.log('Expiry Date:', expiryDate);
-
-					// Set the sessionid cookie
-					event.cookies.set('sessionid', sessionId, {
-						path: '/',
-						httpOnly: true,
-						sameSite: 'lax',
-						secure: true,
-						expires: expiryDate
 					});
 				}
 			}
-			redirect(302, '/');
+		} else {
+			// Login failed
+			const loginResponse = await loginFetch.json();
+			const firstKey = Object.keys(loginResponse)[0] || 'error';
+			const error = loginResponse[firstKey][0] || 'Invalid username or password';
+			return fail(400, { message: error });
 		}
 	}
 };
+
+function handleSuccessfulLogin(event: RequestEvent<RouteParams, '/login'>, response: Response) {
+	const setCookieHeader = response.headers.get('Set-Cookie');
+	if (setCookieHeader) {
+		const sessionIdRegex = /sessionid=([^;]+).*?expires=([^;]+)/;
+		const match = setCookieHeader.match(sessionIdRegex);
+		if (match) {
+			const [, sessionId, expiryString] = match;
+			event.cookies.set('sessionid', sessionId, {
+				path: '/',
+				httpOnly: true,
+				sameSite: 'lax',
+				secure: true,
+				expires: new Date(expiryString)
+			});
+		}
+	}
+}
+
+function extractSessionId(setCookieHeader: string | null) {
+	if (setCookieHeader) {
+		const sessionIdRegex = /sessionid=([^;]+)/;
+		const match = setCookieHeader.match(sessionIdRegex);
+		return match ? match[1] : '';
+	}
+	return '';
+}

frontend/src/routes/login/+page.svelte

@@ -51,6 +51,15 @@
 						id="password"
 						class="block input input-bordered w-full max-w-xs"
 					/><br />
+					{#if $page.form?.mfa_required}
+						<label for="password">TOTP</label>
+						<input
+							type="password"
+							name="totp"
+							id="totp"
+							class="block input input-bordered w-full max-w-xs"
+						/><br />
+					{/if}
 					<button class="py-2 px-4 btn btn-primary mr-2">{$t('auth.login')}</button>
 
 					<div class="flex justify-between mt-4">