@burdenoff/microfe-auth 2026.830.1 → 2026.830.2

package/dist/auth/pages/MfaVerifyPage.js

@@ -1,102 +1,99 @@
 import { useAuthStore as e } from "../store/authStore.js";
-import { AuthLayout as t } from "../components/AuthLayout.js";
-import { AlertIcon as n, SpinnerIcon as r } from "../components/AuthIcons.js";
-import { MFA_CHALLENGE_ID as i, MFA_PENDING_REFRESH as a, MFA_PENDING_TOKEN as o, MFA_REDIRECT as s } from "../constants/sessionKeys.js";
-import { useMfaOperations as c } from "../hooks/useMfaOperations.js";
-import { useEffect as l, useRef as u, useState as d } from "react";
-import { useNavigate as f } from "react-router";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as t } from "../../shared/hooks/useTr.js";
+import { AuthLayout as n } from "../components/AuthLayout.js";
+import { AlertIcon as r, SpinnerIcon as i } from "../components/AuthIcons.js";
+import { MFA_CHALLENGE_ID as a, MFA_PENDING_REFRESH as o, MFA_PENDING_TOKEN as s, MFA_REDIRECT as c } from "../constants/sessionKeys.js";
+import { useMfaOperations as l } from "../hooks/useMfaOperations.js";
+import { useEffect as u, useRef as d, useState as f } from "react";
+import { useNavigate as p } from "react-router";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { Button as _ } from "@burdenoff/fe-libs/button";
 import { PagePurpose as v } from "@burdenoff/fe-libs/ui";
 //#region src/auth/pages/MfaVerifyPage.tsx
 function y() {
-	let { t: y } = p(), b = (e, t) => {
-		let n = y(e);
-		return n === e ? t : n;
-	}, x = f(), { verifyMFA: S, mfaChallengeId: C, isLoading: w } = c(), [T, E] = d([
+	let y = t(), b = p(), { verifyMFA: x, mfaChallengeId: S, isLoading: C } = l(), [w, T] = f([
 		"",
 		"",
 		"",
 		"",
 		"",
 		""
-	]), [D, O] = d(null), k = u([]), A = typeof window < "u" ? sessionStorage.getItem(i) : null, j = C || A;
-	l(() => {
-		k.current[0]?.focus(), sessionStorage.getItem(o), sessionStorage.getItem(s);
-	}, [A]);
-	let M = (e, t) => {
-		let n = t.replace(/\D/g, "").slice(-1), r = [...T];
-		if (r[e] = n, E(r), n && e < 5 && k.current[e + 1]?.focus(), n && e === 5) {
+	]), [E, D] = f(null), O = d([]), k = typeof window < "u" ? sessionStorage.getItem(a) : null, A = S || k;
+	u(() => {
+		O.current[0]?.focus(), sessionStorage.getItem(s), sessionStorage.getItem(c);
+	}, [k]);
+	let j = (e, t) => {
+		let n = t.replace(/\D/g, "").slice(-1), r = [...w];
+		if (r[e] = n, T(r), n && e < 5 && O.current[e + 1]?.focus(), n && e === 5) {
 			let e = r.join("");
-			e.length === 6 && F(e);
+			e.length === 6 && P(e);
 		}
-	}, N = (e, t) => {
-		t.key === "Backspace" && !T[e] && e > 0 && k.current[e - 1]?.focus();
-	}, P = (e) => {
+	}, M = (e, t) => {
+		t.key === "Backspace" && !w[e] && e > 0 && O.current[e - 1]?.focus();
+	}, N = (e) => {
 		e.preventDefault();
-		let t = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6), n = [...T];
+		let t = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6), n = [...w];
 		t.split("").forEach((e, t) => {
 			t < 6 && (n[t] = e);
-		}), E(n);
+		}), T(n);
 		let r = Math.min(t.length - 1, 5);
