"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {CodeBlock, Heading, Info, OptimizedImage, ParamField, Tip, View, Warning} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!Heading) _missingMdxReference("Heading", true); if (!Info) _missingMdxReference("Info", true); if (!OptimizedImage) _missingMdxReference("OptimizedImage", true); if (!ParamField) _missingMdxReference("ParamField", true); if (!Tip) _missingMdxReference("Tip", true); if (!View) _missingMdxReference("View", true); if (!Warning) _missingMdxReference("Warning", true); return _jsxs(_Fragment, { children: [_jsx(Tip, { children: _jsxs(_components.p, { children: ["Enable MFA methods in the ", _jsx(_components.a, { href: "https://dashboard.privy.io/apps?page=login-methods&logins=mfa", children: "Privy\nDashboard" }), " before implementing this\nfeature."] }) }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["Privy’s default MFA UIs are available for ", _jsx(_components.strong, { children: "React and React Native only" }), ". If you are using\nanother SDK (Swift, Android, Flutter, Unity), use the ", _jsx(_components.a, { href: "/authentication/user-authentication/mfa/custom-ui/overview", children: "custom UI\napproach" }), " instead."] }) }), "\n", _jsxs(View, { title: "React", icon: "react", children: [_jsx(Heading, { level: "3", id: "enrolling-users-in-mfa", children: "Enrolling users in MFA" }), _jsxs(_components.p, { children: ["Once you have enabled MFA for your app, ", _jsxs(_components.strong, { children: ["to prompt your users to enroll in MFA for their embedded wallet, use the ", _jsx(_components.code, { children: "showMfaEnrollmentModal" }), " method from the ", _jsx(_components.code, { children: "useMfaEnrollment" }), " hook."] })] }), _jsx(CodeBlock, { filename: "Example button for enrolling in wallet MFA", numberOfLines: "6", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "6", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useMfaEnrollment" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " MfaEnrollmentButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "showMfaEnrollmentModal" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useMfaEnrollment" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "button" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "showMfaEnrollmentModal" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Enroll in MFA" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }), _jsx(_components.p, { children: "When invoked, will open a Privy modal that prompts the user to select their desired MFA method from the ones you’ve enabled for your app, and will guide them through the enrollment process." }), _jsx(OptimizedImage, { src: "https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=2ad6a50823b29bacbabd08067f025e0b", alt: "images/MFA.png", "data-og-width": "1843", width: "1843", "data-og-height": "1317", height: "1317", "data-path": "images/MFA.png", "data-optimize": "true", "data-opv": "3", srcset: "https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?w=280&fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=9a8d1f6020125a076482d74e95d8ea2b 280w, https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?w=560&fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=5a7c136cc852f732d138ee205001bc6e 560w, https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?w=840&fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=48b0c6df688ff0e5ec3ab71bb797d659 840w, https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?w=1100&fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=14ba64d7a86446fdd19d9869eb901c33 1100w, https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?w=1650&fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=16ab2c892a1d9cee061253917c9cb4e5 1650w, https://mintcdn.com/privy-c2af3412/YvGXGsI-T4KAqoan/images/MFA.png?w=2500&fit=max&auto=format&n=YvGXGsI-T4KAqoan&q=85&s=13d8d546414fbf6ae64d23d14f50ed34 2500w" }), _jsx(_components.p, { children: "Once a user has successfully enrolled an MFA method, the user’s enrolled method will appear under the field of their object:" }), _jsx(CodeBlock, { filename: "", numberOfLines: "3", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "3", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " usePrivy" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "console" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "log" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "mfaMethods" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// ['sms', 'totp', 'passkey'] for a user who has enrolled in all of SMS, TOTP, and passkey MFA" }) }), "\n"] }) }) }), _jsx(Heading, { level: "3", id: "managing-mfa-methods", children: "Managing MFA methods" }), _jsxs(_components.p, { children: ["To allow your users to modify their MFA methods, ", _jsxs(_components.strong, { children: ["simply invoke the ", _jsx(_components.code, { children: "showMfaEnrollmentModal" }), " method from the ", _jsx(_components.code, { children: "useMfaEnrollment" }), " hook."] }), " This is the ", _jsx(_components.em, { children: "same" }), " method you would use to prompt your user to enroll in MFA for the first time."] }), _jsxs(_components.p, { children: ["Within this modal, users can ", _jsx(_components.strong, { children: "remove existing MFA methods or enroll in additional ones" }), " for their embedded wallet. Prior to making changes to their MFA methods, users will be prompted to re-verify their identity using one of their existing MFA methods."] }), _jsxs(Info, { children: [_jsxs(_components.p, { children: ["By default, removing a passkey as MFA will also unlink it as a valid login method. In order to modify this behavior, you can set the ", _jsx(_components.code, { children: "shouldUnlinkOnUnenrollMfa" }), " option to ", _jsx(_components.code, { children: "false" }), " under the ", _jsx(_components.code, { children: "passkeys" }), " config in ", _jsx(_components.code, { children: "PrivyProvider" }), "."] }), _jsx(CodeBlock, { filename: "", numberOfLines: "12", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "12", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "PrivyProvider" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " appId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"your-privy-app-id\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " config" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " ..." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "theRestOfYourConfig" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " passkeys:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Set this to `false` if you wish to keep the passkey as a login method after unenrolling from MFA." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " shouldUnlinkOnUnenrollMfa:" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " false" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* your app's content */" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) })] }), _jsx(Heading, { level: "3", id: "authorizing-signatures-and-transactions", children: "Authorizing signatures and transactions" }), _jsxs(_components.p, { children: ["Once a user has enrolled in MFA, ", _jsx(_components.strong, { children: "every attempt to use the wallet’s private key (every signature or transaction) will require the user to complete MFA using their method." }), " This logic is automatic; you do not need to do anything else once your user has enrolled in wallet MFA."] }), _jsxs(_components.p, { children: ["When your app requests a signature or a transaction from the embedded wallet, ", _jsx(_components.strong, { children: "Privy will show the user a modal prompting them to enter a 6-digit MFA code sent to their MFA method." }), " If the user has enrolled in multiple MFA methods, they can choose which method they’d like to use for this given request."] }), _jsx(OptimizedImage, { src: "https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=180dd7aec11922e9e59692313f20ebca", alt: "Authorizing signatures and transactions with wallet MFA", "data-og-width": "1843", width: "1843", "data-og-height": "1317", height: "1317", "data-path": "images/mfa-usage.png", "data-optimize": "true", "data-opv": "3", srcset: "https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?w=280&fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=777201bcf9f1d4e321a1af905a872ed5 280w, https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?w=560&fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=da5c112b68602563ba33af185ee8dcb7 560w, https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?w=840&fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=c9e59f6603b07be66dc40faecab850ea 840w, https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?w=1100&fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=bb29ff8d0b1d1a4dd19ad5a259a528bb 1100w, https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?w=1650&fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=59f3b5d98592061be80c6c21f48107e5 1650w, https://mintcdn.com/privy-c2af3412/zlmLhiIqRR7ViKN0/images/mfa-usage.png?w=2500&fit=max&auto=format&n=zlmLhiIqRR7ViKN0&q=85&s=7e0a6099288f9f63a1255cf9e0b5b073 2500w" }), _jsx(_components.p, { children: "Users must enter their MFA code within 5 minutes of receiving it, and are allowed up to a maximum of 4 code attempts if they incorrectly enter their code." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "If the user correctly enters their MFA code, the signature or transaction request will be processed by the wallet." }), " Additionally, their MFA verification status will be cached for ", _jsx(_components.strong, { children: "15 minutes" }), ". This means that for additional signatures or transactions requested within this window, Privy will ", _jsx(_components.strong, { children: "not" }), " prompt the user to re-complete MFA."] }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "If the user does not complete MFA or enters in an incorrect code 4 times or more, the signature or transaction will raise an error as if the user rejected the request." }) }), _jsx(Heading, { level: "3", id: "manually-prompting-for-mfa-verification", children: "Manually prompting for MFA verification" }), _jsxs(_components.p, { children: ["If you want to manually prompt your users for MFA verification, you can use the ", _jsx(_components.code, { children: "useMfa" }), " hook. The ", _jsx(_components.code, { children: "useMfa" }), " hook provides a set of functions and state for managing MFA flows in your application. It allows you to:"] }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Prompt the user to complete MFA verification if required." }), "\n", _jsx(_components.li, { children: "Initialize and submit MFA challenges (e.g., sending and verifying codes)." }), "\n", _jsx(_components.li, { children: "Cancel and ongoing MFA flow." }), "\n", _jsx(_components.li, { children: "Access the list of available MFA methods for your app." }), "\n"] }), _jsxs(_components.p, { children: ["Here’s an example of how to use the ", _jsx(_components.code, { children: "useMfa" }), " hook to prompt for MFA verification:"] }), _jsx(CodeBlock, { filename: "Example button for prompting MFA verification", numberOfLines: "17", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "17", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useMfa" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " MfaVerificationButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "promptMfa" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "init" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useMfa" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleMfaVerification" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " try" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " init" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'totp'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " promptMfa" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Your code on successful MFA verification" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "catch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "error" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Your code on cancelled or otherwise unsuccessful MFA verification" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " };" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "button" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleMfaVerification" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Verify MFA" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }), _jsxs(_components.p, { children: ["In this example, when the user clicks the “Verify MFA” button, the ", _jsx(_components.code, { children: "promptMfa" }), " function is called. If the user has enrolled in MFA, they will be prompted to complete the verification process. If successful, you can execute your desired actions after the verification."] })] }), "\n", _jsxs(View, { title: "React Native", icon: "react", children: [_jsx(Heading, { level: "3", id: "setting-up-mfa-uis-in-react-native", children: "Setting up MFA UIs in React Native" }), _jsxs(_components.p, { children: ["Once you’ve set up ", _jsx(_components.code, { children: "PrivyElements" }), ", you can use Privy’s default UIs to enroll your users in MFA and prompt them for MFA during wallet actions."] }), _jsx(Info, { children: _jsxs(_components.p, { children: ["Before integrating MFA UIs, make sure to also set up multi-factor authentication in the dashboard per ", _jsx(_components.a, { href: "/authentication/user-authentication/mfa", children: "this guide" }), "."] }) }), _jsx(Heading, { level: "3", id: "mfa-enrollment", children: "MFA enrollment" }), _jsx(_components.p, { children: "Privy’s default UIs for React Native can also be used for allowing your users to enroll their first MFA verification method, or any number of additional ones." }), _jsxs(_components.p, { children: ["For this, use the ", _jsx(_components.code, { children: "useMfaEnrollmentUI" }), " hook to get an ", _jsx(_components.code, { children: "init" }), " method, that you can use to launch the flow. This method takes in a configuration object with the following fields:"] }), _jsx(ParamField, { path: "mfaMethods", type: "MfaMethod[]", id: "param-mfa-methods", children: _jsx(_components.p, { children: "This will be the array of mfa methods that will be available in the UI. Make sure to have the methods you set here enabled." }) }), _jsx(ParamField, { path: "relyingParty", type: "string", id: "param-relying-party", children: _jsxs(_components.p, { children: ["It should be the URL origin where your ", _jsx(_components.a, { href: "/authentication/user-authentication/login-methods/passkey", children: "Apple App Site Association" }), " or ", _jsx(_components.a, { href: "/authentication/user-authentication/login-methods/passkey", children: "Digital Asset Links" }), " are available (e.g. ", _jsx(_components.code, { children: "https://example.com" }), ")."] }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "16", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useMfaEnrollmentUI" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/expo/ui'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " EnrollMFAMethodButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "init" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "initMfaEnrollmentUI" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useMfaEnrollmentUI" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " onEnrollMfa" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " try" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " initMfaEnrollmentUI" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "mfaMethods:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'sms'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'totp'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'passkey'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]});" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Your code on actions to execute after successful mfa enrollment" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "catch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "error" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Your code on cancelled or otherwise unsuccessful mfa enrollment" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " };" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Button" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onPress" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "onEnrollMfa" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Enroll an MFA method" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }), _jsx(Tip, { children: _jsxs(_components.p, { children: ["The UIs that will show up using ", _jsx(_components.code, { children: "useMfaEnrollmentUI" }), " will also ", _jsx(_components.strong, { children: "allow the user to unenroll" }), " MFA methods."] }) }), _jsx(Heading, { level: "3", id: "passkey-unenrollment", children: "Passkey unenrollment" }), _jsxs(_components.p, { children: ["Using the MFA enrollment UIs means users will also be able to ", _jsx(_components.strong, { children: "unenroll" }), " a method they had previously set up too."] }), _jsxs(_components.p, { children: ["For passkeys, the default behavior when unenrolling is that the passkey is also ", _jsx(_components.strong, { children: "removed" }), " as a valid login method."] }), _jsxs(_components.p, { children: ["You can change this behavior in the MFA UIs, by setting the ", _jsx(_components.code, { children: "shouldUnlinkOnUnenrollMfa" }), " option in the ", _jsx(_components.code, { children: "PrivyElements" }), " component:"] }), _jsx(CodeBlock, { filename: "", numberOfLines: "10", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "PrivyElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/expo/ui'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#D4D4D4" }, children: "() " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <>" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Your app's content */" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "PrivyElements" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " config" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "passkeys:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "shouldUnlinkOnUnenrollMfa:" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " false" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}}" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " );" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }), _jsx(Heading, { level: "3", id: "mfa-verification", children: "MFA verification" }), _jsx(_components.p, { children: "Privy’s default UIs for React Native can be used for your users to verify their already set MFA methods, such as SMS or passkeys." }), _jsx(Tip, { children: _jsx(_components.p, { children: "You can use Privy’s default UIs for MFA verification even if you’re using headless flows for working with the wallet. This way, Privy’s UIs can integrate smoothly with your custom flows and experiences." }) }), _jsxs(_components.p, { children: ["To do this, you must enable the ", _jsx(_components.code, { children: "enableMfaVerificationUIs" }), " option on the ", _jsx(_components.code, { children: "PrivyElements" }), " component:"] }), _jsx(CodeBlock, { filename: "", numberOfLines: "10", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "PrivyElements" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/expo/ui'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#D4D4D4" }, children: "() " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <>" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Your app's content */" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "PrivyElements" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " config" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "mfa:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "enableMfaVerificationUIs:" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " true" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}}" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " );" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }), _jsx(_components.p, { children: "After doing this, all operations you do on the wallet (such as signing messages or preparing transactions) will automatically trigger the MFA UIs if MFA verification is required at that moment." }), _jsx(Warning, { children: _jsxs(_components.p, { children: ["If you were using the ", _jsx(_components.code, { children: "useRegisterMfaListener" }), " hook before you should now remove it from your codebase, as Privy will handle the MFA events and UI for you."] }) }), _jsx(Heading, { level: "3", id: "manually-prompting-for-mfa-verification-2", children: "Manually prompting for MFA verification" }), _jsxs(_components.p, { children: ["If you want to manually prompt your users for MFA verification, you can use the ", _jsx(_components.code, { children: "useMfa" }), " hook. The ", _jsx(_components.code, { children: "useMfa" }), " hook provides a set of functions and state for managing Multi-Factor Authentication (MFA) flows in your application. It allows you to:"] }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Prompt the user to complete MFA verification if required." }), "\n", _jsx(_components.li, { children: "Initialize and submit MFA challenges (e.g., sending and verifying codes)." }), "\n", _jsx(_components.li, { children: "Cancel and ongoing MFA flow." }), "\n", _jsx(_components.li, { children: "Access the list of available MFA methods for your app." }), "\n"] }), _jsxs(_components.p, { children: ["Here’s an example of how to use the ", _jsx(_components.code, { children: "useMfa" }), " hook to prompt for MFA verification:"] }), _jsx(CodeBlock, { filename: "Example button for prompting MFA verification", numberOfLines: "18", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "18", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useMfa" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/expo'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Button" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react-native'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " MfaVerificationButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "prompt" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "init" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useMfa" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleMfaVerification" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " try" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " init" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({ " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "mfaMethods:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'sms'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'totp'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'passkey'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]});" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " prompt" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Your code on successful MFA verification" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "catch" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "error" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Your code on cancelled or otherwise unsuccessful MFA verification" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " };" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Button" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onPress" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleMfaVerification" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " title" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"Verify MFA\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }