@stackframe/tanstack-start 0.0.1 → 2.8.92

package/dist/components-page/error-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-page.js","names":["PredefinedMessageCard","KnownError","KnownErrors","MessageCard","Typography","KnownErrorMessageCard"],"sources":["../../src/components-page/error-page.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { KnownError, KnownErrors } from \"@stackframe/stack-shared\";\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp } from \"..\";\nimport { KnownErrorMessageCard } from \"../components/message-cards/known-error-message-card\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { useTranslation } from \"../lib/translations\";\n\n\nexport function ErrorPage(props: { fullPage?: boolean, searchParams: Record<string, string> }) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const errorCode = props.searchParams.errorCode;\n  const message = props.searchParams.message;\n  const details = props.searchParams.details;\n\n  const unknownErrorCard = <PredefinedMessageCard type='unknownError' fullPage={!!props.fullPage} />;\n\n  if (!errorCode || !message) {\n    return unknownErrorCard;\n  }\n\n  let error;\n  try {\n    const detailJson = details ? JSON.parse(details) : {};\n    error = KnownError.fromJson({ code: errorCode, message, details: detailJson });\n  } catch (e) {\n    return unknownErrorCard;\n  }\n\n  if (KnownErrors.OAuthConnectionAlreadyConnectedToAnotherUser.isInstance(error)) {\n    // TODO: add \"Connect a different account\" button\n    return (\n      <MessageCard\n        title={t(\"Failed to connect account\")}\n        fullPage={!!props.fullPage}\n        primaryButtonText={t(\"Go Home\")}\n        primaryAction={() => stackApp.redirectToHome()}\n      >\n        <Typography>\n          {t(\"This account is already connected to another user. Please connect a different account.\")}\n        </Typography>\n      </MessageCard>\n    );\n  }\n\n  if (KnownErrors.UserAlreadyConnectedToAnotherOAuthConnection.isInstance(error)) {\n    // TODO: add \"Connect again\" button\n    return (\n      <MessageCard\n        title={t(\"Failed to connect account\")}\n        fullPage={!!props.fullPage}\n        primaryButtonText={t(\"Go Home\")}\n        primaryAction={() => stackApp.redirectToHome()}\n      >\n        <Typography>\n          {t(\"The user is already connected to another OAuth account. Did you maybe selected the wrong account on the OAuth provider page?\")}\n        </Typography>\n      </MessageCard>\n    );\n  }\n\n  if (KnownErrors.OAuthProviderAccessDenied.isInstance(error)) {\n    return (\n      <MessageCard\n        title={t(\"OAuth provider access denied\")}\n        fullPage={!!props.fullPage}\n        primaryButtonText={t(\"Sign in again\")}\n        primaryAction={() => stackApp.redirectToSignIn()}\n        secondaryButtonText={t(\"Go Home\")}\n        secondaryAction={() => stackApp.redirectToHome()}\n      >\n        <Typography>\n          {t(\"The sign-in operation has been cancelled or denied. Please try again.\")}\n        </Typography>\n      </MessageCard>\n    );\n  }\n\n  if (KnownErrors.OAuthProviderTemporarilyUnavailable.isInstance(error)) {\n    return (\n      <MessageCard\n        title={t(\"OAuth provider is temporarily unavailable\")}\n        fullPage={!!props.fullPage}\n        primaryButtonText={t(\"Try again\")}\n        primaryAction={() => stackApp.redirectToSignIn()}\n        secondaryButtonText={t(\"Go Home\")}\n        secondaryAction={() => stackApp.redirectToHome()}\n      >\n        <Typography>\n          {t(\"The OAuth provider could not complete sign-in right now. Please try again in a moment.\")}\n        </Typography>\n      </MessageCard>\n    );\n  }\n\n  return <KnownErrorMessageCard error={error} fullPage={!!props.fullPage} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,UAAU,OAAqE;CAC7F,MAAM,EAAE,kDAAsB;CAC9B,MAAM,yCAAwB;CAC9B,MAAM,YAAY,MAAM,aAAa;CACrC,MAAM,UAAU,MAAM,aAAa;CACnC,MAAM,UAAU,MAAM,aAAa;CAEnC,MAAM,mBAAmB,2CAACA;EAAsB,MAAK;EAAe,UAAU,CAAC,CAAC,MAAM;GAAY;AAElG,KAAI,CAAC,aAAa,CAAC,QACjB,QAAO;CAGT,IAAI;AACJ,KAAI;EACF,MAAM,aAAa,UAAU,KAAK,MAAM,QAAQ,GAAG,EAAE;AACrD,UAAQC,oCAAW,SAAS;GAAE,MAAM;GAAW;GAAS,SAAS;GAAY,CAAC;UACvE,GAAG;AACV,SAAO;;AAGT,KAAIC,qCAAY,6CAA6C,WAAW,MAAM,CAE5E,QACE,2CAACC;EACC,OAAO,EAAE,4BAA4B;EACrC,UAAU,CAAC,CAAC,MAAM;EAClB,mBAAmB,EAAE,UAAU;EAC/B,qBAAqB,SAAS,gBAAgB;YAE9C,2CAACC,6CACE,EAAE,yFAAyF,GACjF;GACD;AAIlB,KAAIF,qCAAY,6CAA6C,WAAW,MAAM,CAE5E,QACE,2CAACC;EACC,OAAO,EAAE,4BAA4B;EACrC,UAAU,CAAC,CAAC,MAAM;EAClB,mBAAmB,EAAE,UAAU;EAC/B,qBAAqB,SAAS,gBAAgB;YAE9C,2CAACC,6CACE,EAAE,+HAA+H,GACvH;GACD;AAIlB,KAAIF,qCAAY,0BAA0B,WAAW,MAAM,CACzD,QACE,2CAACC;EACC,OAAO,EAAE,+BAA+B;EACxC,UAAU,CAAC,CAAC,MAAM;EAClB,mBAAmB,EAAE,gBAAgB;EACrC,qBAAqB,SAAS,kBAAkB;EAChD,qBAAqB,EAAE,UAAU;EACjC,uBAAuB,SAAS,gBAAgB;YAEhD,2CAACC,6CACE,EAAE,wEAAwE,GAChE;GACD;AAIlB,KAAIF,qCAAY,oCAAoC,WAAW,MAAM,CACnE,QACE,2CAACC;EACC,OAAO,EAAE,4CAA4C;EACrD,UAAU,CAAC,CAAC,MAAM;EAClB,mBAAmB,EAAE,YAAY;EACjC,qBAAqB,SAAS,kBAAkB;EAChD,qBAAqB,EAAE,UAAU;EACjC,uBAAuB,SAAS,gBAAgB;YAEhD,2CAACC,6CACE,EAAE,yFAAyF,GACjF;GACD;AAIlB,QAAO,2CAACC;EAA6B;EAAO,UAAU,CAAC,CAAC,MAAM;GAAY"}

package/dist/components-page/forgot-password.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/forgot-password.d.ts
+declare function ForgotPasswordForm({
+  onSent
+}: {
+  onSent?: () => void;
+}): react_jsx_runtime0.JSX.Element;
+declare function ForgotPassword(props: {
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ForgotPassword, ForgotPasswordForm };
+//# sourceMappingURL=forgot-password.d.ts.map

package/dist/components-page/forgot-password.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forgot-password.d.ts","names":[],"sources":["../../src/components-page/forgot-password.tsx"],"mappings":";;;iBAqBgB,kBAAA,CAAA;EAAqB;AAAA;EAAY,MAAA;AAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgDtD,cAAA,CAAe,KAAA;EAAS,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/forgot-password.js

@@ -0,0 +1,103 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _hookform_resolvers_yup = require("@hookform/resolvers/yup");
+let _stackframe_stack_shared_dist_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let react_hook_form = require("react-hook-form");
+let ___index_js = require("../index.js");
+let ___components_elements_form_warning_js = require("../components/elements/form-warning.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let ___components_elements_maybe_full_page_js = require("../components/elements/maybe-full-page.js");
+let ___components_link_js = require("../components/link.js");
+let ___components_message_cards_predefined_message_card_js = require("../components/message-cards/predefined-message-card.js");
+
+//#region src/components-page/forgot-password.tsx
+function ForgotPasswordForm({ onSent }) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const { register, handleSubmit, formState: { errors }, clearErrors } = (0, react_hook_form.useForm)({ resolver: (0, _hookform_resolvers_yup.yupResolver)((0, _stackframe_stack_shared_dist_schema_fields.yupObject)({ email: (0, _stackframe_stack_shared_dist_schema_fields.strictEmailSchema)(t("Please enter a valid email")).defined().nonEmpty(t("Please enter your email")) })) });
+	const stackApp = (0, ___index_js.useStackApp)();
+	const [loading, setLoading] = (0, react.useState)(false);
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const { email } = data;
+			await stackApp.sendForgotPasswordEmail(email);
+			onSent?.();
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "flex flex-col items-stretch stack-scope",
+		onSubmit: (e) => (0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+		noValidate: true,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Label, {
+				htmlFor: "email",
+				className: "mb-1",
+				children: t("Your Email")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Input, {
+				id: "email",
+				type: "email",
+				autoComplete: "email",
+				...register("email"),
+				onChange: () => clearErrors("email")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_form_warning_js.FormWarningText, { text: errors.email?.message?.toString() }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				type: "submit",
+				className: "mt-6",
+				loading,
+				children: t("Send Email")
+			})
+		]
+	});
+}
+function ForgotPassword(props) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const stackApp = (0, ___index_js.useStackApp)();
+	const user = (0, ___index_js.useUser)();
+	const [sent, setSent] = (0, react.useState)(false);
+	if (user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_predefined_message_card_js.PredefinedMessageCard, {
+		type: "signedIn",
+		fullPage: !!props.fullPage
+	});
+	if (sent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_predefined_message_card_js.PredefinedMessageCard, {
+		type: "emailSent",
+		fullPage: !!props.fullPage
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_maybe_full_page_js.MaybeFullPage, {
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _stackframe_stack_ui.cn)("stack-scope max-w-[380px] flex-basis-[380px]", props.fullPage ? "p-4" : "p-0"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					type: "h2",
+					children: t("Reset Your Password")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Typography, { children: [
+					t("Don't need to reset?"),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_link_js.StyledLink, {
+						href: stackApp.urls["signIn"],
+						children: t("Sign in")
+					})
+				] })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ForgotPasswordForm, { onSent: () => setSent(true) })
+			})]
+		})
+	});
+}
+
+//#endregion
+exports.ForgotPassword = ForgotPassword;
+exports.ForgotPasswordForm = ForgotPasswordForm;
+//# sourceMappingURL=forgot-password.js.map