-		k.current[r]?.focus(), t.length === 6 && F(t);
-	}, F = async (t) => {
-		let n = t || T.join("");
+		O.current[r]?.focus(), t.length === 6 && P(t);
+	}, P = async (t) => {
+		let n = t || w.join("");
 		if (n.length === 6) {
-			if (O(null), !j) {
-				O(b("auth.mfaVerify.sessionExpired", "MFA session expired. Please log in again."));
+			if (D(null), !A) {
+				D(y("auth.mfaVerify.sessionExpired", "MFA session expired. Please log in again."));
 				return;
 			}
 			try {
-				let t = await S({
-					challengeId: j,
+				let t = await x({
+					challengeId: A,
 					code: n,
 					method: "TOTP"
 				});
 				if (t.success) {
-					let e = sessionStorage.getItem(s);
-					sessionStorage.removeItem(i), sessionStorage.removeItem(o), sessionStorage.removeItem(a), sessionStorage.removeItem(s), x(e || "/", { replace: !0 });
+					let e = sessionStorage.getItem(c);
+					sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), b(e || "/", { replace: !0 });
 				} else {
 					if (t.error === "mfa_challenge_expired") {
-						sessionStorage.removeItem(i), sessionStorage.removeItem(o), sessionStorage.removeItem(a), sessionStorage.removeItem(s), e.getState().setMfaRequired(!1), x("/auth/login", {
+						sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), e.getState().setMfaRequired(!1), b("/auth/login", {
 							replace: !0,
-							state: { message: "Your verification session expired. Please sign in again." }
+							state: { message: y("auth.mfaVerify.sessionExpiredMessage", "Your verification session expired. Please sign in again.") }
 						});
 						return;
 					}
 					let n = t.error ?? "", r = /cannot read propert|null|undefined|typeerror/i.test(n);
-					O(!n || r ? b("auth.mfaVerify.invalidCode", "Invalid verification code. Please try again.") : n), E([
+					D(!n || r ? y("auth.mfaVerify.invalidCode", "Invalid verification code. Please try again.") : n), T([
 						"",
 						"",
 						"",
 						"",
 						"",
 						""
-					]), k.current[0]?.focus();
+					]), O.current[0]?.focus();
 				}
 			} catch (t) {
 				if (console.error("MFA verification failed:", t), (t instanceof Error ? t.message : String(t)).includes("mfa_challenge_expired")) {
-					sessionStorage.removeItem(i), sessionStorage.removeItem(o), sessionStorage.removeItem(a), sessionStorage.removeItem(s), e.getState().setMfaRequired(!1), x("/auth/login", {
+					sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), e.getState().setMfaRequired(!1), b("/auth/login", {
 						replace: !0,
-						state: { message: "Your verification session expired. Please sign in again." }
+						state: { message: y("auth.mfaVerify.sessionExpiredMessage", "Your verification session expired. Please sign in again.") }
 					});
 					return;
 				}
-				O(b("auth.mfaVerify.verificationFailed", "Verification failed. Please try again.")), E([
+				D(y("auth.mfaVerify.verificationFailed", "Verification failed. Please try again.")), T([
 					"",
 					"",
 					"",
 					"",
 					"",
 					""
-				]), k.current[0]?.focus();
+				]), O.current[0]?.focus();
 			}
 		}
 	};
-	return /* @__PURE__ */ g(t, {
-		title: b("auth.mfaVerify.title", "Two-factor authentication"),
-		subtitle: b("auth.mfaVerify.subtitle", "Enter the 6-digit code from your authenticator app"),
+	return /* @__PURE__ */ g(n, {
+		title: y("auth.mfaVerify.title", "Two-factor authentication"),
+		subtitle: y("auth.mfaVerify.subtitle", "Enter the 6-digit code from your authenticator app"),
 		children: [
 			/* @__PURE__ */ h("div", {
 				className: "flex justify-center mb-6",
@@ -118,63 +115,63 @@ function y() {
 			}),
 			/* @__PURE__ */ h(v, {
 				className: "mb-6",
-				children: b("auth.mfaVerify.purpose", "This extra step confirms it's really you. Open your authenticator app and enter the current 6-digit code to finish signing in.")
+				children: y("auth.mfaVerify.purpose", "This extra step confirms it's really you. Open your authenticator app and enter the current 6-digit code to finish signing in.")
 			}),
 			/* @__PURE__ */ g("form", {
 				onSubmit: (e) => {
-					e.preventDefault(), F();
+					e.preventDefault(), P();
 				},
 				className: "space-y-6",
 				children: [
-					D && /* @__PURE__ */ g("div", {
+					E && /* @__PURE__ */ g("div", {
 						className: "flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
-						children: [/* @__PURE__ */ h(n, { className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }), /* @__PURE__ */ h("p", {
+						children: [/* @__PURE__ */ h(r, { className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }), /* @__PURE__ */ h("p", {
 							className: "text-sm text-[var(--color-status-error-text)]",
-							children: D
+							children: E
 						})]
 					}),
 					/* @__PURE__ */ g("div", {
 						className: "space-y-2",
 						children: [/* @__PURE__ */ h("label", {
 							className: "block text-sm font-medium text-[var(--color-text-primary)] text-center",
-							children: b("auth.mfaVerify.verificationCode", "Verification Code")
+							children: y("auth.mfaVerify.verificationCode", "Verification Code")
 						}), /* @__PURE__ */ h("div", {
 							className: "flex justify-center gap-2 sm:gap-3",
-							children: T.map((e, t) => /* @__PURE__ */ h("input", {
+							children: w.map((e, t) => /* @__PURE__ */ h("input", {
 								ref: (e) => {
-									k.current[t] = e;
+									O.current[t] = e;
 								},
 								type: "text",
 								inputMode: "numeric",
 								autoComplete: "one-time-code",
 								maxLength: 1,
-								"aria-label": b("auth.mfaVerify.digitAriaLabel", "Verification code digit") + ` ${t + 1}`,
+								"aria-label": y("auth.mfaVerify.digitAriaLabel", "Verification code digit") + ` ${t + 1}`,
 								value: e,
-								onChange: (e) => M(t, e.target.value),
-								onKeyDown: (e) => N(t, e),
-								onPaste: P,
+								onChange: (e) => j(t, e.target.value),
+								onKeyDown: (e) => M(t, e),
+								onPaste: N,
 								className: "w-10 h-12 sm:w-12 sm:h-14 text-center text-xl sm:text-2xl font-semibold rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
 							}, t))
 						})]
 					}),
 					/* @__PURE__ */ h(_, {
 						type: "submit",
-						disabled: w || T.join("").length !== 6,
+						disabled: C || w.join("").length !== 6,
 						variant: "default",
 						size: "lg",
 						className: "w-full font-semibold",
-						children: w ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(r, { className: "size-5 animate-spin" }), /* @__PURE__ */ h("span", { children: "Verifying…" })] }) : b("auth.mfaVerify.verify", "Verify")
+						children: C ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(i, { className: "size-5 animate-spin" }), /* @__PURE__ */ h("span", { children: y("auth.mfaVerify.verifying", "Verifying…") })] }) : y("auth.mfaVerify.verify", "Verify")
 					}),
 					/* @__PURE__ */ g("div", {
 						className: "text-center space-y-3",
 						children: [/* @__PURE__ */ h("p", {
 							className: "text-sm text-[var(--color-text-secondary)]",
-							children: b("auth.mfaVerify.cantAccess", "Can't access your authenticator app?")
+							children: y("auth.mfaVerify.cantAccess", "Can't access your authenticator app?")
 						}), /* @__PURE__ */ h("button", {
 							type: "button",
-							onClick: () => x("/auth/mfa-recovery"),
+							onClick: () => b("/auth/mfa-recovery"),
 							className: "text-sm font-medium text-text-link hover:text-text-linkHover transition-colors",
-							children: b("auth.mfaVerify.useRecoveryCode", "Use a recovery code")
+							children: y("auth.mfaVerify.useRecoveryCode", "Use a recovery code")
 						})]
 					})
 				]
@@ -184,10 +181,10 @@ function y() {
 				children: /* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: () => {
-						sessionStorage.removeItem(i), sessionStorage.removeItem(o), sessionStorage.removeItem(a), sessionStorage.removeItem(s), e.getState().setMfaRequired(!1), x("/auth/login");
+						sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), e.getState().setMfaRequired(!1), b("/auth/login");
 					},
 					className: "font-semibold text-text-link hover:text-text-linkHover transition-colors",
-					children: b("auth.mfaVerify.backToSignIn", "Back to sign in")
+					children: y("auth.mfaVerify.backToSignIn", "Back to sign in")
 				})
 			})
 		]

package/dist/auth/pages/MfaVerifyPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MfaVerifyPage.js","names":[],"sources":["../../../src/auth/pages/MfaVerifyPage.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router\";\nimport { useMfaOperations } from \"../hooks/useMfaOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { Button } from \"@burdenoff/fe-libs/button\";\nimport { PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  MFA_CHALLENGE_ID,\n  MFA_PENDING_TOKEN,\n  MFA_PENDING_REFRESH,\n  MFA_REDIRECT,\n} from \"../constants/sessionKeys\";\n\n/**\n * MFA verification page with professional design\n * Shown when user needs to verify MFA code during login\n * Handles both regular login MFA and SSO MFA flows\n */\nexport function MfaVerifyPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigate = useNavigate();\n  const {\n    verifyMFA,\n    mfaChallengeId: storeChallengeId,\n    isLoading,\n  } = useMfaOperations();\n  const [code, setCode] = useState([\"\", \"\", \"\", \"\", \"\", \"\"]);\n  const [error, setError] = useState<string | null>(null);\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n  // Get challenge ID from store or sessionStorage (SSO flow)\n  const sessionChallengeId =\n    typeof window !== \"undefined\"\n      ? sessionStorage.getItem(MFA_CHALLENGE_ID)\n      : null;\n  const mfaChallengeId = storeChallengeId || sessionChallengeId;\n\n  // Focus first input on mount and detect SSO flow\n  useEffect(() => {\n    inputRefs.current[0]?.focus();\n\n    // Check if this is an SSO flow (has pending tokens in sessionStorage)\n    const hasPendingToken = sessionStorage.getItem(MFA_PENDING_TOKEN);\n    const hasRedirect = sessionStorage.getItem(MFA_REDIRECT);\n    if (hasPendingToken || hasRedirect || sessionChallengeId) {\n    }\n  }, [sessionChallengeId]);\n\n  const handleChange = (index: number, value: string) => {\n    // Only allow digits\n    const digit = value.replace(/\\D/g, \"\").slice(-1);\n\n    const newCode = [...code];\n    newCode[index] = digit;\n    setCode(newCode);\n\n    // Auto-focus next input\n    if (digit && index < 5) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    // Auto-submit when all digits are entered\n    if (digit && index === 5) {\n      const fullCode = newCode.join(\"\");\n      if (fullCode.length === 6) {\n        handleSubmit(fullCode);\n      }\n    }\n  };\n\n  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {\n    if (e.key === \"Backspace\" && !code[index] && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent) => {\n    e.preventDefault();\n    const pastedData = e.clipboardData\n      .getData(\"text\")\n      .replace(/\\D/g, \"\")\n      .slice(0, 6);\n    const newCode = [...code];\n    pastedData.split(\"\").forEach((char, i) => {\n      if (i < 6) newCode[i] = char;\n    });\n    setCode(newCode);\n\n    // Focus last filled input or first empty\n    const lastIndex = Math.min(pastedData.length - 1, 5);\n    inputRefs.current[lastIndex]?.focus();\n\n    // Auto-submit if full code pasted\n    if (pastedData.length === 6) {\n      handleSubmit(pastedData);\n    }\n  };\n\n  const handleSubmit = async (fullCode?: string) => {\n    const codeToSubmit = fullCode || code.join(\"\");\n    if (codeToSubmit.length !== 6) return;\n\n    setError(null);\n\n    if (!mfaChallengeId) {\n      setError(\n        tr(\n          \"auth.mfaVerify.sessionExpired\",\n          \"MFA session expired. Please log in again.\",\n        ),\n      );\n      return;\n    }\n\n    try {\n      const result = await verifyMFA({\n        challengeId: mfaChallengeId,\n        code: codeToSubmit,\n        method: \"TOTP\",\n      });\n\n      if (result.success) {\n        // Clean up SSO session data\n        const ssoRedirect = sessionStorage.getItem(MFA_REDIRECT);\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n\n        // Redirect to SSO redirect URL or default to dashboard\n        const redirectUrl = ssoRedirect || \"/\";\n        navigate(redirectUrl, { replace: true });\n      } else {\n        // Handle expired challenge - redirect to login\n        if (result.error === \"mfa_challenge_expired\") {\n          // Clear all MFA state\n          sessionStorage.removeItem(MFA_CHALLENGE_ID);\n          sessionStorage.removeItem(MFA_PENDING_TOKEN);\n          sessionStorage.removeItem(MFA_PENDING_REFRESH);\n          sessionStorage.removeItem(MFA_REDIRECT);\n          useAuthStore.getState().setMfaRequired(false);\n\n          // Redirect to login with message\n          navigate(\"/auth/login\", {\n            replace: true,\n            state: {\n              message:\n                \"Your verification session expired. Please sign in again.\",\n            },\n          });\n          return;\n        }\n\n        // Sanitize technical / null-deref-style messages bubbling up from\n        // resolver internals — always show a user-friendly fallback.\n        const rawErr = result.error ?? \"\";\n        const isTechnical =\n          /cannot read propert|null|undefined|typeerror/i.test(rawErr);\n        setError(\n          !rawErr || isTechnical\n            ? tr(\n                \"auth.mfaVerify.invalidCode\",\n                \"Invalid verification code. Please try again.\",\n              )\n            : rawErr,\n        );\n        setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n        inputRefs.current[0]?.focus();\n      }\n    } catch (err) {\n      console.error(\"MFA verification failed:\", err);\n\n      // Check if the error is about expired challenge\n      const errorMessage = err instanceof Error ? err.message : String(err);\n      if (errorMessage.includes(\"mfa_challenge_expired\")) {\n        // Clear all MFA state\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n        useAuthStore.getState().setMfaRequired(false);\n\n        // Redirect to login with message\n        navigate(\"/auth/login\", {\n          replace: true,\n          state: {\n            message: \"Your verification session expired. Please sign in again.\",\n          },\n        });\n        return;\n      }\n\n      setError(\n        tr(\n          \"auth.mfaVerify.verificationFailed\",\n          \"Verification failed. Please try again.\",\n        ),\n      );\n      setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n      inputRefs.current[0]?.focus();\n    }\n  };\n\n  return (\n    <AuthLayout\n      title={tr(\"auth.mfaVerify.title\", \"Two-factor authentication\")}\n      subtitle={tr(\n        \"auth.mfaVerify.subtitle\",\n        \"Enter the 6-digit code from your authenticator app\",\n      )}\n    >\n      {/* Shield Icon */}\n      <div className=\"flex justify-center mb-6\">\n        <div className=\"size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n          <svg\n            className=\"size-8 text-[var(--color-text-link)]\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <PagePurpose className=\"mb-6\">\n        {tr(\n          \"auth.mfaVerify.purpose\",\n          \"This extra step confirms it's really you. Open your authenticator app and enter the current 6-digit code to finish signing in.\",\n        )}\n      </PagePurpose>\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          handleSubmit();\n        }}\n        className=\"space-y-6\"\n      >\n        {/* Error Alert */}\n        {error && (\n          <div className=\"flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n            <AlertIcon className=\"size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n          </div>\n        )}\n\n        {/* Code Input */}\n        <div className=\"space-y-2\">\n          <label className=\"block text-sm font-medium text-[var(--color-text-primary)] text-center\">\n            {tr(\"auth.mfaVerify.verificationCode\", \"Verification Code\")}\n          </label>\n          <div className=\"flex justify-center gap-2 sm:gap-3\">\n            {code.map((digit, index) => (\n              <input\n                key={index}\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                type=\"text\"\n                inputMode=\"numeric\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                aria-label={\n                  tr(\n                    \"auth.mfaVerify.digitAriaLabel\",\n                    \"Verification code digit\",\n                  ) + ` ${index + 1}`\n                }\n                value={digit}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={handlePaste}\n                className=\"w-10 h-12 sm:w-12 sm:h-14 text-center text-xl sm:text-2xl font-semibold rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Submit Button */}\n        <Button\n          type=\"submit\"\n          disabled={isLoading || code.join(\"\").length !== 6}\n          variant=\"default\"\n          size=\"lg\"\n          className=\"w-full font-semibold\"\n        >\n          {isLoading ? (\n            <>\n              <SpinnerIcon className=\"size-5 animate-spin\" />\n              <span>Verifying…</span>\n            </>\n          ) : (\n            tr(\"auth.mfaVerify.verify\", \"Verify\")\n          )}\n        </Button>\n\n        {/* Recovery Options */}\n        <div className=\"text-center space-y-3\">\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\n              \"auth.mfaVerify.cantAccess\",\n              \"Can't access your authenticator app?\",\n            )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/mfa-recovery\")}\n            className=\"text-sm font-medium text-text-link hover:text-text-linkHover transition-colors\"\n          >\n            {tr(\"auth.mfaVerify.useRecoveryCode\", \"Use a recovery code\")}\n          </button>\n        </div>\n      </form>\n\n      {/* Back to Login */}\n      <p className=\"mt-8 text-center text-sm text-[var(--color-text-secondary)]\">\n        <button\n          type=\"button\"\n          onClick={() => {\n            // Clear MFA state so LoginPage doesn't immediately redirect back here\n            sessionStorage.removeItem(MFA_CHALLENGE_ID);\n            sessionStorage.removeItem(MFA_PENDING_TOKEN);\n            sessionStorage.removeItem(MFA_PENDING_REFRESH);\n            sessionStorage.removeItem(MFA_REDIRECT);\n            useAuthStore.getState().setMfaRequired(false);\n            navigate(\"/auth/login\");\n          }}\n          className=\"font-semibold text-text-link hover:text-text-linkHover transition-colors\"\n        >\n          {tr(\"auth.mfaVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </p>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MfaVerifyPage.js","names":[],"sources":["../../../src/auth/pages/MfaVerifyPage.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useTr } from \"../../shared/hooks/useTr\";\nimport { useNavigate } from \"react-router\";\nimport { useMfaOperations } from \"../hooks/useMfaOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { Button } from \"@burdenoff/fe-libs/button\";\nimport { PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  MFA_CHALLENGE_ID,\n  MFA_PENDING_TOKEN,\n  MFA_PENDING_REFRESH,\n  MFA_REDIRECT,\n} from \"../constants/sessionKeys\";\n\n/**\n * MFA verification page with professional design\n * Shown when user needs to verify MFA code during login\n * Handles both regular login MFA and SSO MFA flows\n */\nexport function MfaVerifyPage() {\n  const tr = useTr();\n\n  const navigate = useNavigate();\n  const {\n    verifyMFA,\n    mfaChallengeId: storeChallengeId,\n    isLoading,\n  } = useMfaOperations();\n  const [code, setCode] = useState([\"\", \"\", \"\", \"\", \"\", \"\"]);\n  const [error, setError] = useState<string | null>(null);\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n  // Get challenge ID from store or sessionStorage (SSO flow)\n  const sessionChallengeId =\n    typeof window !== \"undefined\"\n      ? sessionStorage.getItem(MFA_CHALLENGE_ID)\n      : null;\n  const mfaChallengeId = storeChallengeId || sessionChallengeId;\n\n  // Focus first input on mount and detect SSO flow\n  useEffect(() => {\n    inputRefs.current[0]?.focus();\n\n    // Check if this is an SSO flow (has pending tokens in sessionStorage)\n    const hasPendingToken = sessionStorage.getItem(MFA_PENDING_TOKEN);\n    const hasRedirect = sessionStorage.getItem(MFA_REDIRECT);\n    if (hasPendingToken || hasRedirect || sessionChallengeId) {\n    }\n  }, [sessionChallengeId]);\n\n  const handleChange = (index: number, value: string) => {\n    // Only allow digits\n    const digit = value.replace(/\\D/g, \"\").slice(-1);\n\n    const newCode = [...code];\n    newCode[index] = digit;\n    setCode(newCode);\n\n    // Auto-focus next input\n    if (digit && index < 5) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    // Auto-submit when all digits are entered\n    if (digit && index === 5) {\n      const fullCode = newCode.join(\"\");\n      if (fullCode.length === 6) {\n        handleSubmit(fullCode);\n      }\n    }\n  };\n\n  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {\n    if (e.key === \"Backspace\" && !code[index] && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent) => {\n    e.preventDefault();\n    const pastedData = e.clipboardData\n      .getData(\"text\")\n      .replace(/\\D/g, \"\")\n      .slice(0, 6);\n    const newCode = [...code];\n    pastedData.split(\"\").forEach((char, i) => {\n      if (i < 6) newCode[i] = char;\n    });\n    setCode(newCode);\n\n    // Focus last filled input or first empty\n    const lastIndex = Math.min(pastedData.length - 1, 5);\n    inputRefs.current[lastIndex]?.focus();\n\n    // Auto-submit if full code pasted\n    if (pastedData.length === 6) {\n      handleSubmit(pastedData);\n    }\n  };\n\n  const handleSubmit = async (fullCode?: string) => {\n    const codeToSubmit = fullCode || code.join(\"\");\n    if (codeToSubmit.length !== 6) return;\n\n    setError(null);\n\n    if (!mfaChallengeId) {\n      setError(\n        tr(\n          \"auth.mfaVerify.sessionExpired\",\n          \"MFA session expired. Please log in again.\",\n        ),\n      );\n      return;\n    }\n\n    try {\n      const result = await verifyMFA({\n        challengeId: mfaChallengeId,\n        code: codeToSubmit,\n        method: \"TOTP\",\n      });\n\n      if (result.success) {\n        // Clean up SSO session data\n        const ssoRedirect = sessionStorage.getItem(MFA_REDIRECT);\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n\n        // Redirect to SSO redirect URL or default to dashboard\n        const redirectUrl = ssoRedirect || \"/\";\n        navigate(redirectUrl, { replace: true });\n      } else {\n        // Handle expired challenge - redirect to login\n        if (result.error === \"mfa_challenge_expired\") {\n          // Clear all MFA state\n          sessionStorage.removeItem(MFA_CHALLENGE_ID);\n          sessionStorage.removeItem(MFA_PENDING_TOKEN);\n          sessionStorage.removeItem(MFA_PENDING_REFRESH);\n          sessionStorage.removeItem(MFA_REDIRECT);\n          useAuthStore.getState().setMfaRequired(false);\n\n          // Redirect to login with message\n          navigate(\"/auth/login\", {\n            replace: true,\n            state: {\n              message: tr(\n                \"auth.mfaVerify.sessionExpiredMessage\",\n                \"Your verification session expired. Please sign in again.\",\n              ),\n            },\n          });\n          return;\n        }\n\n        // Sanitize technical / null-deref-style messages bubbling up from\n        // resolver internals — always show a user-friendly fallback.\n        const rawErr = result.error ?? \"\";\n        const isTechnical =\n          /cannot read propert|null|undefined|typeerror/i.test(rawErr);\n        setError(\n          !rawErr || isTechnical\n            ? tr(\n                \"auth.mfaVerify.invalidCode\",\n                \"Invalid verification code. Please try again.\",\n              )\n            : rawErr,\n        );\n        setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n        inputRefs.current[0]?.focus();\n      }\n    } catch (err) {\n      console.error(\"MFA verification failed:\", err);\n\n      // Check if the error is about expired challenge\n      const errorMessage = err instanceof Error ? err.message : String(err);\n      if (errorMessage.includes(\"mfa_challenge_expired\")) {\n        // Clear all MFA state\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n        useAuthStore.getState().setMfaRequired(false);\n\n        // Redirect to login with message\n        navigate(\"/auth/login\", {\n          replace: true,\n          state: {\n            message: tr(\n              \"auth.mfaVerify.sessionExpiredMessage\",\n              \"Your verification session expired. Please sign in again.\",\n            ),\n          },\n        });\n        return;\n      }\n\n      setError(\n        tr(\n          \"auth.mfaVerify.verificationFailed\",\n          \"Verification failed. Please try again.\",\n        ),\n      );\n      setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n      inputRefs.current[0]?.focus();\n    }\n  };\n\n  return (\n    <AuthLayout\n      title={tr(\"auth.mfaVerify.title\", \"Two-factor authentication\")}\n      subtitle={tr(\n        \"auth.mfaVerify.subtitle\",\n        \"Enter the 6-digit code from your authenticator app\",\n      )}\n    >\n      {/* Shield Icon */}\n      <div className=\"flex justify-center mb-6\">\n        <div className=\"size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n          <svg\n            className=\"size-8 text-[var(--color-text-link)]\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <PagePurpose className=\"mb-6\">\n        {tr(\n          \"auth.mfaVerify.purpose\",\n          \"This extra step confirms it's really you. Open your authenticator app and enter the current 6-digit code to finish signing in.\",\n        )}\n      </PagePurpose>\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          handleSubmit();\n        }}\n        className=\"space-y-6\"\n      >\n        {/* Error Alert */}\n        {error && (\n          <div className=\"flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n            <AlertIcon className=\"size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n          </div>\n        )}\n\n        {/* Code Input */}\n        <div className=\"space-y-2\">\n          <label className=\"block text-sm font-medium text-[var(--color-text-primary)] text-center\">\n            {tr(\"auth.mfaVerify.verificationCode\", \"Verification Code\")}\n          </label>\n          <div className=\"flex justify-center gap-2 sm:gap-3\">\n            {code.map((digit, index) => (\n              <input\n                key={index}\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                type=\"text\"\n                inputMode=\"numeric\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                aria-label={\n                  tr(\n                    \"auth.mfaVerify.digitAriaLabel\",\n                    \"Verification code digit\",\n                  ) + ` ${index + 1}`\n                }\n                value={digit}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={handlePaste}\n                className=\"w-10 h-12 sm:w-12 sm:h-14 text-center text-xl sm:text-2xl font-semibold rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all\"\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Submit Button */}\n        <Button\n          type=\"submit\"\n          disabled={isLoading || code.join(\"\").length !== 6}\n          variant=\"default\"\n          size=\"lg\"\n          className=\"w-full font-semibold\"\n        >\n          {isLoading ? (\n            <>\n              <SpinnerIcon className=\"size-5 animate-spin\" />\n              <span>{tr(\"auth.mfaVerify.verifying\", \"Verifying…\")}</span>\n            </>\n          ) : (\n            tr(\"auth.mfaVerify.verify\", \"Verify\")\n          )}\n        </Button>\n\n        {/* Recovery Options */}\n        <div className=\"text-center space-y-3\">\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\n              \"auth.mfaVerify.cantAccess\",\n              \"Can't access your authenticator app?\",\n            )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/mfa-recovery\")}\n            className=\"text-sm font-medium text-text-link hover:text-text-linkHover transition-colors\"\n          >\n            {tr(\"auth.mfaVerify.useRecoveryCode\", \"Use a recovery code\")}\n          </button>\n        </div>\n      </form>\n\n      {/* Back to Login */}\n      <p className=\"mt-8 text-center text-sm text-[var(--color-text-secondary)]\">\n        <button\n          type=\"button\"\n          onClick={() => {\n            // Clear MFA state so LoginPage doesn't immediately redirect back here\n            sessionStorage.removeItem(MFA_CHALLENGE_ID);\n            sessionStorage.removeItem(MFA_PENDING_TOKEN);\n            sessionStorage.removeItem(MFA_PENDING_REFRESH);\n            sessionStorage.removeItem(MFA_REDIRECT);\n            useAuthStore.getState().setMfaRequired(false);\n            navigate(\"/auth/login\");\n          }}\n          className=\"font-semibold text-text-link hover:text-text-linkHover transition-colors\"\n        >\n          {tr(\"auth.mfaVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </p>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/OAuthCallbackPage.js

@@ -1,39 +1,36 @@
-import { useOAuthOperations as e } from "../hooks/useOAuthOperations.js";
-import { AuthLayout as t } from "../components/AuthLayout.js";
-import { AlertIcon as n, CheckIcon as r, SpinnerIcon as i } from "../components/AuthIcons.js";
-import { useEffect as a, useRef as o, useState as s } from "react";
-import { useNavigate as c, useSearchParams as l } from "react-router";
-import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useOAuthOperations as t } from "../hooks/useOAuthOperations.js";
+import { AuthLayout as n } from "../components/AuthLayout.js";
+import { AlertIcon as r, CheckIcon as i, SpinnerIcon as a } from "../components/AuthIcons.js";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { useNavigate as l, useSearchParams as u } from "react-router";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/auth/pages/OAuthCallbackPage.tsx
 function m() {
-	let { t: m } = u(), h = (e, t) => {
-		let n = m(e);
-		return n === e ? t : n;
-	}, g = c(), [_] = l(), { completeOAuth: v } = e(), [y, b] = s("loading"), [x, S] = s(""), C = o(!1);
-	return a(() => {
-		if (C.current) return;
-		C.current = !0;
+	let m = e(), h = l(), [g] = u(), { completeOAuth: _ } = t(), [v, y] = c("loading"), [b, x] = c(""), S = s(!1);
+	return o(() => {
+		if (S.current) return;
+		S.current = !0;
 		let e = setTimeout(() => {
-			y === "loading" && (b("error"), S("Request timed out. Please check if the backend is running and try again."));
+			v === "loading" && (y("error"), x("Request timed out. Please check if the backend is running and try again."));
 		}, 3e4);
 		return (async () => {
-			let e = _.get("code"), t = _.get("state"), n = _.get("error"), r = _.get("error_description");
+			let e = g.get("code"), t = g.get("state"), n = g.get("error"), r = g.get("error_description");
 			if (n) {
-				b("error"), S(r || `OAuth error: ${n}`);
+				y("error"), x(r || `OAuth error: ${n}`);
 				return;
 			}
 			if (!e || !t) {
-				b("error"), S("Missing authorization code or state parameter.");
+				y("error"), x("Missing authorization code or state parameter.");
 				return;
 			}
 			try {
-				let n = await v(e, t);
-				n.success ? (b("success"), setTimeout(() => {
-					g("/auth/security", { replace: !0 });
-				}, 1500)) : n.requiresMFA ? g("/auth/mfa-verify", { replace: !0 }) : (b("error"), S(n.error || "Authentication failed"));
+				let n = await _(e, t);
+				n.success ? (y("success"), setTimeout(() => {
+					h("/auth/security", { replace: !0 });
+				}, 1500)) : n.requiresMFA ? h("/auth/mfa-verify", { replace: !0 }) : (y("error"), x(n.error || "Authentication failed"));
 			} catch (e) {
-				b("error"), S(e instanceof Error ? e.message : "Authentication failed. Please try again.");
+				y("error"), x(e instanceof Error ? e.message : "Authentication failed. Please try again.");
 			}
 		})().finally(() => {
 			clearTimeout(e);
@@ -41,59 +38,59 @@ function m() {
 			clearTimeout(e);
 		};
 	}, [
-		_,
-		v,
 		g,
-		y
-	]), /* @__PURE__ */ f(t, {
-		title: y === "loading" ? h("auth.oauthCallback.completing", "Completing Sign In") : y === "success" ? h("auth.oauthCallback.welcome", "Welcome!") : h("auth.oauthCallback.failed", "Authentication Failed"),
-		subtitle: y === "loading" ? h("auth.oauthCallback.pleaseWait", "Please wait while we complete your authentication...") : y === "success" ? h("auth.oauthCallback.successMsg", "You have been successfully signed in.") : h("auth.oauthCallback.problemMsg", "There was a problem signing you in."),
+		_,
+		h,
+		v
+	]), /* @__PURE__ */ f(n, {
+		title: v === "loading" ? m("auth.oauthCallback.completing", "Completing Sign In") : v === "success" ? m("auth.oauthCallback.welcome", "Welcome!") : m("auth.oauthCallback.failed", "Authentication Failed"),
+		subtitle: v === "loading" ? m("auth.oauthCallback.pleaseWait", "Please wait while we complete your authentication...") : v === "success" ? m("auth.oauthCallback.successMsg", "You have been successfully signed in.") : m("auth.oauthCallback.problemMsg", "There was a problem signing you in."),
 		children: /* @__PURE__ */ p("div", {
 			className: "flex flex-col items-center justify-center py-8 space-y-6",
 			children: [
-				y === "loading" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+				v === "loading" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
 					className: "relative",
 					children: /* @__PURE__ */ f("div", {
 						className: "size-16 rounded-full bg-status-info-bg-subtle flex items-center justify-center",
-						children: /* @__PURE__ */ f(i, { className: "size-8 text-text-link animate-spin" })
+						children: /* @__PURE__ */ f(a, { className: "size-8 text-text-link animate-spin" })
 					})
 				}), /* @__PURE__ */ f("p", {
 					className: "text-sm text-[var(--color-text-secondary)]",
-					children: h("auth.oauthCallback.verifying", "Verifying your credentials...")
+					children: m("auth.oauthCallback.verifying", "Verifying your credentials...")
 				})] }),
-				y === "success" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+				v === "success" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
 					className: "relative",
 					children: /* @__PURE__ */ f("div", {
 						className: "size-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center",
-						children: /* @__PURE__ */ f(r, { className: "size-8 text-status-success-text" })
+						children: /* @__PURE__ */ f(i, { className: "size-8 text-status-success-text" })
 					})
 				}), /* @__PURE__ */ f("p", {
 					className: "text-sm text-[var(--color-text-secondary)]",
-					children: h("auth.oauthCallback.redirecting", "Redirecting to your dashboard...")
+					children: m("auth.oauthCallback.redirecting", "Redirecting to your dashboard...")
 				})] }),
-				y === "error" && /* @__PURE__ */ p(d, { children: [
+				v === "error" && /* @__PURE__ */ p(d, { children: [
 					/* @__PURE__ */ f("div", {
 						className: "relative",
 						children: /* @__PURE__ */ f("div", {
 							className: "size-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-							children: /* @__PURE__ */ f(n, { className: "size-8 text-status-error-text" })
+							children: /* @__PURE__ */ f(r, { className: "size-8 text-status-error-text" })
 						})
 					}),
 					/* @__PURE__ */ p("div", {
 						className: "text-center space-y-2",
 						children: [/* @__PURE__ */ f("p", {
 							className: "text-sm text-status-error-text font-medium",
-							children: x
+							children: b
 						}), /* @__PURE__ */ f("p", {
 							className: "text-sm text-[var(--color-text-tertiary)]",
-							children: h("auth.oauthCallback.tryAgainHint", "Please try again or use a different sign-in method.")
+							children: m("auth.oauthCallback.tryAgainHint", "Please try again or use a different sign-in method.")
 						})]
 					}),
 					/* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: () => g("/auth/login", { replace: !0 }),
+						onClick: () => h("/auth/login", { replace: !0 }),
 						className: "px-6 py-2.5 rounded-xl bg-[var(--color-action-primary-bg)] text-white font-medium hover:bg-[var(--color-action-primary-bgHover)] transition-colors",
-						children: h("auth.oauthCallback.backToLogin", "Back to Login")
+						children: m("auth.oauthCallback.backToLogin", "Back to Login")
 					})
 				] })
 			]

package/dist/auth/pages/OAuthCallbackPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthCallbackPage.js","names":[],"sources":["../../../src/auth/pages/OAuthCallbackPage.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate, useSearchParams } from \"react-router\";\nimport { useOAuthOperations } from \"../hooks/useOAuthOperations\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { SpinnerIcon, AlertIcon, CheckIcon } from \"../components/AuthIcons\";\n\n/**\n * OAuth Callback Page\n * Handles the redirect from OAuth providers (Google, GitHub, Microsoft)\n * Extracts the authorization code and completes the authentication flow\n */\nexport function OAuthCallbackPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const { completeOAuth } = useOAuthOperations();\n\n  const [status, setStatus] = useState<\"loading\" | \"success\" | \"error\">(\n    \"loading\",\n  );\n  const [errorMessage, setErrorMessage] = useState<string>(\"\");\n\n  // Ref to prevent double execution in React Strict Mode\n  const hasAttemptedRef = useRef(false);\n\n  useEffect(() => {\n    // Prevent double execution in React Strict Mode\n    if (hasAttemptedRef.current) {\n      return;\n    }\n    hasAttemptedRef.current = true;\n\n    // Timeout after 30 seconds\n    const timeoutId = setTimeout(() => {\n      if (status === \"loading\") {\n        setStatus(\"error\");\n        setErrorMessage(\n          \"Request timed out. Please check if the backend is running and try again.\",\n        );\n      }\n    }, 30000);\n\n    const handleCallback = async () => {\n      // Extract parameters from URL\n      const code = searchParams.get(\"code\");\n      const state = searchParams.get(\"state\");\n      const error = searchParams.get(\"error\");\n      const errorDescription = searchParams.get(\"error_description\");\n\n      // Check for OAuth error response\n      if (error) {\n        setStatus(\"error\");\n        setErrorMessage(errorDescription || `OAuth error: ${error}`);\n        return;\n      }\n\n      // Validate required parameters\n      if (!code || !state) {\n        setStatus(\"error\");\n        setErrorMessage(\"Missing authorization code or state parameter.\");\n        return;\n      }\n\n      try {\n        // Complete OAuth flow\n        const result = await completeOAuth(code, state);\n\n        if (result.success) {\n          setStatus(\"success\");\n          // Redirect to security dashboard after short delay\n          setTimeout(() => {\n            navigate(\"/auth/security\", { replace: true });\n          }, 1500);\n        } else if (result.requiresMFA) {\n          // Redirect to MFA verification\n          navigate(\"/auth/mfa-verify\", { replace: true });\n        } else {\n          setStatus(\"error\");\n          setErrorMessage(result.error || \"Authentication failed\");\n        }\n      } catch (err) {\n        setStatus(\"error\");\n        setErrorMessage(\n          err instanceof Error\n            ? err.message\n            : \"Authentication failed. Please try again.\",\n        );\n      }\n    };\n\n    handleCallback().finally(() => {\n      clearTimeout(timeoutId);\n    });\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [searchParams, completeOAuth, navigate, status]);\n\n  return (\n    <AuthLayout\n      title={\n        status === \"loading\"\n          ? tr(\"auth.oauthCallback.completing\", \"Completing Sign In\")\n          : status === \"success\"\n            ? tr(\"auth.oauthCallback.welcome\", \"Welcome!\")\n            : tr(\"auth.oauthCallback.failed\", \"Authentication Failed\")\n      }\n      subtitle={\n        status === \"loading\"\n          ? tr(\n              \"auth.oauthCallback.pleaseWait\",\n              \"Please wait while we complete your authentication...\",\n            )\n          : status === \"success\"\n            ? tr(\n                \"auth.oauthCallback.successMsg\",\n                \"You have been successfully signed in.\",\n              )\n            : tr(\n                \"auth.oauthCallback.problemMsg\",\n                \"There was a problem signing you in.\",\n              )\n      }\n    >\n      <div className=\"flex flex-col items-center justify-center py-8 space-y-6\">\n        {status === \"loading\" && (\n          <>\n            <div className=\"relative\">\n              <div className=\"size-16 rounded-full bg-status-info-bg-subtle flex items-center justify-center\">\n                <SpinnerIcon className=\"size-8 text-text-link animate-spin\" />\n              </div>\n            </div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr(\n                \"auth.oauthCallback.verifying\",\n                \"Verifying your credentials...\",\n              )}\n            </p>\n          </>\n        )}\n\n        {status === \"success\" && (\n          <>\n            <div className=\"relative\">\n              <div className=\"size-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center\">\n                <CheckIcon className=\"size-8 text-status-success-text\" />\n              </div>\n            </div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr(\n                \"auth.oauthCallback.redirecting\",\n                \"Redirecting to your dashboard...\",\n              )}\n            </p>\n          </>\n        )}\n\n        {status === \"error\" && (\n          <>\n            <div className=\"relative\">\n              <div className=\"size-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n                <AlertIcon className=\"size-8 text-status-error-text\" />\n              </div>\n            </div>\n            <div className=\"text-center space-y-2\">\n              <p className=\"text-sm text-status-error-text font-medium\">\n                {errorMessage}\n              </p>\n              <p className=\"text-sm text-[var(--color-text-tertiary)]\">\n                {tr(\n                  \"auth.oauthCallback.tryAgainHint\",\n                  \"Please try again or use a different sign-in method.\",\n                )}\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate(\"/auth/login\", { replace: true })}\n              className=\"px-6 py-2.5 rounded-xl bg-[var(--color-action-primary-bg)] text-white font-medium hover:bg-[var(--color-action-primary-bgHover)] transition-colors\"\n            >\n              {tr(\"auth.oauthCallback.backToLogin\", \"Back to Login\")}\n            </button>\n          </>\n        )}\n      </div>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"OAuthCallbackPage.js","names":[],"sources":["../../../src/auth/pages/OAuthCallbackPage.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from \"react\";\nimport { useTr } from \"../../shared/hooks/useTr\";\nimport { useNavigate, useSearchParams } from \"react-router\";\nimport { useOAuthOperations } from \"../hooks/useOAuthOperations\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { SpinnerIcon, AlertIcon, CheckIcon } from \"../components/AuthIcons\";\n\n/**\n * OAuth Callback Page\n * Handles the redirect from OAuth providers (Google, GitHub, Microsoft)\n * Extracts the authorization code and completes the authentication flow\n */\nexport function OAuthCallbackPage() {\n  const tr = useTr();\n\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const { completeOAuth } = useOAuthOperations();\n\n  const [status, setStatus] = useState<\"loading\" | \"success\" | \"error\">(\n    \"loading\",\n  );\n  const [errorMessage, setErrorMessage] = useState<string>(\"\");\n\n  // Ref to prevent double execution in React Strict Mode\n  const hasAttemptedRef = useRef(false);\n\n  useEffect(() => {\n    // Prevent double execution in React Strict Mode\n    if (hasAttemptedRef.current) {\n      return;\n    }\n    hasAttemptedRef.current = true;\n\n    // Timeout after 30 seconds\n    const timeoutId = setTimeout(() => {\n      if (status === \"loading\") {\n        setStatus(\"error\");\n        setErrorMessage(\n          \"Request timed out. Please check if the backend is running and try again.\",\n        );\n      }\n    }, 30000);\n\n    const handleCallback = async () => {\n      // Extract parameters from URL\n      const code = searchParams.get(\"code\");\n      const state = searchParams.get(\"state\");\n      const error = searchParams.get(\"error\");\n      const errorDescription = searchParams.get(\"error_description\");\n\n      // Check for OAuth error response\n      if (error) {\n        setStatus(\"error\");\n        setErrorMessage(errorDescription || `OAuth error: ${error}`);\n        return;\n      }\n\n      // Validate required parameters\n      if (!code || !state) {\n        setStatus(\"error\");\n        setErrorMessage(\"Missing authorization code or state parameter.\");\n        return;\n      }\n\n      try {\n        // Complete OAuth flow\n        const result = await completeOAuth(code, state);\n\n        if (result.success) {\n          setStatus(\"success\");\n          // Redirect to security dashboard after short delay\n          setTimeout(() => {\n            navigate(\"/auth/security\", { replace: true });\n          }, 1500);\n        } else if (result.requiresMFA) {\n          // Redirect to MFA verification\n          navigate(\"/auth/mfa-verify\", { replace: true });\n        } else {\n          setStatus(\"error\");\n          setErrorMessage(result.error || \"Authentication failed\");\n        }\n      } catch (err) {\n        setStatus(\"error\");\n        setErrorMessage(\n          err instanceof Error\n            ? err.message\n            : \"Authentication failed. Please try again.\",\n        );\n      }\n    };\n\n    handleCallback().finally(() => {\n      clearTimeout(timeoutId);\n    });\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [searchParams, completeOAuth, navigate, status]);\n\n  return (\n    <AuthLayout\n      title={\n        status === \"loading\"\n          ? tr(\"auth.oauthCallback.completing\", \"Completing Sign In\")\n          : status === \"success\"\n            ? tr(\"auth.oauthCallback.welcome\", \"Welcome!\")\n            : tr(\"auth.oauthCallback.failed\", \"Authentication Failed\")\n      }\n      subtitle={\n        status === \"loading\"\n          ? tr(\n              \"auth.oauthCallback.pleaseWait\",\n              \"Please wait while we complete your authentication...\",\n            )\n          : status === \"success\"\n            ? tr(\n                \"auth.oauthCallback.successMsg\",\n                \"You have been successfully signed in.\",\n              )\n            : tr(\n                \"auth.oauthCallback.problemMsg\",\n                \"There was a problem signing you in.\",\n              )\n      }\n    >\n      <div className=\"flex flex-col items-center justify-center py-8 space-y-6\">\n        {status === \"loading\" && (\n          <>\n            <div className=\"relative\">\n              <div className=\"size-16 rounded-full bg-status-info-bg-subtle flex items-center justify-center\">\n                <SpinnerIcon className=\"size-8 text-text-link animate-spin\" />\n              </div>\n            </div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr(\n                \"auth.oauthCallback.verifying\",\n                \"Verifying your credentials...\",\n              )}\n            </p>\n          </>\n        )}\n\n        {status === \"success\" && (\n          <>\n            <div className=\"relative\">\n              <div className=\"size-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center\">\n                <CheckIcon className=\"size-8 text-status-success-text\" />\n              </div>\n            </div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr(\n                \"auth.oauthCallback.redirecting\",\n                \"Redirecting to your dashboard...\",\n              )}\n            </p>\n          </>\n        )}\n\n        {status === \"error\" && (\n          <>\n            <div className=\"relative\">\n              <div className=\"size-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n                <AlertIcon className=\"size-8 text-status-error-text\" />\n              </div>\n            </div>\n            <div className=\"text-center space-y-2\">\n              <p className=\"text-sm text-status-error-text font-medium\">\n                {errorMessage}\n              </p>\n              <p className=\"text-sm text-[var(--color-text-tertiary)]\">\n                {tr(\n                  \"auth.oauthCallback.tryAgainHint\",\n                  \"Please try again or use a different sign-in method.\",\n                )}\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate(\"/auth/login\", { replace: true })}\n              className=\"px-6 py-2.5 rounded-xl bg-[var(--color-action-primary-bg)] text-white font-medium hover:bg-[var(--color-action-primary-bgHover)] transition-colors\"\n            >\n              {tr(\"auth.oauthCallback.backToLogin\", \"Back to Login\")}\n            </button>\n          </>\n        )}\n      </div>\n    </AuthLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,IAAoB;CAClC,IAAM,IAAK,GAAO,EAEZ,IAAW,GAAa,EACxB,CAAC,KAAgB,GAAiB,EAClC,EAAE,qBAAkB,GAAoB,EAExC,CAAC,GAAQ,KAAa,EAC1B,UACD,EACK,CAAC,GAAc,KAAmB,EAAiB,GAAG,EAGtD,IAAkB,EAAO,GAAM;AA4ErC,QA1EA,QAAgB;AAEd,MAAI,EAAgB,QAClB;AAEF,IAAgB,UAAU;EAG1B,IAAM,IAAY,iBAAiB;AACjC,GAAI,MAAW,cACb,EAAU,QAAQ,EAClB,EACE,2EACD;KAEF,IAAM;AAsDT,UApDuB,YAAY;GAEjC,IAAM,IAAO,EAAa,IAAI,OAAO,EAC/B,IAAQ,EAAa,IAAI,QAAQ,EACjC,IAAQ,EAAa,IAAI,QAAQ,EACjC,IAAmB,EAAa,IAAI,oBAAoB;AAG9D,OAAI,GAAO;AAET,IADA,EAAU,QAAQ,EAClB,EAAgB,KAAoB,gBAAgB,IAAQ;AAC5D;;AAIF,OAAI,CAAC,KAAQ,CAAC,GAAO;AAEnB,IADA,EAAU,QAAQ,EAClB,EAAgB,iDAAiD;AACjE;;AAGF,OAAI;IAEF,IAAM,IAAS,MAAM,EAAc,GAAM,EAAM;AAE/C,IAAI,EAAO,WACT,EAAU,UAAU,EAEpB,iBAAiB;AACf,OAAS,kBAAkB,EAAE,SAAS,IAAM,CAAC;OAC5C,KAAK,IACC,EAAO,cAEhB,EAAS,oBAAoB,EAAE,SAAS,IAAM,CAAC,IAE/C,EAAU,QAAQ,EAClB,EAAgB,EAAO,SAAS,wBAAwB;YAEnD,GAAK;AAEZ,IADA,EAAU,QAAQ,EAClB,EACE,aAAe,QACX,EAAI,UACJ,2CACL;;MAIW,CAAC,cAAc;AAC7B,gBAAa,EAAU;IACvB,QAEW;AACX,gBAAa,EAAU;;IAExB;EAAC;EAAc;EAAe;EAAU;EAAO,CAAC,EAGjD,kBAAC,GAAD;EACE,OACE,MAAW,YACP,EAAG,iCAAiC,qBAAqB,GACzD,MAAW,YACT,EAAG,8BAA8B,WAAW,GAC5C,EAAG,6BAA6B,wBAAwB;EAEhE,UACE,MAAW,YACP,EACE,iCACA,uDACD,GACD,MAAW,YACT,EACE,iCACA,wCACD,GACD,EACE,iCACA,sCACD;YAGT,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,MAAW,aACV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,sCAAuC,CAAA;MAC1D,CAAA;KACF,CAAA,EACN,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,gCACA,gCACD;KACC,CAAA,CACH,EAAA,CAAA;IAGJ,MAAW,aACV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAW,WAAU,mCAAoC,CAAA;MACrD,CAAA;KACF,CAAA,EACN,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,kCACA,mCACD;KACC,CAAA,CACH,EAAA,CAAA;IAGJ,MAAW,WACV,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAW,WAAU,iCAAkC,CAAA;OACnD,CAAA;MACF,CAAA;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,mCACA,sDACD;OACC,CAAA,CACA;;KACN,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,eAAe,EAAE,SAAS,IAAM,CAAC;MACzD,WAAU;gBAET,EAAG,kCAAkC,gBAAgB;MAC/C,CAAA;KACR,EAAA,CAAA;IAED;;EACK,CAAA"}