@burdenoff/microfe-auth 2026.527.2 → 2026.527.3

package/dist/auth/pages/MagicLinkPage.js

@@ -3,18 +3,18 @@ import { useAuthStore as t } from "../store/authStore.js";
 import { AuthenticateMagicLinkDocument as n, SendMagicLinkDocument as r } from "../../generated/global-operations.js";
 import { AuthLayout as i } from "../components/AuthLayout.js";
 import { AlertIcon as a, CheckIcon as o, EmailIcon as s } from "../components/AuthIcons.js";
-import { useCallback as c, useEffect as l, useState as u } from "react";
-import { useNavigate as d, useSearchParams as f } from "react-router-dom";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { loginProfile as g } from "@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager";
-import { useMutation as _ } from "@apollo/client/react";
-import { useEventBus as v } from "@burdenoff/fe-libs/shared/events";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { useNavigate as f, useSearchParams as p } from "react-router-dom";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { loginProfile as _ } from "@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager";
+import { useMutation as v } from "@apollo/client/react";
+import { useEventBus as y } from "@burdenoff/fe-libs/shared/events";
 //#region src/auth/pages/MagicLinkPage.tsx
-function y(e) {
+function b(e) {
 	return { ...e };
 }
-function b(e) {
+function x(e) {
 	try {
 		let t = window.location.hostname.endsWith(".local.burdenoff.com") ? ".local.burdenoff.com" : void 0, n = t ? `; domain=${t}` : "", r = window.location.protocol === "https:" ? "; secure" : "", i = JSON.stringify({
 			id: e,
@@ -23,192 +23,189 @@ function b(e) {
 		document.cookie = `bf-sso=${encodeURIComponent(i)}${n}; path=/; samesite=lax${r}; max-age=86400`, document.cookie = `bf-sso-profile=${encodeURIComponent(i)}${n}; path=/; samesite=lax${r}; max-age=86400`;
 	} catch {}
 }
-function x() {
-	let { t: x } = p(), S = (e, t) => {
-		let n = x(e);
+function S() {
+	let { t: S } = m(), C = (e, t) => {
+		let n = S(e);
 		return n === e ? t : n;
-	}, C = d(), [w] = f(), T = w.get("token"), E = e(), D = v(), [O, k] = u(""), [A, j] = u(T ? "verifying" : "form"), [M, N] = u(""), [P, F] = u(!1), [I, { loading: L }] = _(r), [R] = _(n), z = c(async (e) => {
+	}, w = f(), [T] = p(), E = T.get("token"), D = e(), O = y(), [k, A] = d(""), [j, M] = d(E ? "verifying" : "form"), [N, P] = d(""), F = u(!1), [I, { loading: L }] = v(r), [R] = v(n), z = c(async (e) => {
 		let n = t.getState();
 		try {
-			j("verifying"), n.setLoading(!0);
+			M("verifying"), n.setLoading(!0);
 			let { data: t } = await R({ variables: { token: e } }), r = t.authenticateMagicLink;
 			if (!r.success || !r.user) throw Error(r.error || "Authentication failed");
 			n.setUser(r.user), n.setAuthTokens(r.token ?? "", r.refreshToken ?? ""), n.setAuthenticated(!0), n.setMfaRequired(!1);
 			let i = r.expiresIn ? Date.now() + r.expiresIn * 1e3 : void 0;
-			g(y(r.user), {
+			_(b(r.user), {
 				accessToken: r.token ?? "",
 				refreshToken: r.refreshToken ?? "",
 				expiresAt: i
-			}), b(r.user.id), D.emit("auth.signed_in", {
+			}), x(r.user.id), O.emit("auth.signed_in", {
 				userId: r.user.id,
 				tenantId: r.user.tenantId,
 				workspaceId: r.user.defaultWorkspaceId,
 				mfaEnabled: r.user.mfaEnabled,
 				emailVerified: r.user.emailVerified
-			}, { component: "MagicLinkPage" }), E.onAuthSuccess?.(r.user, r.token, r.refreshToken), j("success"), N("You have been signed in successfully!"), setTimeout(() => {
-				C("/", { replace: !0 });
+			}, { component: "MagicLinkPage" }), D.onAuthSuccess?.(r.user, r.token, r.refreshToken), M("success"), P("You have been signed in successfully!"), setTimeout(() => {
+				w("/", { replace: !0 });
 			}, 1500);
 		} catch (e) {
 			if (n.isAuthenticated && n.user) {
-				console.info("[MagicLink] Token already used but user is authenticated, redirecting..."), C("/", { replace: !0 });
+				console.info("[MagicLink] Token already used but user is authenticated, redirecting..."), w("/", { replace: !0 });
 				return;
 			}
-			j("error"), N(e instanceof Error ? e.message : "Invalid or expired magic link");
+			M("error"), P(e instanceof Error ? e.message : "Invalid or expired magic link");
 		} finally {
 			n.setLoading(!1);
 		}
 	}, [
 		R,
-		E,
 		D,
-		C
+		O,
+		w
 	]);
 	return l(() => {
-		T && !P && (F(!0), z(T));
-	}, [
-		T,
-		P,
-		z
-	]), A === "verifying" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.signingIn", "Signing you in..."),
-		subtitle: S("auth.magicLink.verifyingSubtitle", "Please wait while we verify your magic link"),
-		children: /* @__PURE__ */ h("div", {
+		E && !F.current && (F.current = !0, z(E));
+	}, [E, z]), j === "verifying" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.signingIn", "Signing you in..."),
+		subtitle: C("auth.magicLink.verifyingSubtitle", "Please wait while we verify your magic link"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
-			children: [/* @__PURE__ */ m("div", { className: "animate-spin rounded-full size-12 border-b-2 border-[var(--color-accent-primary)]" }), /* @__PURE__ */ m("p", {
+			children: [/* @__PURE__ */ h("div", { className: "animate-spin rounded-full size-12 border-b-2 border-[var(--color-accent-primary)]" }), /* @__PURE__ */ h("p", {
 				className: "mt-4 text-[var(--color-text-secondary)]",
-				children: S("auth.magicLink.verifying", "Verifying magic link...")
+				children: C("auth.magicLink.verifying", "Verifying magic link...")
 			})]
 		})
-	}) : A === "success" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.welcomeBack", "Welcome back!"),
-		subtitle: S("auth.magicLink.signedInSuccess", "You have been signed in successfully"),
-		children: /* @__PURE__ */ h("div", {
+	}) : j === "success" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.welcomeBack", "Welcome back!"),
+		subtitle: C("auth.magicLink.signedInSuccess", "You have been signed in successfully"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
 			children: [
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ m(o, { className: "size-8 text-[var(--color-status-success)]" })
+					children: /* @__PURE__ */ h(o, { className: "size-8 text-[var(--color-status-success)]" })
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-text-primary)] text-center mb-4",
-					children: M
+					children: N
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-sm text-[var(--color-text-secondary)]",
-					children: S("auth.magicLink.redirecting", "Redirecting to application...")
+					children: C("auth.magicLink.redirecting", "Redirecting to application...")
 				})
 			]
 		})
-	}) : A === "error" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.oops", "Oops!"),
-		subtitle: S("auth.magicLink.somethingWrong", "Something went wrong"),
-		children: /* @__PURE__ */ h("div", {
+	}) : j === "error" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.oops", "Oops!"),
+		subtitle: C("auth.magicLink.somethingWrong", "Something went wrong"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
 			children: [
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "size-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ m(a, { className: "size-8 text-[var(--color-status-error)]" })
+					children: /* @__PURE__ */ h(a, { className: "size-8 text-[var(--color-status-error)]" })
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-status-error)] text-center mb-4",
-					children: M
+					children: N
 				}),
-				/* @__PURE__ */ m("button", {
+				/* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: () => {
-						j("form"), N("");
+						M("form"), P("");
 					},
 					className: "px-4 py-2 rounded-lg bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)]",
-					children: S("auth.magicLink.tryAgain", "Try again")
+					children: C("auth.magicLink.tryAgain", "Try again")
 				})
 			]
 		})
-	}) : A === "sent" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.checkEmail", "Check your email"),
-		subtitle: S("auth.magicLink.sentMagicLink", "We've sent you a magic link"),
-		children: /* @__PURE__ */ h("div", {
+	}) : j === "sent" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.checkEmail", "Check your email"),
+		subtitle: C("auth.magicLink.sentMagicLink", "We've sent you a magic link"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
 			children: [
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ m(s, { className: "size-8 text-[var(--color-status-success)]" })
+					children: /* @__PURE__ */ h(s, { className: "size-8 text-[var(--color-status-success)]" })
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-text-primary)] text-center mb-2",
-					children: S("auth.magicLink.sentTo", "We've sent a magic link to:")
+					children: C("auth.magicLink.sentTo", "We've sent a magic link to:")
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-accent-primary)] font-medium mb-4",
-					children: O
+					children: k
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-sm text-[var(--color-text-secondary)] text-center mb-6",
-					children: S("auth.magicLink.linkExpires", "Click the link in the email to sign in. The link expires in 24 hours.")
+					children: C("auth.magicLink.linkExpires", "Click the link in the email to sign in. The link expires in 24 hours.")
 				}),
