CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="msapplication-TileImage" content="/assets/icon/ms-icon-144x144.png"/><link rel="apple-touch-icon" sizes="57x57" href="/assets/icon/apple-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="/assets/icon/apple-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="/assets/icon/apple-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="/assets/icon/apple-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="/assets/icon/apple-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="/assets/icon/apple-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="/assets/icon/apple-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="/assets/icon/apple-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-icon-180x180.png"/><link rel="apple-touch-icon" href="/assets/icon/apple-icon.png"/><link rel="icon" type="image/png" sizes="192x192" href="/assets/icon/android-icon-192x192.png"/><link rel="icon" type="image/png" sizes="16x16" href="/assets/icon/favicon-teal-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="/assets/icon/favicon-teal-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/assets/icon/favicon-teal-96x96.png"/><link rel="icon" type="image/x-icon" href="/assets/icon/favicon-teal.ico"/><link rel="apple-touch-icon" href="/assets/icon/icon.png"/><link rel="preload" as="script" href="https://a0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"/><title>Manage MFA settings - React - AWS Amplify Gen 1 Documentation</title><meta property="og:title" content="Manage MFA settings - React - AWS Amplify Gen 1 Documentation"/><meta name="description" content="Learn how to enable multi-factor authentication with Amplify. AWS Amplify Documentation"/><meta property="og:description" content="Learn how to enable multi-factor authentication with Amplify. AWS Amplify Documentation"/><meta property="og:url" content="docs.amplify.aws/gen1/react/build-a-backend/auth/manage-mfa/"/><meta property="og:image" content="https://docs.amplify.aws/assets/classic-og.png"/><meta property="description" content="Learn how to enable multi-factor authentication with Amplify. AWS Amplify Documentation"/><meta property="twitter:card" content="summary"/><meta property="twitter:title" content="Manage MFA settings - React - AWS Amplify Gen 1 Documentation"/><meta property="twitter:description" content="Learn how to enable multi-factor authentication with Amplify. AWS Amplify Documentation"/><meta property="twitter:image" content="https://docs.amplify.aws/assets/classic-og.png"/><meta name="next-head-count" content="31"/><meta http-equiv="Content-Security-Policy" content=" default-src 'none'; style-src 'self' 'unsafe-inline' *.shortbread.aws.dev; font-src 'self'; frame-src 'self' https://www.youtube-nocookie.com https://aws.demdex.net https://dpm.demdex.net; connect-src 'self' https://amazonwebservices.d2.sc.omtrdc.net https://aws.demdex.net https://dpm.demdex.net https://cm.everesttech.net *.shortbread.aws.dev https://d2c.aws.amazon.com/ https://vs.aws.amazon.com https://a0.awsstatic.com/ https://aws.amazon.com/ https://*.algolia.net https://*.algolianet.com *.amazonaws.com; img-src 'self' https://img.shields.io https://amazonwebservices.d2.sc.omtrdc.net https://aws.demdex.net https://dpm.demdex.net https://cm.everesttech.net https://a0.awsstatic.com/ https://d2c.aws.amazon.com/; media-src 'self'; script-src 'self' 'sha256-8EdGZXErJDVDjTSZsaCb1e2p8abE/MOwjdXFjaglQUI=' https://a0.awsstatic.com/ https://d2c.aws.amazon.com/ *.shortbread.aws.dev; "/><script src="https://prod.assets.shortbread.aws.dev/shortbread.js" defer=""></script><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/89306a198c503034.css" as="style"/><link rel="stylesheet" href="/_next/static/css/89306a198c503034.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-6bb5a2efc49b94ec.js" defer=""></script><script src="/_next/static/chunks/framework-22c76c6e1a554a8b.js" defer=""></script><script src="/_next/static/chunks/main-c56f89fbe5acc32e.js" defer=""></script><script src="/_next/static/chunks/pages/_app-a0ecc6a3ada68f2e.js" defer=""></script><script src="/_next/static/chunks/73505-4400b37f268480d1.js" defer=""></script><script src="/_next/static/chunks/61637-18e86a8757897d93.js" defer=""></script><script src="/_next/static/chunks/22910-1b429745b746df32.js" defer=""></script><script src="/_next/static/chunks/pages/gen1/%5Bplatform%5D/build-a-backend/auth/manage-mfa-97d903de8a6a71ca.js" defer=""></script><script src="/_next/static/amplify-docs/_buildManifest.js" defer=""></script><script src="/_next/static/amplify-docs/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div data-amplify-theme="gen1-theme" data-amplify-color-mode="system" dir="ltr"><div aria-label="undefined API Reference" class="api-modal-container" tabindex="0"><dialog class="amplify-card api-modal" aria-modal="true"><div class="amplify-flex api-model__header"><nav aria-label="API Type breadcrumbs" class="amplify-flex api-modal__breadcrumbs" tabindex="0"></nav><button aria-label="Close" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small api-modal__close" type="button"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 3.8182L3.81818 22L2 20.1818L20.1818 2.00002L22 3.8182Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3.81818 2L22 20.1818L20.1818 22L2 3.81818L3.81818 2Z" fill="currentColor"></path></svg></button></div><dl class="amplify-grid api-modal__content"><dt>Name:</dt><dd class="amplify-flex api-modal__content__name"><span class="amplify-badge amplify-badge--small">interface </span><span class="api-modal__api-name"></span></dd><dt>Value:</dt><dd class="api-modal__api-value api-modal__content__value" tabindex="0"><code class="parameter"></code></dd></dl></dialog></div><dialog class="amplify-flex modal" aria-labelledby=":Rcp6:"><div class="amplify-flex modal-header"><h2 class="amplify-flex modal-heading" id=":Rcp6:"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12.2817 0 12.5389 0.167603 12.6636 0.432339L15.9709 7.45639L23.3664 8.58275C23.6452 8.6252 23.8767 8.82983 23.9638 9.1106C24.0508 9.39138 23.9782 9.69959 23.7765 9.90566L18.4251 15.3731L19.6884 23.0933C19.736 23.3843 19.6219 23.6783 19.394 23.8519C19.1661 24.0254 18.864 24.0483 18.6147 23.9109L12 20.2659L5.38527 23.9109C5.13596 24.0483 4.83386 24.0254 4.60599 23.8519C4.37812 23.6783 4.264 23.3843 4.31161 23.0933L5.57491 15.3731L0.223483 9.90566C0.0217881 9.69959 -0.0508005 9.39138 0.0362381 9.1106C0.123277 8.82983 0.354847 8.6252 0.633583 8.58275L8.02908 7.45639L11.3364 0.432339C11.4611 0.167603 11.7183 0 12 0ZM12 2.52807L9.18402 8.50853C9.07624 8.73744 8.86789 8.8961 8.62687 8.93281L2.33015 9.89182L6.8865 14.547C7.0609 14.7251 7.14048 14.9819 7.09931 15.2335L6.02371 21.8066L11.6557 18.7032C11.8712 18.5844 12.1288 18.5844 12.3443 18.7032L17.9763 21.8066L16.9007 15.2335C16.8595 14.9819 16.9391 14.7251 17.1135 14.547L21.6699 9.89182L15.3731 8.93281C15.1321 8.8961 14.9238 8.73744 14.816 8.50853L12 2.52807Z" fill="currentColor"></path></svg> Introducing Amplify Gen 2</h2><button class="amplify-button amplify-field-group__control amplify-button--link modal-dismiss" type="button"><span class="amplify-visually-hidden">Dismiss Gen 2 introduction dialog</span><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 3.8182L3.81818 22L2 20.1818L20.1818 2.00002L22 3.8182Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3.81818 2L22 20.1818L20.1818 22L2 3.81818L3.81818 2Z" fill="currentColor"></path></svg></button></div>Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.<div class="amplify-flex modal-key-points"><div class="amplify-flex modal-key-point"><div class="modal-key-point-left" aria-hidden="true"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M42.9998 5H4.99976V43H42.9998V5Z" stroke="white" stroke-width="4" stroke-linejoin="round" fill="none"></path><path d="M36.0036 21.002H29.1278C28.5755 21.002 28.1278 21.4497 28.1278 22.002V27.5027C28.1278 28.055 28.5755 28.5027 29.1278 28.5027H35.0036C35.5559 28.5027 36.0036 28.9504 36.0036 29.5027V35.0035C36.0036 35.5557 35.5558 36.0035 35.0036 36.0035H28.1278M22.8773 21.002H18.9394M15.0015 21.002H18.9394M18.9394 21.002V36.0035" stroke="white" stroke-width="4" stroke-linecap="square" fill="none"></path></svg></div><div class="amplify-flex modal-key-point-right"><h3 class="amplify-text modal-key-point-heading">Fullstack TypeScript</h3><p class="amplify-text modal-key-point-text">Write your app's data model, auth, storage, and functions in TypeScript; Amplify will do the rest.</p></div></div><div class="amplify-flex modal-key-point"><div style="text-align:center;font-size:var(--amplify-font-sizes-xxxl)" aria-hidden="true" class="modal-key-point-left">馃殌</div><div class="amplify-flex modal-key-point-right"><h3 class="amplify-text modal-key-point-heading">Built with the AWS CDK</h3><p class="amplify-text modal-key-point-text">Use any cloud resource your app needs. Never worry about scale.</p></div></div></div><div class="amplify-flex modal-actions"><a style="gap:var(--amplify-space-small)" class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--small modal-action modal-action--primary" type="button" href="/react/how-amplify-works/">Learn more about Gen 2<svg class="amplify-icon icon-rotate-270" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></a></div></dialog><div class="layout-wrapper layout-wrapper--inner"><nav aria-label="Amplify Docs - External links to additional Amplify resources" class="navbar navbar--gen1"><a class="amplify-button amplify-field-group__control amplify-button--small skip-to-main" type="button" href="#pageMain">Skip to main content</a><div class="amplify-flex nav-links-container"><div class="amplify-flex navbar__logo-container"><a class="amplify-flex navbar-logo-link navbar-logo-link--gen1" href="/gen1/react"><svg style="width:20px;height:20px" class="amplify-icon navbar-logo" viewBox="0 0 24 22" aria-hidden="true"><path d="M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z"></path><path d="M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z"></path></svg><span class="amplify-text navbar-logo-text"><span style="font-weight:400">Amplify</span> <span style="font-weight:300">Docs</span></span></a><div class="gen-switcher"><div class="popover-wrapper"><button class="amplify-button amplify-field-group__control amplify-button--small popover-trigger gen-switcher__trigger gen-switcher__trigger--gen1" type="button" aria-expanded="false" aria-controls=":R9ikp6:">Gen 1<span class="amplify-visually-hidden">Open Amplify generation navigation</span><svg class="amplify-icon popover-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></button><div class="popover popover--anchor-left gen-switcher__list" id=":R9ikp6:" tabindex="-1"><ul class="popover-list"><li class="popover-list__item"><a class="popover-list__link" href="/react/">Gen 2 </a></li><li class="popover-list__item"><a class="popover-list__link popover-list__link--current" href="/gen1/react/">Gen 1 <svg class="amplify-icon gen-switcher__check" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.2694 5.60885C20.6841 5.21401 21.236 4.99573 21.8086 5.00006C22.3812 5.0044 22.9298 5.23101 23.3385 5.63207C23.7472 6.03314 23.9841 6.5773 23.9992 7.14973C24.0144 7.72215 23.8065 8.27807 23.4196 8.70017L11.6726 23.3913C11.4706 23.6089 11.2268 23.7835 10.9558 23.9047C10.6848 24.0259 10.3921 24.0912 10.0953 24.0967C9.79843 24.1022 9.50355 24.0477 9.22823 23.9367C8.95292 23.8256 8.70283 23.6601 8.49292 23.4502L0.702785 15.6601C0.485843 15.4579 0.311839 15.2141 0.191154 14.9433C0.0704689 14.6724 0.0055747 14.38 0.000343637 14.0836C-0.00488742 13.7871 0.049652 13.4926 0.160707 13.2176C0.271762 12.9427 0.437058 12.6929 0.646735 12.4833C0.856411 12.2736 1.10617 12.1083 1.38112 11.9972C1.65606 11.8862 1.95056 11.8316 2.24704 11.8369C2.54352 11.8421 2.83591 11.907 3.10677 12.0277C3.37763 12.1484 3.6214 12.3224 3.82355 12.5393L9.98853 18.7013L20.2134 5.67362C20.2319 5.65096 20.2486 5.62933 20.2694 5.60885Z" fill="currentColor"></path></svg></a></li></ul></div></div></div><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--large mobile-only navbar-expander" type="button" aria-expanded="false" aria-controls="mobile-nav-links"><span class="amplify-visually-hidden">Open Dev Center menu</span><svg style="font-size:var(--amplify-font-sizes-xs)" class="amplify-icon icon-rotate-0" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></button></div><div class="amplify-flex left-nav-links collapsed-menu"><div class="mobile-border"><a class="amplify-link navbar-menu-item " href="https://ui.docs.amplify.aws/">UI Library</a></div><div class="mobile-border"><a class="amplify-link navbar-menu-item " href="/contribute/">Contribute</a></div></div><div class="amplify-flex right-nav-links collapsed-menu" id="right-nav"><div class="mobile-border"><a aria-label="About AWS Amplify (opens in new tab)" class="amplify-link navbar-menu-item" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/amplify/"><div style="align-items:center;gap:var(--amplify-space-xs)" class="amplify-flex">About AWS Amplify<svg style="font-size:var(--amplify-font-sizes-small)" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.42857 20.5714H20.5714V13.8H24V22.2857C24 23.2325 23.2325 24 22.2857 24H1.71429C0.767512 24 0 23.2325 0 22.2857V1.71429C0 0.767512 0.767512 0 1.71429 0H10.2857V3.42857H3.42857V20.5714Z" fill="currentColor"></path><path d="M13.7143 0H24V10.2857H20.5714V5.85292L9.7836 16.6407L7.35924 14.2164L18.147 3.42857H13.7143V0Z" fill="currentColor"></path></svg></div></a></div><div class="mobile-border"><a aria-label="Pricing (opens in new tab)" class="amplify-link navbar-menu-item" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/amplify/pricing"><div style="align-items:center;gap:var(--amplify-space-xs)" class="amplify-flex">Pricing<svg style="font-size:var(--amplify-font-sizes-small)" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.42857 20.5714H20.5714V13.8H24V22.2857C24 23.2325 23.2325 24 22.2857 24H1.71429C0.767512 24 0 23.2325 0 22.2857V1.71429C0 0.767512 0.767512 0 1.71429 0H10.2857V3.42857H3.42857V20.5714Z" fill="currentColor"></path><path d="M13.7143 0H24V10.2857H20.5714V5.85292L9.7836 16.6407L7.35924 14.2164L18.147 3.42857H13.7143V0Z" fill="currentColor"></path></svg></div></a></div></div></div><div class=""></div></nav><header class="layout-header"><div class="amplify-flex layout-search layout-search--inner"><button class="amplify-button amplify-field-group__control amplify-button--small search-menu-toggle mobile-toggle" type="button"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 5H24V7H0V5ZM0 11H24V13H0V11ZM24 17H0V19H24V17Z" fill="currentColor"></path></svg>Menu</button><div class="layout-search__search layout-search__search--inner"><div class="layout-search__search__container"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div class="layout-sidebar"><div class="layout-sidebar__backdrop"></div><div class="layout-sidebar__inner"><button class="amplify-button amplify-field-group__control amplify-button--outlined--overlay amplify-button--small layout-sidebar__mobile-toggle" type="button"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.8981 12.5817L19.8409 0.552551L21.0447 1.44748L12.4364 13.0266L21.0991 24.5493L19.9002 25.4507L10.9005 13.4798L10.5636 13.0316L10.8981 12.5817ZM3.39811 12.5817L12.3409 0.552551L13.5447 1.44748L4.93642 13.0266L13.5991 24.5493L12.4002 25.4507L3.40052 13.4798C3.20073 13.2141 3.19975 12.8485 3.39811 12.5817Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Close menu</span></button><div class="layout-sidebar-platform"><div class="platform-navigator"><p style="font-weight:var(--amplify-font-weights-bold);padding-block-end:var(--amplify-space-small)" class="amplify-text" id="platformNavigatorLabel">Choose your framework/language</p><div style="align-items:center" class="amplify-flex"><div style="flex:1 0 auto" class="popover-wrapper"><button class="amplify-button amplify-field-group__control amplify-button--fullwidth popover-trigger platform-navigator__button" type="button" aria-expanded="false" aria-controls=":R3ajkp6:" id="selectedLabel" aria-labelledby="platformNavigatorLabel selectedLabel"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.1484 11.6917C14.1484 12.8797 13.1881 13.8428 12.0036 13.8428C10.8191 13.8428 9.85883 12.8797 9.85883 11.6917C9.85883 10.5038 10.8191 9.54071 12.0036 9.54071C13.1881 9.54071 14.1484 10.5038 14.1484 11.6917Z" fill="#087ea4"></path><path d="M12.0027 16.6185C11.8238 16.623 11.6129 16.6256 11.4011 16.6256C8.89944 16.6256 6.4868 16.2463 4.21655 15.5421L4.38831 15.5876C3.186 15.1985 2.14387 14.6246 1.23702 13.8891L1.25571 13.9034C0.553545 13.3937 0.0809849 12.6047 0.000889943 11.7015L0 11.6899C0 10.2672 1.55473 8.87479 4.16583 7.96618C6.40136 7.22805 8.97419 6.80231 11.6458 6.80231C11.7695 6.80231 11.8932 6.8032 12.0169 6.80498H11.9982C12.1015 6.8032 12.2225 6.80231 12.3444 6.80231C14.9831 6.80231 17.5239 7.22091 19.9054 7.99564L19.7318 7.94655C20.8932 8.32499 21.9015 8.87122 22.787 9.56562L22.7656 9.54956C23.4554 10.0369 23.9208 10.8027 23.9991 11.6801L24 11.6917C24 13.1697 22.261 14.6656 19.4586 15.5956C17.3557 16.2463 14.9377 16.6212 12.4325 16.6212C12.2812 16.6212 12.1308 16.6194 11.9804 16.6167H12.0027V16.6185ZM12.0027 7.83587C11.9083 7.83409 11.7962 7.83409 11.6841 7.83409C9.12014 7.83409 6.65055 8.23752 4.33403 8.98458L4.504 8.93727C2.10294 9.77715 1.0261 10.9259 1.0261 11.6926C1.0261 12.4896 2.18392 13.7454 4.72204 14.6147C6.72352 15.2368 9.02403 15.5956 11.4082 15.5956C11.6173 15.5956 11.8256 15.593 12.0329 15.5876L12.0027 15.5885C12.1326 15.5912 12.2857 15.593 12.4387 15.593C14.8274 15.593 17.1323 15.2359 19.3047 14.5728L19.1382 14.6165C21.7725 13.7383 22.9828 12.4825 22.9828 11.689C22.892 11.1195 22.5716 10.6394 22.1231 10.3368L22.116 10.3323C21.3453 9.73074 20.4465 9.24609 19.4729 8.92745L19.4106 8.9096C17.3032 8.22591 14.8781 7.83141 12.3622 7.83141C12.2358 7.83141 12.1104 7.8323 11.9849 7.83409H12.0036L12.0027 7.83587Z" fill="#087ea4"></path><path d="M7.13639 22.413C7.12215 22.413 7.10524 22.4139 7.08922 22.4139C6.68608 22.4139 6.30785 22.3077 5.98124 22.122L5.99281 22.1283C4.76647 21.4142 4.33929 19.3685 4.85368 16.6472C5.47397 13.8553 6.47961 11.3865 7.82965 9.14981L7.76825 9.26049C9.10227 6.89079 10.714 4.86382 12.5962 3.12693L12.614 3.11086C13.4354 2.35756 14.3965 1.73903 15.4502 1.30079L15.5152 1.27669C15.8774 1.10175 16.3028 1 16.7522 1C17.1981 1 17.6208 1.10086 17.9982 1.28026L17.9804 1.27312C19.2574 2.01036 19.681 4.27206 19.0821 7.16926C18.4413 9.81743 17.4642 12.1496 16.1791 14.273L16.2414 14.1632C14.9492 16.5106 13.3856 18.5206 11.555 20.2495L11.5425 20.2611C10.6899 21.0438 9.68875 21.6802 8.587 22.1194L8.52114 22.1426C8.11177 22.3041 7.63832 22.4032 7.14262 22.4148H7.13728L7.13639 22.413ZM8.20877 9.51843L8.65285 9.77548C7.42384 11.8105 6.45914 14.1722 5.88869 16.6838L5.85843 16.8444C5.38409 19.3516 5.84152 20.8591 6.49919 21.2411C6.66917 21.3321 6.87029 21.3848 7.08388 21.3848C7.10168 21.3848 7.12037 21.3848 7.13817 21.3839H7.1355C7.98539 21.3839 9.32298 20.8439 10.8697 19.4899C12.6282 17.8235 14.1216 15.8992 15.2945 13.7741L15.355 13.6536C16.528 11.7293 17.4651 9.50058 18.0471 7.13177L18.0809 6.96933C18.6407 4.23993 18.1575 2.56909 17.4704 2.16923C17.2586 2.08533 17.013 2.03714 16.7567 2.03714C16.4327 2.03714 16.1266 2.11479 15.8561 2.25135L15.8676 2.24599C14.8727 2.66102 14.0183 3.21529 13.2806 3.89363L13.2868 3.88827C11.4704 5.56714 9.92992 7.50932 8.71604 9.66124L8.65463 9.77906L8.20877 9.51843Z" fill="#087ea4"></path><path d="M16.8698 22.4256C15.7075 22.4256 14.2355 21.7232 12.6959 20.3942C10.7603 18.6242 9.12101 16.5723 7.83327 14.2945L7.76919 14.1722C6.49657 12.0757 5.49894 9.64258 4.90802 7.0542L4.87598 6.88908C4.73181 6.25627 4.64905 5.53063 4.64905 4.78536C4.64905 4.31499 4.68198 3.85354 4.74516 3.40103L4.73893 3.45279C4.81458 2.56203 5.28002 1.79445 5.95993 1.31158L5.96883 1.30533C7.24145 0.564523 9.40847 1.32676 11.6129 3.29392C13.4123 5.00225 14.9484 6.96495 16.1676 9.13115L16.2317 9.25432C17.5025 11.3045 18.5073 13.6822 19.1169 16.2144L19.1507 16.3804C19.2957 17.0132 19.3794 17.7406 19.3794 18.4868C19.3794 19.0018 19.3402 19.507 19.2637 20.0005L19.2708 19.9452C19.1792 20.8574 18.6977 21.6419 17.9991 22.1373L17.9893 22.1435C17.6796 22.3212 17.3094 22.4256 16.9151 22.4256C16.8991 22.4256 16.8831 22.4256 16.8671 22.4247L16.8698 22.4256ZM8.65735 13.6581C9.95489 15.9529 11.5203 17.9165 13.3482 19.5989L13.366 19.615C15.2937 21.2778 16.8226 21.6375 17.4847 21.2519C18.1726 20.8538 18.6763 19.2205 18.1557 16.5812C17.531 14.0018 16.5654 11.7311 15.291 9.67204L15.3488 9.772C14.1216 7.57991 12.655 5.70022 10.9454 4.074L10.9347 4.06419C8.85759 2.21305 7.17471 1.79713 6.48678 2.1952C6.06584 2.53883 5.78907 3.0449 5.75258 3.61702V3.62327C5.70363 3.97136 5.67604 4.37301 5.67604 4.78179C5.67604 5.45745 5.75258 6.11436 5.89675 6.74628L5.88518 6.68737C6.48411 9.32216 7.43991 11.649 8.71698 13.7599L8.65824 13.6555L8.65735 13.6581Z" fill="#087ea4"></path><g class="icon-monochrome"><path d="M14.1484 11.6917C14.1484 12.8797 13.1881 13.8428 12.0036 13.8428C10.8191 13.8428 9.85883 12.8797 9.85883 11.6917C9.85883 10.5038 10.8191 9.54071 12.0036 9.54071C13.1881 9.54071 14.1484 10.5038 14.1484 11.6917Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M12.0027 16.6185C11.8238 16.623 11.6129 16.6256 11.4011 16.6256C8.89944 16.6256 6.4868 16.2463 4.21655 15.5421L4.38831 15.5876C3.186 15.1985 2.14387 14.6246 1.23702 13.8891L1.25571 13.9034C0.553545 13.3937 0.0809849 12.6047 0.000889943 11.7015L0 11.6899C0 10.2672 1.55473 8.87479 4.16583 7.96618C6.40136 7.22805 8.97419 6.80231 11.6458 6.80231C11.7695 6.80231 11.8932 6.8032 12.0169 6.80498H11.9982C12.1015 6.8032 12.2225 6.80231 12.3444 6.80231C14.9831 6.80231 17.5239 7.22091 19.9054 7.99564L19.7318 7.94655C20.8932 8.32499 21.9015 8.87122 22.787 9.56562L22.7656 9.54956C23.4554 10.0369 23.9208 10.8027 23.9991 11.6801L24 11.6917C24 13.1697 22.261 14.6656 19.4586 15.5956C17.3557 16.2463 14.9377 16.6212 12.4325 16.6212C12.2812 16.6212 12.1308 16.6194 11.9804 16.6167H12.0027V16.6185ZM12.0027 7.83587C11.9083 7.83409 11.7962 7.83409 11.6841 7.83409C9.12014 7.83409 6.65055 8.23752 4.33403 8.98458L4.504 8.93727C2.10294 9.77715 1.0261 10.9259 1.0261 11.6926C1.0261 12.4896 2.18392 13.7454 4.72204 14.6147C6.72352 15.2368 9.02403 15.5956 11.4082 15.5956C11.6173 15.5956 11.8256 15.593 12.0329 15.5876L12.0027 15.5885C12.1326 15.5912 12.2857 15.593 12.4387 15.593C14.8274 15.593 17.1323 15.2359 19.3047 14.5728L19.1382 14.6165C21.7725 13.7383 22.9828 12.4825 22.9828 11.689C22.892 11.1195 22.5716 10.6394 22.1231 10.3368L22.116 10.3323C21.3453 9.73074 20.4465 9.24609 19.4729 8.92745L19.4106 8.9096C17.3032 8.22591 14.8781 7.83141 12.3622 7.83141C12.2358 7.83141 12.1104 7.8323 11.9849 7.83409H12.0036L12.0027 7.83587Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M7.13639 22.413C7.12215 22.413 7.10524 22.4139 7.08922 22.4139C6.68608 22.4139 6.30785 22.3077 5.98124 22.122L5.99281 22.1283C4.76647 21.4142 4.33929 19.3685 4.85368 16.6472C5.47397 13.8553 6.47961 11.3865 7.82965 9.14981L7.76825 9.26049C9.10227 6.89079 10.714 4.86382 12.5962 3.12693L12.614 3.11086C13.4354 2.35756 14.3965 1.73903 15.4502 1.30079L15.5152 1.27669C15.8774 1.10175 16.3028 1 16.7522 1C17.1981 1 17.6208 1.10086 17.9982 1.28026L17.9804 1.27312C19.2574 2.01036 19.681 4.27206 19.0821 7.16926C18.4413 9.81743 17.4642 12.1496 16.1791 14.273L16.2414 14.1632C14.9492 16.5106 13.3856 18.5206 11.555 20.2495L11.5425 20.2611C10.6899 21.0438 9.68875 21.6802 8.587 22.1194L8.52114 22.1426C8.11177 22.3041 7.63832 22.4032 7.14262 22.4148H7.13728L7.13639 22.413ZM8.20877 9.51843L8.65285 9.77548C7.42384 11.8105 6.45914 14.1722 5.88869 16.6838L5.85843 16.8444C5.38409 19.3516 5.84152 20.8591 6.49919 21.2411C6.66917 21.3321 6.87029 21.3848 7.08388 21.3848C7.10168 21.3848 7.12037 21.3848 7.13817 21.3839H7.1355C7.98539 21.3839 9.32298 20.8439 10.8697 19.4899C12.6282 17.8235 14.1216 15.8992 15.2945 13.7741L15.355 13.6536C16.528 11.7293 17.4651 9.50058 18.0471 7.13177L18.0809 6.96933C18.6407 4.23993 18.1575 2.56909 17.4704 2.16923C17.2586 2.08533 17.013 2.03714 16.7567 2.03714C16.4327 2.03714 16.1266 2.11479 15.8561 2.25135L15.8676 2.24599C14.8727 2.66102 14.0183 3.21529 13.2806 3.89363L13.2868 3.88827C11.4704 5.56714 9.92992 7.50932 8.71604 9.66124L8.65463 9.77906L8.20877 9.51843Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M16.8698 22.4256C15.7075 22.4256 14.2355 21.7232 12.6959 20.3942C10.7603 18.6242 9.12101 16.5723 7.83327 14.2945L7.76919 14.1722C6.49657 12.0757 5.49894 9.64258 4.90802 7.0542L4.87598 6.88908C4.73181 6.25627 4.64905 5.53063 4.64905 4.78536C4.64905 4.31499 4.68198 3.85354 4.74516 3.40103L4.73893 3.45279C4.81458 2.56203 5.28002 1.79445 5.95993 1.31158L5.96883 1.30533C7.24145 0.564523 9.40847 1.32676 11.6129 3.29392C13.4123 5.00225 14.9484 6.96495 16.1676 9.13115L16.2317 9.25432C17.5025 11.3045 18.5073 13.6822 19.1169 16.2144L19.1507 16.3804C19.2957 17.0132 19.3794 17.7406 19.3794 18.4868C19.3794 19.0018 19.3402 19.507 19.2637 20.0005L19.2708 19.9452C19.1792 20.8574 18.6977 21.6419 17.9991 22.1373L17.9893 22.1435C17.6796 22.3212 17.3094 22.4256 16.9151 22.4256C16.8991 22.4256 16.8831 22.4256 16.8671 22.4247L16.8698 22.4256ZM8.65735 13.6581C9.95489 15.9529 11.5203 17.9165 13.3482 19.5989L13.366 19.615C15.2937 21.2778 16.8226 21.6375 17.4847 21.2519C18.1726 20.8538 18.6763 19.2205 18.1557 16.5812C17.531 14.0018 16.5654 11.7311 15.291 9.67204L15.3488 9.772C14.1216 7.57991 12.655 5.70022 10.9454 4.074L10.9347 4.06419C8.85759 2.21305 7.17471 1.79713 6.48678 2.1952C6.06584 2.53883 5.78907 3.0449 5.75258 3.61702V3.62327C5.70363 3.97136 5.67604 4.37301 5.67604 4.78179C5.67604 5.45745 5.75258 6.11436 5.89675 6.74628L5.88518 6.68737C6.48411 9.32216 7.43991 11.649 8.71698 13.7599L8.65824 13.6555L8.65735 13.6581Z" fill="var(--amplify-colors-neutral-100)"></path></g></svg>React<svg class="amplify-icon popover-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></button><div data-testid="" class="popover popover--anchor-left popover--fullWidth" id=":R3ajkp6:" tabindex="-1"><ul class="popover-list"><li class="popover-list__item"><a class="popover-list__link popover-list__link--current" href="/gen1/react/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.1484 11.6917C14.1484 12.8797 13.1881 13.8428 12.0036 13.8428C10.8191 13.8428 9.85883 12.8797 9.85883 11.6917C9.85883 10.5038 10.8191 9.54071 12.0036 9.54071C13.1881 9.54071 14.1484 10.5038 14.1484 11.6917Z" fill="#087ea4"></path><path d="M12.0027 16.6185C11.8238 16.623 11.6129 16.6256 11.4011 16.6256C8.89944 16.6256 6.4868 16.2463 4.21655 15.5421L4.38831 15.5876C3.186 15.1985 2.14387 14.6246 1.23702 13.8891L1.25571 13.9034C0.553545 13.3937 0.0809849 12.6047 0.000889943 11.7015L0 11.6899C0 10.2672 1.55473 8.87479 4.16583 7.96618C6.40136 7.22805 8.97419 6.80231 11.6458 6.80231C11.7695 6.80231 11.8932 6.8032 12.0169 6.80498H11.9982C12.1015 6.8032 12.2225 6.80231 12.3444 6.80231C14.9831 6.80231 17.5239 7.22091 19.9054 7.99564L19.7318 7.94655C20.8932 8.32499 21.9015 8.87122 22.787 9.56562L22.7656 9.54956C23.4554 10.0369 23.9208 10.8027 23.9991 11.6801L24 11.6917C24 13.1697 22.261 14.6656 19.4586 15.5956C17.3557 16.2463 14.9377 16.6212 12.4325 16.6212C12.2812 16.6212 12.1308 16.6194 11.9804 16.6167H12.0027V16.6185ZM12.0027 7.83587C11.9083 7.83409 11.7962 7.83409 11.6841 7.83409C9.12014 7.83409 6.65055 8.23752 4.33403 8.98458L4.504 8.93727C2.10294 9.77715 1.0261 10.9259 1.0261 11.6926C1.0261 12.4896 2.18392 13.7454 4.72204 14.6147C6.72352 15.2368 9.02403 15.5956 11.4082 15.5956C11.6173 15.5956 11.8256 15.593 12.0329 15.5876L12.0027 15.5885C12.1326 15.5912 12.2857 15.593 12.4387 15.593C14.8274 15.593 17.1323 15.2359 19.3047 14.5728L19.1382 14.6165C21.7725 13.7383 22.9828 12.4825 22.9828 11.689C22.892 11.1195 22.5716 10.6394 22.1231 10.3368L22.116 10.3323C21.3453 9.73074 20.4465 9.24609 19.4729 8.92745L19.4106 8.9096C17.3032 8.22591 14.8781 7.83141 12.3622 7.83141C12.2358 7.83141 12.1104 7.8323 11.9849 7.83409H12.0036L12.0027 7.83587Z" fill="#087ea4"></path><path d="M7.13639 22.413C7.12215 22.413 7.10524 22.4139 7.08922 22.4139C6.68608 22.4139 6.30785 22.3077 5.98124 22.122L5.99281 22.1283C4.76647 21.4142 4.33929 19.3685 4.85368 16.6472C5.47397 13.8553 6.47961 11.3865 7.82965 9.14981L7.76825 9.26049C9.10227 6.89079 10.714 4.86382 12.5962 3.12693L12.614 3.11086C13.4354 2.35756 14.3965 1.73903 15.4502 1.30079L15.5152 1.27669C15.8774 1.10175 16.3028 1 16.7522 1C17.1981 1 17.6208 1.10086 17.9982 1.28026L17.9804 1.27312C19.2574 2.01036 19.681 4.27206 19.0821 7.16926C18.4413 9.81743 17.4642 12.1496 16.1791 14.273L16.2414 14.1632C14.9492 16.5106 13.3856 18.5206 11.555 20.2495L11.5425 20.2611C10.6899 21.0438 9.68875 21.6802 8.587 22.1194L8.52114 22.1426C8.11177 22.3041 7.63832 22.4032 7.14262 22.4148H7.13728L7.13639 22.413ZM8.20877 9.51843L8.65285 9.77548C7.42384 11.8105 6.45914 14.1722 5.88869 16.6838L5.85843 16.8444C5.38409 19.3516 5.84152 20.8591 6.49919 21.2411C6.66917 21.3321 6.87029 21.3848 7.08388 21.3848C7.10168 21.3848 7.12037 21.3848 7.13817 21.3839H7.1355C7.98539 21.3839 9.32298 20.8439 10.8697 19.4899C12.6282 17.8235 14.1216 15.8992 15.2945 13.7741L15.355 13.6536C16.528 11.7293 17.4651 9.50058 18.0471 7.13177L18.0809 6.96933C18.6407 4.23993 18.1575 2.56909 17.4704 2.16923C17.2586 2.08533 17.013 2.03714 16.7567 2.03714C16.4327 2.03714 16.1266 2.11479 15.8561 2.25135L15.8676 2.24599C14.8727 2.66102 14.0183 3.21529 13.2806 3.89363L13.2868 3.88827C11.4704 5.56714 9.92992 7.50932 8.71604 9.66124L8.65463 9.77906L8.20877 9.51843Z" fill="#087ea4"></path><path d="M16.8698 22.4256C15.7075 22.4256 14.2355 21.7232 12.6959 20.3942C10.7603 18.6242 9.12101 16.5723 7.83327 14.2945L7.76919 14.1722C6.49657 12.0757 5.49894 9.64258 4.90802 7.0542L4.87598 6.88908C4.73181 6.25627 4.64905 5.53063 4.64905 4.78536C4.64905 4.31499 4.68198 3.85354 4.74516 3.40103L4.73893 3.45279C4.81458 2.56203 5.28002 1.79445 5.95993 1.31158L5.96883 1.30533C7.24145 0.564523 9.40847 1.32676 11.6129 3.29392C13.4123 5.00225 14.9484 6.96495 16.1676 9.13115L16.2317 9.25432C17.5025 11.3045 18.5073 13.6822 19.1169 16.2144L19.1507 16.3804C19.2957 17.0132 19.3794 17.7406 19.3794 18.4868C19.3794 19.0018 19.3402 19.507 19.2637 20.0005L19.2708 19.9452C19.1792 20.8574 18.6977 21.6419 17.9991 22.1373L17.9893 22.1435C17.6796 22.3212 17.3094 22.4256 16.9151 22.4256C16.8991 22.4256 16.8831 22.4256 16.8671 22.4247L16.8698 22.4256ZM8.65735 13.6581C9.95489 15.9529 11.5203 17.9165 13.3482 19.5989L13.366 19.615C15.2937 21.2778 16.8226 21.6375 17.4847 21.2519C18.1726 20.8538 18.6763 19.2205 18.1557 16.5812C17.531 14.0018 16.5654 11.7311 15.291 9.67204L15.3488 9.772C14.1216 7.57991 12.655 5.70022 10.9454 4.074L10.9347 4.06419C8.85759 2.21305 7.17471 1.79713 6.48678 2.1952C6.06584 2.53883 5.78907 3.0449 5.75258 3.61702V3.62327C5.70363 3.97136 5.67604 4.37301 5.67604 4.78179C5.67604 5.45745 5.75258 6.11436 5.89675 6.74628L5.88518 6.68737C6.48411 9.32216 7.43991 11.649 8.71698 13.7599L8.65824 13.6555L8.65735 13.6581Z" fill="#087ea4"></path><g class="icon-monochrome"><path d="M14.1484 11.6917C14.1484 12.8797 13.1881 13.8428 12.0036 13.8428C10.8191 13.8428 9.85883 12.8797 9.85883 11.6917C9.85883 10.5038 10.8191 9.54071 12.0036 9.54071C13.1881 9.54071 14.1484 10.5038 14.1484 11.6917Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M12.0027 16.6185C11.8238 16.623 11.6129 16.6256 11.4011 16.6256C8.89944 16.6256 6.4868 16.2463 4.21655 15.5421L4.38831 15.5876C3.186 15.1985 2.14387 14.6246 1.23702 13.8891L1.25571 13.9034C0.553545 13.3937 0.0809849 12.6047 0.000889943 11.7015L0 11.6899C0 10.2672 1.55473 8.87479 4.16583 7.96618C6.40136 7.22805 8.97419 6.80231 11.6458 6.80231C11.7695 6.80231 11.8932 6.8032 12.0169 6.80498H11.9982C12.1015 6.8032 12.2225 6.80231 12.3444 6.80231C14.9831 6.80231 17.5239 7.22091 19.9054 7.99564L19.7318 7.94655C20.8932 8.32499 21.9015 8.87122 22.787 9.56562L22.7656 9.54956C23.4554 10.0369 23.9208 10.8027 23.9991 11.6801L24 11.6917C24 13.1697 22.261 14.6656 19.4586 15.5956C17.3557 16.2463 14.9377 16.6212 12.4325 16.6212C12.2812 16.6212 12.1308 16.6194 11.9804 16.6167H12.0027V16.6185ZM12.0027 7.83587C11.9083 7.83409 11.7962 7.83409 11.6841 7.83409C9.12014 7.83409 6.65055 8.23752 4.33403 8.98458L4.504 8.93727C2.10294 9.77715 1.0261 10.9259 1.0261 11.6926C1.0261 12.4896 2.18392 13.7454 4.72204 14.6147C6.72352 15.2368 9.02403 15.5956 11.4082 15.5956C11.6173 15.5956 11.8256 15.593 12.0329 15.5876L12.0027 15.5885C12.1326 15.5912 12.2857 15.593 12.4387 15.593C14.8274 15.593 17.1323 15.2359 19.3047 14.5728L19.1382 14.6165C21.7725 13.7383 22.9828 12.4825 22.9828 11.689C22.892 11.1195 22.5716 10.6394 22.1231 10.3368L22.116 10.3323C21.3453 9.73074 20.4465 9.24609 19.4729 8.92745L19.4106 8.9096C17.3032 8.22591 14.8781 7.83141 12.3622 7.83141C12.2358 7.83141 12.1104 7.8323 11.9849 7.83409H12.0036L12.0027 7.83587Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M7.13639 22.413C7.12215 22.413 7.10524 22.4139 7.08922 22.4139C6.68608 22.4139 6.30785 22.3077 5.98124 22.122L5.99281 22.1283C4.76647 21.4142 4.33929 19.3685 4.85368 16.6472C5.47397 13.8553 6.47961 11.3865 7.82965 9.14981L7.76825 9.26049C9.10227 6.89079 10.714 4.86382 12.5962 3.12693L12.614 3.11086C13.4354 2.35756 14.3965 1.73903 15.4502 1.30079L15.5152 1.27669C15.8774 1.10175 16.3028 1 16.7522 1C17.1981 1 17.6208 1.10086 17.9982 1.28026L17.9804 1.27312C19.2574 2.01036 19.681 4.27206 19.0821 7.16926C18.4413 9.81743 17.4642 12.1496 16.1791 14.273L16.2414 14.1632C14.9492 16.5106 13.3856 18.5206 11.555 20.2495L11.5425 20.2611C10.6899 21.0438 9.68875 21.6802 8.587 22.1194L8.52114 22.1426C8.11177 22.3041 7.63832 22.4032 7.14262 22.4148H7.13728L7.13639 22.413ZM8.20877 9.51843L8.65285 9.77548C7.42384 11.8105 6.45914 14.1722 5.88869 16.6838L5.85843 16.8444C5.38409 19.3516 5.84152 20.8591 6.49919 21.2411C6.66917 21.3321 6.87029 21.3848 7.08388 21.3848C7.10168 21.3848 7.12037 21.3848 7.13817 21.3839H7.1355C7.98539 21.3839 9.32298 20.8439 10.8697 19.4899C12.6282 17.8235 14.1216 15.8992 15.2945 13.7741L15.355 13.6536C16.528 11.7293 17.4651 9.50058 18.0471 7.13177L18.0809 6.96933C18.6407 4.23993 18.1575 2.56909 17.4704 2.16923C17.2586 2.08533 17.013 2.03714 16.7567 2.03714C16.4327 2.03714 16.1266 2.11479 15.8561 2.25135L15.8676 2.24599C14.8727 2.66102 14.0183 3.21529 13.2806 3.89363L13.2868 3.88827C11.4704 5.56714 9.92992 7.50932 8.71604 9.66124L8.65463 9.77906L8.20877 9.51843Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M16.8698 22.4256C15.7075 22.4256 14.2355 21.7232 12.6959 20.3942C10.7603 18.6242 9.12101 16.5723 7.83327 14.2945L7.76919 14.1722C6.49657 12.0757 5.49894 9.64258 4.90802 7.0542L4.87598 6.88908C4.73181 6.25627 4.64905 5.53063 4.64905 4.78536C4.64905 4.31499 4.68198 3.85354 4.74516 3.40103L4.73893 3.45279C4.81458 2.56203 5.28002 1.79445 5.95993 1.31158L5.96883 1.30533C7.24145 0.564523 9.40847 1.32676 11.6129 3.29392C13.4123 5.00225 14.9484 6.96495 16.1676 9.13115L16.2317 9.25432C17.5025 11.3045 18.5073 13.6822 19.1169 16.2144L19.1507 16.3804C19.2957 17.0132 19.3794 17.7406 19.3794 18.4868C19.3794 19.0018 19.3402 19.507 19.2637 20.0005L19.2708 19.9452C19.1792 20.8574 18.6977 21.6419 17.9991 22.1373L17.9893 22.1435C17.6796 22.3212 17.3094 22.4256 16.9151 22.4256C16.8991 22.4256 16.8831 22.4256 16.8671 22.4247L16.8698 22.4256ZM8.65735 13.6581C9.95489 15.9529 11.5203 17.9165 13.3482 19.5989L13.366 19.615C15.2937 21.2778 16.8226 21.6375 17.4847 21.2519C18.1726 20.8538 18.6763 19.2205 18.1557 16.5812C17.531 14.0018 16.5654 11.7311 15.291 9.67204L15.3488 9.772C14.1216 7.57991 12.655 5.70022 10.9454 4.074L10.9347 4.06419C8.85759 2.21305 7.17471 1.79713 6.48678 2.1952C6.06584 2.53883 5.78907 3.0449 5.75258 3.61702V3.62327C5.70363 3.97136 5.67604 4.37301 5.67604 4.78179C5.67604 5.45745 5.75258 6.11436 5.89675 6.74628L5.88518 6.68737C6.48411 9.32216 7.43991 11.649 8.71698 13.7599L8.65824 13.6555L8.65735 13.6581Z" fill="var(--amplify-colors-neutral-100)"></path></g></svg>React</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/nextjs/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="black"></path><path d="M19.9345 21.0027L9.21902 7.20007H7.20009V16.7961H8.81524V9.25122L18.6666 21.9794C19.1112 21.6819 19.5346 21.3554 19.9345 21.0027Z" fill="url(#:R15bajkp6:)"></path><path d="M16.9333 7.20007H15.3333V16.8001H16.9333V7.20007Z" fill="url(#:R15bajkp6H1:)"></path><g class="icon-monochrome"><path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M19.9345 21.0027L9.21902 7.20007H7.20009V16.7961H8.81524V9.25122L18.6666 21.9794C19.1112 21.6819 19.5346 21.3554 19.9345 21.0027Z" fill="url(#:R15bajkp6H2:)"></path><path d="M16.9333 7.20007H15.3333V16.8001H16.9333V7.20007Z" fill="url(#:R15bajkp6H3:)"></path></g><defs><linearGradient id=":R15bajkp6:" x1="14.5334" y1="15.5334" x2="19.2668" y2="21.4001" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient><linearGradient id=":R15bajkp6H1:" x1="16.1333" y1="7.20007" x2="16.1065" y2="14.2501" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient><linearGradient id=":R15bajkp6H2:" x1="14.5334" y1="15.5334" x2="19.2668" y2="21.4001" gradientUnits="userSpaceOnUse"><stop stop-color="var(--amplify-colors-font-inverse)"></stop><stop offset="1" stop-color="var(--amplify-colors-font-inverse)" stop-opacity="0"></stop></linearGradient><linearGradient id=":R15bajkp6H3:" x1="16.1333" y1="7.20007" x2="16.1065" y2="14.2501" gradientUnits="userSpaceOnUse"><stop stop-color="var(--amplify-colors-font-inverse)"></stop><stop offset="1" stop-color="var(--amplify-colors-font-inverse)" stop-opacity="0"></stop></linearGradient></defs></svg>Next.js</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/angular/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M1 3.9779L12.1321 0L23.5639 3.90717L21.7129 18.6784L12.1321 24L2.70111 18.7492L1 3.9779Z" fill="#E23237"></path><path d="M23.5639 3.90717L12.132 0V24L21.7129 18.6873L23.5639 3.90717Z" fill="#B52E31"></path><path d="M12.1494 2.80231L5.21284 18.2808L7.80411 18.2366L9.19677 14.7448H15.4194L16.9443 18.2808L19.421 18.325L12.1494 2.80231ZM12.1671 7.76144L14.5116 12.6763H10.1045L12.1671 7.76144Z" fill="white"></path><g class="icon-monochrome"><path d="M1 3.9779L12.1321 0L23.5639 3.90717L21.7129 18.6784L12.1321 24L2.70111 18.7492L1 3.9779Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M23.5639 3.90717L12.132 0V24L21.7129 18.6873L23.5639 3.90717Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M12.1494 2.80231L5.21284 18.2808L7.80411 18.2366L9.19677 14.7448H15.4194L16.9443 18.2808L19.421 18.325L12.1494 2.80231ZM12.1671 7.76144L14.5116 12.6763H10.1045L12.1671 7.76144Z" fill="var(--amplify-colors-font-inverse)"></path></g></svg>Angular</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/vue/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 2L12 22.7353L24 2H19.2L12 14.4412L4.74 2H0Z" fill="#41B883"></path><path d="M4.74019 2L12.0002 14.5013L19.2002 2H14.7602L12.0002 6.80819L9.18019 2H4.74019Z" fill="#35495E"></path><g class="icon-monochrome"><path d="M0 2L12 22.7353L24 2H19.2L12 14.4412L4.74 2H0Z" fill="var(--amplify-colors-neutral-80)"></path><path d="M4.74019 2L12.0002 14.5013L19.2002 2H14.7602L12.0002 6.80819L9.18019 2H4.74019Z" fill="var(--amplify-colors-neutral-100)"></path></g></svg>Vue</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/javascript/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" fill="#F0DB4F"></rect><path d="M14.2009 19.7539C14.857 21.0556 16.2025 22.0509 18.2841 22.0509C20.4145 22.0509 21.9998 20.9431 21.9998 18.9189C21.9998 16.6913 20.4753 16.0106 18.4606 15.1444C17.4992 14.7269 17.0829 14.4542 17.0829 13.7794C17.0829 13.2339 17.4992 12.8164 18.1564 12.8164C18.797 12.8164 19.2133 13.0891 19.5974 13.7794L21.3426 12.6549C20.6066 11.3544 19.5807 10.8568 18.1564 10.8568C16.1536 10.8568 14.8725 12.1416 14.8725 13.8273C14.8725 15.6589 15.9461 16.5262 17.5636 17.2165C18.4713 17.6065 19.7572 17.9846 19.7572 18.9512C19.7572 19.5936 19.1644 20.059 18.2363 20.059C17.1306 20.059 16.5067 19.4812 16.026 18.694L14.2009 19.7539Z" fill="hsl(210, 50%, 10%)"></path><path d="M9.70503 22.222C11.6911 22.222 13.1214 20.991 13.1214 18.6617V10.767H10.7357V18.6306C10.7357 19.7539 10.2752 20.1284 9.53803 20.1284C8.76983 20.1284 8.45253 19.6846 8.10064 19.0589L6.27676 20.3378H6.30778C6.83621 21.5341 7.91098 22.222 9.70503 22.222Z" fill="hsl(210, 50%, 10%)"></path><g class="icon-monochrome"><rect width="24" height="24" class="icon-js-monochrome-bg"></rect><path d="M14.2009 19.7539C14.857 21.0556 16.2025 22.0509 18.2841 22.0509C20.4145 22.0509 21.9998 20.9431 21.9998 18.9189C21.9998 16.6913 20.4753 16.0106 18.4606 15.1444C17.4992 14.7269 17.0829 14.4542 17.0829 13.7794C17.0829 13.2339 17.4992 12.8164 18.1564 12.8164C18.797 12.8164 19.2133 13.0891 19.5974 13.7794L21.3426 12.6549C20.6066 11.3544 19.5807 10.8568 18.1564 10.8568C16.1536 10.8568 14.8725 12.1416 14.8725 13.8273C14.8725 15.6589 15.9461 16.5262 17.5636 17.2165C18.4713 17.6065 19.7572 17.9846 19.7572 18.9512C19.7572 19.5936 19.1644 20.059 18.2363 20.059C17.1306 20.059 16.5067 19.4812 16.026 18.694L14.2009 19.7539Z" class="icon-js-monochrome-letter"></path><path d="M9.70503 22.222C11.6911 22.222 13.1214 20.991 13.1214 18.6617V10.767H10.7357V18.6306C10.7357 19.7539 10.2752 20.1284 9.53803 20.1284C8.76983 20.1284 8.45253 19.6846 8.10064 19.0589L6.27676 20.3378H6.30778C6.83621 21.5341 7.91098 22.222 9.70503 22.222Z" class="icon-js-monochrome-letter"></path></g></svg>JavaScript</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/react-native/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.1484 11.6917C14.1484 12.8797 13.1881 13.8428 12.0036 13.8428C10.8191 13.8428 9.85883 12.8797 9.85883 11.6917C9.85883 10.5038 10.8191 9.54071 12.0036 9.54071C13.1881 9.54071 14.1484 10.5038 14.1484 11.6917Z" fill="#087ea4"></path><path d="M12.0027 16.6185C11.8238 16.623 11.6129 16.6256 11.4011 16.6256C8.89944 16.6256 6.4868 16.2463 4.21655 15.5421L4.38831 15.5876C3.186 15.1985 2.14387 14.6246 1.23702 13.8891L1.25571 13.9034C0.553545 13.3937 0.0809849 12.6047 0.000889943 11.7015L0 11.6899C0 10.2672 1.55473 8.87479 4.16583 7.96618C6.40136 7.22805 8.97419 6.80231 11.6458 6.80231C11.7695 6.80231 11.8932 6.8032 12.0169 6.80498H11.9982C12.1015 6.8032 12.2225 6.80231 12.3444 6.80231C14.9831 6.80231 17.5239 7.22091 19.9054 7.99564L19.7318 7.94655C20.8932 8.32499 21.9015 8.87122 22.787 9.56562L22.7656 9.54956C23.4554 10.0369 23.9208 10.8027 23.9991 11.6801L24 11.6917C24 13.1697 22.261 14.6656 19.4586 15.5956C17.3557 16.2463 14.9377 16.6212 12.4325 16.6212C12.2812 16.6212 12.1308 16.6194 11.9804 16.6167H12.0027V16.6185ZM12.0027 7.83587C11.9083 7.83409 11.7962 7.83409 11.6841 7.83409C9.12014 7.83409 6.65055 8.23752 4.33403 8.98458L4.504 8.93727C2.10294 9.77715 1.0261 10.9259 1.0261 11.6926C1.0261 12.4896 2.18392 13.7454 4.72204 14.6147C6.72352 15.2368 9.02403 15.5956 11.4082 15.5956C11.6173 15.5956 11.8256 15.593 12.0329 15.5876L12.0027 15.5885C12.1326 15.5912 12.2857 15.593 12.4387 15.593C14.8274 15.593 17.1323 15.2359 19.3047 14.5728L19.1382 14.6165C21.7725 13.7383 22.9828 12.4825 22.9828 11.689C22.892 11.1195 22.5716 10.6394 22.1231 10.3368L22.116 10.3323C21.3453 9.73074 20.4465 9.24609 19.4729 8.92745L19.4106 8.9096C17.3032 8.22591 14.8781 7.83141 12.3622 7.83141C12.2358 7.83141 12.1104 7.8323 11.9849 7.83409H12.0036L12.0027 7.83587Z" fill="#087ea4"></path><path d="M7.13639 22.413C7.12215 22.413 7.10524 22.4139 7.08922 22.4139C6.68608 22.4139 6.30785 22.3077 5.98124 22.122L5.99281 22.1283C4.76647 21.4142 4.33929 19.3685 4.85368 16.6472C5.47397 13.8553 6.47961 11.3865 7.82965 9.14981L7.76825 9.26049C9.10227 6.89079 10.714 4.86382 12.5962 3.12693L12.614 3.11086C13.4354 2.35756 14.3965 1.73903 15.4502 1.30079L15.5152 1.27669C15.8774 1.10175 16.3028 1 16.7522 1C17.1981 1 17.6208 1.10086 17.9982 1.28026L17.9804 1.27312C19.2574 2.01036 19.681 4.27206 19.0821 7.16926C18.4413 9.81743 17.4642 12.1496 16.1791 14.273L16.2414 14.1632C14.9492 16.5106 13.3856 18.5206 11.555 20.2495L11.5425 20.2611C10.6899 21.0438 9.68875 21.6802 8.587 22.1194L8.52114 22.1426C8.11177 22.3041 7.63832 22.4032 7.14262 22.4148H7.13728L7.13639 22.413ZM8.20877 9.51843L8.65285 9.77548C7.42384 11.8105 6.45914 14.1722 5.88869 16.6838L5.85843 16.8444C5.38409 19.3516 5.84152 20.8591 6.49919 21.2411C6.66917 21.3321 6.87029 21.3848 7.08388 21.3848C7.10168 21.3848 7.12037 21.3848 7.13817 21.3839H7.1355C7.98539 21.3839 9.32298 20.8439 10.8697 19.4899C12.6282 17.8235 14.1216 15.8992 15.2945 13.7741L15.355 13.6536C16.528 11.7293 17.4651 9.50058 18.0471 7.13177L18.0809 6.96933C18.6407 4.23993 18.1575 2.56909 17.4704 2.16923C17.2586 2.08533 17.013 2.03714 16.7567 2.03714C16.4327 2.03714 16.1266 2.11479 15.8561 2.25135L15.8676 2.24599C14.8727 2.66102 14.0183 3.21529 13.2806 3.89363L13.2868 3.88827C11.4704 5.56714 9.92992 7.50932 8.71604 9.66124L8.65463 9.77906L8.20877 9.51843Z" fill="#087ea4"></path><path d="M16.8698 22.4256C15.7075 22.4256 14.2355 21.7232 12.6959 20.3942C10.7603 18.6242 9.12101 16.5723 7.83327 14.2945L7.76919 14.1722C6.49657 12.0757 5.49894 9.64258 4.90802 7.0542L4.87598 6.88908C4.73181 6.25627 4.64905 5.53063 4.64905 4.78536C4.64905 4.31499 4.68198 3.85354 4.74516 3.40103L4.73893 3.45279C4.81458 2.56203 5.28002 1.79445 5.95993 1.31158L5.96883 1.30533C7.24145 0.564523 9.40847 1.32676 11.6129 3.29392C13.4123 5.00225 14.9484 6.96495 16.1676 9.13115L16.2317 9.25432C17.5025 11.3045 18.5073 13.6822 19.1169 16.2144L19.1507 16.3804C19.2957 17.0132 19.3794 17.7406 19.3794 18.4868C19.3794 19.0018 19.3402 19.507 19.2637 20.0005L19.2708 19.9452C19.1792 20.8574 18.6977 21.6419 17.9991 22.1373L17.9893 22.1435C17.6796 22.3212 17.3094 22.4256 16.9151 22.4256C16.8991 22.4256 16.8831 22.4256 16.8671 22.4247L16.8698 22.4256ZM8.65735 13.6581C9.95489 15.9529 11.5203 17.9165 13.3482 19.5989L13.366 19.615C15.2937 21.2778 16.8226 21.6375 17.4847 21.2519C18.1726 20.8538 18.6763 19.2205 18.1557 16.5812C17.531 14.0018 16.5654 11.7311 15.291 9.67204L15.3488 9.772C14.1216 7.57991 12.655 5.70022 10.9454 4.074L10.9347 4.06419C8.85759 2.21305 7.17471 1.79713 6.48678 2.1952C6.06584 2.53883 5.78907 3.0449 5.75258 3.61702V3.62327C5.70363 3.97136 5.67604 4.37301 5.67604 4.78179C5.67604 5.45745 5.75258 6.11436 5.89675 6.74628L5.88518 6.68737C6.48411 9.32216 7.43991 11.649 8.71698 13.7599L8.65824 13.6555L8.65735 13.6581Z" fill="#087ea4"></path><g class="icon-monochrome"><path d="M14.1484 11.6917C14.1484 12.8797 13.1881 13.8428 12.0036 13.8428C10.8191 13.8428 9.85883 12.8797 9.85883 11.6917C9.85883 10.5038 10.8191 9.54071 12.0036 9.54071C13.1881 9.54071 14.1484 10.5038 14.1484 11.6917Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M12.0027 16.6185C11.8238 16.623 11.6129 16.6256 11.4011 16.6256C8.89944 16.6256 6.4868 16.2463 4.21655 15.5421L4.38831 15.5876C3.186 15.1985 2.14387 14.6246 1.23702 13.8891L1.25571 13.9034C0.553545 13.3937 0.0809849 12.6047 0.000889943 11.7015L0 11.6899C0 10.2672 1.55473 8.87479 4.16583 7.96618C6.40136 7.22805 8.97419 6.80231 11.6458 6.80231C11.7695 6.80231 11.8932 6.8032 12.0169 6.80498H11.9982C12.1015 6.8032 12.2225 6.80231 12.3444 6.80231C14.9831 6.80231 17.5239 7.22091 19.9054 7.99564L19.7318 7.94655C20.8932 8.32499 21.9015 8.87122 22.787 9.56562L22.7656 9.54956C23.4554 10.0369 23.9208 10.8027 23.9991 11.6801L24 11.6917C24 13.1697 22.261 14.6656 19.4586 15.5956C17.3557 16.2463 14.9377 16.6212 12.4325 16.6212C12.2812 16.6212 12.1308 16.6194 11.9804 16.6167H12.0027V16.6185ZM12.0027 7.83587C11.9083 7.83409 11.7962 7.83409 11.6841 7.83409C9.12014 7.83409 6.65055 8.23752 4.33403 8.98458L4.504 8.93727C2.10294 9.77715 1.0261 10.9259 1.0261 11.6926C1.0261 12.4896 2.18392 13.7454 4.72204 14.6147C6.72352 15.2368 9.02403 15.5956 11.4082 15.5956C11.6173 15.5956 11.8256 15.593 12.0329 15.5876L12.0027 15.5885C12.1326 15.5912 12.2857 15.593 12.4387 15.593C14.8274 15.593 17.1323 15.2359 19.3047 14.5728L19.1382 14.6165C21.7725 13.7383 22.9828 12.4825 22.9828 11.689C22.892 11.1195 22.5716 10.6394 22.1231 10.3368L22.116 10.3323C21.3453 9.73074 20.4465 9.24609 19.4729 8.92745L19.4106 8.9096C17.3032 8.22591 14.8781 7.83141 12.3622 7.83141C12.2358 7.83141 12.1104 7.8323 11.9849 7.83409H12.0036L12.0027 7.83587Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M7.13639 22.413C7.12215 22.413 7.10524 22.4139 7.08922 22.4139C6.68608 22.4139 6.30785 22.3077 5.98124 22.122L5.99281 22.1283C4.76647 21.4142 4.33929 19.3685 4.85368 16.6472C5.47397 13.8553 6.47961 11.3865 7.82965 9.14981L7.76825 9.26049C9.10227 6.89079 10.714 4.86382 12.5962 3.12693L12.614 3.11086C13.4354 2.35756 14.3965 1.73903 15.4502 1.30079L15.5152 1.27669C15.8774 1.10175 16.3028 1 16.7522 1C17.1981 1 17.6208 1.10086 17.9982 1.28026L17.9804 1.27312C19.2574 2.01036 19.681 4.27206 19.0821 7.16926C18.4413 9.81743 17.4642 12.1496 16.1791 14.273L16.2414 14.1632C14.9492 16.5106 13.3856 18.5206 11.555 20.2495L11.5425 20.2611C10.6899 21.0438 9.68875 21.6802 8.587 22.1194L8.52114 22.1426C8.11177 22.3041 7.63832 22.4032 7.14262 22.4148H7.13728L7.13639 22.413ZM8.20877 9.51843L8.65285 9.77548C7.42384 11.8105 6.45914 14.1722 5.88869 16.6838L5.85843 16.8444C5.38409 19.3516 5.84152 20.8591 6.49919 21.2411C6.66917 21.3321 6.87029 21.3848 7.08388 21.3848C7.10168 21.3848 7.12037 21.3848 7.13817 21.3839H7.1355C7.98539 21.3839 9.32298 20.8439 10.8697 19.4899C12.6282 17.8235 14.1216 15.8992 15.2945 13.7741L15.355 13.6536C16.528 11.7293 17.4651 9.50058 18.0471 7.13177L18.0809 6.96933C18.6407 4.23993 18.1575 2.56909 17.4704 2.16923C17.2586 2.08533 17.013 2.03714 16.7567 2.03714C16.4327 2.03714 16.1266 2.11479 15.8561 2.25135L15.8676 2.24599C14.8727 2.66102 14.0183 3.21529 13.2806 3.89363L13.2868 3.88827C11.4704 5.56714 9.92992 7.50932 8.71604 9.66124L8.65463 9.77906L8.20877 9.51843Z" fill="var(--amplify-colors-neutral-100)"></path><path d="M16.8698 22.4256C15.7075 22.4256 14.2355 21.7232 12.6959 20.3942C10.7603 18.6242 9.12101 16.5723 7.83327 14.2945L7.76919 14.1722C6.49657 12.0757 5.49894 9.64258 4.90802 7.0542L4.87598 6.88908C4.73181 6.25627 4.64905 5.53063 4.64905 4.78536C4.64905 4.31499 4.68198 3.85354 4.74516 3.40103L4.73893 3.45279C4.81458 2.56203 5.28002 1.79445 5.95993 1.31158L5.96883 1.30533C7.24145 0.564523 9.40847 1.32676 11.6129 3.29392C13.4123 5.00225 14.9484 6.96495 16.1676 9.13115L16.2317 9.25432C17.5025 11.3045 18.5073 13.6822 19.1169 16.2144L19.1507 16.3804C19.2957 17.0132 19.3794 17.7406 19.3794 18.4868C19.3794 19.0018 19.3402 19.507 19.2637 20.0005L19.2708 19.9452C19.1792 20.8574 18.6977 21.6419 17.9991 22.1373L17.9893 22.1435C17.6796 22.3212 17.3094 22.4256 16.9151 22.4256C16.8991 22.4256 16.8831 22.4256 16.8671 22.4247L16.8698 22.4256ZM8.65735 13.6581C9.95489 15.9529 11.5203 17.9165 13.3482 19.5989L13.366 19.615C15.2937 21.2778 16.8226 21.6375 17.4847 21.2519C18.1726 20.8538 18.6763 19.2205 18.1557 16.5812C17.531 14.0018 16.5654 11.7311 15.291 9.67204L15.3488 9.772C14.1216 7.57991 12.655 5.70022 10.9454 4.074L10.9347 4.06419C8.85759 2.21305 7.17471 1.79713 6.48678 2.1952C6.06584 2.53883 5.78907 3.0449 5.75258 3.61702V3.62327C5.70363 3.97136 5.67604 4.37301 5.67604 4.78179C5.67604 5.45745 5.75258 6.11436 5.89675 6.74628L5.88518 6.68737C6.48411 9.32216 7.43991 11.649 8.71698 13.7599L8.65824 13.6555L8.65735 13.6581Z" fill="var(--amplify-colors-neutral-100)"></path></g></svg>React Native</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/flutter/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.1101 24L7.63571 17.5482L11.2145 13.8963L21.3088 24H14.1101Z" fill="#02539A"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7.55557 17.5531L13.974 11.1159H21.1893L11.2044 21.1298L7.55557 17.5531Z" fill="#45D1FD" fill-opacity="0.85"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 11.9385L5.64384 15.5907L21.1891 0H13.9363L2 11.9385Z" fill="#45D1FD"></path><g class="icon-monochrome"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.1101 24L7.63571 17.5482L11.2145 13.8963L21.3088 24H14.1101Z" fill="var(--amplify-colors-neutral-100)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7.55557 17.5531L13.974 11.1159H21.1893L11.2044 21.1298L7.55557 17.5531Z" fill="var(--amplify-colors-neutral-100)" fill-opacity="0.85"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 11.9385L5.64384 15.5907L21.1891 0H13.9363L2 11.9385Z" fill="var(--amplify-colors-neutral-100)"></path></g></svg>Flutter</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/android/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M17.855 9.0668L19.8458 5.60801C19.9582 5.41411 19.8902 5.1678 19.6995 5.05512C19.5088 4.94245 19.2606 5.00796 19.1509 5.20186L17.1339 8.7052C15.595 8.00034 13.8628 7.60729 12 7.60729C10.1372 7.60729 8.40496 8.00033 6.86609 8.7052L4.84911 5.20186C4.73677 5.00796 4.49117 4.94245 4.29784 5.05512C4.1045 5.1678 4.03918 5.41411 4.15153 5.60801L6.14238 9.0668C2.70933 10.9325 0.384053 14.4175 0 18.4972H24C23.6159 14.4174 21.2906 10.9324 17.855 9.0668ZM6.48987 15.1171C5.93337 15.1171 5.48399 14.6638 5.48399 14.1083C5.48399 13.5501 5.93598 13.0994 6.48987 13.0994C7.04637 13.0994 7.49574 13.5528 7.49574 14.1083C7.49837 14.6638 7.04637 15.1171 6.48987 15.1171ZM17.5075 15.1171C16.951 15.1171 16.5016 14.6638 16.5016 14.1083C16.5016 13.5501 16.9536 13.0994 17.5075 13.0994C18.064 13.0994 18.5134 13.5528 18.5134 14.1083C18.516 14.6638 18.064 15.1171 17.5075 15.1171Z" fill="#32DE84"></path><path class="icon-monochrome" d="M17.855 9.0668L19.8458 5.60801C19.9582 5.41411 19.8902 5.1678 19.6995 5.05512C19.5088 4.94245 19.2606 5.00796 19.1509 5.20186L17.1339 8.7052C15.595 8.00034 13.8628 7.60729 12 7.60729C10.1372 7.60729 8.40496 8.00033 6.86609 8.7052L4.84911 5.20186C4.73677 5.00796 4.49117 4.94245 4.29784 5.05512C4.1045 5.1678 4.03918 5.41411 4.15153 5.60801L6.14238 9.0668C2.70933 10.9325 0.384053 14.4175 0 18.4972H24C23.6159 14.4174 21.2906 10.9324 17.855 9.0668ZM6.48987 15.1171C5.93337 15.1171 5.48399 14.6638 5.48399 14.1083C5.48399 13.5501 5.93598 13.0994 6.48987 13.0994C7.04637 13.0994 7.49574 13.5528 7.49574 14.1083C7.49837 14.6638 7.04637 15.1171 6.48987 15.1171ZM17.5075 15.1171C16.951 15.1171 16.5016 14.6638 16.5016 14.1083C16.5016 13.5501 16.9536 13.0994 17.5075 13.0994C18.064 13.0994 18.5134 13.5528 18.5134 14.1083C18.516 14.6638 18.064 15.1171 17.5075 15.1171Z" fill="var(--amplify-colors-neutral-100)"></path></svg>Android</a></li><li class="popover-list__item"><a class="popover-list__link" href="/gen1/swift/build-a-backend/auth/manage-mfa/"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.846 4.3838C23.7449 3.85184 23.5731 3.33734 23.3357 2.85532C23.0875 2.38844 22.7791 1.9596 22.4191 1.58091C22.0479 1.20048 21.6166 0.890087 21.1444 0.663418C20.6784 0.417349 20.18 0.245404 19.6656 0.153252C19.1553 0.0504117 18.595 0.0504117 18.0847 0H5.49743C5.10479 0.00669543 4.71302 0.041053 4.32478 0.10284C3.93949 0.150312 3.56235 0.253461 3.20411 0.409343C3.10205 0.459755 2.94994 0.512183 2.84788 0.562595C2.50894 0.752859 2.18676 0.974192 1.88511 1.224C1.78306 1.32684 1.681 1.37725 1.57895 1.47807C1.20367 1.84258 0.893314 2.27411 0.662388 2.75248C0.410205 3.22772 0.237619 3.74469 0.152118 4.28096C0.0762269 4.80426 0.025457 5.33122 0 5.85986V18.0373C0.000158391 18.5676 0.0511196 19.0966 0.152118 19.6162C0.253167 20.1482 0.424928 20.6627 0.662388 21.1447C0.910549 21.6116 1.21897 22.0404 1.57895 22.4191C1.95022 22.7995 2.38147 23.1099 2.85366 23.3366C3.31965 23.5827 3.81807 23.7546 4.33248 23.8467C4.84275 23.9496 5.40308 23.9496 5.91335 24H18.0867C18.617 23.9996 19.1461 23.9483 19.6675 23.8467C20.1819 23.7546 20.6804 23.5827 21.1463 23.3366C21.6084 23.0917 22.0372 22.7831 22.4211 22.4191C22.7963 22.0546 23.1067 21.623 23.3376 21.1447C23.5898 20.6694 23.7624 20.1525 23.8479 19.6162C23.9238 19.0929 23.9745 18.5659 24 18.0373V5.9627C23.9992 5.43233 23.9476 4.90338 23.846 4.3838ZM20.2279 19.6162C19.1207 17.4445 17.0738 18.1159 16.0398 18.5535C13.9005 19.7896 10.9602 19.9167 8.00064 18.6483C5.69311 17.6678 3.72013 15.9838 2.33761 13.8148C2.98011 14.3299 3.68205 14.7581 4.42683 15.0892C7.48267 16.5209 10.5366 16.4221 12.6874 15.0892C9.6258 12.738 7.02632 9.68106 5.08922 7.18467C4.70695 6.76279 4.36574 6.30211 4.0706 5.80944C6.41207 7.94892 10.1361 10.649 11.4608 11.4132C9.56934 9.38361 7.83112 7.20331 6.26187 4.89195C8.87043 7.5466 11.7408 9.90363 14.8248 11.9234C14.9615 12 15.0674 12.0645 15.1521 12.125C15.2425 11.8939 15.3203 11.6576 15.3851 11.4172C16.0995 8.81801 15.2831 5.86389 13.5 3.41791C17.6284 5.91228 20.0834 10.5986 19.0552 14.5226C19.0282 14.6295 18.9994 14.7242 18.9686 14.8352L19.0051 14.8795C21.0462 17.4263 20.482 20.1264 20.2279 19.6162Z" fill="#F05138"></path><path class="icon-monochrome" d="M23.846 4.3838C23.7449 3.85184 23.5731 3.33734 23.3357 2.85532C23.0875 2.38844 22.7791 1.9596 22.4191 1.58091C22.0479 1.20048 21.6166 0.890087 21.1444 0.663418C20.6784 0.417349 20.18 0.245404 19.6656 0.153252C19.1553 0.0504117 18.595 0.0504117 18.0847 0H5.49743C5.10479 0.00669543 4.71302 0.041053 4.32478 0.10284C3.93949 0.150312 3.56235 0.253461 3.20411 0.409343C3.10205 0.459755 2.94994 0.512183 2.84788 0.562595C2.50894 0.752859 2.18676 0.974192 1.88511 1.224C1.78306 1.32684 1.681 1.37725 1.57895 1.47807C1.20367 1.84258 0.893314 2.27411 0.662388 2.75248C0.410205 3.22772 0.237619 3.74469 0.152118 4.28096C0.0762269 4.80426 0.025457 5.33122 0 5.85986V18.0373C0.000158391 18.5676 0.0511196 19.0966 0.152118 19.6162C0.253167 20.1482 0.424928 20.6627 0.662388 21.1447C0.910549 21.6116 1.21897 22.0404 1.57895 22.4191C1.95022 22.7995 2.38147 23.1099 2.85366 23.3366C3.31965 23.5827 3.81807 23.7546 4.33248 23.8467C4.84275 23.9496 5.40308 23.9496 5.91335 24H18.0867C18.617 23.9996 19.1461 23.9483 19.6675 23.8467C20.1819 23.7546 20.6804 23.5827 21.1463 23.3366C21.6084 23.0917 22.0372 22.7831 22.4211 22.4191C22.7963 22.0546 23.1067 21.623 23.3376 21.1447C23.5898 20.6694 23.7624 20.1525 23.8479 19.6162C23.9238 19.0929 23.9745 18.5659 24 18.0373V5.9627C23.9992 5.43233 23.9476 4.90338 23.846 4.3838ZM20.2279 19.6162C19.1207 17.4445 17.0738 18.1159 16.0398 18.5535C13.9005 19.7896 10.9602 19.9167 8.00064 18.6483C5.69311 17.6678 3.72013 15.9838 2.33761 13.8148C2.98011 14.3299 3.68205 14.7581 4.42683 15.0892C7.48267 16.5209 10.5366 16.4221 12.6874 15.0892C9.6258 12.738 7.02632 9.68106 5.08922 7.18467C4.70695 6.76279 4.36574 6.30211 4.0706 5.80944C6.41207 7.94892 10.1361 10.649 11.4608 11.4132C9.56934 9.38361 7.83112 7.20331 6.26187 4.89195C8.87043 7.5466 11.7408 9.90363 14.8248 11.9234C14.9615 12 15.0674 12.0645 15.1521 12.125C15.2425 11.8939 15.3203 11.6576 15.3851 11.4172C16.0995 8.81801 15.2831 5.86389 13.5 3.41791C17.6284 5.91228 20.0834 10.5986 19.0552 14.5226C19.0282 14.6295 18.9994 14.7242 18.9686 14.8352L19.0051 14.8795C21.0462 17.4263 20.482 20.1264 20.2279 19.6162Z" fill="var(--amplify-colors-neutral-100)"></path></svg>Swift</a></li></ul></div></div><div class="amplify-flex version-switcher"><a class="version-switcher__link" href="/gen1/react/prev/build-a-backend/auth/manage-mfa/">v5</a><a class="version-switcher__link active" href="/gen1/react/build-a-backend/auth/manage-mfa/"><svg style="font-size:var(--amplify-font-sizes-xs)" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.2694 5.60885C20.6841 5.21401 21.236 4.99573 21.8086 5.00006C22.3812 5.0044 22.9298 5.23101 23.3385 5.63207C23.7472 6.03314 23.9841 6.5773 23.9992 7.14973C24.0144 7.72215 23.8065 8.27807 23.4196 8.70017L11.6726 23.3913C11.4706 23.6089 11.2268 23.7835 10.9558 23.9047C10.6848 24.0259 10.3921 24.0912 10.0953 24.0967C9.79843 24.1022 9.50355 24.0477 9.22823 23.9367C8.95292 23.8256 8.70283 23.6601 8.49292 23.4502L0.702785 15.6601C0.485843 15.4579 0.311839 15.2141 0.191154 14.9433C0.0704689 14.6724 0.0055747 14.38 0.000343637 14.0836C-0.00488742 13.7871 0.049652 13.4926 0.160707 13.2176C0.271762 12.9427 0.437058 12.6929 0.646735 12.4833C0.856411 12.2736 1.10617 12.1083 1.38112 11.9972C1.65606 11.8862 1.95056 11.8316 2.24704 11.8369C2.54352 11.8421 2.83591 11.907 3.10677 12.0277C3.37763 12.1484 3.6214 12.3224 3.82355 12.5393L9.98853 18.7013L20.2134 5.67362C20.2319 5.65096 20.2486 5.62933 20.2694 5.60885Z" fill="currentColor"></path></svg>v6</a></div></div></div></div><div class="layout-sidebar-menu"><nav class="menu" aria-label="Main"><ul class="menu__list"><li class="menu__list-item menu__list-item--category"><a class="menu__list-item__link menu__list-item__link--category " href="/gen1/react/how-amplify-works/"><div class="amplify-flex menu__list-item__link__inner ">How Amplify works</div></a></li><li class="menu__list-item menu__list-item--category"><a class="menu__list-item__link menu__list-item__link--category " href="/gen1/react/start/"><div class="amplify-flex menu__list-item__link__inner ">Start</div></a><ul class="menu__list "><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/start/getting-started/"><div class="amplify-flex menu__list-item__link__inner ">Getting started<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/introduction/"><div class="amplify-flex menu__list-item__link__inner ">Introduction</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/installation/"><div class="amplify-flex menu__list-item__link__inner ">Set up Amplify CLI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/setup/"><div class="amplify-flex menu__list-item__link__inner ">Set up fullstack project</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/data-model/"><div class="amplify-flex menu__list-item__link__inner ">Connect API and database to the app</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/auth/"><div class="amplify-flex menu__list-item__link__inner ">Add authentication</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/hosting/"><div class="amplify-flex menu__list-item__link__inner ">Deploy and host app</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/getting-started/nextsteps/"><div class="amplify-flex menu__list-item__link__inner ">Next steps</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/start/project-setup/"><div class="amplify-flex menu__list-item__link__inner ">Project setup<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/project-setup/prerequisites/"><div class="amplify-flex menu__list-item__link__inner ">Set up Amplify prerequisites</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/start/project-setup/create-application/"><div class="amplify-flex menu__list-item__link__inner ">Create your application</div></a></li></ul></li></ul></li><li class="menu__list-item menu__list-item--category"><a class="menu__list-item__link menu__list-item__link--category " href="/gen1/react/build-a-backend/"><div class="amplify-flex menu__list-item__link__inner ">Build & connect backend</div></a><ul class="menu__list "><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/auth/"><div class="amplify-flex menu__list-item__link__inner ">Authentication<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/set-up-auth/"><div class="amplify-flex menu__list-item__link__inner ">Set up Amplify Auth</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/manage-user-session/"><div class="amplify-flex menu__list-item__link__inner ">Manage user session and credentials</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/enable-sign-up/"><div class="amplify-flex menu__list-item__link__inner ">Enable sign-up, sign-in, and sign-out</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/switch-auth/"><div class="amplify-flex menu__list-item__link__inner ">Switching authentication flows</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/add-social-provider/"><div class="amplify-flex menu__list-item__link__inner ">Add social provider sign-in</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/manage-user-profile/"><div class="amplify-flex menu__list-item__link__inner ">Manage user profiles</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/manage-passwords/"><div class="amplify-flex menu__list-item__link__inner ">Set up password change and recovery</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page menu__list-item__link--current" aria-current="page" href="/gen1/react/build-a-backend/auth/manage-mfa/"><div class="amplify-flex menu__list-item__link__inner ">Manage MFA settings</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/remember-device/"><div class="amplify-flex menu__list-item__link__inner ">Remember a device</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/advanced-workflows/"><div class="amplify-flex menu__list-item__link__inner ">Advanced workflows</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/delete-user-account/"><div class="amplify-flex menu__list-item__link__inner ">Delete user account</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/admin-actions/"><div class="amplify-flex menu__list-item__link__inner ">Set up admin actions</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/user-group-management/"><div class="amplify-flex menu__list-item__link__inner ">Set up user group management</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/import-existing-resources/"><div class="amplify-flex menu__list-item__link__inner ">Use an existing Cognito User Pool and Identity Pool</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/override-cognito/"><div class="amplify-flex menu__list-item__link__inner ">Override Amplify-generated Cognito resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/auth-events/"><div class="amplify-flex menu__list-item__link__inner ">Listen to auth events</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/under-the-hood/"><div class="amplify-flex menu__list-item__link__inner ">Under the hood</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/auth/auth-migration-guide/"><div class="amplify-flex menu__list-item__link__inner ">Migrate from v5 to v6</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/graphqlapi/"><div class="amplify-flex menu__list-item__link__inner ">API (GraphQL)<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/set-up-graphql-api/"><div class="amplify-flex menu__list-item__link__inner ">Set up Amplify GraphQL API</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/connect-api-to-existing-database/"><div class="amplify-flex menu__list-item__link__inner ">Connect API to existing MySQL or PostgreSQL database</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/connect-to-api/"><div class="amplify-flex menu__list-item__link__inner ">Connect your app code to the API</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/data-modeling/"><div class="amplify-flex menu__list-item__link__inner ">Customize your data model</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/customize-authorization-rules/"><div class="amplify-flex menu__list-item__link__inner ">Customize authorization rules</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/mutate-data/"><div class="amplify-flex menu__list-item__link__inner ">Create, update, and delete application data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/query-data/"><div class="amplify-flex menu__list-item__link__inner ">Read application data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/subscribe-data/"><div class="amplify-flex menu__list-item__link__inner ">Subscribe to real-time events</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/custom-business-logic/"><div class="amplify-flex menu__list-item__link__inner ">Set up custom queries and mutations</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/search-and-result-aggregations/"><div class="amplify-flex menu__list-item__link__inner ">Build search and aggregate queries</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/working-with-files/"><div class="amplify-flex menu__list-item__link__inner ">Working with files / attachments</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/optimistic-ui/"><div class="amplify-flex menu__list-item__link__inner ">Optimistic UI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/connect-from-server-runtime/"><div class="amplify-flex menu__list-item__link__inner ">Connect to data from server-side runtimes</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/client-code-generation/"><div class="amplify-flex menu__list-item__link__inner ">JavaScript, Android, Swift, and Flutter client code generation</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/connect-machine-learning-services/"><div class="amplify-flex menu__list-item__link__inner ">Incorporate machine learning</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/schema-evolution/"><div class="amplify-flex menu__list-item__link__inner ">Evolving GraphQL schemas</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/modify-amplify-generated-resources/"><div class="amplify-flex menu__list-item__link__inner ">Modify Amplify-generated resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/upgrade-guide/"><div class="amplify-flex menu__list-item__link__inner ">Upgrade from AppSync SDK</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/troubleshooting/"><div class="amplify-flex menu__list-item__link__inner ">Troubleshooting</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/best-practice/"><div class="amplify-flex menu__list-item__link__inner ">Best practice<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/best-practice/batch-put-custom-resolver/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Batch put custom resolver</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/best-practice/query-with-sorting/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">GraphQL query with sorting by date</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/graphqlapi/best-practice/warehouse-management/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Warehouse Management System</div></a></li></ul></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/restapi/"><div class="amplify-flex menu__list-item__link__inner ">API (REST)<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/configure-rest-api/"><div class="amplify-flex menu__list-item__link__inner ">Configure REST API</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/set-up-rest-api/"><div class="amplify-flex menu__list-item__link__inner ">Set up Amplify REST API</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/fetch-data/"><div class="amplify-flex menu__list-item__link__inner ">Fetch data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/update-data/"><div class="amplify-flex menu__list-item__link__inner ">Update data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/delete-data/"><div class="amplify-flex menu__list-item__link__inner ">Delete data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/customize-authz/"><div class="amplify-flex menu__list-item__link__inner ">Define authorization rules</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/test-api/"><div class="amplify-flex menu__list-item__link__inner ">Test the REST API</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/gen-ai/"><div class="amplify-flex menu__list-item__link__inner ">Build a generative AI sandbox with Amplify and Amazon Bedrock</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/existing-resources/"><div class="amplify-flex menu__list-item__link__inner ">Use existing AWS resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/override-api-gateway/"><div class="amplify-flex menu__list-item__link__inner ">Override Amplify-generated API Gateway resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/restapi/restapi-v5-to-v6-migration-guide/"><div class="amplify-flex menu__list-item__link__inner ">Migrate from v5 to v6</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/storage/"><div class="amplify-flex menu__list-item__link__inner ">Storage<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/configure-storage/"><div class="amplify-flex menu__list-item__link__inner ">Configure Storage</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/set-up-storage/"><div class="amplify-flex menu__list-item__link__inner ">Set up Amplify Storage</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/path/"><div class="amplify-flex menu__list-item__link__inner ">Using Path</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/upload/"><div class="amplify-flex menu__list-item__link__inner ">Upload files</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/download/"><div class="amplify-flex menu__list-item__link__inner ">Download files</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/get-properties/"><div class="amplify-flex menu__list-item__link__inner ">Get file properties</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/list/"><div class="amplify-flex menu__list-item__link__inner ">List files</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/copy/"><div class="amplify-flex menu__list-item__link__inner ">Copy files</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/remove/"><div class="amplify-flex menu__list-item__link__inner ">Remove files</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/configure-access/"><div class="amplify-flex menu__list-item__link__inner ">File access levels</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/transfer-acceleration/"><div class="amplify-flex menu__list-item__link__inner ">Use transfer acceleration</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/lambda-triggers/"><div class="amplify-flex menu__list-item__link__inner ">Lambda triggers</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/import/"><div class="amplify-flex menu__list-item__link__inner ">Import an S3 bucket or DynamoDB table</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/existing-resources/"><div class="amplify-flex menu__list-item__link__inner ">Use existing AWS resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/modify-amplify-generated-resources/"><div class="amplify-flex menu__list-item__link__inner ">Modify Amplify-generated resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/storage/storage-v5-to-v6-migration-guide/"><div class="amplify-flex menu__list-item__link__inner ">Migrate from v5 to v6</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/functions/"><div class="amplify-flex menu__list-item__link__inner ">Functions<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/set-up-function/"><div class="amplify-flex menu__list-item__link__inner ">Set up a function</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/layers/"><div class="amplify-flex menu__list-item__link__inner ">Reuse code and assets using layers</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/environment-variables/"><div class="amplify-flex menu__list-item__link__inner ">Environment variables</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/secrets/"><div class="amplify-flex menu__list-item__link__inner ">Access secret values</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/build-options/"><div class="amplify-flex menu__list-item__link__inner ">Build options</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/configure-options/"><div class="amplify-flex menu__list-item__link__inner ">Configure Lambda function settings</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/functions/graphql-from-lambda/"><div class="amplify-flex menu__list-item__link__inner ">Call a GraphQL API from a Lambda function</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/server-side-rendering/"><div class="amplify-flex menu__list-item__link__inner ">Server-Side Rendering<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/server-side-rendering/nextjs/"><div class="amplify-flex menu__list-item__link__inner ">Use Amplify categories APIs from Next.js</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/server-side-rendering/nuxt/"><div class="amplify-flex menu__list-item__link__inner ">Use Amplify categories APIs from Nuxt 3</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/existing-resources/"><div class="amplify-flex menu__list-item__link__inner ">Existing AWS resources<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/existing-resources/cli/"><div class="amplify-flex menu__list-item__link__inner ">Connect to existing AWS resources with Amplify CLI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/existing-resources/cdk/"><div class="amplify-flex menu__list-item__link__inner ">Connect to existing AWS resources built with the CDK</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/utilities/"><div class="amplify-flex menu__list-item__link__inner ">Utilities<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/utilities/cache/"><div class="amplify-flex menu__list-item__link__inner ">Cache</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/utilities/console-logger/"><div class="amplify-flex menu__list-item__link__inner ">Console Logger</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/utilities/hub/"><div class="amplify-flex menu__list-item__link__inner ">Hub</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/utilities/i18n/"><div class="amplify-flex menu__list-item__link__inner ">Internationalization</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/utilities/service-worker/"><div class="amplify-flex menu__list-item__link__inner ">Service Worker</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/more-features/"><div class="amplify-flex menu__list-item__link__inner ">More features<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/"><div class="amplify-flex menu__list-item__link__inner ">AI/ML Predictions<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/set-up-predictions/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Predictions</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/text-to-speech/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Text-to-speech</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/transcribe-audio/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Transcribe audio to text</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/translate/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Translate language</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/identify-text/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Identify text</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/identify-entity/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Identify entities from images</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/label-image/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Label objects in an image</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/interpret-sentiment/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Interpret sentiment</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/predictions/example-app/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Example application</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/"><div class="amplify-flex menu__list-item__link__inner ">Analytics<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/set-up-analytics/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Amplify Analytics</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/record-events/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Record events</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/identify-user/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Identify user</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/auto-track-sessions/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Automatically track sessions</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/enable-disable/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Enable and disable analytics</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/streaming-data/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Streaming analytics data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/storing-data/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Storing analytics data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/personalize-recommendations/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Personalized recommendations</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/existing-resources/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Use existing AWS resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/analytics/analytics-migration-guide/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Migrate from v5 to v6</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/"><div class="amplify-flex menu__list-item__link__inner ">DataStore<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/set-up-datastore/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Amplify DataStore</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/manipulate-data/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Manipulating data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/relational-models/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Relational models</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/sync-to-cloud/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Syncing data to cloud</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/authz-rules-setup/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up authorization rules</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/conflict-resolution/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Conflict resolution</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/real-time/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Observe in real time</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/datastore-events/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">DataStore events</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/additional-methods/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Additional DataStore methods</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/schema-updates/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Schema updates</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/how-it-works/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">How it works</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/example-application/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Example application</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/datastore/customize-primary-keys/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Customize primary keys</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/"><div class="amplify-flex menu__list-item__link__inner ">Geo<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/set-up-geo/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Amplify Geo</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/configure-maps/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Configure maps</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/maps/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Work with maps</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/configure-location-search/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Configure location search</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/location-search/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Work with location search</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/configure-geofencing/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Configure a geofence collection</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/geofences/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Work with geofences</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/existing-resources/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Use existing Amazon Location resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/google-migration/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Migrate from Google Maps</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/geo/amazon-location-sdk/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Use Amazon Location Service SDK</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/"><div class="amplify-flex menu__list-item__link__inner ">In-App Messaging<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/set-up-in-app-messaging/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up in-app messaging</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/create-campaign/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Create an in-app messaging campaign</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/integrate-application/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Integrate your application</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/sync-messages/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Sync messages</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/display-messages/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Display messages</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/clear-messages/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Clear messages</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/identify-user/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Identify a user</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/respond-interaction-events/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Respond to interaction events</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/resolve-conflicts/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Resolve conflicts</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/in-app-messaging/in-app-messaging-migration-guide/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Migrate from v5 to v6</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/interactions/"><div class="amplify-flex menu__list-item__link__inner ">Interactions<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/interactions/set-up-interactions/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Amplify Interactions</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/interactions/chatbot/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Interact with bots</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/pubsub/"><div class="amplify-flex menu__list-item__link__inner ">PubSub<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/pubsub/set-up-pubsub/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Amplify PubSub</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/pubsub/subscribe/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Subscribe and unsubscribe</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/more-features/pubsub/publish/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Publish</div></a></li></ul></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-a-backend/troubleshooting/"><div class="amplify-flex menu__list-item__link__inner ">Troubleshooting<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/troubleshooting/upgrade-amplify-packages/"><div class="amplify-flex menu__list-item__link__inner ">Upgrading Amplify packages</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/troubleshooting/migrate-from-javascript-v5-to-v6/"><div class="amplify-flex menu__list-item__link__inner ">Migrate from Amplify JavaScript v5 to v6</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/troubleshooting/library-not-configured/"><div class="amplify-flex menu__list-item__link__inner ">Troubleshoot configuration errors</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-a-backend/troubleshooting/apikey-not-found/"><div class="amplify-flex menu__list-item__link__inner ">API Key Not Found issue</div></a></li></ul></li></ul></li><li class="menu__list-item menu__list-item--category"><a class="menu__list-item__link menu__list-item__link--category " href="/gen1/react/build-ui/"><div class="amplify-flex menu__list-item__link__inner ">Build UI</div></a><ul class="menu__list "><li class="menu__list-item"><a aria-label="Amplify UI (opens in new tab)" class="amplify-link menu__list-item__link menu__list-item__link--external menu__list-item__link--subcategory" rel="noopener noreferrer" target="_blank" href="https://ui.docs.amplify.aws/"><div class="amplify-flex menu__list-item__link__inner ">Amplify UI<svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.42857 20.5714H20.5714V13.8H24V22.2857C24 23.2325 23.2325 24 22.2857 24H1.71429C0.767512 24 0 23.2325 0 22.2857V1.71429C0 0.767512 0.767512 0 1.71429 0H10.2857V3.42857H3.42857V20.5714Z" fill="currentColor"></path><path d="M13.7143 0H24V10.2857H20.5714V5.85292L9.7836 16.6407L7.35924 14.2164L18.147 3.42857H13.7143V0Z" fill="currentColor"></path></svg></div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-ui/formbuilder/"><div class="amplify-flex menu__list-item__link__inner ">Form Builder<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/customize/"><div class="amplify-flex menu__list-item__link__inner ">Customize form inputs</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/data-binding/"><div class="amplify-flex menu__list-item__link__inner ">Data binding</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/special-inputs/"><div class="amplify-flex menu__list-item__link__inner ">Configure special inputs</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/validations/"><div class="amplify-flex menu__list-item__link__inner ">Validate form data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/lifecycle/"><div class="amplify-flex menu__list-item__link__inner ">Manage form lifecycle</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/call-to-action/"><div class="amplify-flex menu__list-item__link__inner ">Customize action buttons (Submit, Cancel, Clear, Reset)</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/formbuilder/overrides/"><div class="amplify-flex menu__list-item__link__inner ">Extend input element in code</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/build-ui/uibuilder/"><div class="amplify-flex menu__list-item__link__inner ">Figma-to-Code<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/databinding/"><div class="amplify-flex menu__list-item__link__inner ">Data binding</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/eventhandling/"><div class="amplify-flex menu__list-item__link__inner ">UI event handler</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/collections/"><div class="amplify-flex menu__list-item__link__inner ">Collections</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/slots/"><div class="amplify-flex menu__list-item__link__inner ">Component slots</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/theming/"><div class="amplify-flex menu__list-item__link__inner ">Theming</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/responsive/"><div class="amplify-flex menu__list-item__link__inner ">Responsive components</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/override/"><div class="amplify-flex menu__list-item__link__inner ">Extend with code</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/build-ui/uibuilder/bestpractices/"><div class="amplify-flex menu__list-item__link__inner ">Best practices</div></a></li></ul></li></ul></li><li class="menu__list-item menu__list-item--category"><a class="menu__list-item__link menu__list-item__link--category " href="/gen1/react/deploy-and-host/"><div class="amplify-flex menu__list-item__link__inner ">Deploy & host</div></a><ul class="menu__list "><li class="menu__list-item"><a aria-label="Amplify Hosting (opens in new tab)" class="amplify-link menu__list-item__link menu__list-item__link--external menu__list-item__link--subcategory" rel="noopener noreferrer" target="_blank" href="https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html"><div class="amplify-flex menu__list-item__link__inner ">Amplify Hosting<svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.42857 20.5714H20.5714V13.8H24V22.2857C24 23.2325 23.2325 24 22.2857 24H1.71429C0.767512 24 0 23.2325 0 22.2857V1.71429C0 0.767512 0.767512 0 1.71429 0H10.2857V3.42857H3.42857V20.5714Z" fill="currentColor"></path><path d="M13.7143 0H24V10.2857H20.5714V5.85292L9.7836 16.6407L7.35924 14.2164L18.147 3.42857H13.7143V0Z" fill="currentColor"></path></svg></div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/deploy-and-host/deployment/"><div class="amplify-flex menu__list-item__link__inner ">Deployment<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/deploy-and-host/deployment/deploy-static-site-github/"><div class="amplify-flex menu__list-item__link__inner ">Deploy a static site from GitHub</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/deploy-and-host/deployment/deploy-static-site-locally/"><div class="amplify-flex menu__list-item__link__inner ">Deploy a static site locally</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/deploy-and-host/deployment/password-protected-deployments/"><div class="amplify-flex menu__list-item__link__inner ">Configure password protection for deployments</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/deploy-and-host/deployment/pull-request-previews/"><div class="amplify-flex menu__list-item__link__inner ">Enable pull-request previews</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/deploy-and-host/custom-configuration/"><div class="amplify-flex menu__list-item__link__inner ">Custom configuration<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/deploy-and-host/custom-configuration/configure-custom-domain/"><div class="amplify-flex menu__list-item__link__inner ">Configure a custom domain</div></a></li></ul></li></ul></li><li class="menu__list-item menu__list-item--category"><a class="menu__list-item__link menu__list-item__link--category " href="/gen1/react/tools/"><div class="amplify-flex menu__list-item__link__inner ">Tools</div></a><ul class="menu__list "><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/tools/cli/"><div class="amplify-flex menu__list-item__link__inner ">CLI<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/start/"><div class="amplify-flex menu__list-item__link__inner ">Start<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/start/set-up-cli/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Set up Amplify CLI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/start/key-workflows/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Explore key workflows for Amplify CLI</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/commands/"><div class="amplify-flex menu__list-item__link__inner ">Commands</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/graphqlapi/"><div class="amplify-flex menu__list-item__link__inner ">API (GraphQL)<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/graphqlapi/directives-reference/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Directives reference</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/hosting/"><div class="amplify-flex menu__list-item__link__inner ">Hosting</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/custom/"><div class="amplify-flex menu__list-item__link__inner ">Custom AWS resources<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/custom/cdk/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Use CDK to add custom AWS resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/custom/cloudformation/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Use CloudFormation to add custom AWS resources</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/"><div class="amplify-flex menu__list-item__link__inner ">Project-level configurations<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/tags/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Apply tags to generated resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/permissions-boundary/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">IAM Permissions Boundary for Amplify-generated roles</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/command-hooks/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Command hooks</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/monorepo/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Monorepo project structure</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/override-iam/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Override Amplify-generated project-level IAM resources</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/project/troubleshooting/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Troubleshooting</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/teams/"><div class="amplify-flex menu__list-item__link__inner ">Team environments<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/teams/shared/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Share single environment</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/teams/sandbox/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Sandbox environments</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/teams/multi-frontend/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Multiple frontends</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/teams/cicd/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Continuous deployment</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/teams/commands/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Commands</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/usage/"><div class="amplify-flex menu__list-item__link__inner ">Advanced workflows<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/usage/lambda-triggers/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Lambda triggers</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/usage/mock/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Mocking and testing</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/usage/containers/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Serverless containers</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/usage/export-to-cdk/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Export Amplify project to CDK</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/usage/headless/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Headless mode for CI/CD</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/plugins/"><div class="amplify-flex menu__list-item__link__inner ">Plugins<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/plugins/architecture/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Architecture</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/plugins/authoring/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Authoring a new plugin</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/"><div class="amplify-flex menu__list-item__link__inner ">Migration & backwards compatibility<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/aws-cdk-migration/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">AWS CDK v1 to v2 migration</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/lazy-load-custom-selection-set/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Lazy loading and custom selection set</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/transformer-migration/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">GraphQL Transformer v1 to v2 migration</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/override/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Override feature enablement migration</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/lambda-layers-update/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Lambda layer behavior updates</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/cli-auth-signup-changes/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">CLI Auth Signup Changes</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/list-nullability/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Amplify Codegen Models - List and list components nullability</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/cli-migrate-aws-account/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Migrate project to another AWS account</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/identity-claim-changes/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">GraphQL Transformer @auth identity claim changes</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/migration/iam-auth-updates-for-cdk-construct/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Improved IAM authorization when using GraphQL API CDK construct</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/"><div class="amplify-flex menu__list-item__link__inner ">Reference<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/iam/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">IAM policy</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/iam-roles-mfa/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">IAM roles and MFA</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/files/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Files and folders</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/usage-data/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Usage data in Amplify CLI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/diagnose/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Diagnose</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/feature-flags/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Feature flags</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/cli/reference/ssm-parameter-store/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">SSM Parameter Store</div></a></li></ul></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/tools/console/"><div class="amplify-flex menu__list-item__link__inner ">Studio<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/adminui/"><div class="amplify-flex menu__list-item__link__inner ">Basics<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/adminui/start/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Getting started</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/adminui/extend-cli/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Extend with the Amplify CLI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/adminui/access-management/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Manage team access</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/adminui/custom-domain/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Custom domains</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/tutorial/"><div class="amplify-flex menu__list-item__link__inner ">Tutorial<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/tutorial/buildui/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Build UI</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/tutorial/data/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Model database</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/tutorial/bindui/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Bind UI to data</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/tutorial/collections/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Collections</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/tutorial/code/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Write React code</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/data/"><div class="amplify-flex menu__list-item__link__inner ">Data<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/data/data-model/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Data modeling</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/data/relationships/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Relationships</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/data/content-management/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Data management</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/auth/"><div class="amplify-flex menu__list-item__link__inner ">Authentication<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/auth/user-management/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Manage authentication for users and groups</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/auth/import/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Import Amazon Cognito resources</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/authz/"><div class="amplify-flex menu__list-item__link__inner ">Authorization<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/authz/permissions/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">Access control</div></a></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/storage/"><div class="amplify-flex menu__list-item__link__inner ">Storage<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/storage/file-browser/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">File browser</div></a></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/console/storage/file-storage/"><div class="amplify-flex menu__list-item__link__inner menu__list-item__link__inner--subpage">File storage</div></a></li></ul></li></ul></li><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--subcategory " href="/gen1/react/tools/libraries/"><div class="amplify-flex menu__list-item__link__inner ">Libraries<svg class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a><ul class="menu__list menu__list--hide"><li class="menu__list-item "><a class="menu__list-item__link menu__list-item__link--page " href="/gen1/react/tools/libraries/configure-categories/"><div class="amplify-flex menu__list-item__link__inner ">Configure Amplify categories</div></a></li></ul></li></ul></li><li class="menu__list-item"><a aria-label="Reference (opens in new tab)" class="amplify-link menu__list-item__link menu__list-item__link--external menu__list-item__link--category" rel="noopener noreferrer" target="_blank" href="https://aws-amplify.github.io/amplify-js/api/"><div class="amplify-flex menu__list-item__link__inner ">Reference<svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.42857 20.5714H20.5714V13.8H24V22.2857C24 23.2325 23.2325 24 22.2857 24H1.71429C0.767512 24 0 23.2325 0 22.2857V1.71429C0 0.767512 0.767512 0 1.71429 0H10.2857V3.42857H3.42857V20.5714Z" fill="currentColor"></path><path d="M13.7143 0H24V10.2857H20.5714V5.85292L9.7836 16.6407L7.35924 14.2164L18.147 3.42857H13.7143V0Z" fill="currentColor"></path></svg></div></a></li><li class="menu__list-item"><a aria-label="Learn (opens in new tab)" class="amplify-link menu__list-item__link menu__list-item__link--external menu__list-item__link--category" rel="noopener noreferrer" target="_blank" href="https://amplify.aws/learn/"><div class="amplify-flex menu__list-item__link__inner ">Learn<svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.42857 20.5714H20.5714V13.8H24V22.2857C24 23.2325 23.2325 24 22.2857 24H1.71429C0.767512 24 0 23.2325 0 22.2857V1.71429C0 0.767512 0.767512 0 1.71429 0H10.2857V3.42857H3.42857V20.5714Z" fill="currentColor"></path><path d="M13.7143 0H24V10.2857H20.5714V5.85292L9.7836 16.6407L7.35924 14.2164L18.147 3.42857H13.7143V0Z" fill="currentColor"></path></svg></div></a></li></ul></nav><div class="layout-sidebar-feedback"><div class="amplify-flex repo-actions"><a href="https://github.com/aws-amplify/docs/edit/main/src/pages/gen1/%5Bplatform%5D/build-a-backend/auth/manage-mfa/index.mdx" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank"><div class="amplify-flex repo-actions-link"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.292 0.500266C21.6251 -0.166754 20.5435 -0.166756 19.8766 0.500266L17.4608 2.91607L21.084 6.53931L23.4998 4.1235C24.1667 3.45649 24.1667 2.37503 23.4998 1.70802L22.292 0.500266ZM19.8762 7.74706L16.253 4.12383L4.17586 16.2009L7.79909 19.8241L19.8762 7.74706ZM1.94112 18.4357L2.96812 17.4086L6.59135 21.032L5.56436 22.0589C5.39829 22.2251 5.19975 22.355 4.98114 22.4409L1.1684 23.9387C0.474248 24.2115 -0.211433 23.5259 0.0612716 22.8316L1.55914 19.0189C1.64501 18.8003 1.77505 18.6019 1.94112 18.4357ZM8.52983 23.9903H23.9023V20.5743H11.9458L8.52983 23.9903Z" fill="currentColor"></path></svg>Edit on GitHub</div></a></div><div class="amplify-flex feedback"><div id="start-state" aria-labelledby="feedbackGroupTitle" role="group" aria-live="polite"><p class="amplify-text feedback-text" id="feedbackGroupTitle">Was this page helpful?</p><div class="amplify-flex vote-buttons-container"><button class="amplify-button amplify-field-group__control vote-button" type="button"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4341 3.66399L12.4332 3.66559L8.30485 10.7617V20.5723H17.3405C18.1018 20.5723 18.7675 20.0329 18.9503 19.2694L20.6275 12.3284L20.6279 12.3265C20.8854 11.2415 20.0927 10.2008 19.0181 10.2008H14.9653C14.048 10.2008 13.3044 9.4333 13.3044 8.48652V3.90937C13.3044 3.639 13.1013 3.42938 12.8393 3.42938C12.6777 3.42938 12.5176 3.52295 12.4341 3.66399ZM4.98291 20.5723V12.0008H3.32194V20.5723H4.98291ZM5.70382 8.57224L9.59126 1.89026C10.2721 0.729342 11.5066 0.000793457 12.8393 0.000793457C14.936 0.000793457 16.6263 1.74546 16.6263 3.90937V6.77223H19.0181C22.2614 6.77223 24.6242 9.91318 23.8533 13.1475L23.8521 13.1528L22.1753 20.0921L22.1747 20.094C21.6262 22.381 19.6349 24.0008 17.3405 24.0008H1.66097C0.743641 24.0008 0 23.2333 0 22.2865V10.2865C0 9.33975 0.743641 8.57224 1.66097 8.57224H5.70382Z" fill="currentColor"></path></svg><p class="amplify-text">Yes</p></button><button class="amplify-button amplify-field-group__control vote-button" type="button"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.66097 0.00128174C0.743641 0.00128174 0 0.768794 0 1.71557V13.7155C0 14.6624 0.743641 15.4299 1.66097 15.4299H5.70382L9.58825 22.1066L9.59126 22.1118C10.2721 23.2727 11.5066 24.0013 12.8393 24.0013C14.936 24.0013 16.6263 22.2566 16.6263 20.0928V17.2299H19.0181C22.2614 17.2299 24.6242 14.089 23.8533 10.8546L23.8521 10.8493L22.1753 3.90992L22.1746 3.90747C21.6258 1.62085 19.6347 0.00128174 17.3405 0.00128174H1.66097ZM3.32194 12.0013V3.42986H4.98291V12.0013H3.32194ZM8.30485 13.2404L12.4332 20.3365L12.4341 20.3381C12.5176 20.4792 12.6777 20.5727 12.8393 20.5727C13.1013 20.5727 13.3044 20.3631 13.3044 20.0928V15.5156C13.3044 14.5688 14.0479 13.8013 14.9653 13.8013H19.0181C20.0926 13.8013 20.8853 12.7608 20.628 11.6759L20.6275 11.6737L18.9511 4.7361L18.9503 4.73267C18.7675 3.96915 18.1018 3.42986 17.3405 3.42986H8.30485V13.2404Z" fill="currentColor"></path></svg><p class="amplify-text">No</p></button><div class="amplify-flex vote-response"><p class="amplify-text vote-response-text">Can you provide more details?</p><div disabled="" class="amplify-flex vote-response-no"><a href="https://github.com/aws-amplify/docs/issues/new/choose" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">File an issue on GitHub</a></div></div></div></div></div></div><div class="page-last-updated"><div class="page-last-updated__inner"><p style="font-size:14px" class="amplify-text">Page updated Aug 21, 2024</p> </div></div></div></div></div></header><div class="layout-main"><main aria-label="Main content" class="amplify-flex main" id="pageMain" tabindex="-1"><div class="breadcrumb__container"><nav aria-label="Breadcrumb" class="amplify-breadcrumbs"><ol class="amplify-breadcrumbs__list"><li class="amplify-breadcrumbs__item breadcrumb__item"><a class="amplify-link amplify-breadcrumbs__link" href="/gen1/">Gen 1</a><span aria-hidden="true" class="amplify-breadcrumbs__separator">/</span></li><li class="amplify-breadcrumbs__item breadcrumb__item"><a class="amplify-link amplify-breadcrumbs__link" href="/gen1/react/">React</a><span aria-hidden="true" class="amplify-breadcrumbs__separator">/</span></li><li class="amplify-breadcrumbs__item breadcrumb__item"><a class="amplify-link amplify-breadcrumbs__link" href="/gen1/react/build-a-backend/">Build & connect backend</a><span aria-hidden="true" class="amplify-breadcrumbs__separator">/</span></li><li class="amplify-breadcrumbs__item breadcrumb__item"><a class="amplify-link amplify-breadcrumbs__link" href="/gen1/react/build-a-backend/auth/">Authentication</a><span aria-hidden="true" class="amplify-breadcrumbs__separator">/</span></li><li class="amplify-breadcrumbs__item breadcrumb__item"><a class="amplify-link amplify-breadcrumbs__link amplify-breadcrumbs__link--current" aria-current="true" href="/gen1/react/build-a-backend/auth/manage-mfa/">Manage MFA settings</a></li></ol></nav></div><h1 class="amplify-heading amplify-heading--1">Manage MFA settings</h1><p>The Auth category supports Multi-factor Authentication (MFA) for user sign-in flows. MFA is an extra layer of security used to make sure that users trying to gain access to an account are who they say they are. It requires users to provide additional information to verify their identity. Amplify Auth supports the MFA methods with Time-based-One-Time Passwords (TOTP) as well as text messages (SMS). In this guide we will review how you can set up MFA using TOTP and SMS and the tradeoffs between these methods to help you choose the right set up for your application. We鈥檒l also review how to set up MFA to remember a device and reduce sign-in friction for your users.</p><p>Before you begin, you will need:</p><ul> <li>The Amplify libraries installed and configured</li> <li><em>Optional</em> If you are using SMS you will need a phone number provisioned with an <a href="https://docs.aws.amazon.com/sns/latest/dg/channels-sms-originating-identities.html" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">SNS/Pinpoint</a></li> </ul><h2 class="amplify-heading amplify-heading--2" id="enable-multi-factor-authentication" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#enable-multi-factor-authentication">Enable multi-factor authentication</a></h2><p>Below are the steps you can use to set up MFA using SMS or TOTP with the Amplify CLI. The Amplify libraries are designed to work with MFA even if you have set up your Amazon Cognito resources separately.</p><div class="amplify-flex amplify-message amplify-message--filled amplify-message--info"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Important information" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path d="M10.5 13.5V15H9V18H15V15H13.5V10.5H9V13.5H10.5Z" fill="currentColor"></path><path d="M13.5 9V6H10.5V9H13.5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p>You can also use the Amazon Cognito console to enable MFA. You will first enable MFA for your Cognito User Pool and then set up MFA for your app. Please see the <a href="https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-mfa.html" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank"><em>Amazon Cognito Developer Guide</em></a> for more information to set up MFA in Amazon Cognito. You can use the same Cognito console to enable or disable MFA.</p></div></div></div></div><h3 class="amplify-heading amplify-heading--3" id="understand-your-mfa-options" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#understand-your-mfa-options">Understand your MFA options</a></h3><p>When enabling MFA you will have two key decisions to make:</p><ul> <li><strong>MFA enforcement:</strong> As part of this setup you will determine how MFA is enforced. If you require MFA by setting MFA login to "ON", all your users will need to complete MFA to sign in. If you keep it "Optional", your users will have the choice whether to enable MFA or not for their account.</li> <li><strong>MFA methods:</strong> You will also specify which MFA method you are using - TOTP (Time-based One-time Password), SMS (text message), or both. We recommend that you use TOTP-based MFA as it is more secure and you can reserve SMS for account recovery.</li> </ul><details id="compare-totp-and-sms-mfa-methods" class="accordion"><summary class="amplify-flex accordion__summary"><div class="amplify-flex accordion__summary__inner"><div class="amplify-flex accordion__eyebrow"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M1.9115 2C0.85581 2 0 2.85581 0 3.9115V16.6549C0 17.1618 0.20139 17.648 0.559867 18.0065C0.918343 18.365 1.40454 18.5664 1.9115 18.5664H8.81416V14.7434H3.82301L3.82301 5.82301L20.177 5.82301V8.15929H24V3.9115C24 2.85581 23.1442 2 22.0885 2H1.9115Z" fill="currentColor"></path><path d="M19.2212 10.6814V14.7434H23.4159V18.5664H19.2212V22.6283H15.3982V18.5664H11.469V14.7434L15.3982 14.7434V10.6814H19.2212Z" fill="currentColor"></path></svg>Learn more</div><div class="accordion__heading">Compare TOTP and SMS MFA methods</div></div><svg class="amplify-icon accordion__chevron" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></summary><div class="amplify-flex accordion__body"><div aria-label="Scrollable table" class="amplify-scrollview scrollview" tabindex="0"><table><thead><tr><th align="left"></th><th align="left">Time-based One-time Password (TOTP)</th><th align="left">Short Message Service (SMS)</th></tr></thead><tbody><tr><td align="left"><strong>Description</strong></td><td align="left">Generates a short-lived numeric code for user authentication that includes a shared secret key and current time using an authenticator app.</td><td align="left">Generates a one-time code shared via text message that is entered with other credentials for user authentication.</td></tr><tr><td align="left"><strong>Benefits</strong></td><td align="left">More secure than SMS since the code is generated locally and not transmitted over a network. TOTP also works without cell service as long as the TOTP app is installed.</td><td align="left">Easy to set up with a user-provided phone number and is familiar to users as a common authentication method.</td></tr><tr><td align="left"><strong>Constraints</strong></td><td align="left">Requires an app to generate codes and adds to the initial setup of an account. Codes also expire quickly and must be used promptly after it is generated.</td><td align="left">SMS requires cell service and can include an additional cost for the user. Although rare, SMS messages can also be intercepted.</td></tr></tbody></table></div></div><button class="amplify-button amplify-field-group__control amplify-button--link accordion__button" type="button"><svg class="amplify-icon accordion__chevron" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Close accordion</span></button></details><h3 class="amplify-heading amplify-heading--3" id="enable-mfa-with-the-amplify-cli" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#enable-mfa-with-the-amplify-cli">Enable MFA with the Amplify CLI</a></h3><div class="amplify-flex amplify-message amplify-message--filled amplify-message--warning"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Warning" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p><strong>Note:</strong> If your User Pool was created using Amplify CLI to set up backend resources (via <code>amplify add auth</code>) and you did not enable MFA, you will only be able to select the 'OPTIONAL' configuration for MFA when updating (via <code>amplify update auth</code>). Similarly, once MFA is enabled for a User pool you cannot disable it (via <code>amplify update auth</code>).</p></div></div></div></div><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R13ccckp6:-tab-new-project-:R3ccckp6:" aria-selected="true" aria-controls="amplify-id-:R13ccckp6:-panel-new-project-:R3ccckp6:" class="amplify-tabs__item amplify-tabs__item--active">New Project</button><button role="tab" id="amplify-id-:R13ccckp6:-tab-existing-project-:R3ccckp6:" aria-selected="false" aria-controls="amplify-id-:R13ccckp6:-panel-existing-project-:R3ccckp6:" tabindex="-1" class="amplify-tabs__item">Existing Project</button></div><div role="tabpanel" id="amplify-id-:R13ccckp6:-panel-new-project-:R3ccckp6:" aria-labelledby="amplify-id-:R13ccckp6:-tab-new-project-:R3ccckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><p>Run <code>amplify add auth</code> to create a new Cognito Auth resource, and follow the prompts below depending on how you want to integrate MFA into your flow.</p><p>Turning MFA "ON" will make it required for all users, while "Optional" will make it available to enable on a per-user basis.</p><h4 class="amplify-heading amplify-heading--4" id="sms-mfa" tabindex="-1">SMS MFA</h4><div class="amplify-flex amplify-message amplify-message--filled amplify-message--info"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Important information" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path d="M10.5 13.5V15H9V18H15V15H13.5V10.5H9V13.5H10.5Z" fill="currentColor"></path><path d="M13.5 9V6H10.5V9H13.5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p><strong>Note:</strong> If you create or update an SMS MFA configuration for your Cognito user pool, the Cognito service will send a test SMS message to an internal number in order to verify your configuration. You will be charged for these test messages by Amazon SNS.</p><p>For information about Amazon SNS pricing, see <a href="https://aws.amazon.com/sns/sms-pricing/" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">Worldwide SMS Pricing</a>.</p></div></div></div></div><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rar3ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rar3ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rar3ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain">$ amplify add auth</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Do</span><span class="token plain"> you want to use the </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">default</span><span class="token plain"> authentication and security configuration</span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Manual</span><span class="token plain"> configuration</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Multifactor</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">authentication</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> user login options</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">ON</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token maybe-class-name">Required</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">for</span><span class="token plain"> all logins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> can not be enabled later</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">For</span><span class="token plain"> user login</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> select the </span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">types</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">SMS</span><span class="token plain"> </span><span class="token maybe-class-name">Text</span><span class="token plain"> </span><span class="token maybe-class-name">Message</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Please</span><span class="token plain"> specify an </span><span class="token constant" style="color:rgb(130, 170, 255)">SMS</span><span class="token plain"> authentication message</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Your</span><span class="token plain"> authentication code is </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">####</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token maybe-class-name">Some</span><span class="token plain"> next steps</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify push"</span><span class="token plain"> will build all your local backend resources and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify publish"</span><span class="token plain"> will build all your local backend and frontend </span><span class="token function" style="color:rgb(130, 170, 255)">resources</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">if</span><span class="token plain"> you have hosting category added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div></code></pre></div></div></div><h4 class="amplify-heading amplify-heading--4" id="totp-mfa" tabindex="-1">TOTP MFA</h4><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rer3ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rer3ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rer3ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain">$ amplify add auth</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Do</span><span class="token plain"> you want to use the </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">default</span><span class="token plain"> authentication and security configuration</span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Manual</span><span class="token plain"> configuration</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Multifactor</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">authentication</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> user login options</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">ON</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token maybe-class-name">Required</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">for</span><span class="token plain"> all logins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> can not be enabled later</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">For</span><span class="token plain"> user login</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> select the </span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">types</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Time</span><span class="token operator" style="color:hsl(175, 57%, 80%)">-</span><span class="token maybe-class-name">Based</span><span class="token plain"> </span><span class="token maybe-class-name">One</span><span class="token operator" style="color:hsl(175, 57%, 80%)">-</span><span class="token maybe-class-name">Time</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(130, 170, 255)">Password</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">TOTP</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token maybe-class-name">Some</span><span class="token plain"> next steps</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify push"</span><span class="token plain"> will build all your local backend resources and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify publish"</span><span class="token plain"> will build all your local backend and frontend </span><span class="token function" style="color:rgb(130, 170, 255)">resources</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">if</span><span class="token plain"> you have hosting category added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R13ccckp6:-panel-existing-project-:R3ccckp6:" aria-labelledby="amplify-id-:R13ccckp6:-tab-existing-project-:R3ccckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><p>Run <code>amplify update auth</code> and follow the prompts as guided below.</p><p>The following steps show how to enable MFA as "Optional" for users. In this mode, MFA must be enabled on a user-by-user basis, either through an Admin SDK (e.g. via a Lambda trigger as part of the sign-up process), or manually in the Cognito console.</p><p>If you'd like to make MFA required for users, you must first delete your auth resource by running <code>amplify remove auth</code>, then follow the <strong>New Project</strong> flow on this page.</p><h4 class="amplify-heading amplify-heading--4" id="sms-mfa-1" tabindex="-1">SMS MFA</h4><div class="amplify-flex amplify-message amplify-message--filled amplify-message--info"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Important information" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path d="M10.5 13.5V15H9V18H15V15H13.5V10.5H9V13.5H10.5Z" fill="currentColor"></path><path d="M13.5 9V6H10.5V9H13.5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p><strong>Note:</strong> If you create or update an SMS MFA configuration for your Cognito user pool, the Cognito service will send a test SMS message to an internal number in order to verify your configuration. You will be charged for these test messages by Amazon SNS.</p><p>For information about Amazon SNS pricing, see <a href="https://aws.amazon.com/sns/sms-pricing/" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">Worldwide SMS Pricing</a>.</p></div></div></div></div><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rdb3ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rdb3ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rdb3ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain">$ amplify update auth</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">What</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">do</span><span class="token plain"> you want to </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">do</span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Walkthrough</span><span class="token plain"> all the auth configurations</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Multifactor</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">authentication</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> user login options</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">OPTIONAL</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token maybe-class-name">Individual</span><span class="token plain"> users can use </span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">For</span><span class="token plain"> user login</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> select the </span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">types</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">SMS</span><span class="token plain"> </span><span class="token maybe-class-name">Text</span><span class="token plain"> </span><span class="token maybe-class-name">Message</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Please</span><span class="token plain"> specify an </span><span class="token constant" style="color:rgb(130, 170, 255)">SMS</span><span class="token plain"> authentication message</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Your</span><span class="token plain"> authentication code is </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">####</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token maybe-class-name">Some</span><span class="token plain"> next steps</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify push"</span><span class="token plain"> will build all your local backend resources and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify publish"</span><span class="token plain"> will build all your local backend and frontend </span><span class="token function" style="color:rgb(130, 170, 255)">resources</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">if</span><span class="token plain"> you have hosting category added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div></code></pre></div></div></div><h4 class="amplify-heading amplify-heading--4" id="totp-mfa-1" tabindex="-1">TOTP MFA</h4><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rhb3ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rhb3ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rhb3ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain">$ amplify update auth</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">What</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">do</span><span class="token plain"> you want to </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">do</span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Walkthrough</span><span class="token plain"> all the auth configurations</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">Multifactor</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">authentication</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> user login options</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">OPTIONAL</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token maybe-class-name">Individual</span><span class="token plain"> users can use </span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token plain"> </span><span class="token maybe-class-name">For</span><span class="token plain"> user login</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> select the </span><span class="token constant" style="color:rgb(130, 170, 255)">MFA</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">types</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token maybe-class-name">Time</span><span class="token operator" style="color:hsl(175, 57%, 80%)">-</span><span class="token maybe-class-name">Based</span><span class="token plain"> </span><span class="token maybe-class-name">One</span><span class="token operator" style="color:hsl(175, 57%, 80%)">-</span><span class="token maybe-class-name">Time</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(130, 170, 255)">Password</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">TOTP</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"># </span><span class="token maybe-class-name">Answer</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">as</span><span class="token plain"> appropriate</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token maybe-class-name">Some</span><span class="token plain"> next steps</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify push"</span><span class="token plain"> will build all your local backend resources and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token string" style="color:rgb(173, 219, 103)">"amplify publish"</span><span class="token plain"> will build all your local backend and frontend </span><span class="token function" style="color:rgb(130, 170, 255)">resources</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">if</span><span class="token plain"> you have hosting category added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> and provision it </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">in</span><span class="token plain"> the cloud</span></div></div></code></pre></div></div></div></div></div></div></div><p>After you enable MFA you will also need to include MFA setup when users sign up. This will change depending on if you enable SMS, TOTP or both.</p><h2 class="amplify-heading amplify-heading--2" id="multi-factor-authentication-with-sms" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#multi-factor-authentication-with-sms">Multi-factor authentication with SMS</a></h2><p>Once you have setup SMS as your second layer of authentication with MFA as shown above, your users will get an authentication code via a text message to complete sign-in after they sign in with their username and password.</p><p>If you do not have one already, you will need to configure an IAM role to use with Amazon Simple Notification Service (Amazon SNS) to manage SMS messages. You will then add this role under the "Messaging" tab for your user pool in the Amazon Cognito console. For additional information see the <a href="https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-mfa-sms-text-message.html" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank"><em>Amazon Cognito SMS text message MFA</em></a> documentation.</p><h3 class="amplify-heading amplify-heading--3" id="enable-sms-mfa-during-sign-up" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#enable-sms-mfa-during-sign-up">Enable SMS MFA during sign-up</a></h3><p>You will need to pass <code>phone_number</code> as a user attribute to enable SMS MFA for your users during sign-up. However, if the primary sign-in mechanism for your Cognito resource is <code>phone_number</code> (without enabling <code>username</code>), then you do not need to pass it as an attribute.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R154cckp6:-tab-typescript-:R54cckp6:" aria-selected="true" aria-controls="amplify-id-:R154cckp6:-panel-typescript-:R54cckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R154cckp6:-tab-javascript-:R54cckp6:" aria-selected="false" aria-controls="amplify-id-:R154cckp6:-panel-javascript-:R54cckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R154cckp6:-panel-typescript-:R54cckp6:" aria-labelledby="amplify-id-:R154cckp6:-tab-typescript-:R54cckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rr54cckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rr54cckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rr54cckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> signUp </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignUp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> username</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> password</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> phone_number</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> email</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">signUp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> password</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> options</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> userAttributes</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> phone_number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> email</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R154cckp6:-panel-javascript-:R54cckp6:" aria-labelledby="amplify-id-:R154cckp6:-tab-javascript-:R54cckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1b54cckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1b54cckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1b54cckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> signUp </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignUp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">username</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> password</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> phone_number</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> email</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">signUp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> password</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">options</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">userAttributes</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> phone_number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> email</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>By default, you have to verify a user account after they sign up using the <code>confirmSignUp</code> API, which will send a one-time password to the user's phone number or email, depending on your Amazon Cognito configuration.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R15kcckp6:-tab-typescript-:R5kcckp6:" aria-selected="true" aria-controls="amplify-id-:R15kcckp6:-panel-typescript-:R5kcckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R15kcckp6:-tab-javascript-:R5kcckp6:" aria-selected="false" aria-controls="amplify-id-:R15kcckp6:-panel-javascript-:R5kcckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R15kcckp6:-panel-typescript-:R5kcckp6:" aria-labelledby="amplify-id-:R15kcckp6:-tab-typescript-:R5kcckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rr5kcckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rr5kcckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rr5kcckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> confirmSignUp </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignUpConfirmation</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> username</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> confirmationCode</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignUp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> confirmationCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R15kcckp6:-panel-javascript-:R5kcckp6:" aria-labelledby="amplify-id-:R15kcckp6:-tab-javascript-:R5kcckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1b5kcckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1b5kcckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1b5kcckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> confirmSignUp </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignUpConfirmation</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">username</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> confirmationCode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignUp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> confirmationCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><h3 class="amplify-heading amplify-heading--3" id="manage-sms-mfa-during-sign-in" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#manage-sms-mfa-during-sign-in">Manage SMS MFA during sign-in</a></h3><p>After a user signs in, if they have MFA enabled for their account, a challenge will be returned that you would need to call the <code>confirmSignIn</code> API where the user provides their confirmation code sent to their phone number.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R16ccckp6:-tab-typescript-:R6ccckp6:" aria-selected="true" aria-controls="amplify-id-:R16ccckp6:-panel-typescript-:R6ccckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R16ccckp6:-tab-javascript-:R6ccckp6:" aria-selected="false" aria-controls="amplify-id-:R16ccckp6:-panel-javascript-:R6ccckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R16ccckp6:-panel-typescript-:R6ccckp6:" aria-labelledby="amplify-id-:R16ccckp6:-tab-typescript-:R6ccckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rr6ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rr6ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rr6ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> signIn </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">username</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> password</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">signIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> password </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R16ccckp6:-panel-javascript-:R6ccckp6:" aria-labelledby="amplify-id-:R16ccckp6:-tab-javascript-:R6ccckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1b6ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1b6ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1b6ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> signIn </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">username</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> password</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">signIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> password </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>If MFA is <strong>ON</strong> or enabled for the user, you must call <code>confirmSignIn</code> with the OTP sent to their phone.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R16scckp6:-tab-typescript-:R6scckp6:" aria-selected="true" aria-controls="amplify-id-:R16scckp6:-panel-typescript-:R6scckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R16scckp6:-tab-javascript-:R6scckp6:" aria-selected="false" aria-controls="amplify-id-:R16scckp6:-panel-javascript-:R6scckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R16scckp6:-panel-typescript-:R6scckp6:" aria-labelledby="amplify-id-:R16scckp6:-tab-typescript-:R6scckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rr6scckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rr6scckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rr6scckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> confirmSignIn </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInConfirmation</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">otpCode</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> challengeResponse</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> otpCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R16scckp6:-panel-javascript-:R6scckp6:" aria-labelledby="amplify-id-:R16scckp6:-tab-javascript-:R6scckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1b6scckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1b6scckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1b6scckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> confirmSignIn </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInConfirmation</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">otpCode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">challengeResponse</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> otpCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>After a user has been signed in, call <code>updateMFAPreference</code> to record the MFA type as enabled for the user and optionally set it as preferred so that subsequent logins default to using this MFA type.</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R7ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R7ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R7ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> updateMFAPreference </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleUpdateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">updateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> sms</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'PREFERRED'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div><h2 class="amplify-heading amplify-heading--2" id="multi-factor-authentication-with-totp" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#multi-factor-authentication-with-totp">Multi-factor authentication with TOTP</a></h2><p>You can use Time-based One-Time Password (TOTP) for multi-factor authentication (MFA) in your web or mobile applications. The Amplify Auth category includes support for TOTP setup and verification using authenticator apps, offering an integrated solution and enhanced security for your users. These apps, such as Google Authenticator, Microsoft Authenticator, have the TOTP algorithm built-in and work by using a shared secret key and the current time to generate short-lived, six digit passwords.</p><h3 class="amplify-heading amplify-heading--3" id="set-up-totp-for-a-user" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#set-up-totp-for-a-user">Set up TOTP for a user</a></h3><p>After you initiate a user sign in with the <code>signIn</code> API where a user is required to set up TOTP as an MFA method, the API call will return <code>CONTINUE_SIGN_IN_WITH_TOTP_SETUP</code> as a challenge and next step to handle in your app. You will get that challenge if the following conditions are met:</p><ul> <li>MFA is marked as <strong>Required</strong> in your user pool.</li> <li>TOTP is enabled in your user pool.</li> <li>User does not have TOTP MFA set up already.</li> </ul><p>The <code>CONTINUE_SIGN_IN_WITH_TOTP_SETUP</code> step signifies that the user must set up TOTP before they can sign in. The step returns an associated value of type <code>TOTPSetupDetails</code> which must be used to configure an authenticator app like Microsoft Authenticator or Google Authenticator. <code>TOTPSetupDetails</code> provides a helper method called <code>getSetupURI</code> which generates a URI that can be used, for example, in a button to open the user's installed authenticator app. For more advanced use cases, <code>TOTPSetupDetails</code> also contains a <code>sharedSecret</code> which can be used to either generate a QR code or be manually entered into an authenticator app.</p><p>Once the authenticator app is set up, the user can generate a TOTP code and provide it to the library to complete the sign in process.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R19ccckp6:-tab-typescript-:R9ccckp6:" aria-selected="true" aria-controls="amplify-id-:R19ccckp6:-panel-typescript-:R9ccckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R19ccckp6:-tab-javascript-:R9ccckp6:" aria-selected="false" aria-controls="amplify-id-:R19ccckp6:-panel-javascript-:R9ccckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R19ccckp6:-panel-typescript-:R9ccckp6:" aria-labelledby="amplify-id-:R19ccckp6:-tab-typescript-:R9ccckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rr9ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rr9ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rr9ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> signIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> SignInOutput </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">username</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> password</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">signIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> password</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> SignInOutput</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> nextStep </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">switch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">signInStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONTINUE_SIGN_IN_WITH_TOTP_SETUP'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> totpSetupDetails </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">totpSetupDetails</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> appName </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'my_app_name'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> setupUri </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> totpSetupDetails</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">getSetupUri</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">appName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// Open setupUri with an authenticator APP to retrieve an OTP code</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">break</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R19ccckp6:-panel-javascript-:R9ccckp6:" aria-labelledby="amplify-id-:R19ccckp6:-tab-javascript-:R9ccckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1b9ccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1b9ccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1b9ccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> signIn </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">username</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> password</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">signIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> password</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> nextStep </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">switch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">signInStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONTINUE_SIGN_IN_WITH_TOTP_SETUP'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> totpSetupDetails </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">totpSetupDetails</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> appName </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'my_app_name'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> setupUri </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> totpSetupDetails</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getSetupUri</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">appName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// Open setupUri with an authenticator APP to retrieve an OTP code</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">break</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>The TOTP code can be obtained from the user via a text field or any other means. Once the user provides the TOTP code, call <code>confirmSignIn</code> with the TOTP code as the <code>challengeResponse</code> parameter.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R19scckp6:-tab-typescript-:R9scckp6:" aria-selected="true" aria-controls="amplify-id-:R19scckp6:-panel-typescript-:R9scckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R19scckp6:-tab-javascript-:R9scckp6:" aria-selected="false" aria-controls="amplify-id-:R19scckp6:-panel-javascript-:R9scckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R19scckp6:-panel-typescript-:R9scckp6:" aria-labelledby="amplify-id-:R19scckp6:-tab-typescript-:R9scckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rr9scckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rr9scckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rr9scckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> confirmSignIn </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInConfirmation</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">totpCode</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> challengeResponse</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> totpCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R19scckp6:-panel-javascript-:R9scckp6:" aria-labelledby="amplify-id-:R19scckp6:-tab-javascript-:R9scckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1b9scckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1b9scckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1b9scckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> confirmSignIn </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInConfirmation</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">totpCode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">challengeResponse</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> totpCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>After a user has been signed in, call <code>updateMFAPreference</code> to record the MFA type as enabled for the user and optionally set it as preferred so that subsequent logins default to using this MFA type.</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Raccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Raccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Raccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> updateMFAPreference </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleUpdateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">updateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> totp</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'PREFERRED'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div><h3 class="amplify-heading amplify-heading--3" id="enable-totp-after-a-user-is-signed-in" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#enable-totp-after-a-user-is-signed-in">Enable TOTP after a user is signed in</a></h3><p>TOTP MFA can be set up after a user has signed in. This can be done when the following conditions are met:</p><ul> <li>MFA is marked as <strong>Optional</strong> or <strong>Required</strong> in your user pool.</li> <li>TOTP is marked as an enabled MFA method in your user pool.</li> </ul><p>TOTP can be set up by calling the <code>setUpTOTP</code> and <code>verifyTOTPSetup</code> APIs in the <code>Auth</code> category.</p><p>Invoke the <code>setUpTOTP</code> API to generate a <code>TOTPSetupDetails</code> object which should be used to configure an Authenticator app like Microsoft Authenticator or Google Authenticator. <code>TOTPSetupDetails</code> provides a helper method called <code>getSetupURI</code> which generates a URI that can be used, for example, in a button to open the user's installed Authenticator app. For more advanced use cases, <code>TOTPSetupDetails</code> also contains a <code>sharedSecret</code> which can be used to either generate a QR code or be manually entered into an Authenticator app.</p><p>that contains the <code>sharedSecret</code> which will be used to either to generate a QR code or can be manually entered into an Authenticator app.</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rc4cckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rc4cckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rc4cckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> setUpTOTP </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleTOTPSetup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> totpSetupDetails </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">setUpTOTP</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> appName </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'my_app_name'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> setupUri </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> totpSetupDetails</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">getSetupUri</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">appName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// Open setupUri with an authenticator APP to retrieve an OTP code</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div><p>Once the Authenticator app is set up, the user must generate a TOTP code and provide it to the library. Pass the code to <code>verifyTOTPSetup</code> to complete the TOTP setup process.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1ckcckp6:-tab-typescript-:Rckcckp6:" aria-selected="true" aria-controls="amplify-id-:R1ckcckp6:-panel-typescript-:Rckcckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R1ckcckp6:-tab-javascript-:Rckcckp6:" aria-selected="false" aria-controls="amplify-id-:R1ckcckp6:-panel-javascript-:Rckcckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R1ckcckp6:-panel-typescript-:Rckcckp6:" aria-labelledby="amplify-id-:R1ckcckp6:-tab-typescript-:Rckcckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rrckcckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rrckcckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rrckcckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> verifyTOTPSetup </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleTOTPVerification</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">totpCode</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">verifyTOTPSetup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> code</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> totpCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R1ckcckp6:-panel-javascript-:Rckcckp6:" aria-labelledby="amplify-id-:R1ckcckp6:-tab-javascript-:Rckcckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1bckcckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1bckcckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1bckcckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> verifyTOTPSetup </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleTOTPVerification</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">totpCode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">verifyTOTPSetup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">code</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> totpCode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>After TOTP setup is complete, call <code>updateMFAPreference</code> to record the MFA type as enabled for the user and optionally set it as preferred so that subsequent logins default to using this MFA type.</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rd4cckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rd4cckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rd4cckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> updateMFAPreference </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleUpdateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">updateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> sms</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'ENABLED'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> totp</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'PREFERRED'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div><h3 class="amplify-heading amplify-heading--3" id="recover-from-a-lost-totp-device" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#recover-from-a-lost-totp-device">Recover from a lost TOTP device</a></h3><div class="amplify-flex amplify-message amplify-message--filled amplify-message--warning"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Warning" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p>If a user loses access to their TOTP device, they will need to contact an administrator to get help accessing their account. Based on the Cognito User Pool configuration, the administrator can use the <a href="https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminSetUserMFAPreference.html" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">AdminSetUserMFAPreference</a> to either change the MFA preference to a different MFA method or to disable MFA for the user.</p></div></div></div></div><p>In a scenario where MFA is marked as "Required" in the Cognito User Pool and another MFA method is not set up, the administrator would need to first initiate an <a href="https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminUpdateUserAttributes.html" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">AdminUpdateUserAttributes</a> call and update the user鈥檚 phone number attribute. Once this is complete, the administrator can continue changing the MFA preference to SMS as suggested above.</p><h2 class="amplify-heading amplify-heading--2" id="set-up-a-users-preferred-mfa-method" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#set-up-a-users-preferred-mfa-method">Set up a user's preferred MFA method</a></h2><h3 class="amplify-heading amplify-heading--3" id="fetch-the-current-users-mfa-preferences" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#fetch-the-current-users-mfa-preferences">Fetch the current user's MFA preferences</a></h3><p>Invoke the following API to get the current MFA preference and enabled MFA types, if any, for the current user.</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rescckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rescckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rescckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> fetchMFAPreference </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleFetchMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">fetchMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string string" style="color:rgb(173, 219, 103)">Enabled MFA types for the user: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">output</span><span class="token template-string interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token template-string interpolation">enabled</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string string" style="color:rgb(173, 219, 103)">Preferred MFA type for the user: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">output</span><span class="token template-string interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token template-string interpolation">preferred</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div><h3 class="amplify-heading amplify-heading--3" id="update-the-current-users-mfa-preferences" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#update-the-current-users-mfa-preferences">Update the current user's MFA preferences</a></h3><p>Invoke the following API to update the MFA preference for the current user.</p><div class="amplify-flex amplify-message amplify-message--filled amplify-message--warning"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Warning" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p>Only one MFA method can be marked as preferred at a time. If the user has multiple MFA methods enabled and tries to mark more than one MFA method as preferred, the API will throw an error.</p></div></div></div></div><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rfscckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rfscckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rfscckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> updateMFAPreference </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleUpdateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">updateMFAPreference</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> sms</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'ENABLED'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> totp</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'PREFERRED'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div><p>If multiple MFA methods are enabled for the user, the <code>signIn</code> API will return <code>CONTINUE_SIGN_IN_WITH_MFA_SELECTION</code> as the next step in the auth flow. During this scenario, the user should be prompted to select the MFA method they want to use to sign in and their preference should be passed to <code>confirmSignIn</code>.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1gccckp6:-tab-typescript-:Rgccckp6:" aria-selected="true" aria-controls="amplify-id-:R1gccckp6:-panel-typescript-:Rgccckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R1gccckp6:-tab-javascript-:Rgccckp6:" aria-selected="false" aria-controls="amplify-id-:R1gccckp6:-panel-javascript-:Rgccckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R1gccckp6:-panel-typescript-:Rgccckp6:" aria-labelledby="amplify-id-:R1gccckp6:-tab-typescript-:Rgccckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rrgccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rrgccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rrgccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> SignInOutput </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> SignInOutput</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> nextStep </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">switch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">signInStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONTINUE_SIGN_IN_WITH_MFA_SELECTION'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> allowedMFATypes </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">allowedMFATypes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> mfaType </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">promptUserForMFAType</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">allowedMFATypes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONFIRM_SIGN_IN_WITH_SMS_CODE'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// display user to enter otp code;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">break</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONFIRM_SIGN_IN_WITH_TOTP_CODE'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// display user to enter otp code;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">break</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">promptUserForMFAType</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> allowedMFATypes</span><span class="token operator" style="color:hsl(175, 57%, 80%)">?</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">'SMS'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">|</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'TOTP'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'SMS'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">|</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'TOTP'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// Prompt user to select MFA type</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleMFASelection</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">mfaType</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'SMS'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">|</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'TOTP'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> challengeResponse</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> mfaType</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R1gccckp6:-panel-javascript-:Rgccckp6:" aria-labelledby="amplify-id-:R1gccckp6:-tab-javascript-:Rgccckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1bgccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1bgccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1bgccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> nextStep </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">switch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">signInStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONTINUE_SIGN_IN_WITH_MFA_SELECTION'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> allowedMFATypes </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> nextStep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">allowedMFATypes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> mfaType </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">promptUserForMFAType</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">allowedMFATypes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONFIRM_SIGN_IN_WITH_SMS_CODE'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// display user to enter otp code;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">break</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'CONFIRM_SIGN_IN_WITH_TOTP_CODE'</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// display user to enter otp code;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">break</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// ...</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">promptUserForMFAType</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">allowedMFATypes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token comment" style="color:hsl(210, 4%, 71%);font-style:italic">// Prompt user to select MFA type</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleMFASelection</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">mfaType</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">confirmSignIn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">challengeResponse</span><span class="token operator" style="color:hsl(175, 57%, 80%)">:</span><span class="token plain"> mfaType</span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleSignInNextSteps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><h2 class="amplify-heading amplify-heading--2" id="remember-a-device" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#remember-a-device">Remember a device</a></h2><p>Remembering a device is useful in conjunction with MFA because it allows the second factor requirement to be automatically met when your user signs in on that device and reduces friction in their sign-in experience.</p><div class="amplify-flex amplify-message amplify-message--filled amplify-message--info"><div class="amplify-flex amplify-message__content"><div class="amplify-flex"><div class="amplify-message__icon"><svg aria-label="Important information" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path d="M10.5 13.5V15H9V18H15V15H13.5V10.5H9V13.5H10.5Z" fill="currentColor"></path><path d="M13.5 9V6H10.5V9H13.5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="currentColor"></path></svg></div><div class="amplify-message__content"><p><strong>Note:</strong> The <a href="https://aws.amazon.com/blogs/mobile/tracking-and-remembering-devices-using-amazon-cognito-your-user-pools/" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">device tracking and remembering</a> features are not available if any of the following conditions are met:</p><ul> <li>the federated OAuth flow with Cognito User Pools or Hosted UI is used, or</li> <li>when the <code>signIn</code> API uses the <code>USER_PASSWORD_AUTH</code> as the <code>authFlowType</code>.</li> </ul></div></div></div></div><h3 class="amplify-heading amplify-heading--3" id="configure-device-tracking" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#configure-device-tracking">Configure device tracking</a></h3><p>You can enable the remembered device functionality in the Cognito User Pool console. To begin, go to your project directory and issue the command:</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rhscckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rhscckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rhscckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class=""><span class="token plain">amplify auth console</span></div></div></code></pre></div></div></div><p>Select the following option to open the Cognito User Pool console:</p><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Riccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Riccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Riccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class=""><span class="token plain">? Which Console</span></div></div><div class="token-line" style="color:#d6deeb"><div class=""><span class="token plain"> User Pool</span></div></div></code></pre></div></div></div><p>When the console opens, scroll down to the "Device Tracking" section and select the "Edit" button. This will render the following page allowing you to configure your preference for remembering a user's device.</p><p><img alt="Edit device tracking options list is shown, with the don't remember highlighted." loading="lazy" width="837" height="413" decoding="async" data-nimg="1" style="color:transparent;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("/images/auth/nextImageExportOptimizer/webconsole_remember1-opt-10.WEBP")" srcSet="/images/auth/nextImageExportOptimizer/webconsole_remember1-opt-1920.WEBP 1x" src="/images/auth/nextImageExportOptimizer/webconsole_remember1-opt-1920.WEBP"/></p><p>Choose either "Always remember" to remember a user's device by default or "User Opt-in" to give the user the ability to choose.</p><p>When MFA is enabled you will have the option to suppress the second factor during multi-factor authentication. Choose "Yes" if you want a remembered device to be used as a second factor mechanism.</p><p><img alt="Options for allow users to bypass MFA for trusted devices." loading="lazy" width="828" height="149" decoding="async" data-nimg="1" style="color:transparent;height:auto;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("/images/auth/nextImageExportOptimizer/webconsole_remember2-opt-10.WEBP")" srcSet="/images/auth/nextImageExportOptimizer/webconsole_remember2-opt-1920.WEBP 1x" src="/images/auth/nextImageExportOptimizer/webconsole_remember2-opt-1920.WEBP"/></p><p>When you have made your selection(s), click "Save changes". You are now ready to start updating your code to manage remembered devices.</p><details id="understand-key-terms-used-for-tracking-devices" class="accordion"><summary class="amplify-flex accordion__summary"><div class="amplify-flex accordion__summary__inner"><div class="amplify-flex accordion__eyebrow"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M1.9115 2C0.85581 2 0 2.85581 0 3.9115V16.6549C0 17.1618 0.20139 17.648 0.559867 18.0065C0.918343 18.365 1.40454 18.5664 1.9115 18.5664H8.81416V14.7434H3.82301L3.82301 5.82301L20.177 5.82301V8.15929H24V3.9115C24 2.85581 23.1442 2 22.0885 2H1.9115Z" fill="currentColor"></path><path d="M19.2212 10.6814V14.7434H23.4159V18.5664H19.2212V22.6283H15.3982V18.5664H11.469V14.7434L15.3982 14.7434V10.6814H19.2212Z" fill="currentColor"></path></svg>Learn more</div><div class="accordion__heading">Understand key terms used for tracking devices</div></div><svg class="amplify-icon accordion__chevron" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></summary><div class="amplify-flex accordion__body"><p>There are differences to keep in mind when working with remembered, forgotten, and tracked devices.</p><ul> <li><strong>Tracked:</strong> Every time the user signs in with a new device, the client is given the device key at the end of a successful authentication event. We use this device key to generate a salt and password verifier which is used to call the <code>ConfirmDevice</code> API. At this point, the device is considered to be "tracked". Once the device is in a tracked state, you can use the Amazon Cognito console to see the time it started to be tracked, last authentication time, and other information about that device.</li> <li><strong>Remembered:</strong> Remembered devices are also tracked. During user authentication, the device key and secret pair assigned to a remembered device is used to authenticate the device to verify that it is the same device that the user previously used to sign in.</li> <li><strong>Not Remembered:</strong> A not-remembered device is a tracked device where Cognito has been configured to require users to "Opt-in" to remember a device but the user has chosen not to remember the device. This use case is for users signing into their application from a device that they don't own.</li> <li><strong>Forgotten:</strong> In the event that you no longer want to remember or track devices, you can use the <code>forgetDevice()</code> API to remove devices from being both remembered and tracked.</li> </ul></div><button class="amplify-button amplify-field-group__control amplify-button--link accordion__button" type="button"><svg class="amplify-icon accordion__chevron" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Close accordion</span></button></details><h3 class="amplify-heading amplify-heading--3" id="remember-devices" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#remember-devices">Remember devices</a></h3><p>You can remember devices using the following:</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1kscckp6:-tab-typescript-:Rkscckp6:" aria-selected="true" aria-controls="amplify-id-:R1kscckp6:-panel-typescript-:Rkscckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R1kscckp6:-tab-javascript-:Rkscckp6:" aria-selected="false" aria-controls="amplify-id-:R1kscckp6:-panel-javascript-:Rkscckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R1kscckp6:-panel-typescript-:Rkscckp6:" aria-labelledby="amplify-id-:R1kscckp6:-tab-typescript-:Rkscckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rrkscckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rrkscckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rrkscckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> rememberDevice </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleRememberDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">rememberDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R1kscckp6:-panel-javascript-:Rkscckp6:" aria-labelledby="amplify-id-:R1kscckp6:-tab-javascript-:Rkscckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1bkscckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1bkscckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1bkscckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> rememberDevice </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleRememberDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">rememberDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><h4 class="amplify-heading amplify-heading--4" id="forget-devices" tabindex="-1">Forget devices</h4><p>You can also forget devices but note that forgotten devices are neither remembered nor tracked.</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1lkcckp6:-tab-typescript-:Rlkcckp6:" aria-selected="true" aria-controls="amplify-id-:R1lkcckp6:-panel-typescript-:Rlkcckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R1lkcckp6:-tab-javascript-:Rlkcckp6:" aria-selected="false" aria-controls="amplify-id-:R1lkcckp6:-panel-javascript-:Rlkcckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R1lkcckp6:-panel-typescript-:Rlkcckp6:" aria-labelledby="amplify-id-:R1lkcckp6:-tab-typescript-:Rlkcckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rrlkcckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rrlkcckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rrlkcckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> forgetDevice </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleForgetDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">forgetDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R1lkcckp6:-panel-javascript-:Rlkcckp6:" aria-labelledby="amplify-id-:R1lkcckp6:-tab-javascript-:Rlkcckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1blkcckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1blkcckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1blkcckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> forgetDevice </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleForgetDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">forgetDevice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><h4 class="amplify-heading amplify-heading--4" id="fetch-devices" tabindex="-1">Fetch devices</h4><p>You can fetch a list of remembered devices by using the following:</p><div class="block-switcher"><div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1mccckp6:-tab-typescript-:Rmccckp6:" aria-selected="true" aria-controls="amplify-id-:R1mccckp6:-panel-typescript-:Rmccckp6:" class="amplify-tabs__item amplify-tabs__item--active">TypeScript</button><button role="tab" id="amplify-id-:R1mccckp6:-tab-javascript-:Rmccckp6:" aria-selected="false" aria-controls="amplify-id-:R1mccckp6:-panel-javascript-:Rmccckp6:" tabindex="-1" class="amplify-tabs__item">JavaScript</button></div><div role="tabpanel" id="amplify-id-:R1mccckp6:-panel-typescript-:Rmccckp6:" aria-labelledby="amplify-id-:R1mccckp6:-tab-typescript-:Rmccckp6:" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":Rrmccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":Rrmccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":Rrmccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> fetchDevices </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleFetchDevices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">fetchDevices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div><div role="tabpanel" id="amplify-id-:R1mccckp6:-panel-javascript-:Rmccckp6:" aria-labelledby="amplify-id-:R1mccckp6:-tab-javascript-:Rmccckp6:" class="amplify-tabs__panel"><div class="amplify-flex block-switcher__block"><div class="code-block"><div class="pre-container"><div class="amplify-flex pre-header"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small code-copy" type="button" aria-describedby=":R1bmccckp6H1:-codeID"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.75 3H15C15 1.34531 13.6547 0 12 0C10.3453 0 9 1.34531 9 3H5.25C4.00781 3 3 4.00781 3 5.25V21.75C3 22.9922 4.00781 24 5.25 24H18.75C19.9922 24 21 22.9922 21 21.75V5.25C21 4.00781 19.9922 3 18.75 3ZM12 1.875C12.6234 1.875 13.125 2.37656 13.125 3C13.125 3.62344 12.6234 4.125 12 4.125C11.3766 4.125 10.875 3.62344 10.875 3C10.875 2.37656 11.3766 1.875 12 1.875ZM18.75 21.4688C18.75 21.6234 18.6234 21.75 18.4688 21.75H5.53125C5.37656 21.75 5.25 21.6234 5.25 21.4688V5.53125C5.25 5.37656 5.37656 5.25 5.53125 5.25H7.5V6.9375C7.5 7.24687 7.75313 7.5 8.0625 7.5H15.9375C16.2469 7.5 16.5 7.24687 16.5 6.9375V5.25H18.4688C18.6234 5.25 18.75 5.37656 18.75 5.53125V21.4688Z" fill="currentColor"></path></svg> Copy<span class="amplify-visually-hidden">  code example</span></button></div><div class="pre-wrapper"><pre style="color:#d6deeb" tabindex="0" aria-label=" code example" aria-describedby=":R1bmccckp6H1:-codeID" class="pre pre--header"><code class="pre-code" id=":R1bmccckp6H1:-codeID"><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token keyword module" style="color:hsl(175, 57%, 80%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> fetchDevices </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(175, 57%, 80%)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">'aws-amplify/auth'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain" style="display:inline-block"> </span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token keyword" style="color:hsl(175, 57%, 80%)">async</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">handleFetchDevices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token keyword" style="color:hsl(175, 57%, 80%)">const</span><span class="token plain"> output </span><span class="token operator" style="color:hsl(175, 57%, 80%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">await</span><span class="token plain"> </span><span class="token maybe-class-name">Auth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">fetchDevices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(175, 57%, 80%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div></div><div class="token-line" style="color:#d6deeb"><div class="show-line-numbers"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></div></code></pre></div></div></div></div></div></div></div><p>You can now set up devices to be remembered, forgotten, and fetched.</p><h2 class="amplify-heading amplify-heading--2" id="conclusion" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#conclusion">Conclusion</a></h2><p>Congratulations! You finished the <strong>Manage MFA settings</strong> guide. In this guide, you set up and configured MFA for your users and provided them options on remembering their MFA preferences and devices.</p><h2 class="amplify-heading amplify-heading--2" id="next-steps" tabindex="-1"><a href="/gen1/react/build-a-backend/auth/manage-mfa/#next-steps">Next steps</a></h2><p>Now that you completed setting up multi-factor authentication you may also want to add additional customization. We recommend you learn more about:</p> <ul> <li><a href="/gen1/react/build-a-backend/auth/switch-auth/#customauth-flow">Switching authentication flows</a></li> <li><a href="/gen1/react/build-a-backend/auth/advanced-workflows/">Advanced workflows</a></li> </ul>   <div style="justify-content:space-between" class="amplify-flex next-prev"><a href="/gen1/react/build-a-backend/auth/manage-passwords/"><div class="amplify-flex"><svg style="margin:auto" class="amplify-icon icon-rotate-90" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg><div style="flex-direction:column;gap:0" class="amplify-flex"><div class="next-prev__label">PREVIOUS</div><div class="next-prev__title">Set up password change and recovery</div></div></div></a><a href="/gen1/react/build-a-backend/auth/remember-device/"><div class="amplify-flex"><div style="flex-direction:column;gap:0" class="amplify-flex"><div class="next-prev__label">NEXT</div><div class="next-prev__title">Remember a device</div></div><svg style="margin:auto" class="amplify-icon icon-rotate-90-reverse" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 7.20194L21.7981 5L12 14.7968L2.20194 5L0 7.20194L12 19.2019L24 7.20194Z" fill="currentColor"></path></svg></div></a></div></main></div><footer class="amplify-flex footer"><div class="amplify-flex footer-wrapper"><div class="amplify-flex footer__content"><div class="amplify-flex color-switcher"><span class="amplify-text color-switcher__label" id=":R1dkp6:-colorSwitcherLabel">Site color mode</span><div class="amplify-flex amplify-togglebuttongroup" role="group" aria-labelledby=":R1dkp6:-colorSwitcherLabel"><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false" title="Light mode"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.28364 4.70137L4.32 2.73973L2.78182 4.28493L4.73455 6.24657L6.28364 4.70137ZM3.27273 10.9041H0V13.0959H3.27273V10.9041ZM13.0909 0H10.9091V3.23288H13.0909V0ZM21.2182 4.28493L19.68 2.73973L17.7273 4.70137L19.2655 6.24657L21.2182 4.28493ZM17.7164 19.2986L19.6691 21.2712L21.2073 19.726L19.2436 17.7644L17.7164 19.2986ZM20.7273 10.9041V13.0959H24V10.9041H20.7273ZM12 5.42466C8.38909 5.42466 5.45455 8.3726 5.45455 12C5.45455 15.6274 8.38909 18.5753 12 18.5753C15.6109 18.5753 18.5455 15.6274 18.5455 12C18.5455 8.3726 15.6109 5.42466 12 5.42466ZM10.9091 24H13.0909V20.7671H10.9091V24ZM2.78182 19.7151L4.32 21.2603L6.27273 19.2877L4.73455 17.7425L2.78182 19.7151Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Light mode</span></button><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false" title="Dark mode"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.4165 0.00754715C6.51178 -0.232618 1 5.29117 1 11.9918C1 18.6203 6.37969 24 13.0082 24C17.4633 24 21.3299 21.5743 23.4074 17.9719C14.3892 17.6717 8.88941 7.84893 13.4165 0.00754715Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Dark mode</span></button><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton amplify-togglebutton--pressed" type="button" aria-pressed="true" title="System preferences"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM10.8 21.516C6.072 20.928 2.4 16.896 2.4 12C2.4 7.104 6.06 3.072 10.8 2.484V21.516ZM13.2 2.484C14.436 2.64 15.6 3.024 16.644 3.6H13.2V2.484ZM13.2 6H19.488C19.788 6.372 20.064 6.78 20.304 7.2H13.2V6ZM13.2 9.6H21.288C21.384 9.996 21.468 10.392 21.516 10.8H13.2V9.6ZM13.2 21.516V20.4H16.644C15.6 20.976 14.436 21.36 13.2 21.516ZM19.488 18H13.2V16.8H20.304C20.064 17.22 19.788 17.628 19.488 18ZM21.288 14.4H13.2V13.2H21.516C21.468 13.608 21.384 14.004 21.288 14.4Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">System preference</span></button></div></div><p><svg aria-label="AWS" style="font-size:var(--amplify-font-sizes-xl);margin-inline-end:var(--amplify-space-xs)" class="amplify-icon" viewBox="0 0 24 24" aria-hidden="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.76344 10.2123C6.76344 10.5077 6.79536 10.7471 6.85124 10.9228C6.9151 11.0984 6.99492 11.2899 7.10667 11.4975C7.14658 11.5613 7.16254 11.6252 7.16254 11.6811C7.16254 11.7609 7.11465 11.8407 7.01088 11.9205L6.50801 12.2558C6.43617 12.3037 6.36433 12.3276 6.30047 12.3276C6.22065 12.3276 6.14083 12.2877 6.06101 12.2159C5.94926 12.0961 5.85347 11.9684 5.77365 11.8407C5.69383 11.705 5.61401 11.5533 5.5262 11.3698C4.9036 12.1041 4.12135 12.4713 3.17945 12.4713C2.50895 12.4713 1.97415 12.2797 1.58302 11.8966C1.1919 11.5134 0.992343 11.0026 0.992343 10.364C0.992343 9.68552 1.23181 9.13475 1.71872 8.71968C2.20563 8.30461 2.85218 8.09707 3.67435 8.09707C3.94574 8.09707 4.22511 8.12102 4.52045 8.16093C4.81579 8.20084 5.11911 8.2647 5.4384 8.33654V7.75384C5.4384 7.1472 5.31069 6.72414 5.06324 6.4767C4.80781 6.22925 4.37677 6.10952 3.76215 6.10952C3.48277 6.10952 3.19542 6.14145 2.90008 6.21329C2.60474 6.28513 2.31738 6.37293 2.038 6.48468C1.91029 6.54055 1.8145 6.57248 1.75863 6.58845C1.70275 6.60441 1.66284 6.61239 1.63092 6.61239C1.51917 6.61239 1.46329 6.53257 1.46329 6.36495V5.97382C1.46329 5.84611 1.47925 5.75032 1.51917 5.69445C1.55908 5.63857 1.63092 5.5827 1.74267 5.52682C2.02204 5.38314 2.35729 5.26341 2.74842 5.16763C3.13954 5.06386 3.55461 5.01596 3.99363 5.01596C4.94351 5.01596 5.63795 5.23148 6.08495 5.66252C6.52397 6.09355 6.74747 6.74809 6.74747 7.62613V10.2123H6.76344ZM3.52268 11.4256C3.78609 11.4256 4.05749 11.3777 4.34485 11.2819C4.6322 11.1862 4.88763 11.0106 5.10315 10.7711C5.23086 10.6194 5.32665 10.4518 5.37454 10.2602C5.42244 10.0687 5.45436 9.83718 5.45436 9.56579V9.23054C5.22288 9.17466 4.97543 9.12677 4.72001 9.09484C4.46458 9.06291 4.21713 9.04695 3.96968 9.04695C3.43488 9.04695 3.04376 9.15072 2.78034 9.36623C2.51693 9.58175 2.38922 9.88507 2.38922 10.2842C2.38922 10.6593 2.485 10.9387 2.68456 11.1303C2.87613 11.3298 3.15551 11.4256 3.52268 11.4256ZM9.93235 12.2877C9.78867 12.2877 9.69288 12.2638 9.62903 12.2079C9.56517 12.16 9.50929 12.0482 9.4614 11.8966L7.5856 5.72638C7.5377 5.56673 7.51376 5.46296 7.51376 5.40709C7.51376 5.27938 7.57762 5.20754 7.70533 5.20754H8.48758C8.63924 5.20754 8.74301 5.23148 8.79888 5.28736C8.86274 5.33525 8.91063 5.447 8.95853 5.59866L10.2995 10.8828L11.5447 5.59866C11.5847 5.43902 11.6325 5.33525 11.6964 5.28736C11.7603 5.23946 11.872 5.20754 12.0157 5.20754H12.6543C12.8059 5.20754 12.9097 5.23148 12.9735 5.28736C13.0374 5.33525 13.0933 5.447 13.1252 5.59866L14.3864 10.9467L15.7673 5.59866C15.8152 5.43902 15.8711 5.33525 15.9269 5.28736C15.9908 5.23946 16.0946 5.20754 16.2382 5.20754H16.9806C17.1083 5.20754 17.1801 5.27139 17.1801 5.40709C17.1801 5.44118 17.1743 5.47527 17.1676 5.51433L17.1642 5.5348C17.1562 5.5827 17.1402 5.64655 17.1083 5.73436L15.1846 11.9046C15.1367 12.0642 15.0808 12.168 15.017 12.2159C14.9531 12.2638 14.8494 12.2957 14.7137 12.2957H14.0272C13.8755 12.2957 13.7718 12.2717 13.7079 12.2159C13.644 12.16 13.5882 12.0562 13.5562 11.8966L12.319 6.74809L11.0898 11.8886C11.0498 12.0482 11.002 12.152 10.9381 12.2079C10.8742 12.2638 10.7625 12.2877 10.6188 12.2877H9.93235ZM20.1894 12.5032C19.7743 12.5032 19.3593 12.4553 18.9602 12.3595C18.561 12.2638 18.2497 12.16 18.0422 12.0403C17.9145 11.9684 17.8267 11.8886 17.7948 11.8168C17.7628 11.7449 17.7469 11.6651 17.7469 11.5933V11.1862C17.7469 11.0185 17.8107 10.9387 17.9305 10.9387C17.9784 10.9387 18.0262 10.9467 18.0741 10.9627C18.1051 10.973 18.146 10.9899 18.1926 11.0093C18.2181 11.0199 18.2454 11.0312 18.2737 11.0425C18.5451 11.1622 18.8404 11.258 19.1517 11.3219C19.471 11.3857 19.7823 11.4176 20.1016 11.4176C20.6045 11.4176 20.9956 11.3298 21.267 11.1542C21.5384 10.9786 21.6821 10.7232 21.6821 10.3959C21.6821 10.1724 21.6102 9.98884 21.4666 9.83718C21.3229 9.68552 21.0515 9.54982 20.6604 9.42211L19.5029 9.06291C18.9202 8.87932 18.4892 8.60793 18.2258 8.24873C17.9624 7.89752 17.8267 7.50639 17.8267 7.09132C17.8267 6.75607 17.8985 6.46073 18.0422 6.2053C18.1859 5.94988 18.3775 5.72638 18.6169 5.55077C18.8564 5.36718 19.1278 5.23148 19.4471 5.1357C19.7664 5.03991 20.1016 5 20.4528 5C20.6284 5 20.812 5.00798 20.9876 5.03193C21.1712 5.05587 21.3388 5.0878 21.5064 5.11973L21.5065 5.11973C21.6661 5.15964 21.8178 5.19955 21.9614 5.24745C22.1051 5.29534 22.2169 5.34323 22.2967 5.39113C22.4084 5.45498 22.4883 5.51884 22.5362 5.59068C22.5841 5.65454 22.608 5.74234 22.608 5.85409V6.22925C22.608 6.39688 22.5441 6.48468 22.4244 6.48468C22.3606 6.48468 22.2568 6.45275 22.1211 6.38889C21.6661 6.18136 21.1552 6.07759 20.5885 6.07759C20.1335 6.07759 19.7743 6.14943 19.5269 6.30109C19.2794 6.45275 19.1517 6.68423 19.1517 7.0115C19.1517 7.235 19.2316 7.42657 19.3912 7.57823C19.5508 7.72989 19.8462 7.88156 20.2692 8.01725L21.4027 8.37645C21.9774 8.56004 22.3925 8.81547 22.6399 9.14273C22.8874 9.47 23.0071 9.84516 23.0071 10.2602C23.0071 10.6035 22.9353 10.9148 22.7996 11.1862C22.6559 11.4576 22.4643 11.697 22.2169 11.8886C21.9694 12.0881 21.6741 12.2318 21.3309 12.3356C20.9717 12.4473 20.5965 12.5032 20.1894 12.5032ZM21.698 16.3825C19.0719 18.3222 15.2564 19.3519 11.9758 19.3519C7.37806 19.3519 3.23533 17.6517 0.106324 14.826C-0.141123 14.6025 0.0823771 14.2992 0.377717 14.4748C3.76215 16.4384 7.93681 17.6278 12.2552 17.6278C15.1686 17.6278 18.3695 17.0211 21.3149 15.7759C21.7539 15.5763 22.1291 16.0633 21.698 16.3825ZM19.7185 15.0336C20.5725 14.9298 22.4563 14.7063 22.7916 15.1373C23.1268 15.5604 22.4164 17.3404 22.0971 18.1306C22.0014 18.3701 22.2089 18.4659 22.4244 18.2823C23.8293 17.1009 24.1964 14.6345 23.9091 14.2753C23.6217 13.924 21.1552 13.6207 19.6546 14.6744C19.4231 14.842 19.463 15.0655 19.7185 15.0336Z" fill="currentColor"></path></svg>Amplify open source software, documentation and community are supported by Amazon Web Services.</p><p> 漏 2024, Amazon Web Services, Inc. and its affiliates.</p><p>All rights reserved. View the <a href="https://aws.amazon.com/terms/" class="footer-link" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">site terms</a> and <a href="https://aws.amazon.com/privacy/" class="footer-link" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank">privacy policy</a>.</p><p>Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.</p></div><ul class="amplify-flex footer__links"><li><a href="https://x.com/AWSAmplify" class="footer-link footer-link--social" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.9761 10.1624L22.7186 0H20.6469L13.0558 8.82384L6.99289 0H0L9.16837 13.3432L0 24H2.07179L10.0881 14.6817L16.4911 24H23.4839L13.9761 10.1624ZM2.81829 1.55962H6.00044L20.6479 22.5113H17.4657L2.81829 1.55962Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">X</span></a></li><li><a href="https://discord.gg/amplify" class="footer-link footer-link--social" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.12482 0H19.8767C21.205 0 22.2865 1.104 22.2865 2.472V24L19.7591 21.72L18.3367 20.376L16.8321 18.948L17.4551 21.168H4.12482C2.7965 21.168 1.71503 20.064 1.71503 18.696V2.472C1.71503 1.104 2.7965 0 4.12482 0ZM14.5634 14.7C14.916 15.156 15.3392 15.672 15.3392 15.672C17.9371 15.588 18.9362 13.848 18.9362 13.848C18.9362 9.984 17.2435 6.852 17.2435 6.852C15.5508 5.556 13.9403 5.592 13.9403 5.592L13.7758 5.784C15.7741 6.408 16.7028 7.308 16.7028 7.308C15.4802 6.624 14.2812 6.288 13.1645 6.156C12.3181 6.06 11.507 6.084 10.79 6.18C10.7284 6.18 10.6758 6.18915 10.6165 6.19945C10.6079 6.20095 10.5991 6.20248 10.5901 6.204C10.1787 6.24 9.17952 6.396 7.92172 6.96C7.48678 7.164 7.22817 7.308 7.22817 7.308C7.22817 7.308 8.20384 6.36 10.3198 5.736L10.2022 5.592C10.2022 5.592 8.59176 5.556 6.89903 6.852C6.89903 6.852 5.20629 9.984 5.20629 13.848C5.20629 13.848 6.19372 15.588 8.7916 15.672C8.7916 15.672 9.22654 15.132 9.57919 14.676C8.08629 14.22 7.52205 13.26 7.52205 13.26C7.52205 13.26 7.6396 13.344 7.85119 13.464C7.86294 13.476 7.8747 13.488 7.89821 13.5C7.91584 13.512 7.93348 13.521 7.95111 13.53C7.96874 13.539 7.98637 13.548 8.00401 13.56C8.29788 13.728 8.59176 13.86 8.86213 13.968C9.34409 14.16 9.92009 14.352 10.5901 14.484C11.4718 14.652 12.5062 14.712 13.6347 14.496C14.1872 14.4 14.7514 14.232 15.3392 13.98C15.7506 13.824 16.2091 13.596 16.691 13.272C16.691 13.272 16.1033 14.256 14.5634 14.7ZM8.67425 11.3997C8.67425 10.6677 9.20323 10.0677 9.87327 10.0677C10.5433 10.0677 11.084 10.6677 11.0723 11.3997C11.0723 12.1317 10.5433 12.7317 9.87327 12.7317C9.21499 12.7317 8.67425 12.1317 8.67425 11.3997ZM12.9649 11.3997C12.9649 10.6677 13.4938 10.0677 14.1639 10.0677C14.8339 10.0677 15.3629 10.6677 15.3629 11.3997C15.3629 12.1317 14.8339 12.7317 14.1639 12.7317C13.5056 12.7317 12.9649 12.1317 12.9649 11.3997Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Discord</span></a></li><li><a href="https://github.com/aws-amplify" class="footer-link footer-link--social" aria-label=" (opens in new tab)" rel="noopener noreferrer" target="_blank"><svg class="amplify-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0092 0C5.39329 0 0.0449829 5.49998 0.0449829 12.3042C0.0449829 17.7432 3.47182 22.3472 8.22576 23.9767C8.82013 24.0991 9.03784 23.7119 9.03784 23.3862C9.03784 23.1009 9.01825 22.1232 9.01825 21.1044C5.6901 21.8379 4.99704 19.6377 4.99704 19.6377C4.46219 18.2117 3.6697 17.8452 3.6697 17.8452C2.5804 17.0914 3.74905 17.0914 3.74905 17.0914C4.95737 17.1729 5.59141 18.3544 5.59141 18.3544C6.66087 20.2284 8.38421 19.6989 9.07752 19.3729C9.17645 18.5784 9.4936 18.0284 9.83033 17.7229C7.17589 17.4377 4.38309 16.3784 4.38309 11.6522C4.38309 10.3077 4.85819 9.20771 5.611 8.35222C5.49223 8.04672 5.07615 6.78347 5.73002 5.09273C5.73002 5.09273 6.74022 4.76673 9.01801 6.35572C9.99321 6.08639 10.9989 5.94938 12.0092 5.94823C13.0194 5.94823 14.0492 6.09097 15.0001 6.35572C17.2781 4.76673 18.2883 5.09273 18.2883 5.09273C18.9422 6.78347 18.5259 8.04672 18.4071 8.35222C19.1798 9.20771 19.6353 10.3077 19.6353 11.6522C19.6353 16.3784 16.8425 17.4172 14.1682 17.7229C14.6041 18.1099 14.9803 18.8432 14.9803 20.0044C14.9803 21.6544 14.9607 22.9787 14.9607 23.3859C14.9607 23.7119 15.1786 24.0991 15.7728 23.9769C20.5267 22.3469 23.9535 17.7432 23.9535 12.3042C23.9731 5.49998 18.6052 0 12.0092 0Z" fill="currentColor"></path></svg><span class="amplify-visually-hidden">Github</span></a></li></ul></div></footer></div></div><style id="amplify-theme-gen1-theme">[data-amplify-theme="gen1-theme"] { --amplify-components-accordion-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small); --amplify-components-accordion-item-border-style: solid; --amplify-components-accordion-item-border-radius: var(--amplify-radii-small); --amplify-components-accordion-item-trigger-align-items: center; --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-trigger-color: inherit; --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small); --amplify-components-accordion-item-trigger-justify-content: space-between; --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs); --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-trigger-hover-color: inherit; --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus); --amplify-components-accordion-item-content-color: inherit; --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs); --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary); --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium); --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large); --amplify-components-ai-conversation-message-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small); --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10); --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-message-sender-username-font-size: inherit; --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold); --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit; --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit; --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-form-gap: var(--amplify-space-small); --amplify-components-ai-conversation-form-padding: var(--amplify-space-small); --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary); --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small); --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small); --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs); --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium); --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium); --amplify-components-alert-align-items: center; --amplify-components-alert-justify-content: space-between; --amplify-components-alert-color: var(--amplify-colors-font-primary); --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary); --amplify-components-alert-padding-block: var(--amplify-space-small); --amplify-components-alert-padding-inline: var(--amplify-space-medium); --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl); --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-alert-info-color: var(--amplify-colors-font-info); --amplify-components-alert-info-background-color: var(--amplify-colors-background-info); --amplify-components-alert-error-color: var(--amplify-colors-font-error); --amplify-components-alert-error-background-color: var(--amplify-colors-background-error); --amplify-components-alert-warning-color: var(--amplify-colors-font-warning); --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-alert-success-color: var(--amplify-colors-font-success); --amplify-components-alert-success-background-color: var(--amplify-colors-background-success); --amplify-components-authenticator-max-width: 60rem; --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50); --amplify-components-authenticator-modal-top: var(--amplify-space-zero); --amplify-components-authenticator-modal-left: var(--amplify-space-zero); --amplify-components-authenticator-container-width-max: 30rem; --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small); --amplify-components-authenticator-router-border-style: solid; --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary); --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary); --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium); --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium); --amplify-components-authenticator-form-padding: var(--amplify-space-xl); --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary); --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80); --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-width: 100%; --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small); --amplify-components-autocomplete-menu-border-style: solid; --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small); --amplify-components-autocomplete-menu-options-display: flex; --amplify-components-autocomplete-menu-options-flex-direction: column; --amplify-components-autocomplete-menu-options-max-height: 300px; --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-option-color: currentcolor; --amplify-components-autocomplete-menu-option-cursor: pointer; --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short); --amplify-components-autocomplete-menu-option-transition-property: background-color, color; --amplify-components-autocomplete-menu-option-transition-timing-function: ease; --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80); --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white); --amplify-components-autocomplete-menu-empty-display: flex; --amplify-components-autocomplete-menu-loading-align-items: center; --amplify-components-autocomplete-menu-loading-display: flex; --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs); --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small); --amplify-components-avatar-color: var(--amplify-colors-font-tertiary); --amplify-components-avatar-line-height: 1; --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold); --amplify-components-avatar-font-size: var(--amplify-font-sizes-small); --amplify-components-avatar-text-align: center; --amplify-components-avatar-width: var(--amplify-font-sizes-xxl); --amplify-components-avatar-height: var(--amplify-font-sizes-xxl); --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary); --amplify-components-avatar-border-radius: 100%; --amplify-components-avatar-border-color: var(--amplify-colors-border-primary); --amplify-components-avatar-border-width: var(--amplify-border-widths-medium); --amplify-components-avatar-info-color: var(--amplify-colors-font-info); --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info); --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info); --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning); --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-avatar-success-color: var(--amplify-colors-font-success); --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success); --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success); --amplify-components-avatar-error-color: var(--amplify-colors-font-error); --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error); --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error); --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl); --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl); --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-badge-color: var(--amplify-colors-font-primary); --amplify-components-badge-line-height: 1; --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold); --amplify-components-badge-font-size: var(--amplify-font-sizes-small); --amplify-components-badge-text-align: center; --amplify-components-badge-padding-vertical: var(--amplify-space-xs); --amplify-components-badge-padding-horizontal: var(--amplify-space-small); --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary); --amplify-components-badge-border-radius: var(--amplify-radii-xl); --amplify-components-badge-info-color: var(--amplify-colors-font-info); --amplify-components-badge-info-background-color: var(--amplify-colors-background-info); --amplify-components-badge-warning-color: var(--amplify-colors-font-warning); --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-badge-success-color: var(--amplify-colors-font-success); --amplify-components-badge-success-background-color: var(--amplify-colors-background-success); --amplify-components-badge-error-color: var(--amplify-colors-font-error); --amplify-components-badge-error-background-color: var(--amplify-colors-background-error); --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs); --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs); --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-badge-large-padding-vertical: var(--amplify-space-small); --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium); --amplify-components-breadcrumbs-flex-direction: row; --amplify-components-breadcrumbs-flex-wrap: wrap; --amplify-components-breadcrumbs-gap: 0; --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary); --amplify-components-breadcrumbs-item-flex-direction: row; --amplify-components-breadcrumbs-item-color: inherit; --amplify-components-breadcrumbs-item-font-size: inherit; --amplify-components-breadcrumbs-item-align-items: center; --amplify-components-breadcrumbs-item-line-height: 1; --amplify-components-breadcrumbs-separator-color: inherit; --amplify-components-breadcrumbs-separator-font-size: inherit; --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color); --amplify-components-breadcrumbs-link-font-size: inherit; --amplify-components-breadcrumbs-link-font-weight: normal; --amplify-components-breadcrumbs-link-text-decoration: none; --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs); --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-current-color: inherit; --amplify-components-breadcrumbs-link-current-font-size: inherit; --amplify-components-breadcrumbs-link-current-font-weight: normal; --amplify-components-breadcrumbs-link-current-text-decoration: none; --amplify-components-button-font-weight: var(--amplify-font-weights-bold); --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration); --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height); --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); --amplify-components-button-background-color: var(--amplify-colors-background-primary); --amplify-components-button-border-color: var(--amplify-colors-primary-80); --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width); --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style); --amplify-components-button-border-radius: var(--amplify-radii-medium); --amplify-components-button-color: var(--amplify-colors-primary-80); --amplify-components-button-hover-color: var(--amplify-colors-font-focus); --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-button-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-focus-border-color: transparent; --amplify-components-button-focus-box-shadow: none; --amplify-components-button-active-color: var(--amplify-colors-font-active); --amplify-components-button-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-active-border-color: var(--amplify-colors-primary-100); --amplify-components-button-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-loading-background-color: transparent; --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-disabled-background-color: transparent; --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-background-color: transparent; --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-background-color: transparent; --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-background-color: transparent; --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-background-color: transparent; --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-background-color: transparent; --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary); --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100); --amplify-components-button-primary-border-color: transparent; --amplify-components-button-primary-border-width: var(--amplify-border-widths-small); --amplify-components-button-primary-border-style: solid; --amplify-components-button-primary-background-color: var(--amplify-colors-primary-40); --amplify-components-button-primary-color: var(--amplify-colors-font-primary); --amplify-components-button-primary-disabled-border-color: transparent; --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-loading-border-color: transparent; --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-hover-border-color: transparent; --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-20); --amplify-components-button-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-button-primary-focus-border-color: transparent; --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-20); --amplify-components-button-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-button-primary-focus-box-shadow: none; --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-10); --amplify-components-button-primary-active-color: var(--amplify-colors-font-primary); --amplify-components-button-primary-info-border-color: transparent; --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80); --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-hover-border-color: transparent; --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-border-color: transparent; --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-primary-info-active-border-color: transparent; --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100); --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-border-color: transparent; --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80); --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-hover-border-color: transparent; --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-border-color: transparent; --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-warning-active-border-color: transparent; --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100); --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-border-color: transparent; --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80); --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-hover-border-color: transparent; --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-border-color: transparent; --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-primary-error-active-border-color: transparent; --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-border-color: transparent; --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80); --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-hover-border-color: transparent; --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-border-color: transparent; --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-primary-success-active-border-color: transparent; --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100); --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-border-color: transparent; --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70); --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-hover-border-color: transparent; --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-border-color: transparent; --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-overlay-active-border-color: transparent; --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-background-color: transparent; --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-border-width: var(--amplify-border-widths-small); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-button-link-focus-border-color: transparent; --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-link-focus-box-shadow: none; --amplify-components-button-link-active-border-color: transparent; --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-link-active-color: var(--amplify-colors-font-active); --amplify-components-button-link-disabled-border-color: transparent; --amplify-components-button-link-disabled-background-color: transparent; --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-loading-border-color: transparent; --amplify-components-button-link-loading-background-color: transparent; --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-info-border-color: transparent; --amplify-components-button-link-info-background-color: transparent; --amplify-components-button-link-info-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-hover-border-color: transparent; --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90); --amplify-components-button-link-info-focus-border-color: transparent; --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-link-info-active-border-color: transparent; --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-link-warning-border-color: transparent; --amplify-components-button-link-warning-background-color: transparent; --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-hover-border-color: transparent; --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90); --amplify-components-button-link-warning-focus-border-color: transparent; --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-link-warning-active-border-color: transparent; --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-link-success-border-color: transparent; --amplify-components-button-link-success-background-color: transparent; --amplify-components-button-link-success-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-hover-border-color: transparent; --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90); --amplify-components-button-link-success-focus-border-color: transparent; --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-link-success-active-border-color: transparent; --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-link-error-border-color: transparent; --amplify-components-button-link-error-background-color: transparent; --amplify-components-button-link-error-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-hover-border-color: transparent; --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90); --amplify-components-button-link-error-focus-border-color: transparent; --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-link-error-active-border-color: transparent; --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-link-overlay-border-color: transparent; --amplify-components-button-link-overlay-background-color: transparent; --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100); --amplify-components-button-link-overlay-hover-border-color: transparent; --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80); --amplify-components-button-link-overlay-focus-border-color: transparent; --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90); --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-link-overlay-active-border-color: transparent; --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90); --amplify-components-button-warning-background-color: transparent; --amplify-components-button-warning-border-color: var(--amplify-colors-red-60); --amplify-components-button-warning-border-width: var(--amplify-border-widths-small); --amplify-components-button-warning-color: var(--amplify-colors-red-60); --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error); --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-warning-active-color: var(--amplify-colors-red-100); --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-disabled-background-color: transparent; --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-loading-background-color: transparent; --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-border-color: transparent; --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small); --amplify-components-button-destructive-border-style: solid; --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60); --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-disabled-border-color: transparent; --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-loading-border-color: transparent; --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-hover-border-color: transparent; --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-border-color: transparent; --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-destructive-active-border-color: transparent; --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size); --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size); --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); --amplify-components-button-large-padding-inline-start: var(--amplify-space-xl); --amplify-components-button-large-padding-inline-end: var(--amplify-space-xl); --amplify-components-button-loader-wrapper-align-items: center; --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs); --amplify-components-card-background-color: var(--amplify-colors-background-primary); --amplify-components-card-border-radius: var(--amplify-radii-xs); --amplify-components-card-border-width: 0; --amplify-components-card-border-style: solid; --amplify-components-card-border-color: transparent; --amplify-components-card-box-shadow: none; --amplify-components-card-padding: var(--amplify-space-large); --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color); --amplify-components-card-outlined-border-radius: var(--amplify-radii-large); --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-card-outlined-border-style: solid; --amplify-components-card-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow); --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color); --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs); --amplify-components-card-elevated-border-width: 0; --amplify-components-card-elevated-border-style: solid; --amplify-components-card-elevated-border-color: transparent; --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium); --amplify-components-checkbox-cursor: pointer; --amplify-components-checkbox-align-items: center; --amplify-components-checkbox-disabled-cursor: not-allowed; --amplify-components-checkbox-button-position: relative; --amplify-components-checkbox-button-align-items: center; --amplify-components-checkbox-button-justify-content: center; --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse); --amplify-components-checkbox-button-before-width: 100%; --amplify-components-checkbox-button-before-height: 100%; --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium); --amplify-components-checkbox-button-before-border-radius: 20%; --amplify-components-checkbox-button-before-border-style: solid; --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary); --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent); --amplify-components-checkbox-button-focus-outline-style: solid; --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium); --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80); --amplify-components-checkbox-icon-border-radius: 20%; --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0); --amplify-components-checkbox-icon-transform: scale(0); --amplify-components-checkbox-icon-transition-property: all; --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short); --amplify-components-checkbox-icon-transition-timing-function: ease-in-out; --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-checked-transform: scale(1); --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-indeterminate-transform: scale(1); --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-label-color: var(--amplify-components-text-color); --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-checkboxfield-align-items: flex-start; --amplify-components-checkboxfield-align-content: center; --amplify-components-checkboxfield-flex-direction: column; --amplify-components-checkboxfield-justify-content: center; --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color); --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color); --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color); --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color); --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color); --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color); --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color); --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color); --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color); --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color); --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color); --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color); --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color); --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color); --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color); --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color); --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color); --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color); --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color); --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color); --amplify-components-copy-font-size: var(--amplify-font-sizes-xs); --amplify-components-copy-gap: var(--amplify-space-relative-medium); --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary); --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary); --amplify-components-divider-label-padding-inline: var(--amplify-space-medium); --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small); --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary); --amplify-components-divider-small-border-width: var(--amplify-border-widths-small); --amplify-components-divider-large-border-width: var(--amplify-border-widths-large); --amplify-components-divider-opacity: var(--amplify-opacities-60); --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-dropzone-border-style: dashed; --amplify-components-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-dropzone-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-gap: var(--amplify-space-small); --amplify-components-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-dropzone-text-align: center; --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success); --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success); --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success); --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error); --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error); --amplify-components-field-gap: var(--amplify-space-xs); --amplify-components-field-font-size: var(--amplify-font-sizes-medium); --amplify-components-field-flex-direction: column; --amplify-components-field-small-gap: var(--amplify-space-xxxs); --amplify-components-field-small-font-size: var(--amplify-font-sizes-small); --amplify-components-field-large-gap: var(--amplify-space-small); --amplify-components-field-large-font-size: var(--amplify-font-sizes-large); --amplify-components-field-label-color: var(--amplify-colors-font-secondary); --amplify-components-fieldcontrol-border-style: solid; --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary); --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small); --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small); --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary); --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium); --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-outline-style: solid; --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium); --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small); --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small); --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-quiet-border-style: none; --amplify-components-fieldcontrol-quiet-border-inline-start: none; --amplify-components-fieldcontrol-quiet-border-inline-end: none; --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-fieldcontrol-disabled-cursor: not-allowed; --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100); --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100); --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100); --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90); --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary); --amplify-components-fieldmessages-description-font-style: italic; --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldset-background-color: transparent; --amplify-components-fieldset-border-radius: var(--amplify-radii-xs); --amplify-components-fieldset-flex-direction: column; --amplify-components-fieldset-gap: var(--amplify-components-field-gap); --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary); --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold); --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium); --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-fieldset-outlined-border-style: solid; --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small); --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large); --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap); --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap); --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-border-style: dashed; --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small); --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-fileuploader-dropzone-text-align: center; --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style); --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-file-border-style: solid; --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs); --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small); --amplify-components-fileuploader-file-gap: var(--amplify-space-small); --amplify-components-fileuploader-file-align-items: baseline; --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-filelist-flex-direction: column; --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small); --amplify-components-fileuploader-loader-stroke-linecap: round; --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-previewer-border-style: solid; --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-max-height: 40rem; --amplify-components-fileuploader-previewer-max-width: auto; --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small); --amplify-components-fileuploader-previewer-footer-justify-content: flex-end; --amplify-components-flex-gap: var(--amplify-space-medium); --amplify-components-flex-justify-content: normal; --amplify-components-flex-align-items: stretch; --amplify-components-flex-align-content: normal; --amplify-components-flex-flex-wrap: nowrap; --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl); --amplify-components-heading-1-font-weight: 400; --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl); --amplify-components-heading-2-font-weight: 700; --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl); --amplify-components-heading-3-font-weight: 700; --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl); --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold); --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large); --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold); --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium); --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-heading-color: var(--amplify-colors-font-primary); --amplify-components-heading-line-height: var(--amplify-line-heights-small); --amplify-components-icon-line-height: 1; --amplify-components-icon-height: 1em; --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold); --amplify-components-image-max-width: 100%; --amplify-components-image-height: auto; --amplify-components-image-object-fit: initial; --amplify-components-image-object-position: initial; --amplify-components-inappmessaging-banner-height: 150px ; --amplify-components-inappmessaging-banner-width: 400px ; --amplify-components-inappmessaging-button-background-color: #e8e8e8; --amplify-components-inappmessaging-button-border-radius: 5px; --amplify-components-inappmessaging-button-color: black; --amplify-components-inappmessaging-dialog-height: 50vh; --amplify-components-inappmessaging-dialog-min-height: 400px; --amplify-components-inappmessaging-dialog-min-width: 400px; --amplify-components-inappmessaging-dialog-width: 30vw; --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-link-active-color: var(--amplify-colors-font-active); --amplify-components-link-color: var(--amplify-colors-font-interactive); --amplify-components-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-link-visited-color: var(--amplify-colors-font-interactive); --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary); --amplify-components-loader-width: var(--amplify-font-sizes-medium); --amplify-components-loader-height: var(--amplify-font-sizes-medium); --amplify-components-loader-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-stroke-linecap: round; --amplify-components-loader-animation-duration: 1s; --amplify-components-loader-small-width: var(--amplify-font-sizes-small); --amplify-components-loader-small-height: var(--amplify-font-sizes-small); --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-large-width: var(--amplify-font-sizes-large); --amplify-components-loader-large-height: var(--amplify-font-sizes-large); --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small); --amplify-components-loader-linear-width: 100%; --amplify-components-loader-linear-min-width: 5rem; --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-linear-stroke-linecap: round; --amplify-components-loader-linear-animation-duration: 1s; --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs); --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-text-fill: var(--amplify-colors-font-primary); --amplify-components-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-menu-border-radius: var(--amplify-radii-medium); --amplify-components-menu-border-width: var(--amplify-border-widths-small); --amplify-components-menu-border-style: solid; --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); --amplify-components-menu-small-height: var(--amplify-font-sizes-medium); --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-menu-item-min-height: 2.5rem; --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium); --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium); --amplify-components-message-align-items: center; --amplify-components-message-background-color: var(--amplify-colors-background-tertiary); --amplify-components-message-border-color: transparent; --amplify-components-message-border-style: solid; --amplify-components-message-border-width: var(--amplify-border-widths-small); --amplify-components-message-border-radius: var(--amplify-radii-small); --amplify-components-message-color: var(--amplify-colors-font-primary); --amplify-components-message-justify-content: flex-start; --amplify-components-message-padding-block: var(--amplify-space-large); --amplify-components-message-padding-inline: var(--amplify-space-large); --amplify-components-message-line-height: var(--amplify-line-heights-small); --amplify-components-message-icon-size: var(--amplify-font-sizes-xl); --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-message-dismiss-gap: var(--amplify-space-xxs); --amplify-components-message-plain-color: var(--amplify-colors-font-primary); --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-border-color: transparent; --amplify-components-message-plain-info-color: var(--amplify-colors-font-info); --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-info-border-color: transparent; --amplify-components-message-plain-error-color: var(--amplify-colors-font-error); --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-error-border-color: transparent; --amplify-components-message-plain-success-color: var(--amplify-colors-font-success); --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-success-border-color: transparent; --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-warning-border-color: transparent; --amplify-components-message-outlined-color: var(--amplify-colors-font-primary); --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info); --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info); --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error); --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error); --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success); --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success); --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-message-filled-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary); --amplify-components-message-filled-border-color: transparent; --amplify-components-message-filled-info-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info); --amplify-components-message-filled-info-border-color: transparent; --amplify-components-message-filled-error-color: var(--amplify-colors-font-error); --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error); --amplify-components-message-filled-error-border-color: transparent; --amplify-components-message-filled-success-color: var(--amplify-colors-font-success); --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success); --amplify-components-message-filled-success-border-color: transparent; --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-message-filled-warning-border-color: transparent; --amplify-components-pagination-current-align-items: center; --amplify-components-pagination-current-justify-content: center; --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse); --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small); --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40); --amplify-components-pagination-button-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs); --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs); --amplify-components-pagination-button-transition-property: background-color; --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium); --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-pagination-ellipsis-align-items: baseline; --amplify-components-pagination-ellipsis-justify-content: center; --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs); --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs); --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs); --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs); --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium); --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-passwordfield-button-color: var(--amplify-components-button-color); --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color); --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color); --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color); --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color); --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color); --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color); --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color); --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color); --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color); --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow); --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color); --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color); --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color); --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-placeholder-border-radius: var(--amplify-radii-small); --amplify-components-placeholder-transition-duration: var(--amplify-time-long); --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary); --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary); --amplify-components-placeholder-small-height: var(--amplify-space-small); --amplify-components-placeholder-default-height: var(--amplify-space-medium); --amplify-components-placeholder-large-height: var(--amplify-space-large); --amplify-components-radio-align-items: center; --amplify-components-radio-justify-content: flex-start; --amplify-components-radio-gap: inherit; --amplify-components-radio-disabled-cursor: not-allowed; --amplify-components-radio-button-align-items: center; --amplify-components-radio-button-justify-content: center; --amplify-components-radio-button-width: var(--amplify-font-sizes-medium); --amplify-components-radio-button-height: var(--amplify-font-sizes-medium); --amplify-components-radio-button-box-sizing: border-box; --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium); --amplify-components-radio-button-border-style: solid; --amplify-components-radio-button-border-radius: 50%; --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary); --amplify-components-radio-button-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-transition-property: all; --amplify-components-radio-button-transition-duration: var(--amplify-time-medium); --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent); --amplify-components-radio-button-outline-style: solid; --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium); --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-radio-button-padding: var(--amplify-border-widths-medium); --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small); --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small); --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large); --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large); --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80); --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled); --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-label-color: var(--amplify-components-text-color); --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width); --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color); --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color); --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color); --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color); --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color); --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal); --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl); --amplify-components-rating-default-size: var(--amplify-font-sizes-xl); --amplify-components-rating-small-size: var(--amplify-font-sizes-small); --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80); --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary); --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-searchfield-button-color: var(--amplify-components-button-color); --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary); --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-select-color: var(--amplify-components-fieldcontrol-color); --amplify-components-select-background-color: var(--amplify-colors-background-primary); --amplify-components-select-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-select-wrapper-flex: 1; --amplify-components-select-wrapper-display: block; --amplify-components-select-wrapper-position: relative; --amplify-components-select-wrapper-cursor: pointer; --amplify-components-select-icon-wrapper-align-items: center; --amplify-components-select-icon-wrapper-position: absolute; --amplify-components-select-icon-wrapper-top: 50%; --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium); --amplify-components-select-icon-wrapper-transform: translateY(-50%); --amplify-components-select-icon-wrapper-pointer-events: none; --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs); --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium); --amplify-components-select-option-background-color: transparent; --amplify-components-select-option-color: var(--amplify-colors-font-primary); --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-option-disabled-background-color: transparent; --amplify-components-select-white-space: nowrap; --amplify-components-select-min-width: 6.5rem; --amplify-components-select-small-min-width: 5.5rem; --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl); --amplify-components-select-large-min-width: 7.5rem; --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-expanded-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-padding-inline: var(--amplify-space-small); --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small); --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-selectfield-flex-direction: column; --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color); --amplify-components-sliderfield-padding-block: var(--amplify-space-xs); --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-sliderfield-track-border-radius: 9999px; --amplify-components-sliderfield-track-height: 0.375rem; --amplify-components-sliderfield-track-min-width: 10rem; --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80); --amplify-components-sliderfield-range-border-radius: 9999px; --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-width: 1.25rem; --amplify-components-sliderfield-thumb-height: 1.25rem; --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small); --amplify-components-sliderfield-thumb-border-radius: 50%; --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium); --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary); --amplify-components-sliderfield-thumb-border-style: solid; --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-disabled-border-color: transparent; --amplify-components-sliderfield-thumb-disabled-box-shadow: none; --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-sliderfield-small-track-height: 0.25rem; --amplify-components-sliderfield-small-thumb-width: 1rem; --amplify-components-sliderfield-small-thumb-height: 1rem; --amplify-components-sliderfield-large-track-height: 0.625rem; --amplify-components-sliderfield-large-thumb-width: 1.5rem; --amplify-components-sliderfield-large-thumb-height: 1.5rem; --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-stepperfield-flex-direction: column; --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-stepperfield-input-text-align: center; --amplify-components-stepperfield-button-color: var(--amplify-components-button-color); --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent); --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color); --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-border-style: dashed; --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small); --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-storagemanager-dropzone-text-align: center; --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style); --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-file-border-style: solid; --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs); --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small); --amplify-components-storagemanager-file-gap: var(--amplify-space-small); --amplify-components-storagemanager-file-align-items: baseline; --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-filelist-flex-direction: column; --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small); --amplify-components-storagemanager-loader-stroke-linecap: round; --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-previewer-border-style: solid; --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-max-height: 40rem; --amplify-components-storagemanager-previewer-max-width: auto; --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small); --amplify-components-storagemanager-previewer-footer-justify-content: flex-end; --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60); --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium); --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large); --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small); --amplify-components-switchfield-label-padding: var(--amplify-space-xs); --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-switchfield-thumb-border-color: transparent; --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small); --amplify-components-switchfield-thumb-border-style: solid; --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium); --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium); --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80); --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium); --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short); --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl); --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error); --amplify-components-table-border-collapse: collapse; --amplify-components-table-display: table; --amplify-components-table-width: 100%; --amplify-components-table-head-display: table-header-group; --amplify-components-table-head-vertical-align: middle; --amplify-components-table-body-display: table-row-group; --amplify-components-table-body-vertical-align: middle; --amplify-components-table-foot-display: table-footer-group; --amplify-components-table-foot-vertical-align: middle; --amplify-components-table-row-display: table-row; --amplify-components-table-row-vertical-align: middle; --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary); --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary); --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-header-border-style: solid; --amplify-components-table-header-border-width: var(--amplify-border-widths-small); --amplify-components-table-header-color: var(--amplify-colors-font-primary); --amplify-components-table-header-display: table-cell; --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold); --amplify-components-table-header-padding: var(--amplify-space-small); --amplify-components-table-header-vertical-align: middle; --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-header-large-padding: var(--amplify-space-large); --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-header-small-padding: var(--amplify-space-xs); --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-data-border-style: solid; --amplify-components-table-data-border-width: var(--amplify-border-widths-small); --amplify-components-table-data-color: var(--amplify-colors-font-primary); --amplify-components-table-data-display: table-cell; --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal); --amplify-components-table-data-padding: var(--amplify-space-small); --amplify-components-table-data-vertical-align: middle; --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-data-large-padding: var(--amplify-space-large); --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-data-small-padding: var(--amplify-space-xs); --amplify-components-table-caption-caption-side: bottom; --amplify-components-table-caption-color: var(--amplify-colors-font-primary); --amplify-components-table-caption-display: table-caption; --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-caption-text-align: center; --amplify-components-table-caption-word-break: break-all; --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small); --amplify-components-tabs-background-color: transparent; --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-border-style: solid; --amplify-components-tabs-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-gap: 0; --amplify-components-tabs-item-background-color: transparent; --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-item-border-style: solid; --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary); --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium); --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold); --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small); --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium); --amplify-components-tabs-item-text-align: center; --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium); --amplify-components-tabs-item-hover-background-color: transparent; --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-hover-box-shadow: none; --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover); --amplify-components-tabs-item-focus-background-color: transparent; --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus); --amplify-components-tabs-item-active-background-color: transparent; --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-active-box-shadow: none; --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-disabled-background-color: transparent; --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-tabs-item-disabled-box-shadow: none; --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-tabs-panel-background-color: transparent; --amplify-components-tabs-panel-padding-inline: 0; --amplify-components-tabs-panel-padding-block: var(--amplify-space-small); --amplify-components-text-color: var(--amplify-colors-font-primary); --amplify-components-text-primary-color: var(--amplify-colors-font-primary); --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary); --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary); --amplify-components-text-error-color: var(--amplify-colors-font-error); --amplify-components-text-warning-color: var(--amplify-colors-font-warning); --amplify-components-text-success-color: var(--amplify-colors-font-success); --amplify-components-text-info-color: var(--amplify-colors-font-info); --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary); --amplify-components-togglebutton-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed); --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20); --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30); --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small); --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebuttongroup-align-items: center; --amplify-components-togglebuttongroup-align-content: center; --amplify-components-togglebuttongroup-justify-content: flex-start; --amplify-border-widths-small: 1px; --amplify-border-widths-medium: 2px; --amplify-border-widths-large: 3px; --amplify-colors-red-10: hsl(0, 75%, 95%); --amplify-colors-red-20: hsl(0, 75%, 85%); --amplify-colors-red-40: hsl(0, 75%, 75%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 95%, 30%); --amplify-colors-red-90: hsl(0, 100%, 20%); --amplify-colors-red-100: hsl(0, 100%, 15%); --amplify-colors-orange-10: hsl(30, 75%, 95%); --amplify-colors-orange-20: hsl(30, 75%, 85%); --amplify-colors-orange-40: hsl(30, 75%, 75%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 95%, 30%); --amplify-colors-orange-90: hsl(30, 100%, 20%); --amplify-colors-orange-100: hsl(30, 100%, 15%); --amplify-colors-yellow-10: hsl(60, 75%, 95%); --amplify-colors-yellow-20: hsl(60, 75%, 85%); --amplify-colors-yellow-40: hsl(60, 75%, 75%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 95%, 30%); --amplify-colors-yellow-90: hsl(60, 100%, 20%); --amplify-colors-yellow-100: hsl(60, 100%, 15%); --amplify-colors-green-10: hsl(130, 60%, 95%); --amplify-colors-green-20: hsl(130, 60%, 90%); --amplify-colors-green-40: hsl(130, 44%, 63%); --amplify-colors-green-60: hsl(130, 43%, 46%); --amplify-colors-green-80: hsl(130, 33%, 37%); --amplify-colors-green-90: hsl(130, 27%, 29%); --amplify-colors-green-100: hsl(130, 22%, 23%); --amplify-colors-teal-10: hsl(175, 44%, 96%); --amplify-colors-teal-20: hsl(175, 57%, 80%); --amplify-colors-teal-40: hsl(175, 57%, 70%); --amplify-colors-teal-60: hsl(175, 57%, 40%); --amplify-colors-teal-80: hsl(181, 69%, 28%); --amplify-colors-teal-90: hsl(181, 69%, 21%); --amplify-colors-teal-100: hsl(181, 69%, 15%); --amplify-colors-blue-10: hsl(207, 80%, 90%); --amplify-colors-blue-20: hsl(220, 50%, 85%); --amplify-colors-blue-40: hsl(220, 50%, 70%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 50%, 30%); --amplify-colors-blue-90: hsl(220, 50%, 20%); --amplify-colors-blue-100: hsl(220, 50%, 15%); --amplify-colors-purple-10: hsl(252, 100%, 98%); --amplify-colors-purple-20: hsl(258, 41%, 85%); --amplify-colors-purple-40: hsl(258, 41%, 80%); --amplify-colors-purple-60: hsl(258, 41%, 50%); --amplify-colors-purple-80: hsl(258, 41%, 30%); --amplify-colors-purple-90: hsl(258, 41%, 24%); --amplify-colors-purple-100: hsl(258, 41%, 15%); --amplify-colors-pink-10: hsl(340, 95%, 95%); --amplify-colors-pink-20: hsl(340, 90%, 85%); --amplify-colors-pink-40: hsl(340, 70%, 70%); --amplify-colors-pink-60: hsl(340, 50%, 50%); --amplify-colors-pink-80: hsl(340, 95%, 30%); --amplify-colors-pink-90: hsl(340, 100%, 20%); --amplify-colors-pink-100: hsl(340, 100%, 15%); --amplify-colors-neutral-10: hsl(210, 5%, 98%); --amplify-colors-neutral-20: hsl(210, 5%, 94%); --amplify-colors-neutral-40: hsl(210, 5%, 87%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 10%, 40%); --amplify-colors-neutral-90: hsl(210, 25%, 25%); --amplify-colors-neutral-100: hsl(210, 50%, 10%); --amplify-colors-primary-10: var(--amplify-colors-teal-10); --amplify-colors-primary-20: var(--amplify-colors-teal-20); --amplify-colors-primary-40: var(--amplify-colors-teal-40); --amplify-colors-primary-60: var(--amplify-colors-teal-60); --amplify-colors-primary-80: var(--amplify-colors-teal-80); --amplify-colors-primary-90: var(--amplify-colors-teal-90); --amplify-colors-primary-100: var(--amplify-colors-teal-100); --amplify-colors-secondary-10: var(--amplify-colors-purple-10); --amplify-colors-secondary-20: var(--amplify-colors-purple-20); --amplify-colors-secondary-40: var(--amplify-colors-purple-40); --amplify-colors-secondary-60: var(--amplify-colors-purple-60); --amplify-colors-secondary-80: var(--amplify-colors-purple-80); --amplify-colors-secondary-90: var(--amplify-colors-purple-90); --amplify-colors-secondary-100: var(--amplify-colors-purple-100); --amplify-colors-font-primary: var(--amplify-colors-neutral-100); --amplify-colors-font-secondary: var(--amplify-colors-neutral-90); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80); --amplify-colors-font-disabled: var(--amplify-colors-neutral-60); --amplify-colors-font-inverse: var(--amplify-colors-white); --amplify-colors-font-interactive: var(--amplify-colors-primary-80); --amplify-colors-font-hover: var(--amplify-colors-primary-90); --amplify-colors-font-focus: var(--amplify-colors-primary-100); --amplify-colors-font-active: var(--amplify-colors-primary-100); --amplify-colors-font-info: var(--amplify-colors-blue-90); --amplify-colors-font-warning: var(--amplify-colors-orange-90); --amplify-colors-font-error: var(--amplify-colors-red-90); --amplify-colors-font-success: var(--amplify-colors-green-90); --amplify-colors-background-primary: var(--amplify-colors-white); --amplify-colors-background-secondary: var(--amplify-colors-neutral-10); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60); --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary); --amplify-colors-background-info: var(--amplify-colors-blue-10); --amplify-colors-background-warning: var(--amplify-colors-orange-10); --amplify-colors-background-error: var(--amplify-colors-red-10); --amplify-colors-background-success: var(--amplify-colors-green-10); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary); --amplify-colors-border-pressed: var(--amplify-colors-primary-100); --amplify-colors-border-focus: var(--amplify-colors-primary-100); --amplify-colors-border-error: var(--amplify-colors-red-80); --amplify-colors-border-info: var(--amplify-colors-blue-80); --amplify-colors-border-success: var(--amplify-colors-green-80); --amplify-colors-border-warning: var(--amplify-colors-orange-80); --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25); --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15); --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05); --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9); --amplify-colors-black: hsl(0, 0%, 0%); --amplify-colors-white: hsl(0, 0%, 100%); --amplify-colors-transparent: transparent; --amplify-fonts-default-variable: Amazon Ember, sans-serif; --amplify-fonts-default-static: Amazon Ember, sans-serif; --amplify-font-sizes-xxxs: 0.375rem; --amplify-font-sizes-xxs: 0.5rem; --amplify-font-sizes-xs: 0.75rem; --amplify-font-sizes-small: 0.875rem; --amplify-font-sizes-medium: 1rem; --amplify-font-sizes-large: 1.2rem; --amplify-font-sizes-xl: 1.4rem; --amplify-font-sizes-xxl: 1.5rem; --amplify-font-sizes-xxxl: 1.8rem; --amplify-font-sizes-xxxxl: 2.4rem; --amplify-font-weights-hairline: 100; --amplify-font-weights-thin: 200; --amplify-font-weights-light: 300; --amplify-font-weights-normal: 400; --amplify-font-weights-medium: 500; --amplify-font-weights-semibold: 600; --amplify-font-weights-bold: 700; --amplify-font-weights-extrabold: 800; --amplify-font-weights-black: 900; --amplify-line-heights-small: 1.25; --amplify-line-heights-medium: 1.5; --amplify-line-heights-large: 2; --amplify-opacities-0: 0; --amplify-opacities-10: 0.1; --amplify-opacities-20: 0.2; --amplify-opacities-30: 0.3; --amplify-opacities-40: 0.4; --amplify-opacities-50: 0.5; --amplify-opacities-60: 0.6; --amplify-opacities-70: 0.7; --amplify-opacities-80: 0.8; --amplify-opacities-90: 0.9; --amplify-opacities-100: 1; --amplify-outline-offsets-small: 1px; --amplify-outline-offsets-medium: 2px; --amplify-outline-offsets-large: 3px; --amplify-outline-widths-small: 1px; --amplify-outline-widths-medium: 2px; --amplify-outline-widths-large: 3px; --amplify-radii-xs: 0.125rem; --amplify-radii-small: 0.25rem; --amplify-radii-medium: 0.5rem; --amplify-radii-large: 1rem; --amplify-radii-xl: 2rem; --amplify-radii-xxl: 4rem; --amplify-radii-xxxl: 8rem; --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary); --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary); --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary); --amplify-space-zero: 0; --amplify-space-xxxs: 0.25rem; --amplify-space-xxs: 0.375rem; --amplify-space-xs: 0.5rem; --amplify-space-small: 0.75rem; --amplify-space-medium: 1rem; --amplify-space-large: 1.5rem; --amplify-space-xl: 2.0rem; --amplify-space-xxl: 3.0rem; --amplify-space-xxxl: 4.5rem; --amplify-space-relative-xxxs: 0.25em; --amplify-space-relative-xxs: 0.375em; --amplify-space-relative-xs: 0.5em; --amplify-space-relative-small: 0.75em; --amplify-space-relative-medium: 1em; --amplify-space-relative-large: 1.5em; --amplify-space-relative-xl: 2.0em; --amplify-space-relative-xxl: 3.0em; --amplify-space-relative-xxxl: 4.5em; --amplify-space-relative-full: 100%; --amplify-time-short: 100ms; --amplify-time-medium: 250ms; --amplify-time-long: 500ms; --amplify-transforms-slide-x-small: translateX(0.5em); --amplify-transforms-slide-x-medium: translateX(1em); --amplify-transforms-slide-x-large: translateX(2em); } @media (prefers-color-scheme: dark) { [data-amplify-theme="gen1-theme"][data-amplify-color-mode="system"] { --amplify-colors-blue-10: hsl(220, 50%, 15%); --amplify-colors-blue-20: hsl(220, 50%, 20%); --amplify-colors-blue-40: hsl(220, 50%, 30%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 50%, 70%); --amplify-colors-blue-90: hsl(220, 50%, 85%); --amplify-colors-blue-100: hsl(207, 80%, 90%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-purple-10: hsl(258, 41%, 15%); --amplify-colors-purple-20: hsl(258, 41%, 24%); --amplify-colors-purple-40: hsl(258, 41%, 30%); --amplify-colors-purple-60: hsl(258, 41%, 50%); --amplify-colors-purple-80: hsl(258, 41%, 80%); --amplify-colors-purple-90: hsl(258, 41%, 85%); --amplify-colors-purple-100: hsl(252, 100%, 98%); --amplify-colors-teal-10: hsl(181, 69%, 15%); --amplify-colors-teal-20: hsl(181, 69%, 21%); --amplify-colors-teal-40: hsl(181, 69%, 28%); --amplify-colors-teal-60: hsl(175, 57%, 40%); --amplify-colors-teal-80: hsl(175, 57%, 70%); --amplify-colors-teal-90: hsl(175, 57%, 80%); --amplify-colors-teal-100: hsl(175, 44%, 96%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 60%, 20%); --amplify-colors-orange-40: hsl(30, 50%, 30%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-font-interactive: var(--amplify-colors-primary-90); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); --amplify-components-button-color: var(--amplify-colors-white); --amplify-components-message-filled-info-background-color: var(--amplify-colors-blue-20); color-scheme: dark; } } [data-amplify-theme="gen1-theme"][data-amplify-color-mode="dark"] { --amplify-colors-blue-10: hsl(220, 50%, 15%); --amplify-colors-blue-20: hsl(220, 50%, 20%); --amplify-colors-blue-40: hsl(220, 50%, 30%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 50%, 70%); --amplify-colors-blue-90: hsl(220, 50%, 85%); --amplify-colors-blue-100: hsl(207, 80%, 90%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-purple-10: hsl(258, 41%, 15%); --amplify-colors-purple-20: hsl(258, 41%, 24%); --amplify-colors-purple-40: hsl(258, 41%, 30%); --amplify-colors-purple-60: hsl(258, 41%, 50%); --amplify-colors-purple-80: hsl(258, 41%, 80%); --amplify-colors-purple-90: hsl(258, 41%, 85%); --amplify-colors-purple-100: hsl(252, 100%, 98%); --amplify-colors-teal-10: hsl(181, 69%, 15%); --amplify-colors-teal-20: hsl(181, 69%, 21%); --amplify-colors-teal-40: hsl(181, 69%, 28%); --amplify-colors-teal-60: hsl(175, 57%, 40%); --amplify-colors-teal-80: hsl(175, 57%, 70%); --amplify-colors-teal-90: hsl(175, 57%, 80%); --amplify-colors-teal-100: hsl(175, 44%, 96%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 60%, 20%); --amplify-colors-orange-40: hsl(30, 50%, 30%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-font-interactive: var(--amplify-colors-primary-90); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); --amplify-components-button-color: var(--amplify-colors-white); --amplify-components-message-filled-info-background-color: var(--amplify-colors-blue-20); color-scheme: dark; } </style><script src="https://a0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"></script><script src="https://d2c.aws.amazon.com/client/loader/v1/d2c-load.js" defer=""></script><link href="https://prod.assets.shortbread.aws.dev/shortbread.css" rel="stylesheet"/></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"platform":"react","meta":{"title":"Manage MFA settings","description":"Learn how to enable multi-factor authentication with Amplify.","platforms":["javascript","react-native","flutter","swift","android","angular","nextjs","react","vue"]}},"__N_SSG":true},"page":"/gen1/[platform]/build-a-backend/auth/manage-mfa","query":{"platform":"react"},"buildId":"amplify-docs","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>