package/dist/components-page/forgot-password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forgot-password.js","names":["Label","Input","FormWarningText","Button","PredefinedMessageCard","MaybeFullPage","Typography","StyledLink"],"sources":["../../src/components-page/forgot-password.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, Typography, cn } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp, useUser } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { StyledLink } from \"../components/link\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { useTranslation } from \"../lib/translations\";\n\nexport function ForgotPasswordForm({ onSent }: { onSent?: () => void }) {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: strictEmailSchema(t(\"Please enter a valid email\")).defined().nonEmpty(t(\"Please enter your email\"))\n  });\n\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      await stackApp.sendForgotPasswordEmail(email);\n    onSent?.();\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t(\"Your Email\")}</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        autoComplete=\"email\"\n        {...register('email')}\n        onChange={() => clearErrors('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t(\"Send Email\")}\n      </Button>\n    </form>\n  );\n}\n\n\nexport function ForgotPassword(props: { fullPage?: boolean }) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [sent, setSent] = useState(false);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;\n  }\n\n  if (sent) {\n    return <PredefinedMessageCard type='emailSent' fullPage={!!props.fullPage} />;\n  }\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className={cn(\n        \"stack-scope max-w-[380px] flex-basis-[380px]\",\n        props.fullPage ? \"p-4\" : \"p-0\"\n      )}>\n        <div className=\"text-center\">\n          <Typography type='h2'>{t(\"Reset Your Password\")}</Typography>\n          <Typography>\n            {t(\"Don't need to reset?\")}{\" \"}\n            <StyledLink href={stackApp.urls['signIn']}>\n              {t(\"Sign in\")}\n            </StyledLink>\n          </Typography>\n        </div>\n        <div className=\"mt-6\">\n          <ForgotPasswordForm onSent={() => setSent(true)} />\n        </div>\n      </div>\n    </MaybeFullPage>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,mBAAmB,EAAE,UAAmC;CACtE,MAAM,EAAE,kDAAsB;CAM9B,MAAM,EAAE,UAAU,cAAc,WAAW,EAAE,UAAU,6CAAwB,EAC7E,8GALuB,EACvB,0EAAyB,EAAE,6BAA6B,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,0BAA0B,CAAC,EAC3G,CAAC,CAG6B,EAC9B,CAAC;CACF,MAAM,yCAAwB;CAC9B,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAE7C,MAAM,WAAW,OAAO,SAAuC;AAC7D,aAAW,KAAK;AAChB,MAAI;GACF,MAAM,EAAE,UAAU;AAClB,SAAM,SAAS,wBAAwB,MAAM;AAC/C,aAAU;YACA;AACR,cAAW,MAAM;;;AAIrB,QACE,4CAAC;EACC,WAAU;EACV,WAAU,mFAAgC,aAAa,SAAS,CAAC,EAAE,CAAC;EACpE;;GAEA,2CAACA;IAAM,SAAQ;IAAQ,WAAU;cAAQ,EAAE,aAAa;KAAS;GACjE,2CAACC;IACC,IAAG;IACH,MAAK;IACL,cAAa;IACb,GAAI,SAAS,QAAQ;IACrB,gBAAgB,YAAY,QAAQ;KACpC;GACF,2CAACC,0DAAgB,MAAM,OAAO,OAAO,SAAS,UAAU,GAAI;GAE5D,2CAACC;IAAO,MAAK;IAAS,WAAU;IAAgB;cAC7C,EAAE,aAAa;KACT;;GACJ;;AAKX,SAAgB,eAAe,OAA+B;CAC5D,MAAM,EAAE,kDAAsB;CAC9B,MAAM,yCAAwB;CAC9B,MAAM,iCAAgB;CACtB,MAAM,CAAC,MAAM,+BAAoB,MAAM;AAEvC,KAAI,KACF,QAAO,2CAACC;EAAsB,MAAK;EAAW,UAAU,CAAC,CAAC,MAAM;GAAY;AAG9E,KAAI,KACF,QAAO,2CAACA;EAAsB,MAAK;EAAY,UAAU,CAAC,CAAC,MAAM;GAAY;AAG/E,QACE,2CAACC;EAAc,UAAU,CAAC,CAAC,MAAM;YAC/B,4CAAC;GAAI,wCACH,gDACA,MAAM,WAAW,QAAQ,MAC1B;cACC,4CAAC;IAAI,WAAU;eACb,2CAACC;KAAW,MAAK;eAAM,EAAE,sBAAsB;MAAc,EAC7D,4CAACA;KACE,EAAE,uBAAuB;KAAE;KAC5B,2CAACC;MAAW,MAAM,SAAS,KAAK;gBAC7B,EAAE,UAAU;OACF;QACF;KACT,EACN,2CAAC;IAAI,WAAU;cACb,2CAAC,sBAAmB,cAAc,QAAQ,KAAK,GAAI;KAC/C;IACF;GACQ"}

