Enhancing Azure AD B2C Login by Integrating Group Email for TOTP Verification

In this post, I’ll explore how to enhance the Azure AD B2C login process by incorporating a group email feature for TOTP (Time-based One-Time Password) verification. This approach allows companies to manage TOTP verification codes centrally, an essential aspect for organizational security management.

We’ll start with the standard login flow, where users input their username and password. Here’s a snapshot of the user interface from Microsoft’s example sign-up or sign-in custom journey.

Normal Azure AD B2C Login

Next, let’s delve into a more sophisticated login flow. In this variation, we require users to input their group email alongside the standard username and password. This is pivotal for sending the TOTP verification code to a company’s group email, rather than an individual’s personal address.

Group Email Login

Initially, I assumed it would be as straightforward as adding an extra OutputClaim for groupEmail in the technical profile:

  <TechnicalProfile Id="SelfAsserted-LocalAccountSignin-GroupEmail">
            <DisplayName>Local Account Signin</DisplayName>
            <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
            <Metadata>
                <Item Key="SignUpTarget">SignUpWithLogonEmailExchange</Item>
                <Item Key="setting.operatingMode">Email</Item>
                <Item Key="ContentDefinitionReferenceId">api.selfasserted</Item>
                <Item Key="setting.showSignupLink">false</Item>
            </Metadata>
            <IncludeInSso>false</IncludeInSso>
            <InputClaims>
                <InputClaim ClaimTypeReferenceId="signInName" />
            </InputClaims>
            <OutputClaims>
                <OutputClaim ClaimTypeReferenceId="groupEmail" Required="true" />
                <OutputClaim ClaimTypeReferenceId="signInName" Required="true" />
                <OutputClaim ClaimTypeReferenceId="password" Required="true" />
                <OutputClaim ClaimTypeReferenceId="objectId" />
                <OutputClaim ClaimTypeReferenceId="authenticationSource" />
                <OutputClaim ClaimTypeReferenceId="newUser" PartnerClaimType="newClaimsPrincipalCreated" />
            </OutputClaims>
            <ValidationTechnicalProfiles>
                <ValidationTechnicalProfile ReferenceId="login-NonInteractive" />
            </ValidationTechnicalProfiles>
            <UseTechnicalProfileForSessionManagement ReferenceId="SM-AAD" />
        </TechnicalProfile>

However, implementing this was more complex than anticipated. The standard UI rendering did not accommodate the new field properly, leading to layout issues as shown below:

UI Rendering Issue

This issue arises because the orchestration step is of the CombinedSignInAndSignUp type, designed only for username and password input. Adding extra fields disrupts the UI’s automatic JavaScript and CSS rendering.

The solution, as discussed on Stack Overflow, involves introducing an additional orchestration step of type ClaimsExchange to collect the group email information:

  <OrchestrationStep Order="4" Type="ClaimsExchange">
            <ClaimsExchanges>
                <ClaimsExchange Id="GroupEmailCollection" TechnicalProfileReferenceId="SelfAsserted-GroupEmail" />
            </ClaimsExchanges>
</OrchestrationStep>

With this step, we can efficiently collect and store the group email information in the groupEmail claim:

Group Email Orchestration Step

By adapting our approach, we can successfully integrate the group email feature in the Azure AD B2C login flow, enhancing the security and management of TOTP verification within organizational contexts.