-				/* @__PURE__ */ m("button", {
+				/* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: () => {
-						j("form"), N("");
+						M("form"), P("");
 					},
 					className: "text-[var(--color-accent-primary)] hover:underline",
-					children: S("auth.magicLink.differentEmail", "Use a different email")
+					children: C("auth.magicLink.differentEmail", "Use a different email")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.title", "Sign in with Magic Link"),
-		subtitle: S("auth.magicLink.subtitle", "No password needed - we'll email you a link"),
-		children: /* @__PURE__ */ h("form", {
+	}) : /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.title", "Sign in with Magic Link"),
+		subtitle: C("auth.magicLink.subtitle", "No password needed - we'll email you a link"),
+		children: /* @__PURE__ */ g("form", {
 			onSubmit: async (e) => {
-				if (e.preventDefault(), !O) {
-					N(S("auth.magicLink.enterEmail", "Please enter your email address"));
+				if (e.preventDefault(), !k) {
+					P(C("auth.magicLink.enterEmail", "Please enter your email address"));
 					return;
 				}
 				try {
-					let { data: e } = await I({ variables: { email: O } });
-					e.sendMagicLink.success ? (j("sent"), N(e.sendMagicLink.message || "Magic link sent! Check your email.")) : N(e.sendMagicLink.message || "Failed to send magic link");
+					let { data: e } = await I({ variables: { email: k } });
+					e.sendMagicLink.success ? (M("sent"), P(e.sendMagicLink.message || "Magic link sent! Check your email.")) : P(e.sendMagicLink.message || "Failed to send magic link");
 				} catch (e) {
-					N(e instanceof Error ? e.message : "Failed to send magic link");
+					P(e instanceof Error ? e.message : "Failed to send magic link");
 				}
 			},
 			className: "space-y-6",
 			children: [
-				/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+				/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
 					htmlFor: "email",
 					className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-					children: S("auth.magicLink.emailLabel", "Email address")
-				}), /* @__PURE__ */ h("div", {
+					children: C("auth.magicLink.emailLabel", "Email address")
+				}), /* @__PURE__ */ g("div", {
 					className: "relative",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none",
-						children: /* @__PURE__ */ m(s, { className: "size-5 text-[var(--color-text-secondary)]" })
-					}), /* @__PURE__ */ m("input", {
+						children: /* @__PURE__ */ h(s, { className: "size-5 text-[var(--color-text-secondary)]" })
+					}), /* @__PURE__ */ h("input", {
 						id: "email",
 						type: "email",
-						value: O,
-						onChange: (e) => k(e.target.value),
+						value: k,
+						onChange: (e) => A(e.target.value),
 						placeholder: "you@example.com",
+						"aria-label": C("auth.magicLink.emailLabel", "Email address"),
 						className: "block w-full pl-[3.25rem] pr-4 py-3 border border-[var(--color-border-primary)] rounded-lg bg-[var(--color-background-base)] text-[var(--color-text-primary)] placeholder-[var(--color-text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:border-transparent",
 						required: !0
 					})]
 				})] }),