package/dist/components-page/magic-link-callback.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/magic-link-callback.d.ts
+declare function MagicLinkCallback(props: {
+  searchParams?: Record<string, string>;
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MagicLinkCallback };
+//# sourceMappingURL=magic-link-callback.d.ts.map

package/dist/components-page/magic-link-callback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-link-callback.d.ts","names":[],"sources":["../../src/components-page/magic-link-callback.tsx"],"mappings":";;;iBAoBgB,iBAAA,CAAkB,KAAA;EAChC,YAAA,GAAe,MAAA;EACf,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/magic-link-callback.js

@@ -0,0 +1,75 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_errors = require("@stackframe/stack-shared/dist/utils/errors");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let ___index_js = require("../index.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared = require("@stackframe/stack-shared");
+let ___components_message_cards_predefined_message_card_js = require("../components/message-cards/predefined-message-card.js");
+let ___components_message_cards_message_card_js = require("../components/message-cards/message-card.js");
+let _stackframe_stack_shared_dist_utils_caches = require("@stackframe/stack-shared/dist/utils/caches");
+
+//#region src/components-page/magic-link-callback.tsx
+(0, _stackframe_stack_shared_dist_utils_caches.cacheFunction)(async (stackApp, code) => {
+	return await stackApp.signInWithMagicLink(code);
+});
+function MagicLinkCallback(props) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const stackApp = (0, ___index_js.useStackApp)();
+	const user = (0, ___index_js.useUser)();
+	const [result, setResult] = react.default.useState(null);
+	if (user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_predefined_message_card_js.PredefinedMessageCard, {
+		type: "signedIn",
+		fullPage: !!props.fullPage
+	});
+	const invalidJsx = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_message_card_js.MessageCard, {
+		title: t("Invalid Magic Link"),
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("Please check if you have the correct link. If you continue to have issues, please contact support.") })
+	});
+	const expiredJsx = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_message_card_js.MessageCard, {
+		title: t("Expired Magic Link"),
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("Your magic link has expired. Please request a new magic link if you need to sign-in.") })
+	});
+	const alreadyUsedJsx = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_message_card_js.MessageCard, {
+		title: t("Magic Link Already Used"),
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.") })
+	});
+	if (!props.searchParams?.code) return invalidJsx;
+	if (!result) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_message_card_js.MessageCard, {
+		title: t("Do you want to sign in?"),
+		fullPage: !!props.fullPage,
+		primaryButtonText: t("Sign in"),
+		primaryAction: async () => {
+			setResult(await stackApp.signInWithMagicLink(props.searchParams?.code || (0, _stackframe_stack_shared_dist_utils_errors.throwErr)("No magic link provided")));
+		},
+		secondaryButtonText: t("Cancel"),
+		secondaryAction: async () => {
+			await stackApp.redirectToHome();
+		}
+	});
+	else {
+		if (result.status === "error") if (_stackframe_stack_shared.KnownErrors.VerificationCodeNotFound.isInstance(result.error)) return invalidJsx;
+		else if (_stackframe_stack_shared.KnownErrors.VerificationCodeExpired.isInstance(result.error)) return expiredJsx;
+		else if (_stackframe_stack_shared.KnownErrors.VerificationCodeAlreadyUsed.isInstance(result.error)) return alreadyUsedJsx;
+		else throw result.error;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_message_card_js.MessageCard, {
+			title: t("Signed in successfully!"),
+			fullPage: !!props.fullPage,
+			primaryButtonText: t("Go home"),
+			primaryAction: async () => {
+				await stackApp.redirectToHome();
+			}
+		});
+	}
+}
+
+//#endregion
+exports.MagicLinkCallback = MagicLinkCallback;
+//# sourceMappingURL=magic-link-callback.js.map

package/dist/components-page/magic-link-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-link-callback.js","names":["React","PredefinedMessageCard","MessageCard","KnownErrors"],"sources":["../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { useTranslation } from \"../lib/translations\";\n\nconst cacheSignInWithMagicLink = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.signInWithMagicLink(code);\n});\n\nexport function MagicLinkCallback(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [result, setResult] = React.useState<Awaited<ReturnType<typeof stackApp.signInWithMagicLink>> | null>(null);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your magic link has expired. Please request a new magic link if you need to sign-in.\")}</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title={t(\"Magic Link Already Used\")} fullPage={!!props.fullPage}>\n      <p>{t(\"The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  if (!result) {\n    return <MessageCard\n      title={t(\"Do you want to sign in?\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Sign in\")}\n      primaryAction={async () => {\n        const result = await stackApp.signInWithMagicLink(props.searchParams?.code || throwErr(\"No magic link provided\"));\n        setResult(result);\n      }}\n      secondaryButtonText={t(\"Cancel\")}\n      secondaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  } else {\n    if (result.status === 'error') {\n      if (KnownErrors.VerificationCodeNotFound.isInstance(result.error)) {\n        return invalidJsx;\n      } else if (KnownErrors.VerificationCodeExpired.isInstance(result.error)) {\n        return expiredJsx;\n      } else if (KnownErrors.VerificationCodeAlreadyUsed.isInstance(result.error)) {\n        return alreadyUsedJsx;\n      } else {\n        throw result.error;\n      }\n    }\n\n    return <MessageCard\n      title={t(\"Signed in successfully!\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Go home\")}\n      primaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;8DAgB+C,OAAO,UAAgC,SAAiB;AACrG,QAAO,MAAM,SAAS,oBAAoB,KAAK;EAC/C;AAEF,SAAgB,kBAAkB,OAG/B;CACD,MAAM,EAAE,kDAAsB;CAC9B,MAAM,yCAAwB;CAC9B,MAAM,iCAAgB;CACtB,MAAM,CAAC,QAAQ,aAAaA,cAAM,SAA0E,KAAK;AAEjH,KAAI,KACF,QAAO,2CAACC;EAAsB,MAAK;EAAW,UAAU,CAAC,CAAC,MAAM;GAAY;CAG9E,MAAM,aACJ,2CAACC;EAAY,OAAO,EAAE,qBAAqB;EAAE,UAAU,CAAC,CAAC,MAAM;YAC7D,2CAAC,iBAAG,EAAE,qGAAqG,GAAK;GACpG;CAGhB,MAAM,aACJ,2CAACA;EAAY,OAAO,EAAE,qBAAqB;EAAE,UAAU,CAAC,CAAC,MAAM;YAC7D,2CAAC,iBAAG,EAAE,uFAAuF,GAAK;GACtF;CAGhB,MAAM,iBACJ,2CAACA;EAAY,OAAO,EAAE,0BAA0B;EAAE,UAAU,CAAC,CAAC,MAAM;YAClE,2CAAC,iBAAG,EAAE,sIAAsI,GAAK;GACrI;AAGhB,KAAI,CAAC,MAAM,cAAc,KACvB,QAAO;AAGT,KAAI,CAAC,OACH,QAAO,2CAACA;EACN,OAAO,EAAE,0BAA0B;EACnC,UAAU,CAAC,CAAC,MAAM;EAClB,mBAAmB,EAAE,UAAU;EAC/B,eAAe,YAAY;AAEzB,aADe,MAAM,SAAS,oBAAoB,MAAM,cAAc,iEAAiB,yBAAyB,CAAC,CAChG;;EAEnB,qBAAqB,EAAE,SAAS;EAChC,iBAAiB,YAAY;AAC3B,SAAM,SAAS,gBAAgB;;GAEjC;MACG;AACL,MAAI,OAAO,WAAW,QACpB,KAAIC,qCAAY,yBAAyB,WAAW,OAAO,MAAM,CAC/D,QAAO;WACEA,qCAAY,wBAAwB,WAAW,OAAO,MAAM,CACrE,QAAO;WACEA,qCAAY,4BAA4B,WAAW,OAAO,MAAM,CACzE,QAAO;MAEP,OAAM,OAAO;AAIjB,SAAO,2CAACD;GACN,OAAO,EAAE,0BAA0B;GACnC,UAAU,CAAC,CAAC,MAAM;GAClB,mBAAmB,EAAE,UAAU;GAC/B,eAAe,YAAY;AACzB,UAAM,SAAS,gBAAgB;;IAEjC"}

