> ## Documentation Index > Fetch the complete documentation index at: https://docs.authsignal.com/llms.txt > Use this file to discover all available pages before exploring further. # Using Passkeys with Microsoft Azure AD B2C > Learn how to add passkey autofill to your Microsoft Azure AD B2C login page with Authsignal. This guide extends our previous guides where we showed you how to integrate Authsignal into Microsoft Azure AD B2C for [multi-factor authentication (MFA)](/integrations/azure-ad-b2c/azure-ad-b2c-mfa) and [passwordless login](/integrations/azure-ad-b2c/azure-ad-b2c-passwordless) In this guide, we will show you how to add passkey autofill into your Microsoft Azure AD B2C login page. You can use this guide to add passkey autofill if you are using Authsignal for MFA or passwordless login. Note that the live demo is using the same underlying Azure B2C Tenant as our previous guides. You can use the same email address to sign in. ## Prerequisites Before continuing with this guide, you should first complete the following: * Replace your login screen with [custom html templates](https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-custom-policy). In our example, we have made a copy of the [sample templates](https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-custom-policy#sample-templates) provided by Microsoft. This is required as we will need to add custom javascript to the login page. * Set up custom domains on your Azure AD B2C tenant. You can follow the [official documentation](https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-domain?pivots=b2c-custom-policy) to set up custom domains. This is required as we will need to replace the default `b2clogin.com` domain with the domain where we will register our passkeys, so that the browser is able to detect available passkeys. We recommend setting your b2c domain to `identity.yourdomain.com`, and Authsignal [custom domain](/implementation-options/prebuilt-ui/custom-domains) to `auth.yourdomain.com` ## Code example A [full code example and starter template](https://github.com/authsignal/azure-ad-b2c-passkey-example) referenced in this guide can be found on Github. You can also refer to the [code diff between the previous guide](https://github.com/authsignal/azure-ad-b2c-passwordless-example/compare/main...authsignal:azure-ad-b2c-passkey-example:main?expand=1) if you only want to see the changes. ## Step by step guide ### Step 1: Configure the custom domain of your Authsignal tenant Navigate to [Authsignal portal > Settings > Custom domains](https://portal.authsignal.com/organisations/tenants/custom_domains) to configure the custom domain of your Authsignal tenant. We recommend this be a distinct subdomain from your Azure AD B2C tenant domain. ### Step 2: Enable and configure the passkey authentication method on your Authsignal tenant Enable passkeys on your tenant by following the [passkey setup steps](/authentication-methods/passkey/web-sdk#portal-setup). After passkeys have been enabled, add your Azure AD B2C domain and Authsignal custom domain to the **Expected origins** settings e.g. `https://identity.yourdomain.com` and `https://auth.yourdomain.com`. ### Step 3: Add JavaScript to the login page html template In order to enable passkey autofill in our B2C login page, we need add custom JavaScript into our html template. In the `` tag, add the following script which will: * Wait for Azure AD B2C to dynamically populate the `api` element with the login from * Load the Authsignal Browser SDK * Set the `autocomplete` attribute of the login input to `username webauthn` * Set the `autocomplete` attribute of the password input to `current-password webauthn` ```js theme={null} ``` ### Step 5 (Optional): Hide the password input This step is optional, and only required if you have a passwordless login flow. If you still allow users to login with their password, skip this step. Add the following ` ``` ### Step 6: Enable javascript in your html templates Add the following `` element to our Relying Party policy under the `` element ```xml theme={null} Allow ``` [See the official Microsoft guide](https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-custom-policy#enable-javascript) ### Step 7: Add the required claim types ```xml theme={null} boolean boolean string ``` ### Step 8: Add the claims transformations ```xml theme={null} ``` ### Step 9: Add new technical profiles to check and validate passkey autofill challenges ```xml theme={null} Check is passkey autofill Validate passkey challenge {Settings:AuthsignalServerUrl}/validate ``` ### Step 10: Adjust the technical profile used in our CombinedSignInAndSignUp orchestration step Add the following claims to the `OutputClaims` element: ```xml theme={null} ``` Add the following validation technical profiles: ```xml theme={null} isPasskeyAutofill SkipThisValidationTechnicalProfile isPasskeyAutofill True SkipThisValidationTechnicalProfile passkeyToken SkipThisValidationTechnicalProfile isPasskeyAutofill True SkipThisValidationTechnicalProfile ``` ### Step 11: Add a precondition to the orchestration step which shows an error page if the passkey autofill challenge is not successful ```xml theme={null} isPasskeyChallengeSuccessful true SkipThisOrchestrationStep ``` ### Step 12: Add a precondition to orchestration steps that should be skipped if passkey autofill is successful ```xml theme={null} isPasskeyAutofill True SkipThisOrchestrationStep ``` ### Step 13: Upload the updated html template and custom policies, and test the changes You can now test your integration by navigating to your custom policy in the Azure AD B2C portal and clicking “Run now”, ensuring that you change the API URL to your custom domain. Once you sign up a new user and register a passkey, when the user next lands on the login screen they will be prompted to sign in with their passkey. Azure AD B2C login page with passkey autofill ## Congratulations! You have successfully added passkey autofill to your Microsoft Azure AD B2C login page.