-				M && /* @__PURE__ */ m("p", {
+				N && /* @__PURE__ */ h("p", {
 					className: "text-sm text-[var(--color-status-error)]",
-					children: M
+					children: N
 				}),
-				/* @__PURE__ */ m("button", {
+				/* @__PURE__ */ h("button", {
 					type: "submit",
 					disabled: L,
 					className: "w-full py-3 px-4 rounded-lg bg-[var(--color-accent-primary)] text-white font-medium hover:bg-[var(--color-accent-primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-					children: L ? S("auth.magicLink.sending", "Sending...") : S("auth.magicLink.sendButton", "Send Magic Link")
+					children: L ? C("auth.magicLink.sending", "Sending...") : C("auth.magicLink.sendButton", "Send Magic Link")
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "text-center",
-					children: /* @__PURE__ */ m("button", {
+					children: /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: () => C("/auth/login"),
+						onClick: () => w("/auth/login"),
 						className: "text-sm text-[var(--color-accent-primary)] hover:underline",
-						children: S("auth.magicLink.passwordInstead", "Sign in with password instead")
+						children: C("auth.magicLink.passwordInstead", "Sign in with password instead")
 					})
 				})
 			]
@@ -216,6 +213,6 @@ function x() {
 	});
 }
 //#endregion
-export { x as MagicLinkPage };
+export { S as MagicLinkPage };
 
 //# sourceMappingURL=MagicLinkPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MagicLinkPage.js","names":[],"sources":["../../../src/auth/pages/MagicLinkPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\nimport { useMutation } from \"@apollo/client/react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport {\n  loginProfile,\n  type ProfileUser,\n} from \"@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { EmailIcon, CheckIcon, AlertIcon } from \"../components/AuthIcons\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { useAuth } from \"../providers/AuthProvider\";\nimport type { MagicLinkSendResult, AuthResult, User } from \"../types\";\n\nfunction toProfileUser(user: User): ProfileUser {\n  return { ...user };\n}\n\nfunction setShellSsoCookie(userId: string): void {\n  try {\n    const hostname = window.location.hostname;\n    const domain = hostname.endsWith(\".local.burdenoff.com\")\n      ? \".local.burdenoff.com\"\n      : undefined;\n    const domainPart = domain ? `; domain=${domain}` : \"\";\n    const securePart = window.location.protocol === \"https:\" ? \"; secure\" : \"\";\n    const ssoValue = JSON.stringify({\n      id: userId,\n      origin: window.location.origin,\n    });\n    document.cookie = `bf-sso=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n    document.cookie = `bf-sso-profile=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n  } catch {\n    // Best effort only.\n  }\n}\n\nimport {\n  SendMagicLinkDocument,\n  AuthenticateMagicLinkDocument,\n} from \"../../generated/global-operations\";\n// Response types for GraphQL mutations\ninterface SendMagicLinkResponse {\n  sendMagicLink: MagicLinkSendResult;\n}\n\ninterface AuthenticateMagicLinkResponse {\n  authenticateMagicLink: AuthResult;\n}\n\n// GraphQL Operations\n\ntype PageStatus = \"form\" | \"sent\" | \"verifying\" | \"success\" | \"error\";\n\n/**\n * Magic Link authentication page\n * Supports both sending magic links and verifying them via token\n */\nexport function MagicLinkPage() {\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 token = searchParams.get(\"token\");\n  const context = useAuth();\n  const eventBus = useEventBus();\n\n  const [email, setEmail] = useState(\"\");\n  const [status, setStatus] = useState<PageStatus>(\n    token ? \"verifying\" : \"form\",\n  );\n  const [message, setMessage] = useState(\"\");\n  const [hasVerified, setHasVerified] = useState(false);\n\n  const [sendMagicLink, { loading: sendLoading }] =\n    useMutation<SendMagicLinkResponse>(SendMagicLinkDocument);\n  const [authenticateMagicLink] = useMutation<AuthenticateMagicLinkResponse>(\n    AuthenticateMagicLinkDocument,\n  );\n\n  const handleVerifyToken = useCallback(\n    async (tokenValue: string) => {\n      const store = useAuthStore.getState();\n\n      try {\n        setStatus(\"verifying\");\n        store.setLoading(true);\n\n        const { data } = await authenticateMagicLink({\n          variables: { token: tokenValue },\n        });\n        const result = data!.authenticateMagicLink;\n\n        if (!result.success || !result.user) {\n          throw new Error(result.error || \"Authentication failed\");\n        }\n\n        store.setUser(result.user);\n        store.setAuthTokens(result.token ?? \"\", result.refreshToken ?? \"\");\n        store.setAuthenticated(true);\n        store.setMfaRequired(false);\n\n        const expiresAt = result.expiresIn\n          ? Date.now() + result.expiresIn * 1000\n          : undefined;\n        loginProfile(toProfileUser(result.user), {\n          accessToken: result.token ?? \"\",\n          refreshToken: result.refreshToken ?? \"\",\n          expiresAt,\n        });\n        setShellSsoCookie(result.user.id);\n\n        eventBus.emit(\n          \"auth.signed_in\",\n          {\n            userId: result.user.id,\n            tenantId: result.user.tenantId,\n            workspaceId: result.user.defaultWorkspaceId,\n            mfaEnabled: result.user.mfaEnabled,\n            emailVerified: result.user.emailVerified,\n          },\n          { component: \"MagicLinkPage\" },\n        );\n\n        context.onAuthSuccess?.(result.user, result.token, result.refreshToken);\n\n        setStatus(\"success\");\n        setMessage(\"You have been signed in successfully!\");\n\n        // Redirect to dashboard after successful authentication\n        setTimeout(() => {\n          navigate(\"/\", { replace: true });\n        }, 1500);\n      } catch (err) {\n        // If user is already authenticated (token was already used), redirect to dashboard\n        if (store.isAuthenticated && store.user) {\n          console.info(\n            \"[MagicLink] Token already used but user is authenticated, redirecting...\",\n          );\n          navigate(\"/\", { replace: true });\n          return;\n        }\n\n        setStatus(\"error\");\n        const errorMessage =\n          err instanceof Error ? err.message : \"Invalid or expired magic link\";\n        setMessage(errorMessage);\n      } finally {\n        store.setLoading(false);\n      }\n    },\n    [authenticateMagicLink, context, eventBus, navigate],\n  );\n\n  // Handle token verification on page load (only once)\n  useEffect(() => {\n    if (token && !hasVerified) {\n      setHasVerified(true);\n      handleVerifyToken(token);\n    }\n  }, [token, hasVerified, handleVerifyToken]);\n\n  const handleSendMagicLink = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!email) {\n      setMessage(\n        tr(\"auth.magicLink.enterEmail\", \"Please enter your email address\"),\n      );\n      return;\n    }\n\n    try {\n      const { data } = await sendMagicLink({ variables: { email } });\n\n      if (data!.sendMagicLink.success) {\n        setStatus(\"sent\");\n        setMessage(\n          data!.sendMagicLink.message || \"Magic link sent! Check your email.\",\n        );\n      } else {\n        setMessage(data!.sendMagicLink.message || \"Failed to send magic link\");\n      }\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : \"Failed to send magic link\";\n      setMessage(errorMessage);\n    }\n  };\n\n  // Verifying state\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.signingIn\", \"Signing you in...\")}\n        subtitle={tr(\n          \"auth.magicLink.verifyingSubtitle\",\n          \"Please wait while we verify your magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"animate-spin rounded-full size-12 border-b-2 border-[var(--color-accent-primary)]\" />\n          <p className=\"mt-4 text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.verifying\", \"Verifying magic link...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Success state\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.welcomeBack\", \"Welcome back!\")}\n        subtitle={tr(\n          \"auth.magicLink.signedInSuccess\",\n          \"You have been signed in successfully\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <CheckIcon className=\"size-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-4\">\n            {message}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.redirecting\", \"Redirecting to application...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  if (status === \"error\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.oops\", \"Oops!\")}\n        subtitle={tr(\"auth.magicLink.somethingWrong\", \"Something went wrong\")}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4\">\n            <AlertIcon className=\"size-8 text-[var(--color-status-error)]\" />\n          </div>\n          <p className=\"text-[var(--color-status-error)] text-center mb-4\">\n            {message}\n          </p>\n          <button type=\"button\"\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"px-4 py-2 rounded-lg bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)]\"\n          >\n            {tr(\"auth.magicLink.tryAgain\", \"Try again\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Sent state\n  if (status === \"sent\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.checkEmail\", \"Check your email\")}\n        subtitle={tr(\n          \"auth.magicLink.sentMagicLink\",\n          \"We've sent you a magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <EmailIcon className=\"size-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-2\">\n            {tr(\"auth.magicLink.sentTo\", \"We've sent a magic link to:\")}\n          </p>\n          <p className=\"text-[var(--color-accent-primary)] font-medium mb-4\">\n            {email}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)] text-center mb-6\">\n            {tr(\n              \"auth.magicLink.linkExpires\",\n              \"Click the link in the email to sign in. The link expires in 24 hours.\",\n            )}\n          </p>\n          <button type=\"button\"\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\"auth.magicLink.differentEmail\", \"Use a different email\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Form state\n  return (\n    <AuthLayout\n      title={tr(\"auth.magicLink.title\", \"Sign in with Magic Link\")}\n      subtitle={tr(\n        \"auth.magicLink.subtitle\",\n        \"No password needed - we'll email you a link\",\n      )}\n    >\n      <form onSubmit={handleSendMagicLink} className=\"space-y-6\">\n        <div>\n          <label\n            htmlFor=\"email\"\n            className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n          >\n            {tr(\"auth.magicLink.emailLabel\", \"Email address\")}\n          </label>\n          <div className=\"relative\">\n            <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n              <EmailIcon className=\"size-5 text-[var(--color-text-secondary)]\" />\n            </div>\n            <input\n              id=\"email\"\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              placeholder=\"you@example.com\"\n              className=\"block w-full pl-[3.25rem] pr-4 py-3 border border-[var(--color-border-primary)] rounded-lg bg-[var(--color-background-base)] text-[var(--color-text-primary)] placeholder-[var(--color-text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:border-transparent\"\n              required\n            />\n          </div>\n        </div>\n\n        {message && (\n          <p className=\"text-sm text-[var(--color-status-error)]\">{message}</p>\n        )}\n\n        <button\n          type=\"submit\"\n          disabled={sendLoading}\n          className=\"w-full py-3 px-4 rounded-lg bg-[var(--color-accent-primary)] text-white font-medium hover:bg-[var(--color-accent-primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n        >\n          {sendLoading\n            ? tr(\"auth.magicLink.sending\", \"Sending...\")\n            : tr(\"auth.magicLink.sendButton\", \"Send Magic Link\")}\n        </button>\n\n        <div className=\"text-center\">\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/login\")}\n            className=\"text-sm text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\n              \"auth.magicLink.passwordInstead\",\n              \"Sign in with password instead\",\n            )}\n          </button>\n        </div>\n      </form>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MagicLinkPage.js","names":[],"sources":["../../../src/auth/pages/MagicLinkPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\nimport { useMutation } from \"@apollo/client/react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport {\n  loginProfile,\n  type ProfileUser,\n} from \"@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { EmailIcon, CheckIcon, AlertIcon } from \"../components/AuthIcons\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { useAuth } from \"../providers/AuthProvider\";\nimport type { MagicLinkSendResult, AuthResult, User } from \"../types\";\n\nfunction toProfileUser(user: User): ProfileUser {\n  return { ...user };\n}\n\nfunction setShellSsoCookie(userId: string): void {\n  try {\n    const hostname = window.location.hostname;\n    const domain = hostname.endsWith(\".local.burdenoff.com\")\n      ? \".local.burdenoff.com\"\n      : undefined;\n    const domainPart = domain ? `; domain=${domain}` : \"\";\n    const securePart = window.location.protocol === \"https:\" ? \"; secure\" : \"\";\n    const ssoValue = JSON.stringify({\n      id: userId,\n      origin: window.location.origin,\n    });\n    document.cookie = `bf-sso=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n    document.cookie = `bf-sso-profile=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n  } catch {\n    // Best effort only.\n  }\n}\n\nimport {\n  SendMagicLinkDocument,\n  AuthenticateMagicLinkDocument,\n} from \"../../generated/global-operations\";\n// Response types for GraphQL mutations\ninterface SendMagicLinkResponse {\n  sendMagicLink: MagicLinkSendResult;\n}\n\ninterface AuthenticateMagicLinkResponse {\n  authenticateMagicLink: AuthResult;\n}\n\n// GraphQL Operations\n\ntype PageStatus = \"form\" | \"sent\" | \"verifying\" | \"success\" | \"error\";\n\n/**\n * Magic Link authentication page\n * Supports both sending magic links and verifying them via token\n */\nexport function MagicLinkPage() {\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 token = searchParams.get(\"token\");\n  const context = useAuth();\n  const eventBus = useEventBus();\n\n  const [email, setEmail] = useState(\"\");\n  const [status, setStatus] = useState<PageStatus>(\n    token ? \"verifying\" : \"form\",\n  );\n  const [message, setMessage] = useState(\"\");\n  const hasVerifiedRef = useRef(false);\n\n  const [sendMagicLink, { loading: sendLoading }] =\n    useMutation<SendMagicLinkResponse>(SendMagicLinkDocument);\n  const [authenticateMagicLink] = useMutation<AuthenticateMagicLinkResponse>(\n    AuthenticateMagicLinkDocument,\n  );\n\n  const handleVerifyToken = useCallback(\n    async (tokenValue: string) => {\n      const store = useAuthStore.getState();\n\n      try {\n        setStatus(\"verifying\");\n        store.setLoading(true);\n\n        const { data } = await authenticateMagicLink({\n          variables: { token: tokenValue },\n        });\n        const result = data!.authenticateMagicLink;\n\n        if (!result.success || !result.user) {\n          throw new Error(result.error || \"Authentication failed\");\n        }\n\n        store.setUser(result.user);\n        store.setAuthTokens(result.token ?? \"\", result.refreshToken ?? \"\");\n        store.setAuthenticated(true);\n        store.setMfaRequired(false);\n\n        const expiresAt = result.expiresIn\n          ? Date.now() + result.expiresIn * 1000\n          : undefined;\n        loginProfile(toProfileUser(result.user), {\n          accessToken: result.token ?? \"\",\n          refreshToken: result.refreshToken ?? \"\",\n          expiresAt,\n        });\n        setShellSsoCookie(result.user.id);\n\n        eventBus.emit(\n          \"auth.signed_in\",\n          {\n            userId: result.user.id,\n            tenantId: result.user.tenantId,\n            workspaceId: result.user.defaultWorkspaceId,\n            mfaEnabled: result.user.mfaEnabled,\n            emailVerified: result.user.emailVerified,\n          },\n          { component: \"MagicLinkPage\" },\n        );\n\n        context.onAuthSuccess?.(result.user, result.token, result.refreshToken);\n\n        setStatus(\"success\");\n        setMessage(\"You have been signed in successfully!\");\n\n        // Redirect to dashboard after successful authentication\n        setTimeout(() => {\n          navigate(\"/\", { replace: true });\n        }, 1500);\n      } catch (err) {\n        // If user is already authenticated (token was already used), redirect to dashboard\n        if (store.isAuthenticated && store.user) {\n          console.info(\n            \"[MagicLink] Token already used but user is authenticated, redirecting...\",\n          );\n          navigate(\"/\", { replace: true });\n          return;\n        }\n\n        setStatus(\"error\");\n        const errorMessage =\n          err instanceof Error ? err.message : \"Invalid or expired magic link\";\n        setMessage(errorMessage);\n      } finally {\n        store.setLoading(false);\n      }\n    },\n    [authenticateMagicLink, context, eventBus, navigate],\n  );\n\n  // Handle token verification on page load (only once)\n  useEffect(() => {\n    if (token && !hasVerifiedRef.current) {\n      hasVerifiedRef.current = true;\n      handleVerifyToken(token);\n    }\n  }, [token, handleVerifyToken]);\n\n  const handleSendMagicLink = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!email) {\n      setMessage(\n        tr(\"auth.magicLink.enterEmail\", \"Please enter your email address\"),\n      );\n      return;\n    }\n\n    try {\n      const { data } = await sendMagicLink({ variables: { email } });\n\n      if (data!.sendMagicLink.success) {\n        setStatus(\"sent\");\n        setMessage(\n          data!.sendMagicLink.message || \"Magic link sent! Check your email.\",\n        );\n      } else {\n        setMessage(data!.sendMagicLink.message || \"Failed to send magic link\");\n      }\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : \"Failed to send magic link\";\n      setMessage(errorMessage);\n    }\n  };\n\n  // Verifying state\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.signingIn\", \"Signing you in...\")}\n        subtitle={tr(\n          \"auth.magicLink.verifyingSubtitle\",\n          \"Please wait while we verify your magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"animate-spin rounded-full size-12 border-b-2 border-[var(--color-accent-primary)]\" />\n          <p className=\"mt-4 text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.verifying\", \"Verifying magic link...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Success state\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.welcomeBack\", \"Welcome back!\")}\n        subtitle={tr(\n          \"auth.magicLink.signedInSuccess\",\n          \"You have been signed in successfully\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <CheckIcon className=\"size-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-4\">\n            {message}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.redirecting\", \"Redirecting to application...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  if (status === \"error\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.oops\", \"Oops!\")}\n        subtitle={tr(\"auth.magicLink.somethingWrong\", \"Something went wrong\")}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4\">\n            <AlertIcon className=\"size-8 text-[var(--color-status-error)]\" />\n          </div>\n          <p className=\"text-[var(--color-status-error)] text-center mb-4\">\n            {message}\n          </p>\n          <button type=\"button\"\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"px-4 py-2 rounded-lg bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)]\"\n          >\n            {tr(\"auth.magicLink.tryAgain\", \"Try again\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Sent state\n  if (status === \"sent\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.checkEmail\", \"Check your email\")}\n        subtitle={tr(\n          \"auth.magicLink.sentMagicLink\",\n          \"We've sent you a magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <EmailIcon className=\"size-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-2\">\n            {tr(\"auth.magicLink.sentTo\", \"We've sent a magic link to:\")}\n          </p>\n          <p className=\"text-[var(--color-accent-primary)] font-medium mb-4\">\n            {email}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)] text-center mb-6\">\n            {tr(\n              \"auth.magicLink.linkExpires\",\n              \"Click the link in the email to sign in. The link expires in 24 hours.\",\n            )}\n          </p>\n          <button type=\"button\"\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\"auth.magicLink.differentEmail\", \"Use a different email\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Form state\n  return (\n    <AuthLayout\n      title={tr(\"auth.magicLink.title\", \"Sign in with Magic Link\")}\n      subtitle={tr(\n        \"auth.magicLink.subtitle\",\n        \"No password needed - we'll email you a link\",\n      )}\n    >\n      <form onSubmit={handleSendMagicLink} className=\"space-y-6\">\n        <div>\n          <label\n            htmlFor=\"email\"\n            className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n          >\n            {tr(\"auth.magicLink.emailLabel\", \"Email address\")}\n          </label>\n          <div className=\"relative\">\n            <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n              <EmailIcon className=\"size-5 text-[var(--color-text-secondary)]\" />\n            </div>\n            <input\n              id=\"email\"\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              placeholder=\"you@example.com\"\n              aria-label={tr(\"auth.magicLink.emailLabel\", \"Email address\")}\n              className=\"block w-full pl-[3.25rem] pr-4 py-3 border border-[var(--color-border-primary)] rounded-lg bg-[var(--color-background-base)] text-[var(--color-text-primary)] placeholder-[var(--color-text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:border-transparent\"\n              required\n            />\n          </div>\n        </div>\n\n        {message && (\n          <p className=\"text-sm text-[var(--color-status-error)]\">{message}</p>\n        )}\n\n        <button\n          type=\"submit\"\n          disabled={sendLoading}\n          className=\"w-full py-3 px-4 rounded-lg bg-[var(--color-accent-primary)] text-white font-medium hover:bg-[var(--color-accent-primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n        >\n          {sendLoading\n            ? tr(\"auth.magicLink.sending\", \"Sending...\")\n            : tr(\"auth.magicLink.sendButton\", \"Send Magic Link\")}\n        </button>\n\n        <div className=\"text-center\">\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/login\")}\n            className=\"text-sm text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\n              \"auth.magicLink.passwordInstead\",\n              \"Sign in with password instead\",\n            )}\n          </button>\n        </div>\n      </form>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/MfaVerifyPage.js

@@ -141,6 +141,7 @@ function _() {
 								inputMode: "numeric",
 								autoComplete: "one-time-code",
 								maxLength: 1,
+								"aria-label": v("auth.mfaVerify.digitAriaLabel", "Verification code digit") + ` ${t + 1}`,
 								value: e,
 								onChange: (e) => A(t, e.target.value),
 								onKeyDown: (e) => j(t, e),

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-dom\";\nimport { useMfaOperations } from \"../hooks/useMfaOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\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        setError(\n          result.error ||\n            tr(\"auth.mfaVerify.invalidCode\", \"Invalid verification code\"),\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      <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                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          className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 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 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 { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useMfaOperations } from \"../hooks/useMfaOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\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        setError(\n          result.error ||\n            tr(\"auth.mfaVerify.invalidCode\", \"Invalid verification code\"),\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      <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={tr(\"auth.mfaVerify.digitAriaLabel\", \"Verification code digit\") + ` ${index + 1}`}\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          className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 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 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

@@ -40,7 +40,12 @@ function m() {
 		}), () => {
 			clearTimeout(e);
 		};
-	}, []), /* @__PURE__ */ f(t, {
+	}, [
+		_,
+		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."),
 		children: /* @__PURE__ */ p("div", {

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-dom\";\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\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 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 { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\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 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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"}

package/dist/auth/pages/PasswordResetPage.js

@@ -188,6 +188,7 @@ function y() {
 									type: F ? "text" : "password",
 									required: !0,
 									"aria-required": "true",
+									"aria-label": x("auth.passwordReset.newPasswordLabel", "New Password"),
 									autoComplete: "new-password",
 									value: j,
 									onChange: (e) => M(e.target.value),
@@ -254,6 +255,7 @@ function y() {
 									type: L ? "text" : "password",
 									required: !0,
 									"aria-required": "true",
+									"aria-label": x("auth.passwordReset.confirmPasswordLabel", "Confirm Password"),
 									autoComplete: "new-password",
 									"aria-invalid": N.length > 0 && j !== N,
 									value: N,
@@ -328,6 +330,7 @@ function y() {
 							type: "email",
 							required: !0,
 							"aria-required": "true",
+							"aria-label": x("auth.passwordReset.emailLabel", "Email address"),
 							autoComplete: "email",
 							value: k,
 							onChange: (e) => A(e.target.value),