package/dist/components-page/mfa.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/mfa.d.ts
+declare function MFA(props: {
+  fullPage?: boolean;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MFA };
+//# sourceMappingURL=mfa.d.ts.map

package/dist/components-page/mfa.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mfa.d.ts","names":[],"sources":["../../src/components-page/mfa.tsx"],"mappings":";;;iBAyLgB,GAAA,CAAI,KAAA;EAClB,QAAA;EACA,SAAA;EACA,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/mfa.js

@@ -0,0 +1,166 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___index_js = require("../index.js");
+let ___components_elements_form_warning_js = require("../components/elements/form-warning.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared = require("@stackframe/stack-shared");
+let lucide_react = require("lucide-react");
+let ___components_elements_maybe_full_page_js = require("../components/elements/maybe-full-page.js");
+
+//#region src/components-page/mfa.tsx
+function MfaForm({ onSuccess, onCancel }) {
+	const stackApp = (0, ___index_js.useStackApp)();
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const [otp, setOtp] = (0, react.useState)("");
+	const formRef = (0, react.useRef)(null);
+	const [submitting, setSubmitting] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const [verified, setVerified] = (0, react.useState)(false);
+	const [attemptCode, setAttemptCode] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!attemptCode && typeof window !== "undefined") {
+			const code = window.sessionStorage.getItem("stack_mfa_attempt_code");
+			if (code) setAttemptCode(code);
+		}
+	}, [attemptCode]);
+	(0, react.useEffect)(() => {
+		if (otp.length === 6 && !submitting) {
+			if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+			if (formRef.current) {
+				const inputs = formRef.current.querySelectorAll("input");
+				for (const input of inputs) input.blur();
+			}
+			setSubmitting(true);
+			setError(null);
+			if (attemptCode) stackApp.signInWithMfa(otp, attemptCode, { noRedirect: true }).then(async (result) => {
+				if (result.status === "ok") {
+					setVerified(true);
+					if (typeof window !== "undefined") window.sessionStorage.removeItem("stack_mfa_attempt_code");
+					if (onSuccess) onSuccess();
+					else await stackApp.redirectToAfterSignIn();
+				} else throw result.error;
+			}).catch((e) => {
+				if (e instanceof _stackframe_stack_shared.KnownErrors.InvalidTotpCode) setError(t("Invalid TOTP code"));
+				else setError(t("Verification failed"));
+			}).finally(() => {
+				setSubmitting(false);
+				if (!verified) setOtp("");
+			});
+			else {
+				setSubmitting(false);
+				setError(t("Missing verification information"));
+			}
+		}
+		if (otp.length !== 0 && otp.length !== 6) setError(null);
+	}, [
+		otp,
+		submitting,
+		onSuccess,
+		attemptCode,
+		stackApp,
+		t,
+		verified
+	]);
+	const inputStyleClass = (0, react.useMemo)(() => {
+		if (verified) return "opacity-85 transition-all duration-300";
+		if (error) return "ring-red-500 border-red-500";
+		return "focus:ring-primary/50";
+	}, [error, verified]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-stretch stack-scope",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			ref: formRef,
+			className: "w-full flex flex-col items-center gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.InputOTP, {
+				maxLength: 6,
+				type: "text",
+				inputMode: "numeric",
+				placeholder: "······",
+				value: otp,
+				onChange: (value) => setOtp(value.toUpperCase()),
+				disabled: submitting || verified,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.InputOTPGroup, { children: [
+					0,
+					1,
+					2,
+					3,
+					4,
+					5
+				].map((index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.InputOTPSlot, {
+					index,
+					size: "lg",
+					className: (0, _stackframe_stack_ui.cn)("border focus:ring-2 transition-all", inputStyleClass)
+				}, index)) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "h-8 flex flex-col gap-4 items-center justify-center w-full",
+				children: [verified ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 animate-in fade-in duration-300 slide-in-from-bottom-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "w-5 h-5 text-green-600 animate-in zoom-in duration-300" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						className: "text-sm font-medium",
+						children: t("Verified! Redirecting...")
+					})]
+				}) : submitting ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Spinner, { className: "text-primary h-4 w-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						className: "text-sm",
+						children: t("Verifying...")
+					})]
+				}) : null, error !== null && !submitting && !verified ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_form_warning_js.FormWarningText, { text: error }) : null]
+			})]
+		}), onCancel && !verified && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+			variant: "link",
+			onClick: onCancel,
+			className: "underline mt-4 self-center",
+			disabled: submitting || verified,
+			children: t("Cancel")
+		})]
+	});
+}
+function MFA(props) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const headerText = t("Multi-Factor Authentication");
+	const instructionText = t("Enter the six-digit code from your authenticator app");
+	if (props.fullPage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_maybe_full_page_js.MaybeFullPage, {
+		fullPage: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "stack-scope flex flex-col items-stretch",
+			style: {
+				maxWidth: "380px",
+				flexBasis: "380px",
+				padding: "1rem"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-center mb-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					type: "h2",
+					children: headerText
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					className: "mt-2",
+					children: instructionText
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MfaForm, {
+				onSuccess: props.onSuccess,
+				onCancel: props.onCancel
+			})]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-stretch stack-scope",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			className: "mb-4 text-center",
+			children: instructionText
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MfaForm, {
+			onSuccess: props.onSuccess,
+			onCancel: props.onCancel
+		})]
+	});
+}
+
+//#endregion
+exports.MFA = MFA;
+//# sourceMappingURL=mfa.js.map

