UNPKG

@ory/elements-react

Version:

Ory Elements React - a collection of React components for authentication UIs.

1,645 lines (1,588 loc) 4 MB
"use client" // src/theme/default/components/card/index.tsx import { useOryConfiguration as useOryConfiguration5 } from "@ory/elements-react"; // src/theme/default/assets/ory-badge-horizontal.svg import * as React from "react"; import { jsx, jsxs } from "react/jsx-runtime"; var SvgOryBadgeHorizontal = (props) => { var _a, _b; return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [ /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M18.007 8h-1.71l2.007-3.996L16.296 0h1.711l1.145 2.301L20.327 0H22z" }), /* @__PURE__ */ jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.902 4.86a2.47 2.47 0 0 0 1.796-2.365v-.038C14.687 1.097 13.592 0 12.245 0H9.037v1.44l1.208 1.985H9.04V8h1.51V4.949h.633L13.04 8h1.775zm-.876-1.431h.223c.52 0 .943-.427.943-.953a.95.95 0 0 0-.943-.952h-1.39zM4 0a4 4 0 1 0-.001 7.999A4 4 0 0 0 4 0M1.524 4a2.476 2.476 0 1 0 4.952 0 2.476 2.476 0 0 0-4.952 0", clipRule: "evenodd" }) ] }); }; var ory_badge_horizontal_default = SvgOryBadgeHorizontal; // src/theme/default/assets/ory-badge-vertical.svg import * as React2 from "react"; import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime"; var SvgOryBadgeVertical = (props) => { var _a, _b; return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [ /* @__PURE__ */ jsx2("path", { fill: "currentColor", d: "M8 3.993v1.71L4.004 3.697 0 5.704V3.993l2.301-1.145L0 1.673V0z" }), /* @__PURE__ */ jsx2("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.86 9.099a2.47 2.47 0 0 0-2.365-1.797h-.038C1.097 7.313 0 8.408 0 9.755v3.208h1.44l1.985-1.208v1.204H8v-1.51H4.949v-.633L8 8.96V7.185zm-1.431.875v-.223a.95.95 0 0 0-.953-.943.95.95 0 0 0-.952.943v1.39zM0 18a4 4 0 1 0 8 0 4 4 0 0 0-8 0m4 2.476a2.476 2.476 0 1 0 0-4.952 2.476 2.476 0 0 0 0 4.952", clipRule: "evenodd" }) ] }); }; var ory_badge_vertical_default = SvgOryBadgeVertical; // src/theme/default/components/card/badge.tsx import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime"; function Badge() { return /* @__PURE__ */ jsxs3( "div", { "data-testid": "ory/card/badge", className: "absolute border border-ory-border-default bg-ory-background-default p-2 font-bold text-ory-foreground-default max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding max-sm:py-[7px] sm:top-8 sm:right-0 sm:translate-x-full sm:rounded-r-branding sm:pl-[7px]", children: [ /* @__PURE__ */ jsx3(ory_badge_horizontal_default, { width: 22, height: 8, className: "sm:hidden" }), /* @__PURE__ */ jsx3(ory_badge_vertical_default, { width: 8, height: 22, className: "max-sm:hidden" }) ] } ); } // src/theme/default/components/card/content.tsx function DefaultCardContent({ children }) { return children; } // src/theme/default/components/card/footer.tsx import { FlowType as FlowType13 } from "@ory/client-fetch"; import { Node as Node2, useOryConfiguration as useOryConfiguration2, useOryFlow as useOryFlow4 } from "@ory/elements-react"; import { useIntl as useIntl12 } from "react-intl"; // src/components/card/two-step/state-select-method.tsx import { isUiNodeScriptAttributes as isUiNodeScriptAttributes5, UiNodeGroupEnum as UiNodeGroupEnum16 } from "@ory/client-fetch"; import { useIntl as useIntl11 } from "react-intl"; // src/context/component.tsx import { UiNodeGroupEnum } from "@ory/client-fetch"; import { createContext, useContext } from "react"; // src/context/defaultNodeSorter.ts import { isUiNodeInputAttributes } from "@ory/client-fetch"; var defaultNodeOrder = [ "oidc", "saml", "identifier_first", "default", "profile", "password", "captcha", "passkey", "code", "webauthn" ]; var Slot = { Inputs: 0, Checkboxes: 1, Captcha: 2, Buttons: 3 }; function isUiNodeButton(node) { return isUiNodeInputAttributes(node.attributes) && (node.attributes.type === "submit" || node.attributes.type === "button"); } function makeUiNodeComparator({ groupOrder = defaultNodeOrder } = {}) { const groupRank = new Map(groupOrder.map((g, i) => [g, i])); const unknownGroupRank = groupOrder.length; const slotRank = (node) => { if (isUiNodeInputAttributes(node.attributes) === false) { return Slot.Inputs; } const { type } = node.attributes; if (node.group === "webauthn" && type !== "submit" && type !== "button") { return Slot.Buttons; } if (type === "checkbox") { return Slot.Checkboxes; } if (node.group === "captcha") { return Slot.Captcha; } if (type === "submit" || type === "button") { return Slot.Buttons; } return Slot.Inputs; }; return (a, b) => { var _a, _b; const sa = slotRank(a); const sb = slotRank(b); if (sa !== sb) { return sa - sb; } const ga = (_a = groupRank.get(a.group)) != null ? _a : unknownGroupRank; const gb = (_b = groupRank.get(b.group)) != null ? _b : unknownGroupRank; if (ga !== gb) { return ga - gb; } if (a.group === "webauthn" && b.group === "webauthn") { const aIsButton = isUiNodeButton(a); const bIsButton = isUiNodeButton(b); if (aIsButton !== bIsButton) { return aIsButton ? 1 : -1; } } return 0; }; } var defaultNodeSorter = makeUiNodeComparator({ groupOrder: defaultNodeOrder }); // src/context/component.tsx import { jsx as jsx4 } from "react/jsx-runtime"; var ComponentContext = createContext({ components: null, // fine because we throw an error if it's not provided nodeSorter: () => 0, groupSorter: () => 0 }); function useComponents() { const ctx = useContext(ComponentContext); if (!ctx) { throw new Error("useComponents must be used within a ComponentProvider"); } return ctx.components; } var defaultGroupOrder = [ UiNodeGroupEnum.Default, UiNodeGroupEnum.Profile, UiNodeGroupEnum.Password, UiNodeGroupEnum.Oidc, UiNodeGroupEnum.Code, UiNodeGroupEnum.LookupSecret, UiNodeGroupEnum.Passkey, UiNodeGroupEnum.Webauthn, UiNodeGroupEnum.Totp ]; // src/context/flow-context.tsx import { createContext as createContext2, useContext as useContext2, useState as useState2 } from "react"; // src/context/form-state.ts import { FlowType as FlowType2 } from "@ory/client-fetch"; import { useReducer, useState } from "react"; // src/components/card/two-step/utils.ts import { FlowType, UiNodeGroupEnum as UiNodeGroupEnum3 } from "@ory/client-fetch"; // src/theme/default/utils/form.ts function isGroupImmediateSubmit(group) { return group === "code"; } // src/util/ui/index.ts import { isUiNodeInputAttributes as isUiNodeInputAttributes2, isUiNodeScriptAttributes } from "@ory/client-fetch"; import { UiNodeGroupEnum as UiNodeGroupEnum2 } from "@ory/client-fetch"; import { useMemo } from "react"; function triggerToWindowCall(trigger) { if (!trigger) { return; } const fn = triggerToFunction(trigger); if (fn) { fn(); return; } let i = 0; const ms = 100; const interval = setInterval(() => { i++; if (i > 100) { clearInterval(interval); throw new Error( "Unable to load Ory's WebAuthn script. Is it being blocked or otherwise failing to load? If you are running an old version of Ory Elements, please upgrade. For more information, please check your browser's developer console." ); } const fn2 = triggerToFunction(trigger); if (fn2) { clearInterval(interval); return fn2(); } }, ms); return; } function triggerToFunction(trigger) { if (typeof window === "undefined") { console.debug( "The Ory SDK is missing a required function: window is undefined." ); return void 0; } const typedWindow = window; if (!(trigger in typedWindow) || !typedWindow[trigger]) { console.debug(`The Ory SDK is missing a required function: ${trigger}.`); return void 0; } const triggerFn = typedWindow[trigger]; if (typeof triggerFn !== "function") { console.debug( `The Ory SDK is missing a required function: ${trigger}. It is not a function.` ); return void 0; } return triggerFn; } function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) { var _a; const groups = {}; for (const node of nodes) { if (node.type === "script") { continue; } const groupNodes = (_a = groups[node.group]) != null ? _a : []; groupNodes.push(node); groups[node.group] = groupNodes; } return Object.values(UiNodeGroupEnum2).filter((group) => { var _a2; return (_a2 = groups[group]) == null ? void 0 : _a2.length; }).filter( (group) => ![ UiNodeGroupEnum2.Default, UiNodeGroupEnum2.IdentifierFirst, UiNodeGroupEnum2.Profile, UiNodeGroupEnum2.Captcha, ...excludeAuthMethods ].includes(group) ); } var finder = (opt) => (n) => { return n.attributes.node_type === opt.node_type && (opt.group ? opt.group instanceof RegExp ? n.group.match(opt.group) : n.group === opt.group : !opt.group) && (opt.id && n.attributes.node_type !== "input" ? opt.id instanceof RegExp ? n.attributes.id.match(opt.id) : n.attributes.id === opt.id : !opt.id) && (opt.name && n.attributes.node_type === "input" ? opt.name instanceof RegExp ? n.attributes.name.match(opt.name) : n.attributes.name === opt.name : !opt.name) && (opt.type && n.attributes.node_type === "input" ? opt.type instanceof RegExp ? n.attributes.type.match(opt.type) : n.attributes.type === opt.type : !opt.type); }; var findNode = (nodes, opt) => nodes.find(finder(opt)); function isNodeVisible(node) { if (isUiNodeScriptAttributes(node.attributes)) { return false; } else if (isUiNodeInputAttributes2(node.attributes)) { if (node.attributes.type === "hidden") { return false; } } return true; } function useNodeGroupsWithVisibleNodes(nodes) { return useMemo(() => { var _a, _b; const groups = {}; const groupRetained = {}; for (const node of nodes) { const groupNodes = (_a = groups[node.group]) != null ? _a : []; const groupCount = (_b = groupRetained[node.group]) != null ? _b : 0; groupNodes.push(node); groups[node.group] = groupNodes; if (!isNodeVisible(node)) { continue; } groupRetained[node.group] = groupCount + 1; } const finalGroups = {}; for (const [group, count] of Object.entries(groupRetained)) { if (count > 0) { finalGroups[group] = groups[group]; } } return finalGroups; }, [nodes]); } function findCodeIdentifierNode(nodes) { var _a; return (_a = findNode(nodes, { group: "identifier_first", node_type: "input", name: "identifier" })) != null ? _a : findNode(nodes, { group: "code", node_type: "input", name: "address" }); } // src/context/flow-context.tsx import { jsx as jsx5 } from "react/jsx-runtime"; function useOryFlow() { const ctx = useContext2(OryFlowContext); if (!ctx) { throw new Error("useOryFlow must be used within a OryFlowProvider"); } return ctx; } var OryFlowContext = createContext2(null); // src/context/config.tsx import { createContext as createContext3, useContext as useContext3, useRef } from "react"; // src/util/client.ts import { Configuration, FrontendApi } from "@ory/client-fetch"; function frontendClient(sdkUrl, opts = {}) { const config = new Configuration({ ...opts, basePath: sdkUrl, credentials: "include", headers: { Accept: "application/json", ...opts.headers } }); return new FrontendApi(config); } // src/context/config.tsx import { jsx as jsx6 } from "react/jsx-runtime"; var defaultProject = { name: "Ory", registration_enabled: true, verification_enabled: true, recovery_enabled: true, recovery_ui_url: "/ui/recovery", registration_ui_url: "/ui/registration", verification_ui_url: "/ui/verification", login_ui_url: "/ui/login", settings_ui_url: "/ui/settings", default_redirect_url: "/ui/welcome", error_ui_url: "/ui/error", hide_ory_branding: false }; var OryConfigurationContext = createContext3({ sdk: null, // This is fine, because we always supply a proper default value for the SDK configuration in the provider project: defaultProject }); // src/context/intl-context.tsx import { useContext as useContext4 } from "react"; import { RawIntlProvider, IntlContext, createIntl, createIntlCache } from "react-intl"; // src/components/card/header.tsx import { jsx as jsx7 } from "react/jsx-runtime"; // src/components/form/form-provider.tsx import { FlowType as FlowType3, UiNodeGroupEnum as UiNodeGroupEnum5 } from "@ory/client-fetch"; import { useEffect, useRef as useRef2 } from "react"; import { FormProvider, useForm } from "react-hook-form"; // src/components/form/form-helpers.ts import { isUiNodeInputAttributes as isUiNodeInputAttributes3 } from "@ory/client-fetch"; // src/components/form/form-resolver.ts import { isUiNodeInputAttributes as isUiNodeInputAttributes4 } from "@ory/client-fetch"; // src/util/i18n/index.ts import { defineMessages as defineMessages2 } from "react-intl"; // src/util/nodes.ts function findScreenSelectionButton(nodes) { return nodes.find( (node) => node.attributes.node_type === "input" && node.attributes.type === "submit" && node.attributes.name === "screen" ); } function isDynamicText(text) { return text.id === 1070002 && !!text.context && "name" in text.context && typeof text.context["name"] === "string"; } function resolveLabel(text, intl) { if (isDynamicText(text)) { const field = text.context.name; const id = `forms.label.${field}`; const msg = { id, defaultMessage: text.text }; return intl.formatMessage(msg); } return uiTextToFormattedMessage(text, intl); } function resolveOptionLabel(name, value, intl) { const stringValue = String(value); const msg = { id: `forms.option.${name}.${stringValue}`, defaultMessage: stringValue }; return intl.formatMessage(msg); } // src/util/i18n/generated/kratosMessages.ts import { defineMessages } from "react-intl"; var KNOWN_KRATOS_MESSAGE_IDS = [ 1010001, 1010002, 1010003, 1010004, 1010005, 1010006, 1010007, 1010008, 1010009, 1010010, 1010011, 1010012, 1010013, 1010014, 1010015, 1010016, 1010017, 1010018, 1010019, 1010021, 1010022, 1010023, 1010024, 1010025, 1040001, 1040002, 1040003, 1040004, 1040005, 1040006, 1040007, 1040008, 1040009, 1050001, 1050002, 1050003, 1050004, 1050005, 1050006, 1050007, 1050008, 1050009, 1050010, 1050011, 1050012, 1050013, 1050014, 1050015, 1050016, 1050017, 1050018, 1050019, 1050020, 1060001, 1060002, 1060003, 1060004, 1060005, 1060006, 1060007, 1070001, 1070002, 1070003, 1070004, 1070005, 1070006, 1070007, 1070008, 1070009, 1070010, 1070011, 1070012, 1070013, 1070014, 1070015, 1070016, 1070017, 1070018, 1080001, 1080002, 1080003, 1080004, 1080005, 4000001, 4000002, 4000003, 4000004, 4000005, 4000006, 4000007, 4000008, 4000009, 4000010, 4000011, 4000012, 4000013, 4000014, 4000015, 4000016, 4000017, 4000018, 4000019, 4000020, 4000021, 4000022, 4000023, 4000024, 4000025, 4000026, 4000027, 4000028, 4000029, 4000030, 4000031, 4000032, 4000033, 4000034, 4000035, 4000036, 4000037, 4000038, 4000039, 4000040, 4000041, 4000042, 4000043, 4000044, 4010001, 4010002, 4010003, 4010004, 4010005, 4010006, 4010007, 4010008, 4010009, 4010010, 4010011, 4040001, 4040002, 4040003, 4050001, 4050002, 4060001, 4060002, 4060004, 4060005, 4060006, 4070001, 4070002, 4070003, 4070005, 4070006, 5000001, 5000002, 5000003 ]; function isKratosMessageId(id) { return typeof id === "number" && KNOWN_KRATOS_MESSAGE_IDS.includes(id); } var kratosMessages = defineMessages({ 1010001: { id: "identities.messages.1010001", defaultMessage: `Sign in` }, 1010002: { id: "identities.messages.1010002", defaultMessage: `Sign in with {provider}` }, 1010003: { id: "identities.messages.1010003", defaultMessage: `Please confirm this action by verifying that it is you.` }, 1010004: { id: "identities.messages.1010004", defaultMessage: `Please complete the second authentication challenge.` }, 1010005: { id: "identities.messages.1010005", defaultMessage: `Verify` }, 1010006: { id: "identities.messages.1010006", defaultMessage: `Authentication code` }, 1010007: { id: "identities.messages.1010007", defaultMessage: `Backup recovery code` }, 1010008: { id: "identities.messages.1010008", defaultMessage: `Continue with hardware key` }, 1010009: { id: "identities.messages.1010009", defaultMessage: `Continue` }, 1010010: { id: "identities.messages.1010010", defaultMessage: `Continue` }, 1010011: { id: "identities.messages.1010011", defaultMessage: `Sign in with a hardware key` }, 1010012: { id: "identities.messages.1010012", defaultMessage: `Prepare your WebAuthn device (e.g. security key, biometrics scanner, ...) and press continue.` }, 1010013: { id: "identities.messages.1010013", defaultMessage: `Continue` }, 1010014: { id: "identities.messages.1010014", defaultMessage: `A code was sent to the address you provided. If you didn't receive it, please check the spelling of the address and try again.` }, 1010015: { id: "identities.messages.1010015", defaultMessage: `Send sign in code` }, 1010016: { id: "identities.messages.1010016", defaultMessage: `You tried to sign in with "{duplicateIdentifier}", but that email is already used by another account. Sign in to your account with one of the options below to add your account "{duplicateIdentifier}" at "{provider}" as another way to sign in.` }, 1010017: { id: "identities.messages.1010017", defaultMessage: `Sign in and link` }, 1010018: { id: "identities.messages.1010018", defaultMessage: `Confirm with {provider}` }, 1010019: { id: "identities.messages.1010019", defaultMessage: `Request code to continue` }, 1010021: { id: "identities.messages.1010021", defaultMessage: `Sign in with passkey` }, 1010022: { id: "identities.messages.1010022", defaultMessage: `Sign in with password` }, 1010023: { id: "identities.messages.1010023", defaultMessage: `Send code to {address}` }, 1010024: { id: "identities.messages.1010024", defaultMessage: `Sign in with a hardware key` }, 1010025: { id: "identities.messages.1010025", defaultMessage: `A code was sent to your address. If you didn't receive it, please try again.` }, 1040001: { id: "identities.messages.1040001", defaultMessage: `Sign up` }, 1040002: { id: "identities.messages.1040002", defaultMessage: `Sign up with {provider}` }, 1040003: { id: "identities.messages.1040003", defaultMessage: `Continue` }, 1040004: { id: "identities.messages.1040004", defaultMessage: `Sign up with security key` }, 1040005: { id: "identities.messages.1040005", defaultMessage: `A code has been sent to the address(es) you provided. If you have not received a message, check the spelling of the address and retry the registration.` }, 1040006: { id: "identities.messages.1040006", defaultMessage: `Send sign up code` }, 1040007: { id: "identities.messages.1040007", defaultMessage: `Sign up with passkey` }, 1040008: { id: "identities.messages.1040008", defaultMessage: `Back` }, 1040009: { id: "identities.messages.1040009", defaultMessage: `Please choose a credential to authenticate yourself with.` }, 1050001: { id: "identities.messages.1050001", defaultMessage: `Your changes have been saved!` }, 1050002: { id: "identities.messages.1050002", defaultMessage: `Link {provider}` }, 1050003: { id: "identities.messages.1050003", defaultMessage: `Unlink {provider}` }, 1050004: { id: "identities.messages.1050004", defaultMessage: `Unlink TOTP Authenticator App` }, 1050005: { id: "identities.messages.1050005", defaultMessage: `Authenticator app QR code` }, 1050006: { id: "identities.messages.1050006", defaultMessage: `{secret}` }, 1050007: { id: "identities.messages.1050007", defaultMessage: `Reveal backup recovery codes` }, 1050008: { id: "identities.messages.1050008", defaultMessage: `Enable` }, 1050009: { id: "identities.messages.1050009", defaultMessage: `{secret}` }, 1050010: { id: "identities.messages.1050010", defaultMessage: `These are your back up recovery codes. Please keep them in a safe place!` }, 1050011: { id: "identities.messages.1050011", defaultMessage: `Confirm backup recovery codes` }, 1050012: { id: "identities.messages.1050012", defaultMessage: `Add security key` }, 1050013: { id: "identities.messages.1050013", defaultMessage: `Name of the security key` }, 1050014: { id: "identities.messages.1050014", defaultMessage: `Secret was used at {used_at, date, long}` }, 1050015: { id: "identities.messages.1050015", defaultMessage: `{secrets_list}` }, 1050016: { id: "identities.messages.1050016", defaultMessage: `Disable this method` }, 1050017: { id: "identities.messages.1050017", defaultMessage: `Authenticator Secret` }, 1050018: { id: "identities.messages.1050018", defaultMessage: `Remove security key "{display_name}"` }, 1050019: { id: "identities.messages.1050019", defaultMessage: `Add passkey` }, 1050020: { id: "identities.messages.1050020", defaultMessage: `Remove passkey "{display_name}"` }, 1060001: { id: "identities.messages.1060001", defaultMessage: `You successfully recovered your account. Please change your password or set up an alternative login method (e.g. social sign in) within the next {privileged_session_expires_at_unix_until_minutes} minutes.` }, 1060002: { id: "identities.messages.1060002", defaultMessage: `An email containing a recovery link has been sent to the email address you provided. If you have not received an email, check the spelling of the address and make sure to use the address you registered with.` }, 1060003: { id: "identities.messages.1060003", defaultMessage: `An email containing a recovery code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and make sure to use the address you registered with.` }, 1060004: { id: "identities.messages.1060004", defaultMessage: `A recovery code has been sent to {masked_address}. If you have not received it, check the spelling of the address and make sure to use the address you registered with.` }, 1060005: { id: "identities.messages.1060005", defaultMessage: `Recover access to your account by providing your recovery address in full.` }, 1060006: { id: "identities.messages.1060006", defaultMessage: `How do you want to recover your account?` }, 1060007: { id: "identities.messages.1060007", defaultMessage: `Back` }, 1070001: { id: "identities.messages.1070001", defaultMessage: `Password` }, 1070002: { id: "identities.messages.1070002", defaultMessage: `{title}` }, 1070003: { id: "identities.messages.1070003", defaultMessage: `Save` }, 1070004: { id: "identities.messages.1070004", defaultMessage: `ID` }, 1070005: { id: "identities.messages.1070005", defaultMessage: `Submit` }, 1070006: { id: "identities.messages.1070006", defaultMessage: `Verify code` }, 1070007: { id: "identities.messages.1070007", defaultMessage: `Email` }, 1070008: { id: "identities.messages.1070008", defaultMessage: `Resend code` }, 1070009: { id: "identities.messages.1070009", defaultMessage: `Continue` }, 1070010: { id: "identities.messages.1070010", defaultMessage: `Recovery code` }, 1070011: { id: "identities.messages.1070011", defaultMessage: `Verification code` }, 1070012: { id: "identities.messages.1070012", defaultMessage: `Registration code` }, 1070013: { id: "identities.messages.1070013", defaultMessage: `Login code` }, 1070014: { id: "identities.messages.1070014", defaultMessage: `Login and link credential` }, 1070015: { id: "identities.messages.1070015", defaultMessage: `Please complete the captcha challenge to continue.` }, 1070016: { id: "identities.messages.1070016", defaultMessage: `Recovery address` }, 1070017: { id: "identities.messages.1070017", defaultMessage: `Phone number` }, 1070018: { id: "identities.messages.1070018", defaultMessage: `Email or phone number` }, 1080001: { id: "identities.messages.1080001", defaultMessage: `An email containing a verification link has been sent to the email address you provided. If you have not received an email, check the spelling of the address and make sure to use the address you registered with.` }, 1080002: { id: "identities.messages.1080002", defaultMessage: `You successfully verified your email address.` }, 1080003: { id: "identities.messages.1080003", defaultMessage: `An email containing a verification code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and make sure to use the address you registered with.` }, 1080004: { id: "identities.messages.1080004", defaultMessage: `A text message containing a verification code has been sent to the phone number you provided. If you have not received a text message, check the spelling of the number and make sure to use the number you registered with.` }, 1080005: { id: "identities.messages.1080005", defaultMessage: `You successfully verified your phone number.` }, 4000001: { id: "identities.messages.4000001", defaultMessage: `{reason}` }, 4000002: { id: "identities.messages.4000002", defaultMessage: `Please enter the {property} and try again.` }, 4000003: { id: "identities.messages.4000003", defaultMessage: `length must be >= {min_length}, but got {actual_length}` }, 4000004: { id: "identities.messages.4000004", defaultMessage: `does not match pattern "{pattern}"` }, 4000005: { id: "identities.messages.4000005", defaultMessage: `The password can not be used because {reason}.` }, 4000006: { id: "identities.messages.4000006", defaultMessage: `The provided credentials are invalid, check for spelling mistakes in your password or username, email address, or phone number.` }, 4000007: { id: "identities.messages.4000007", defaultMessage: `An account with the same identifier (email, phone, username, ...) exists already.` }, 4000008: { id: "identities.messages.4000008", defaultMessage: `The provided authentication code is invalid, please try again.` }, 4000009: { id: "identities.messages.4000009", defaultMessage: `Could not find any login identifiers. Did you forget to set them? This could also be caused by a server misconfiguration.` }, 4000010: { id: "identities.messages.4000010", defaultMessage: `Account not active yet. Did you forget to verify your email address?` }, 4000011: { id: "identities.messages.4000011", defaultMessage: `You have no TOTP device set up.` }, 4000012: { id: "identities.messages.4000012", defaultMessage: `This backup recovery code has already been used.` }, 4000013: { id: "identities.messages.4000013", defaultMessage: `You have no WebAuthn device set up.` }, 4000014: { id: "identities.messages.4000014", defaultMessage: `You have no backup recovery codes set up.` }, 4000015: { id: "identities.messages.4000015", defaultMessage: `This account does not exist or has no security key set up.` }, 4000016: { id: "identities.messages.4000016", defaultMessage: `The backup recovery code is not valid.` }, 4000017: { id: "identities.messages.4000017", defaultMessage: `length must be <= {max_length}, but got {actual_length}` }, 4000018: { id: "identities.messages.4000018", defaultMessage: `must be >= {minimum} but found {actual}` }, 4000019: { id: "identities.messages.4000019", defaultMessage: `must be > {minimum} but found {actual}` }, 4000020: { id: "identities.messages.4000020", defaultMessage: `must be <= {maximum} but found {actual}` }, 4000021: { id: "identities.messages.4000021", defaultMessage: `must be < {maximum} but found {actual}` }, 4000022: { id: "identities.messages.4000022", defaultMessage: `{actual} not multipleOf {base}` }, 4000023: { id: "identities.messages.4000023", defaultMessage: `maximum {max_items} items allowed, but found {actual_items} items` }, 4000024: { id: "identities.messages.4000024", defaultMessage: `minimum {min_items} items allowed, but found {actual_items} items` }, 4000025: { id: "identities.messages.4000025", defaultMessage: `items at index {index_a} and {index_b} are equal` }, 4000026: { id: "identities.messages.4000026", defaultMessage: `expected {allowed_types_list}, but got {actual_type}` }, 4000027: { id: "identities.messages.4000027", defaultMessage: `An account with the same identifier (email, phone, username, ...) exists already. Please sign in to your existing account to link your social profile.` }, 4000028: { id: "identities.messages.4000028", defaultMessage: `You tried signing in with {credential_identifier_hint} which is already in use by another account. You can sign in using {available_credential_types_list}. You can sign in using one of the following social sign in providers: {available_oidc_providers_list}.` }, 4000029: { id: "identities.messages.4000029", defaultMessage: `must be equal to constant {expected}` }, 4000030: { id: "identities.messages.4000030", defaultMessage: `const failed` }, 4000031: { id: "identities.messages.4000031", defaultMessage: `The password can not be used because it is too similar to the identifier.` }, 4000032: { id: "identities.messages.4000032", defaultMessage: `The password must be at least {min_length} characters long, but got {actual_length}.` }, 4000033: { id: "identities.messages.4000033", defaultMessage: `The password must be at most {max_length} characters long, but got {actual_length}.` }, 4000034: { id: "identities.messages.4000034", defaultMessage: `The password has been found in data breaches and must no longer be used.` }, 4000035: { id: "identities.messages.4000035", defaultMessage: `This account does not exist or has not setup sign in with code.` }, 4000036: { id: "identities.messages.4000036", defaultMessage: `The provided traits do not match the traits previously associated with this flow.` }, 4000037: { id: "identities.messages.4000037", defaultMessage: `This account does not exist or has no login method configured.` }, 4000038: { id: "identities.messages.4000038", defaultMessage: `Captcha verification failed, please try again.` }, 4000039: { id: "identities.messages.4000039", defaultMessage: `The new password must be different from the old password.` }, 4000040: { id: "identities.messages.4000040", defaultMessage: `Enter a valid email address` }, 4000041: { id: "identities.messages.4000041", defaultMessage: `Enter a valid phone number` }, 4000042: { id: "identities.messages.4000042", defaultMessage: `You have no DeviceAuthn device set up.` }, 4000043: { id: "identities.messages.4000043", defaultMessage: `The provided web authn login is invalid, please try again.` }, 4000044: { id: "identities.messages.4000044", defaultMessage: `The provided DeviceAuthn signature is invalid.` }, 4010001: { id: "identities.messages.4010001", defaultMessage: `The interaction expired. Please try again.` }, 4010002: { id: "identities.messages.4010002", defaultMessage: `Could not find a strategy to log you in with. Did you fill out the form correctly?` }, 4010003: { id: "identities.messages.4010003", defaultMessage: `Could not find a strategy to sign you up with. Did you fill out the form correctly?` }, 4010004: { id: "identities.messages.4010004", defaultMessage: `Could not find a strategy to update your settings. Did you fill out the form correctly?` }, 4010005: { id: "identities.messages.4010005", defaultMessage: `Could not find a strategy to recover your account with. Did you fill out the form correctly?` }, 4010006: { id: "identities.messages.4010006", defaultMessage: `Could not find a strategy to verify your account with. Did you fill out the form correctly?` }, 4010007: { id: "identities.messages.4010007", defaultMessage: `The request was already completed successfully and can not be retried.` }, 4010008: { id: "identities.messages.4010008", defaultMessage: `The login code is invalid or has already been used. Please try again.` }, 4010009: { id: "identities.messages.4010009", defaultMessage: `Linked credentials do not match.` }, 4010010: { id: "identities.messages.4010010", defaultMessage: `The address you entered does not match any known addresses in the current account.` }, 4010011: { id: "identities.messages.4010011", defaultMessage: `This account has been disabled. Please contact support for assistance.` }, 4040001: { id: "identities.messages.4040001", defaultMessage: `The interaction expired. Please try again.` }, 4040002: { id: "identities.messages.4040002", defaultMessage: `The request was already completed successfully and can not be retried.` }, 4040003: { id: "identities.messages.4040003", defaultMessage: `The registration code is invalid or has already been used. Please try again.` }, 4050001: { id: "identities.messages.4050001", defaultMessage: `The interaction expired. Please try again.` }, 4050002: { id: "identities.messages.4050002", defaultMessage: `You can only change one address at a time. Please update each address separately.` }, 4060001: { id: "identities.messages.4060001", defaultMessage: `The request was already completed successfully and can not be retried.` }, 4060002: { id: "identities.messages.4060002", defaultMessage: `The recovery flow reached a failure state and must be retried.` }, 4060004: { id: "identities.messages.4060004", defaultMessage: `The recovery token is invalid or has already been used. Please retry the flow.` }, 4060005: { id: "identities.messages.4060005", defaultMessage: `The interaction expired. Please try again.` }, 4060006: { id: "identities.messages.4060006", defaultMessage: `The recovery code is invalid or has already been used. Please try again.` }, 4070001: { id: "identities.messages.4070001", defaultMessage: `The verification token is invalid or has already been used. Please retry the flow.` }, 4070002: { id: "identities.messages.4070002", defaultMessage: `The request was already completed successfully and can not be retried.` }, 4070003: { id: "identities.messages.4070003", defaultMessage: `The verification flow reached a failure state and must be retried.` }, 4070005: { id: "identities.messages.4070005", defaultMessage: `The interaction expired. Please try again.` }, 4070006: { id: "identities.messages.4070006", defaultMessage: `The verification code is invalid or has already been used. Please try again.` }, 5000001: { id: "identities.messages.5000001", defaultMessage: `{reason}` }, 5000002: { id: "identities.messages.5000002", defaultMessage: `No authentication methods are available. Please contact the system administrator.` }, 5000003: { id: "identities.messages.5000003", defaultMessage: `Your organization requires SSO authentication, but no SSO provider is configured. Please contact the system administrator.` } }); // src/util/i18n/index.ts var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => { const contextInjectedMessage = Object.entries(context).reduce( (accumulator, [key, value]) => { if (Array.isArray(value)) { return { ...accumulator, [key]: value, [key + "_list"]: intl.formatList(value) }; } else if (key.endsWith("_unix")) { if (typeof value === "number") { return { ...accumulator, [key]: intl.formatDate(new Date(value * 1e3)), [key + "_since"]: intl.formatDateTimeRange( new Date(value), /* @__PURE__ */ new Date() ), [key + "_since_minutes"]: Math.ceil( (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60 ).toFixed(0), [key + "_until"]: intl.formatDateTimeRange( /* @__PURE__ */ new Date(), new Date(value) ), [key + "_until_minutes"]: Math.ceil( (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60 ).toFixed(0) }; } } else if (key === "property") { if (isKnownPropertyKey(value)) { return { ...accumulator, [key]: intl.formatMessage(propertyMessages[value]) }; } else { return { ...accumulator, [key]: value }; } } return { ...accumulator, [key]: value }; }, {} ); if (isKratosMessageId(id)) { const hasEmptyArrayContext = Object.values(context).some( (v) => Array.isArray(v) && v.length === 0 ); if (hasEmptyArrayContext) { return text; } return intl.formatMessage(kratosMessages[id], contextInjectedMessage); } return text; }; function resolvePlaceholder(text, intl) { const fallback = intl.formatMessage( { id: "input.placeholder", defaultMessage: "Enter your {placeholder}" }, { placeholder: uiTextToFormattedMessage(text, intl) } ); if (isDynamicText(text)) { const field = text.context.name; const msg = { id: `forms.input.placeholder.${field}`, defaultMessage: fallback }; return intl.formatMessage(msg); } return fallback; } var KNOWN_PROPERTIES = [ "password", "email", "phone", "username", "identifier", "code", "recovery_address" ]; function isKnownPropertyKey(key) { return typeof key === "string" && KNOWN_PROPERTIES.includes(key); } var propertyMessages = defineMessages2({ password: { id: "property.password", defaultMessage: "password" }, email: { id: "property.email", defaultMessage: "email" }, phone: { id: "property.phone", defaultMessage: "phone" }, username: { id: "property.username", defaultMessage: "username" }, identifier: { id: "property.identifier", defaultMessage: "identifier" }, code: { id: "property.code", defaultMessage: "code" }, recovery_address: { id: "property.recovery_address", defaultMessage: "recovery address" } }); // src/util/utilFixSDKTypesHelper.ts function isUiNodeInput(node) { return node.type === "input"; } function isUiNodeImage(node) { return node.type === "img"; } function isUiNodeAnchor(node) { return node.type === "a"; } function isUiNodeText(node) { return node.type === "text"; } function isUiNodeScript(node) { return node.type === "script"; } // src/components/form/form-provider.tsx import { jsx as jsx8 } from "react/jsx-runtime"; // src/components/card/card.tsx import { jsx as jsx9 } from "react/jsx-runtime"; // src/components/card/footer.tsx import { jsx as jsx10 } from "react/jsx-runtime"; // src/components/card/content.tsx import { jsx as jsx11 } from "react/jsx-runtime"; // src/components/card/card-two-step.tsx import { FlowType as FlowType12 } from "@ory/client-fetch"; // src/components/card/two-step/state-method-active.tsx import { isUiNodeScriptAttributes as isUiNodeScriptAttributes3, UiNodeGroupEnum as UiNodeGroupEnum10 } from "@ory/client-fetch"; // src/components/form/form.tsx import { FlowType as FlowType11, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeInputAttributes as isUiNodeInputAttributes5, isUiNodeScriptAttributes as isUiNodeScriptAttributes2 } from "@ory/client-fetch"; import { useFormContext as useFormContext2 } from "react-hook-form"; import { useIntl as useIntl2 } from "react-intl"; // src/components/form/useOryFormSubmit.ts import { FlowType as FlowType10, UiNodeGroupEnum as UiNodeGroupEnum6 } from "@ory/client-fetch"; import { useFormContext } from "react-hook-form"; // src/util/onSubmitLogin.ts import { FlowType as FlowType5, handleContinueWith, loginUrl } from "@ory/client-fetch"; // src/util/sdk-helpers/error.ts import { ResponseError, FetchError } from "@ory/client-fetch"; // src/util/sdk-helpers/utils.ts import { FetchError as FetchError2, ResponseError as ResponseError2 } from "@ory/client-fetch"; // src/util/onSubmitRecovery.ts import { FlowType as FlowType6, handleContinueWith as handleContinueWith2, instanceOfContinueWithRecoveryUi, recoveryUrl } from "@ory/client-fetch"; // src/util/onSubmitRegistration.ts import { FlowType as FlowType7, handleContinueWith as handleContinueWith3, registrationUrl } from "@ory/client-fetch"; // src/util/onSubmitSettings.ts import { FlowType as FlowType8, handleContinueWith as handleContinueWith4, isResponseError as isResponseError2, loginUrl as loginUrl2, settingsUrl } from "@ory/client-fetch"; // src/util/onSubmitVerification.ts import { FlowType as FlowType9, verificationUrl as verificationUrl2 } from "@ory/client-fetch"; // src/components/form/form.tsx import { jsx as jsx12 } from "react/jsx-runtime"; // src/components/form/messages.tsx import { jsx as jsx13 } from "react/jsx-runtime"; // src/components/form/nodes/node.tsx import { UiNodeGroupEnum as UiNodeGroupEnum9 } from "@ory/client-fetch"; // src/components/form/nodes/input.tsx import { UiNodeGroupEnum as UiNodeGroupEnum8, UiNodeInputAttributesTypeEnum } from "@ory/client-fetch"; import { useEffect as useEffect4, useRef as useRef3 } from "react"; import { useFormContext as useFormContext6 } from "react-hook-form"; // src/components/form/nodes/node-button.tsx import { UiNodeGroupEnum as UiNodeGroupEnum7 } from "@ory/client-fetch"; // src/components/form/nodes/renderer/button-renderer.tsx import { useCallback, useEffect as useEffect2 } from "react"; import { useFormContext as useFormContext3 } from "react-hook-form"; import { useDebounceValue } from "usehooks-ts"; import { jsx as jsx14 } from "react/jsx-runtime"; function ButtonRenderer({ node }) { const { Node: Node5 } = useComponents(); const { formState, setValue } = useFormContext3(); const { formState: oryFormState } = useOryFlow(); const [clicked, setClicked] = useDebounceValue(false, 100); const handleClick = useCallback(() => { setValue(node.attributes.name, node.attributes.value); setClicked(true); if (node.attributes.onclickTrigger) { triggerToWindowCall(node.attributes.onclickTrigger); } }, [node.attributes, setValue, setClicked]); const buttonProps = { type: node.attributes.type === "submit" ? "submit" : "button", name: node.attributes.name, value: node.attributes.value, onClick: handleClick, disabled: node.attributes.disabled || !formState.isReady || !oryFormState.isReady || oryFormState.isSubmitting }; useEffect2(() => { if (!oryFormState.isSubmitting && clicked) { setClicked(false); } }, [oryFormState.isSubmitting, setClicked, clicked]); return /* @__PURE__ */ jsx14( Node5.Button, { attributes: node.attributes, node, buttonProps, isSubmitting: clicked && oryFormState.isSubmitting } ); } // src/components/form/nodes/renderer/checkbox-renderer.tsx import { useController } from "react-hook-form"; import { jsx as jsx15 } from "react/jsx-runtime"; function CheckboxRenderer({ node }) { const attributes = node.attributes; const { Node: Node5 } = useComponents(); const controller = useController({ name: attributes.name, defaultValue: attributes.value, disabled: attributes.disabled }); const inputProps = { ...controller.field, type: "checkbox", value: controller.field.value === true ? "true" : "false", checked: controller.field.value === true, disabled: attributes.disabled || !controller.formState.isReady }; return /* @__PURE__ */ jsx15( Node5.Label, { attributes: { ...attributes, label: void 0 }, node: { ...node, meta: { ...node.meta, label: void 0 }, messages: [] }, fieldError: controller.fieldState.error, children: /* @__PURE__ */ jsx15( Node5.Checkbox, { attributes, node, inputProps, onClick: () => { } } ) } ); } // src/components/form/nodes/renderer/consent-checkbox-renderer.tsx import { useMemo as useMemo2 } from "react"; import { useFormContext as useFormContext4 } from "react-hook-form"; import { jsx as jsx16 } from "react/jsx-runtime"; function ConsentCheckboxRenderer({ node }) { const attributes = node.attributes; const { Node: Node5 } = useComponents(); const { setValue, watch, formState } = useFormContext4(); const scopes = watch("grant_scope"); const checked = useMemo2(() => { if (Array.isArray(scopes)) { return scopes.includes(attributes.value); } return false; }, [scopes, attributes.value]); const handleScopeChange = (checked2) => { const scopes2 = watch("grant_scope"); if (Array.isArray(scopes2)) { if (checked2) { setValue( "grant_scope", Array.from(/* @__PURE__ */ new Set([...scopes2, attributes.value])) ); } else { setValue( "grant_scope", scopes2.filter((scope) => scope !== attributes.value) ); } } }; const inputProps = { value: attributes.value, checked: checked === true, disabled: attributes.disabled || !formState.isReady, name: attributes.name }; return /* @__PURE__ */ jsx16( Node5.ConsentScopeCheckbox, { attributes, node, inputProps, onCheckedChange: handleScopeChange } ); } // src/components/form/nodes/renderer/image-renderer.tsx import { jsx as jsx17 } from "react/jsx-runtime"; function ImageRenderer({ node }) { const { Node: Node5 } = useComponents(); return /* @__PURE__ */ jsx17(Node5.Image, { node, attributes: node.attributes }); } // src/components/form/nodes/renderer/input-renderer.tsx import { getNodeLabel } from "@ory/client-fetch"; import { useIntl as useIntl3 } from "react-intl"; import { useFormState } from "react-hook-form"; // src/components/form/nodes/hooks/useInputProps.tsx import { useController as useController2 } from "react-hook-form"; function useInputProps(attributes, placeholder) { const { formState: { isSubmitting } } = useOryFlow(); const controller = useController2({ name: attributes.name, control: void 0, disabled: attributes.disabled, shouldUnregister: true // TODO: consider adding rules based on attributes.required, attributes.pattern, etc. }); const handleClick = () => { if (attributes.onclickTrigger) { triggerToWindowCall(attributes.onclickTrigger); } }; return { ...controller.field, id: attributes.name, type: attributes.type, onClick: handleClick, maxLength: attributes.maxlength, autoComplete: attributes.autocomplete, placeholder: placeholder || "", disabled: attributes.disabled || !controller.formState.isReady || isSubmitting }; } // src/components/form/nodes/renderer/input-renderer.tsx import { jsx as jsx18 } from "react/jsx-runtime"; function InputRenderer({ node }) { const { Node: Node5 } = useComponents(); const label = getNodeLabel(node); const intl = useIntl3(); const formState = useFormState(); const attributes = node.attributes; const placeholder = label ? resolvePlaceholder(label, intl) : ""; const inputProps = useInputProps(attributes, placeholder); const isPinCodeInput = attributes.name === "code" && node.group === "code" || attributes.name === "totp_code" && node.group === "totp"; const InputComponent = isPinCodeInput ? Node5.CodeInput : Node5.Input; return /* @__PURE__ */ jsx18( Node5.Label, { attributes, node, fieldError: formState.errors[attributes.name], children: /* @__PURE__ */ jsx18( InputComponent,