@workos/mcp-docs-server 0.1.0

package/.docs/organized/docs/integrations/xero-oauth.mdx

@@ -0,0 +1,83 @@
+---
+title: Xero OAuth
+description: Learn how to set up OAuth with Xero.
+icon: xero
+breadcrumb:
+  title: Integrations
+  url: /integrations
+originalPath: .tmp-workos-clone/packages/docs/content/integrations/xero-oauth.mdx
+---
+
+## Introduction
+
+To configure your global Xero OAuth setup, you’ll need three pieces of information: a [Redirect URI](/glossary/redirect-uri), a Xero Client ID, and a Xero Client Secret.
+
+---
+
+## What WorkOS provides
+
+WorkOS provides the Redirect URI, an allowlisted callback URL. It indicates the location to return an authorized user to after both an authorization code is granted, and the authentication process is complete.
+
+Open your [WorkOS Dashboard](https://dashboard.workos.com) and browse to the _Authentication_ section on the left hand navigation bar. Scroll down to the _Xero OAuth_ section and click _Configure_.
+
+In the modal, you’ll see the Redirect URI as well as the fields you’ll populate later with information from Xero. This URI will be used as part of the registration process later in the Xero developer settings page.
+
+---
+
+## What you’ll need
+
+In order to integrate you’ll need the Xero Client ID and the Xero Client Secret.
+
+These are a pair of credentials provided by Xero that you’ll use to authenticate your application via the OAuth protocol. To obtain them:
+
+---
+
+### (1) Create the Xero OAuth Application
+
+Log in to your [Xero developer account](https://developer.xero.com) and create a new application.
+
+![A screenshot showing the Xero developer homepage.](https://images.workoscdn.com/images/58e9b3af-7442-45e7-8be2-cb1fa9ab39a2.png?auto=format&fit=clip&q=80)
+
+In the top right corner, select _New app_.
+
+Fill out the form starting with the application name.
+
+![A screenshot showing the Xero form to create a new OAuth application.](https://images.workoscdn.com/images/f78a99b4-f004-4437-9612-6d97ef49bf3d.png?auto=format&fit=clip&q=50)
+
+For the _Integration type_, select _Web app_.
+
+For _Company or application URI_, use your application's homepage URI.
+
+For _Redirect URI_, use the Redirect URI from the Xero OAuth configuration modal in the WorkOS Dashboard.
+
+![A screenshot showing OAuth client credentials in the Xero application settings](https://images.workoscdn.com/images/9a0c3175-3af3-4613-a9f9-c9e6851507fe.png?auto=format&fit=clip&q=50)
+
+Agree to Xero's Developer Platform Terms & Conditions and click on _Create app_.
+
+### (2) Generate client credentials
+
+On the next page, you will see the Xero _App details_ for your new OAuth application.
+
+From the left sidebar, navigate to the _Configuration_ page.
+
+![A screenshot showing OAuth client credentials in the Xero application settings before creating a client secret](https://images.workoscdn.com/images/5ec780c3-c325-4455-992e-20727c39f8f9.png?auto=format&fit=clip&q=50)
+
+Select _Generate a secret_ to create a client secret.
+
+![A screenshot showing OAuth client credentials in the Xero application settings after creating a client secret](https://images.workoscdn.com/images/58158b26-0854-496f-9ccc-660955735463.png?auto=format&fit=clip&q=50)
+
+Copy the _Client ID_ and _Client secret 1_.
+
+In the next step, you will provide both the Xero Client ID and Client Secret to the WorkOS dashboard.
+
+### (3) Provide client credentials to WorkOS
+
+Go back to the _Authentication_ section in the WorkOS Dashboard, and click on _Edit_ under _Xero OAuth_.
+
+![A screenshot showing OAuth client credentials in the WorkOS Xero setup modal filled with client id and client secret.](https://images.workoscdn.com/images/64add3ff-91ac-4d1c-a5cc-3383762fb877.png?auto=format&fit=clip&q=50)
+
+Toggle _Enabled_ on and provide the client credentials from Xero that you generated in the previous step.
+
+Finally, click _Save_.
+
+You are now ready to start authenticating with Xero OAuth. Your users will see the option to sign-in with Xero when visiting your [AuthKit](/user-management) domain.

package/.docs/organized/docs/magic-link/_navigation.mdx

@@ -0,0 +1,16 @@
+---
+title: Magic Link
+links:
+  - title: Getting Started
+    links:
+      - title: Quick Start
+        url: /magic-link
+  - title: Example Apps
+    url: /magic-link/example-apps
+  - title: Going Live
+    links:
+      - title: Launch Checklist
+        url: /magic-link/launch-checklist
+originalPath: .tmp-workos-clone/packages/docs/content/magic-link/_navigation.mdx
+---
+

package/.docs/organized/docs/magic-link/example-apps.mdx

@@ -0,0 +1,46 @@
+---
+title: Example Apps
+description: "View sample Magic\_Link\_apps for\_each\_SDK."
+originalPath: .tmp-workos-clone/packages/docs/content/magic-link/example-apps.mdx
+---
+
+You can view minimal example apps that demonstrate how to use the WorkOS SDKs to authenticate users via Magic Link:
+
+<ExampleApps.Root>
+  <ExampleApps.Card
+    href="https://github.com/workos/node-example-applications/tree/main/node-magic-link-example"
+    title="Node.js Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/typescript-example-applications/tree/main/typescript-magic-link-example"
+    title="TypeScript Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/ruby-example-applications/tree/main/ruby-magic-link-example"
+    title="Ruby Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/python-flask-example-applications/tree/main/python-flask-magic-link-example"
+    title="Python Flask Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/python-django-example-applications/tree/main/python-django-magic-link-example"
+    title="Python Django Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/go-example-applications/tree/main/go-magic-link-example"
+    title="Go Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/java-example-applications/tree/main/java-magic-link-example"
+    title="Java Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/php-example-applications/tree/main/php-magic-link-example"
+    title="PHP Magic Link app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/dotnet-example-applications/tree/main/dotnet-magic-link-example"
+    title=".NET Magic Link app"
+  />
+</ExampleApps.Root>

package/.docs/organized/docs/magic-link/index.mdx

@@ -0,0 +1,199 @@
+---
+title: Magic Link
+description: >-
+  The fastest way to securely enable authentication – passwordless sign-in via
+  email in a couple lines of code.
+showNextPage: true
+originalPath: .tmp-workos-clone/packages/docs/content/magic-link/index.mdx
+---
+
+## Introduction
+
+Managing password authentication entails significant overhead for engineering teams and opens up many risks for breaches. Magic Link from WorkOS gives you the ability to build a secure passwordless authentication flow utilizing email. Send users a one-time-use link and let them sign in with a single click.
+
+> Magic Link sets you up to handle Single Sign-On via the [WorkOS SSO API](/sso). The redirect URI / profile retrieval process is identical between Magic Link and SSO.
+
+![Diagram showing Magic Link flow which emphasizes that WorkOS does not manage the session.](https://images.workoscdn.com/docs/guides/magic-link/v1/magic-link-diagram.png?auto=format&fit=clip&q=50)[border=false]
+
+Magic Link is not a session management solution – instead it is an authentication solution. You as the developer have the ability to manage user sessions as you see fit. This means you determine how long a session is valid for, as well as how to store and invalidate a session.
+
+Magic Links are single use, meaning that they will immediately expire after they are first clicked. If end users have security checks included with their email provider that test all embedded URLs, it can cause the Magic Links to expire before they reach the user’s inbox. To work around this, we recommend that end users add these Magic Link emails to an allowlist in order to bypass these security checks.
+
+## What you’ll build
+
+In this guide, we’ll take you from learning about passwordless authentication all the way through to building production-ready passwordless authentication flows with the WorkOS Magic Link API.
+
+This guide will show you how to:
+
+1. Add Magic Link to your app
+2. Configure a redirect URI
+3. Create a new Magic Link Connection
+
+## Before getting started
+
+To get the most out of this guide, you’ll need:
+
+- A [WorkOS account](https://dashboard.workos.com/)
+
+## API object definitions
+
+[Passwordless Session](/reference/magic-link/passwordless-session)
+: Represents a passwordless authentication session.
+
+[Profile](/reference/sso/profile)
+: Represents an authenticated user. The Profile object contains information relevant to a user in the form of normalized and raw attributes.
+
+## (1) Add Magic Link to your app
+
+### Install the WorkOS SDK
+
+WorkOS offers native SDKs in several popular programming languages. Choose a language below to see instructions in your application’s language.
+
+<LanguageSelector>
+  Install the SDK using the command below.
+
+  <CodeBlock title="Install the WorkOS SDK" file="install-sdk">
+    <CodeBlockTab language="js" file="install-sdk-npm" title="npm" />
+    <CodeBlockTab language="js" file="install-sdk-yarn" title="Yarn" />
+    <CodeBlockTab language="java" file="install-sdk-maven" title="Maven" />
+    <CodeBlockTab language="java" file="install-sdk-gradle" title="Gradle" />
+    <CodeBlockTab language="ruby" file="install-sdk-terminal" title="Terminal" />
+    <CodeBlockTab language="ruby" file="install-sdk-bundler" title="Bundler" />
+  </CodeBlock>
+</LanguageSelector>
+
+### Set secrets
+
+To make calls to WorkOS, provide the API key and, in some cases, the client ID. Store these values as managed secrets, such as `WORKOS_API_KEY` and `WORKOS_CLIENT_ID`, and pass them to the SDKs either as environment variables or directly in your app's configuration based on your preferences.
+
+```plain title="Environment variables"
+WORKOS_API_KEY='sk_example_123456789'
+WORKOS_CLIENT_ID='client_123456789'
+```
+
+### Add a callback endpoint
+
+Let’s first add the redirect endpoint which will handle the callback from WorkOS after a user has authenticated via a magic link. This endpoint should exchange the authorization code (valid for 10 minutes) returned by WorkOS with the authenticated user’s Profile.
+
+<CodeBlock file="callback-endpoint" title="Callback Endpoint">
+  <CodeBlockTab language="js" file="callback-endpoint-next" title="Next.js" />
+  <CodeBlockTab
+    language="js"
+    file="callback-endpoint-express"
+    title="Express"
+  />
+  <CodeBlockTab language="ruby" file="callback-endpoint-rails" title="Rails" />
+  <CodeBlockTab
+    language="ruby"
+    file="callback-endpoint-sinatra"
+    title="Sinatra"
+  />
+  <CodeBlockTab
+    language="python"
+    file="callback-endpoint-django"
+    title="Django"
+  />
+  <CodeBlockTab
+    language="python"
+    file="callback-endpoint-flask"
+    title="Flask"
+  />
+</CodeBlock>
+
+### Create a Passwordless Session and email the user
+
+Create a Passwordless Session to generate an authentication link for a user. An authentication link is valid for 15 minutes and can be sent via the WorkOS API or using your own email service.
+
+You can use the optional `state` parameter to encode arbitrary information to help restore application state between redirects.
+
+You can use the optional `redirect_uri` parameter to override the default [Redirect URI](/glossary/redirect-uri) set in the dashboard.
+
+> A Magic Link Connection will be automatically created if there isn’t already one for the domain specified when creating a new Passwordless Session.
+
+- | WorkOS email
+
+  Use the WorkOS API to send the authentication link to the user. The email sent will be WorkOS branded.
+
+  <CodeBlock
+    title="Create a Passwordless Session"
+    file="create-passwordless-session-with-workos"
+  >
+    <CodeBlockTab
+      language="js"
+      file="create-passwordless-session-with-workos-next"
+      title="Next.js"
+    />
+    <CodeBlockTab
+      language="js"
+      file="create-passwordless-session-with-workos-express"
+      title="Express"
+    />
+    <CodeBlockTab
+      language="ruby"
+      file="create-passwordless-session-with-workos-rails"
+      title="Rails"
+    />
+    <CodeBlockTab
+      language="ruby"
+      file="create-passwordless-session-with-workos-sinatra"
+      title="Sinatra"
+    />
+    <CodeBlockTab
+      language="python"
+      file="create-passwordless-session-with-workos-django"
+      title="Django"
+    />
+    <CodeBlockTab
+      language="python"
+      file="create-passwordless-session-with-workos-flask"
+      title="Flask"
+    />
+  </CodeBlock>
+
+- | Custom email
+
+  Use your own email service and custom branded email template to send the authentication link to the user.
+
+  <CodeBlock
+    title="Create a Passwordless Session"
+    file="create-passwordless-session-custom"
+  >
+    <CodeBlockTab
+      language="js"
+      file="create-passwordless-session-custom-next"
+      title="Next.js"
+    />
+    <CodeBlockTab
+      language="js"
+      file="create-passwordless-session-custom-express"
+      title="Express"
+    />
+    <CodeBlockTab
+      language="ruby"
+      file="create-passwordless-session-custom-rails"
+      title="Rails"
+    />
+    <CodeBlockTab
+      language="ruby"
+      file="create-passwordless-session-custom-sinatra"
+      title="Sinatra"
+    />
+    <CodeBlockTab
+      language="python"
+      file="create-passwordless-session-custom-django"
+      title="Django"
+    />
+    <CodeBlockTab
+      language="python"
+      file="create-passwordless-session-custom-flask"
+      title="Flask"
+    />
+  </CodeBlock>
+
+---
+
+## (2) Configure a redirect URI
+
+You should set a redirect URI (i.e. the callback endpoint from [Add a callback endpoint](/magic-link/1-add-magic-link-to-your-app/add-a-callback-endpoint)) via the Configuration page in the WorkOS Dashboard – be sure not to include wildcard subdomains or query parameters.
+
+![A screenshot showing where to add a callback in the WorkOS Dashboard.](https://images.workoscdn.com/images/43ffd916-890b-4f1f-8767-0b70113288d9.png?auto=format&fit=clip&q=50)

package/.docs/organized/docs/magic-link/launch-checklist.mdx

@@ -0,0 +1,27 @@
+---
+title: Launch Checklist
+description: Make sure you’re ready to take your app to production.
+originalPath: .tmp-workos-clone/packages/docs/content/magic-link/launch-checklist.mdx
+---
+
+## Create an IP Allowlist
+
+WorkOS makes use of Cloudflare to ensure security and reliability of all operations. If you are looking to create a list of allowed IP addresses for redirect requests, you can use the IP Ranges listed in the [Cloudflare documentation](https://www.cloudflare.com/ips/).
+
+## Go-live checklist
+
+- [ ] Unlock your Production environment by adding your billing information
+
+  > Only enterprise connections in your Production environment will be charged. Any Google OAuth or Magic Link connections in Production will be free.
+
+- [ ] Configure a production redirect URI in your Production project
+- [ ] Secure your Production project’s API key
+- [ ] Ensure that your application can receive redirects from WorkOS
+
+  Depending on your network architecture, you may need to allowlist incoming redirect traffic from `api.workos.com`.
+
+## Frequently asked questions
+
+### Can I customize the email sent via Magic Link?
+
+Yes, you can use your own email service and custom branded email template to send the authentication link to the user. See the custom email code snippet in the [create passwordless session section](/magic-link/1-add-magic-link-to-your-app/create-a-passwordless-session-and-email-the-user) for an example.

package/.docs/organized/docs/mfa/_navigation.mdx

@@ -0,0 +1,18 @@
+---
+title: Multi-Factor Auth
+links:
+  - title: Getting Started
+    links:
+      - title: Quick Start
+        url: /mfa
+      - title: Example Apps
+        url: /mfa/example-apps
+  - title: User Experience
+    links:
+      - title: Enrollment
+        url: /mfa/ux/enrollment
+      - title: Sign-In
+        url: /mfa/ux/sign-in
+originalPath: .tmp-workos-clone/packages/docs/content/mfa/_navigation.mdx
+---
+

package/.docs/organized/docs/mfa/example-apps.mdx

@@ -0,0 +1,46 @@
+---
+title: Example Apps
+description: "View sample Multi-Factor\_Auth apps for\_each\_SDK."
+originalPath: .tmp-workos-clone/packages/docs/content/mfa/example-apps.mdx
+---
+
+You can view minimal example apps that demonstrate how to use the WorkOS SDKs to authenticate users via MFA:
+
+<ExampleApps.Root>
+  <ExampleApps.Card
+    href="https://github.com/workos/node-example-applications/tree/main/node-mfa-example"
+    title="Node.js MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/typescript-example-applications/tree/main/typescript-mfa-example"
+    title="TypeScript MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/ruby-example-applications/tree/main/ruby-mfa-example"
+    title="Ruby MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/python-flask-example-applications/tree/main/python-flask-mfa-example"
+    title="Python Flask MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/python-django-example-applications/tree/main/python-django-mfa-example"
+    title="Python Django MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/go-example-applications/tree/main/go-mfa-example"
+    title="Go MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/java-example-applications/tree/main/java-mfa-example"
+    title="Java MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/php-example-applications/tree/main/php-mfa-example"
+    title="PHP MFA app"
+  />
+  <ExampleApps.Card
+    href="https://github.com/workos/dotnet-example-applications/tree/main/dotnet-mfa-example"
+    title=".NET MFA app"
+  />
+</ExampleApps.Root>

package/.docs/organized/docs/mfa/index.mdx

@@ -0,0 +1,140 @@
+---
+title: Multi-Factor Authentication
+description: A composable API for implementing multi-factor authentication.
+showNextPage: true
+originalPath: .tmp-workos-clone/packages/docs/content/mfa/index.mdx
+---
+
+## Introduction
+
+The Multi-Factor Authentication (MFA) API is intended to be a composable, unopinionated set of endpoints that can be integrated into existing application/session management strategies.
+
+The available types of authentication factors are:
+
+- `totp` – Time-based one-time password
+- `sms` – One-time password via SMS message
+
+> The MFA API is not intended to be used with the WorkOS SSO feature. It’s recommended to leverage the MFA features of the Identity Provider that is powering your SSO implementation.
+
+## What you’ll build
+
+In this guide, we’ll walk you through the process of enrolling new authentication factors for a user, and the challenge/verification process for existing authentication factors.
+
+This guide will show you how to:
+
+1. Create an Authentication Factor
+2. Challenge the Authentication Factor
+3. Verify the Challenge
+
+## Before getting started
+
+To get the most out of this guide, you’ll need:
+
+- A [WorkOS account](https://dashboard.workos.com/)
+
+## API object definitions
+
+[Authentication Factor](/reference/mfa/authentication-factor)
+: A factor of authentication that can be used in conjunction with a primary factor to provide multiple factors of authentication.
+
+[Authentication Challenge](/reference/mfa/authentication-challenge)
+: A request for an Authentication Factor to be verified.
+
+## (1) Create an Authentication Factor
+
+We’ll first need to enroll a new Authentication Factor.
+
+### Install the WorkOS SDK
+
+WorkOS offers native SDKs in several popular programming languages. Choose a language below to see instructions in your application’s language.
+
+<LanguageSelector>
+  Install the SDK using the command below.
+
+   <CodeBlock title="Install the WorkOS SDK" file="install-sdk">
+    <CodeBlockTab language="js" file="install-sdk-npm" title="npm" />
+    <CodeBlockTab language="js" file="install-sdk-yarn" title="Yarn" />
+    <CodeBlockTab language="java" file="install-sdk-maven" title="Maven" />
+    <CodeBlockTab language="java" file="install-sdk-gradle" title="Gradle" />
+    <CodeBlockTab language="ruby" file="install-sdk-terminal" title="Terminal" />
+    <CodeBlockTab language="ruby" file="install-sdk-bundler" title="Bundler" />
+  </CodeBlock>
+</LanguageSelector>
+
+### Set secrets
+
+To make calls to WorkOS, provide the API key and, in some cases, the client ID. Store these values as managed secrets, such as `WORKOS_API_KEY` and `WORKOS_CLIENT_ID`, and pass them to the SDKs either as environment variables or directly in your app's configuration based on your preferences.
+
+```plain title="Environment variables"
+WORKOS_API_KEY='sk_example_123456789'
+WORKOS_CLIENT_ID='client_123456789'
+```
+
+### Enroll the Authentication Factor
+
+- | Using TOTP
+
+  Use the TOTP type when the user is using a third-party authenticator app such as Google Authenticator or Authy.
+
+  <CodeBlock title="Enroll Endpoint" file="enroll-totp" />
+
+  The response returns a `qr_code` and a secret. The `qr_code` value is a base64 encoded data URI that is used to [display the QR code](https://css-tricks.com/data-uris/) in your application for enrollment with an authenticator application.
+
+  The `secret` can be entered into some authenticator applications in place of scanning a QR code.
+
+- | Using SMS
+
+  Use the SMS type when the user wants to receive one time passwords as SMS messages to their mobile device.
+
+  Phone number must be valid. An error will be returned for malformed or invalid phone numbers.
+
+  <CodeBlock title="Enroll Endpoint" file="enroll-sms" />
+
+Now that we’ve successfully created an authentication factor, we’ll need to save the ID for later use. It’s recommended that you persist the factor ID in your own user model according to your application’s needs.
+
+## (2) Challenge the Authentication Factor
+
+Next we’ll initiate the authentication process for the newly created factor which we’ll refer to as a challenge.
+
+- | Create Authentication Challenge
+
+  <CodeBlock title="Challenge Endpoint" file="create-challenge" />
+
+- | Sending Custom SMS Message
+
+  When challenging an SMS authentication factor, you can pass an optional SMS template to customize the SMS message that is sent to the end user. Use the `{{code}}` token to inject the one time password into the message.
+
+  <CodeBlock title="Challenge Endpoint" file="create-sms-challenge" />
+
+Now that we’ve successfully challenged the authentication factor, we’ll need to save the challenge ID for the last step, challenge verification.
+
+## (3) Verify the Challenge
+
+The last step in the authentication process is to verify the one time password provided by the end-user.
+
+<CodeBlock title="Verify Endpoint" file="verify-challenge" />
+
+### Verification Response
+
+If the challenge is successfully verified `valid` will return `true`. Otherwise it will return `false` and another verification attempt must be made.
+
+<CodeBlock title="Response" file="authentication-challenge-response" />
+
+### Already Verified Error
+
+If a challenge was already successfully verified, it cannot be used a second time. If further verification is needed in your application, create a new challenge.
+
+<CodeBlock
+  title="Response"
+  file="authentication-challenge-previously-verified"
+/>
+
+### Expired Error
+
+For SMS authentication factors, challenges are only available for verification for 10 minutes. After that they are expired and cannot be verified.
+
+<CodeBlock title="Response" file="authentication-challenge-expired" />
+
+We’ve now successfully verified an end-user’s authentication factor. This authentication factor can now be used as a second factor of authentication in your application’s existing authentication strategy.
+
+The ID of the authentication factor should be persisted in your application for future authentication challenges.

package/.docs/organized/docs/mfa/ux/enrollment.mdx

@@ -0,0 +1,74 @@
+---
+title: Enrollment UX
+description: User experience considerations for MFA enrollment.
+showNextPage: true
+originalPath: .tmp-workos-clone/packages/docs/content/mfa/ux/enrollment.mdx
+---
+
+## Introduction
+
+Now that we've seen how the MFA APIs work, you may want to consider how you want to present the MFA enrollment experience to your users. This guide will cover some of the considerations you should take into account when designing your enrollment experience.
+
+## Provide multiple methods
+
+The MFA APIs support multiple methods of authentication. Consider providing your users with multiple options for enrolling in MFA. Adding flexibility will reduce friction in users adoption.
+
+<MfaEnrollmentDemoMultipleMethods />
+
+## Let users choose their primary method
+
+If a user has enrolled in multiple methods, consider letting them select a primary. This will allow you to challenge them with the method they are most comfortable, whilst still benefiting from the security of a backup in case they lose access.
+
+<MfaEnrollmentDemoPrimaryMethod />
+
+## Setup a `totp` factor accessibly
+
+As we have previously seen, [when enrolling a `totp` factor using the MFA API](mfa/1-create-an-authentication-factor/enroll-the-authentication-factor), the response returns a `qr_code` and a `secret`.
+
+The `qr_code` value can be passed directly to the source on an image tag as follows:
+
+<CodeBlock title="Embed QR Code" file="embed-qr-code" />
+
+However, some users may not be able to scan the QR code. Consider providing the `secret` value in the UI as an alternate way to set up their authenticator app.
+
+<MfaEnrollmentDemoTotp />
+
+Additionally, consider describing the QR code for assistive technologies:
+
+<CodeBlock title="QR Code accessibility" file="link-qr-code-and-secret" />
+
+## Interoperable one-time-passcode input
+
+In order to make the experience as smooth as possible for your users, there are a few things to consider regarding the input they will use to fill in their one-time-passcode.
+
+### Provide the right affordance
+
+You may be tempted to use [a number input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) as it will show the mobile keyboard for numbers only. This is not recommended because a browser expects a number input to be countable, rather than a sequence of multiple numbers, which can cause unexpected behavior.
+
+Instead, we recommend using a text input (`type="text"`) with the `inputmode="numeric"` attribute to provide mobile devices with the expected numerical keyboard prompt.
+
+### Autofill
+
+Setting `autocomplete="one-time-code"` will enable autofill with in any user-agent that supports it. This will for example ensure Safari on iOS/MacOS can suggest/auto-fill the one-time-code received via SMS.
+
+Consider also submitting the form automatically as soon as the passcode length has been met. This should help reduce the friction of using two-factor authentication for your users.
+
+### Validation
+
+Consider using client-side validation to ensure the user enters a valid one-time-passcode. This will reduce the number of requests to the server and improve the user experience.
+
+`pattern="^\d{6}$"` can be used to validate the length of the one-time-passcode.
+
+Here is a code example implementing the above considerations:
+
+<CodeBlock title="One-time-passcode input" file="otp-input" />
+
+<MfaEnrollmentDemoOtpInput />
+
+---
+
+## Full UI interactive example
+
+The following interactive example shows a full UI for enrolling in MFA, and encompasses all of the considerations mentioned above.
+
+<MfaEnrollmentDemoFull />