package/dist/components-page/mfa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mfa.js","names":["KnownErrors","InputOTP","InputOTPGroup","InputOTPSlot","CheckIcon","Typography","Spinner","FormWarningText","Button","MaybeFullPage"],"sources":["../../src/components-page/mfa.tsx"],"sourcesContent":["\"use client\";\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport {\n  Button,\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n  Spinner,\n  Typography,\n  cn,\n} from \"@stackframe/stack-ui\";\nimport { CheckIcon } from \"lucide-react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { useTranslation } from \"../lib/translations\";\n\nfunction MfaForm({ onSuccess, onCancel }: {\n  onSuccess?: () => void,\n  onCancel?: () => void,\n}) {\n  const stackApp = useStackApp();\n  const { t } = useTranslation();\n  const [otp, setOtp] = useState<string>(\"\");\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const [error, setError] = useState<string | null>(null);\n  const [verified, setVerified] = useState<boolean>(false);\n\n  const [attemptCode, setAttemptCode] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!attemptCode && typeof window !== \"undefined\") {\n      const code = window.sessionStorage.getItem(\"stack_mfa_attempt_code\");\n      if (code) {\n        setAttemptCode(code);\n      }\n    }\n  }, [ attemptCode]);\n\n  // Handle OTP verification when code is complete\n  useEffect(() => {\n    if (otp.length === 6 && !submitting) {\n      // Blur any focused inputs\n      if (document.activeElement instanceof HTMLElement) {\n        document.activeElement.blur();\n      }\n      if (formRef.current) {\n        const inputs = formRef.current.querySelectorAll('input');\n        for (const input of inputs) {\n          input.blur();\n        }\n      }\n\n      setSubmitting(true);\n      setError(null);\n\n      if (attemptCode) {\n        stackApp\n          .signInWithMfa(otp, attemptCode, { noRedirect: true })\n          .then(async (result) => {\n            if (result.status === \"ok\") {\n              setVerified(true);\n\n              // Cleanup session storage\n              if (typeof window !== \"undefined\") {\n                window.sessionStorage.removeItem(\"stack_mfa_attempt_code\");\n              }\n\n              if (onSuccess) {\n                onSuccess();\n              } else {\n                await stackApp.redirectToAfterSignIn();\n              }\n            } else {\n              throw result.error;\n            }\n          })\n          .catch((e) => {\n            if (e instanceof KnownErrors.InvalidTotpCode) {\n              setError(t(\"Invalid TOTP code\"));\n            } else {\n              setError(t(\"Verification failed\"));\n            }\n          })\n          .finally(() => {\n            setSubmitting(false);\n            if (!verified) {\n              setOtp(\"\");\n            }\n          });\n      } else {\n        setSubmitting(false);\n        setError(t(\"Missing verification information\"));\n      }\n    }\n\n    // Clear error when user is typing\n    if (otp.length !== 0 && otp.length !== 6) {\n      setError(null);\n    }\n  }, [otp, submitting, onSuccess, attemptCode, stackApp, t, verified]);\n\n\n  const inputStyleClass = useMemo(() => {\n    if (verified) {\n      return \"opacity-85 transition-all duration-300\";\n    }\n\n    if (error) {\n      return \"ring-red-500 border-red-500\";\n    }\n\n    return \"focus:ring-primary/50\";\n  }, [error, verified]);\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <form ref={formRef} className=\"w-full flex flex-col items-center gap-4\">\n        <InputOTP\n          maxLength={6}\n          type=\"text\"\n          inputMode=\"numeric\"\n          placeholder=\"······\"\n          value={otp}\n          onChange={(value) => setOtp(value.toUpperCase())}\n          disabled={submitting || verified}\n        >\n          <InputOTPGroup>\n            {[0, 1, 2, 3, 4, 5].map((index) => (\n              <InputOTPSlot\n                key={index}\n                index={index}\n                size=\"lg\"\n                className={cn(\n                  \"border focus:ring-2 transition-all\",\n                  inputStyleClass,\n                )}\n              />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n\n        {/* Verification Status */}\n        <div className=\"h-8 flex flex-col gap-4 items-center justify-center w-full\">\n          {verified ? (\n            <div className=\"flex items-center gap-2 animate-in fade-in duration-300 slide-in-from-bottom-2\">\n              <CheckIcon className=\"w-5 h-5 text-green-600 animate-in zoom-in duration-300\" />\n              <Typography className=\"text-sm font-medium\">{t(\"Verified! Redirecting...\")}</Typography>\n            </div>\n          ) : submitting ? (\n            <div className=\"flex items-center gap-2\">\n              <Spinner className=\"text-primary h-4 w-4\" />\n              <Typography className=\"text-sm\">{t(\"Verifying...\")}</Typography>\n            </div>\n          ) : null}\n\n          {/* Error reporting */}\n          {error !== null && !submitting && !verified ? <FormWarningText text={error} /> : null}\n        </div>\n      </form>\n\n      {/* Cancel Button */}\n      {onCancel && !verified && (\n        <Button\n          variant=\"link\"\n          onClick={onCancel}\n          className=\"underline mt-4 self-center\"\n          disabled={submitting || verified}\n        >\n          {t(\"Cancel\")}\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport function MFA(props: {\n  fullPage?: boolean,\n  onSuccess?: () => void,\n  onCancel?: () => void,\n}) {\n  const { t } = useTranslation();\n\n  const headerText = t(\"Multi-Factor Authentication\");\n  const instructionText = t(\"Enter the six-digit code from your authenticator app\");\n\n  if (props.fullPage) {\n    return (\n      <MaybeFullPage fullPage={true}>\n        <div\n          className=\"stack-scope flex flex-col items-stretch\"\n          style={{ maxWidth: \"380px\", flexBasis: \"380px\", padding: \"1rem\" }}\n        >\n          <div className=\"text-center mb-6\">\n            <Typography type=\"h2\">{headerText}</Typography>\n            <Typography className=\"mt-2\">{instructionText}</Typography>\n          </div>\n          <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />\n        </div>\n      </MaybeFullPage>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <Typography className=\"mb-4 text-center\">{instructionText}</Typography>\n      <MfaForm onSuccess={props.onSuccess} onCancel={props.onCancel} />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components-page/oauth-callback.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/oauth-callback.d.ts
+declare function OAuthCallback({
+  fullPage
+}: {
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OAuthCallback };
+//# sourceMappingURL=oauth-callback.d.ts.map

package/dist/components-page/oauth-callback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-callback.d.ts","names":[],"sources":["../../src/components-page/oauth-callback.tsx"],"mappings":";;;iBAkBgB,aAAA,CAAA;EAAgB;AAAA;EAAc,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/oauth-callback.js

@@ -0,0 +1,72 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_errors = require("@stackframe/stack-shared/dist/utils/errors");
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___index_js = require("../index.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared = require("@stackframe/stack-shared");
+let ___components_elements_maybe_full_page_js = require("../components/elements/maybe-full-page.js");
+let ___components_link_js = require("../components/link.js");
+let ___lib_stack_app_index_js = require("../lib/stack-app/index.js");
+
+//#region src/components-page/oauth-callback.tsx
+function OAuthCallback({ fullPage }) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const app = (0, ___index_js.useStackApp)();
+	const called = (0, react.useRef)(false);
+	const [showRedirectLink, setShowRedirectLink] = (0, react.useState)(false);
+	const [redirectUrl, setRedirectUrl] = (0, react.useState)(null);
+	(0, react.useEffect)(() => (0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(async () => {
+		if (called.current) return;
+		called.current = true;
+		const redirectToError = async (url) => {
+			const urlString = url.toString();
+			if (app[___lib_stack_app_index_js.stackAppInternalsSymbol].getRedirectMethod() === "none") {
+				setRedirectUrl(urlString);
+				return;
+			}
+			await app[___lib_stack_app_index_js.stackAppInternalsSymbol].redirectToUrl(urlString, { replace: true });
+		};
+		try {
+			if (!await app.callOAuthCallback()) await app.redirectToSignIn({ noRedirectBack: true });
+		} catch (e) {
+			if (_stackframe_stack_shared.KnownError.isKnownError(e)) {
+				const errorUrl = new URL(app.urls.error, window.location.href);
+				errorUrl.searchParams.set("errorCode", e.errorCode);
+				errorUrl.searchParams.set("message", e.message);
+				errorUrl.searchParams.set("details", JSON.stringify(e.details ?? {}));
+				await redirectToError(errorUrl);
+				return;
+			}
+			(0, _stackframe_stack_shared_dist_utils_errors.captureError)("<OAuthCallback />", e);
+			await redirectToError(new URL(app.urls.error, window.location.href));
+		}
+	}), [app]);
+	(0, react.useEffect)(() => {
+		setTimeout(() => setShowRedirectLink(true), 3e3);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_maybe_full_page_js.MaybeFullPage, {
+		fullPage: fullPage ?? false,
+		containerClassName: "flex items-center justify-center",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _stackframe_stack_ui.cn)("text-center justify-center items-center stack-scope flex flex-col gap-4 max-w-[380px]", fullPage ? "p-4" : "p-0"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-col justify-center items-center gap-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Spinner, { size: 20 })
+			}), showRedirectLink || redirectUrl != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [t("If you are not redirected automatically, "), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_link_js.StyledLink, {
+				className: "whitespace-nowrap",
+				href: redirectUrl ?? app.urls.home,
+				children: t("click here")
+			})] }) : null]
+		})
+	});
+}
+
+//#endregion
+exports.OAuthCallback = OAuthCallback;
+//# sourceMappingURL=oauth-callback.js.map

