Integrate hosted login with Azure AD B2C using user flows

Since Azure Active Directory B2C is an IDP that provides password-based authentication only, Azure has partnered with Transmit to seamlessly transition to passwordless authentication based exclusively on WebAuthn, which is based on FIDO2 biometrics. This solution requires end-users to register a single account with your business and then log in with a fingerprint or facial biometric on any channel and any device.

This article illustrates how to integrate Transmit's passwordless authentication into applications relying on Azure AD B2C as their IDP using basic user flow configurations. With passwordless authentication enabled, users who will request to authenticate from your app will be presented with both Azure login methods and WebAuthn and will freely choose the method they prefer.

How it works

Here's a preview of the passwordless authentication/registration flow enabled by the integration. More details below.

Azure flow

User identification

The integration between Transmit hosted login and Azure AD B2C depends on account linking, specifically, the synchronization of user-identifying data. To ensure account linking, users must be identified by the same email in both apps. On the Transmit side, both identifiers undergo OTP verification before registering credentials.

User and device registration

When a user requests to log in with biometrics, Transmit's hosted experience will manage all the logic to proceed either with a WebAuthn registration or authentication. As a result, if a user attempts to log in without an existing profile, the flow will create a new user in Transmit.

WebAuthn registration flow

Here's a sample flow that illustrates the logic behind WebAuthn registration:

  1. In Azure AD B2C login XP, the user requests to login with biometrics.
  2. Azure AD B2C redirects the browser to Transmit's hosted XP.
  3. Transmit:
    1. Collects a user identifier, that is, the email.
    2. Verifies the identifier using OTP verification.
    3. Creates a new user if no user is found for the user identifier.
    4. Registers biometrics to the identified user.
    5. Redirects back to Azure AD B2C with an authorization code.
  4. Azure AD B2C exchanges the authorization code for an ID and access tokens.
  5. Azure AD B2C processes the tokens, that is:
    1. Validates the tokens.
    2. Identifies the user based on their email

WebAuthn authentication flow

Here's a sample flow that illustrates the logic behind WebAuthn authentication:

  1. In Azure AD B2C login XP, the user requests to login with biometrics.
  2. Azure AD B2C redirects the browser to Transmit's hosted XP.
  3. Transmit:
  4. Authenticates the user using the WebAuthn credentials registered on the device.
  5. Redirects back to Azure AD B2C with an authorization code.
  6. Azure AD B2C exchanges the auth code for ID and access tokens
  7. Azure AD B2C processes the tokens, that is:
  8. Validates the tokens.
  9. Identifies the user based on their email

Before you start

Before you delve into the procedure, ensure:

  • you have an Azure subscription . See Azure documentation .
  • you have linked an Azure Active Directory B2C tenant to your Azure subscription. See Azure documentation .
  • you have registered a Azure AD B2C web application for the tenant. See Azure documentation .
  • your Azure AD B2C application identifies users through the email . Identifying users through this method is crucial to allow account linking between Azure and Transmit.

Step 1: Add redirect URI to Transmit app

Add the Identity Experience Framework app endpoint as an allowed redirect URI in your Transmit app. After Transmit authenticates the user, Transmit will redirect back to Azure with an authentication code that will later be exchanged for an ID and access token. The redirect URI is provided by Azure Active Directory B2C and based on you app's domain in Azure. It should respect the following format:

https://YOUR_AZURE_TENANT_NAME.b2clogin.com/YOUR_AZURE_TENANT_NAME.onmicrosoft.com/oauth2/authresp

If you don't already have an application, you'll need to create one first (see Create application).

Identifying users through these methods is crucial to allow account linking between Azure and Transmit.

Step 2: Configure login experience in Transmit

In Transmit's Admin Portal > Authentication > Experiences Management, configure the authentication experience:

  • For the User identifier set the email .
  • For the Primary authentication method set the Passkey .
  • For the Secondary authentication method set:
    • WebAuthn QR , to provide an alternative login option in case biometric authentication is not supported on the device (for example, if a desktop device lacks biometric scanners).
    • Email OTP or SMS OTP (on the basis of the selected user identifier) to enable OTP verification of the user identifier.
  • Remove all options that are activated by default in the Select user information section. The collection of user information is managed by Azure AD B2C as the primary IDP.
  • (Optional) Activate the Sign-in/Sign-up flow toggle to enable seamless redirection to the sign-up page for users attempting to log in with an unregistered user account. In this case, when the user clicks the login button, the system will automatically initiate OTP verification of the email in order to proceed with sign-up.

Step 3: Create an Open ID Connect provider

From the Azure AD B2C main page, navigate to Manage > Identity providers and then create a new Open ID Connect provider. Here's a summary of the information expected for this setup:

  • Name of the OIDC provider, e.g. Transmit
  • Metadata url : https://api.transmitsecurity.io/cis/oidc/.well-known/openid-configuration
  • Client ID and Client secret of your Transmit app (available in your Transmit app in the Admin Portal )
  • Scope : openid email depending on the identification method chosen for the integration.
  • Response type : code
  • Response mode : query
  • Identity provider claims mapping
    • Email : email that corresponds in Transmit to a user's unique identifier. For more about user attributes supported in Transmit, see ID tokens .
    • Display name : email

By determining the Identity provider claims mapping, you establish the way Azure AD B2C interprets and uses the claims returned within the user tokens generated by Transmit following the authentication.

Step 4: Configure the user flow

Navigate to Policies > User flow to create a user flow. Before configuring it, you need to chose the user flow type you prefer. Here's a summary of the settings within this setup:

  • Name of the user flow.
  • Identity providers :
    • Local accounts : select email sign-in to enable users to choose Azure's email authentication instead of Transmit's WebAuthn authentication. At login, both options will be displayed.
    • Custom identity providers : select the custom IDP created in Step 3 .
    • Application claims : defines the user attributes collected on sign-up and returned to the application in the token. Select Display name and Surname .

Step 5: Test the authentication flow

To test your integration, navigate to Policies > User flow > Identity providers, select the custom IDP you want to test the flow for. To run the test, ensure the following information is provided:

  • Reply url : https://jwt.ms
  • User flow endpoint : the endpoint address used in Step 1 .

You'll be redirected to a demo of the Azure AD B2C login XP and will be able to test the authentication flow.