package/dist/components-page/oauth-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-callback.js","names":["stackAppInternalsSymbol","KnownError","MaybeFullPage","Spinner","StyledLink"],"sources":["../../src/components-page/oauth-callback.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { KnownError } from \"@stackframe/stack-shared\";\nimport { captureError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Spinner, cn } from \"@stackframe/stack-ui\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { StyledLink } from \"../components/link\";\nimport { stackAppInternalsSymbol } from \"../lib/stack-app\";\nimport { useTranslation } from \"../lib/translations\";\n\nexport function OAuthCallback({ fullPage }: { fullPage?: boolean }) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const called = useRef(false);\n  const [showRedirectLink, setShowRedirectLink] = useState(false);\n  const [redirectUrl, setRedirectUrl] = useState<string | null>(null);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    const redirectToError = async (url: URL) => {\n      const urlString = url.toString();\n      if (app[stackAppInternalsSymbol].getRedirectMethod() === \"none\") {\n        setRedirectUrl(urlString);\n        return;\n      }\n      await app[stackAppInternalsSymbol].redirectToUrl(urlString, { replace: true });\n    };\n    try {\n      const hasRedirected = await app.callOAuthCallback();\n      if (!hasRedirected) {\n        await app.redirectToSignIn({ noRedirectBack: true });\n      }\n    } catch (e) {\n      if (KnownError.isKnownError(e)) {\n        const errorUrl = new URL(app.urls.error, window.location.href);\n        errorUrl.searchParams.set(\"errorCode\", e.errorCode);\n        errorUrl.searchParams.set(\"message\", e.message);\n        errorUrl.searchParams.set(\"details\", JSON.stringify(e.details ?? {}));\n        await redirectToError(errorUrl);\n        return;\n      }\n      captureError(\"<OAuthCallback />\", e);\n      await redirectToError(new URL(app.urls.error, window.location.href));\n    }\n  }), [app]);\n\n  useEffect(() => {\n    setTimeout(() => setShowRedirectLink(true), 3000);\n  }, []);\n\n  return (\n    <MaybeFullPage\n      fullPage={fullPage ?? false}\n      containerClassName=\"flex items-center justify-center\"\n    >\n      <div\n        className={cn(\n          \"text-center justify-center items-center stack-scope flex flex-col gap-4 max-w-[380px]\",\n          fullPage ? \"p-4\" : \"p-0\"\n        )}\n      >\n        <div className=\"flex flex-col justify-center items-center gap-4\">\n          <Spinner size={20} />\n        </div>\n        {showRedirectLink || redirectUrl != null ? <p>{t('If you are not redirected automatically, ')}<StyledLink className=\"whitespace-nowrap\" href={redirectUrl ?? app.urls.home}>{t(\"click here\")}</StyledLink></p> : null}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,cAAc,EAAE,YAAoC;CAClE,MAAM,EAAE,kDAAsB;CAC9B,MAAM,oCAAmB;CACzB,MAAM,2BAAgB,MAAM;CAC5B,MAAM,CAAC,kBAAkB,2CAAgC,MAAM;CAC/D,MAAM,CAAC,aAAa,sCAA0C,KAAK;AAEnE,gGAAkC,YAAY;AAC5C,MAAI,OAAO,QAAS;AACpB,SAAO,UAAU;EACjB,MAAM,kBAAkB,OAAO,QAAa;GAC1C,MAAM,YAAY,IAAI,UAAU;AAChC,OAAI,IAAIA,mDAAyB,mBAAmB,KAAK,QAAQ;AAC/D,mBAAe,UAAU;AACzB;;AAEF,SAAM,IAAIA,mDAAyB,cAAc,WAAW,EAAE,SAAS,MAAM,CAAC;;AAEhF,MAAI;AAEF,OAAI,CADkB,MAAM,IAAI,mBAAmB,CAEjD,OAAM,IAAI,iBAAiB,EAAE,gBAAgB,MAAM,CAAC;WAE/C,GAAG;AACV,OAAIC,oCAAW,aAAa,EAAE,EAAE;IAC9B,MAAM,WAAW,IAAI,IAAI,IAAI,KAAK,OAAO,OAAO,SAAS,KAAK;AAC9D,aAAS,aAAa,IAAI,aAAa,EAAE,UAAU;AACnD,aAAS,aAAa,IAAI,WAAW,EAAE,QAAQ;AAC/C,aAAS,aAAa,IAAI,WAAW,KAAK,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AACrE,UAAM,gBAAgB,SAAS;AAC/B;;AAEF,gEAAa,qBAAqB,EAAE;AACpC,SAAM,gBAAgB,IAAI,IAAI,IAAI,KAAK,OAAO,OAAO,SAAS,KAAK,CAAC;;GAEtE,EAAE,CAAC,IAAI,CAAC;AAEV,4BAAgB;AACd,mBAAiB,oBAAoB,KAAK,EAAE,IAAK;IAChD,EAAE,CAAC;AAEN,QACE,2CAACC;EACC,UAAU,YAAY;EACtB,oBAAmB;YAEnB,4CAAC;GACC,wCACE,yFACA,WAAW,QAAQ,MACpB;cAED,2CAAC;IAAI,WAAU;cACb,2CAACC,gCAAQ,MAAM,KAAM;KACjB,EACL,oBAAoB,eAAe,OAAO,4CAAC,kBAAG,EAAE,4CAA4C,EAAC,2CAACC;IAAW,WAAU;IAAoB,MAAM,eAAe,IAAI,KAAK;cAAO,EAAE,aAAa;KAAc,IAAI,GAAG;IAC7M;GACQ"}

package/dist/components-page/onboarding.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/onboarding.d.ts
+declare function Onboarding(props: {
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Onboarding };
+//# sourceMappingURL=onboarding.d.ts.map

package/dist/components-page/onboarding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding.d.ts","names":[],"sources":["../../src/components-page/onboarding.tsx"],"mappings":";;;iBAmBgB,UAAA,CAAW,KAAA;EACzB,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}