Azure AD B2C Custom Policy Verify Code & Continue in same Action

Question

I have a existing user flow which is working as expected with verify code and continue button action. Currently the issue is user has to click so many action buttons to login if MFA is enabled. So the expected user flow should skip or bypass the step of continue where verify action button will handle both validation of otp as well as continue user flow in single click. I am trying to combine step to verify code and continue button in one action. Any kind of help is appreciated and thanks in advance. Attaching image for better understanding too. Below is my code

<DisplayControls>
      <DisplayControl Id="emailVerificationControl" UserInterfaceControlType="VerificationControl">
        <DisplayClaims>
          <DisplayClaim ClaimTypeReferenceId="email" Required="true" />
          <DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
        </DisplayClaims>
        <OutputClaims>
          <OutputClaim ClaimTypeReferenceId="email" />
        </OutputClaims>
        <Actions>
          <Action Id="SendCode">
            <ValidationClaimsExchange>
              <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SelfAsserted-GenerateOtp" />
              <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SendGridSendOtp" />
            </ValidationClaimsExchange>
          </Action>
          <Action Id="VerifyCode">
            <ValidationClaimsExchange>
              <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SelfAsserted-VerifyOtp" />
            </ValidationClaimsExchange>
          </Action>
        </Actions>
      </DisplayControl>

<ClaimsProvider>
      <DisplayName>SelfAsserted-VerifyOtp</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="SelfAsserted-VerifyOtp">
          <DisplayName>Verify one time password</DisplayName>
          <Protocol
            Name="Proprietary"
            Handler="Web.TPEngine.Providers.OneTimePasswordProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
          />
          <Metadata>
            <Item Key="Operation">VerifyCode</Item>
          </Metadata>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="identifier" />
            <InputClaim ClaimTypeReferenceId="verificationCode" PartnerClaimType="otpToVerify" />
          </InputClaims>
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>

    <ClaimsProvider>
      <DisplayName>SelfAsserted-GenerateOtp</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="SelfAsserted-GenerateOtp">
          <DisplayName>Generate one time password</DisplayName>
          <Protocol
            Name="Proprietary"
            Handler="Web.TPEngine.Providers.OneTimePasswordProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
          />
          <Metadata>
            <Item Key="Operation">GenerateCode</Item>
            <Item Key="CodeExpirationInSeconds">1200</Item>
            <Item Key="CodeLength">6</Item>
            <Item Key="CharacterSet">0-9</Item>
            <Item Key="ReuseSameCode">true</Item>
            <Item Key="NumRetryAttempts">5</Item>
          </Metadata>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="identifier" />
          </InputClaims>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="otp" PartnerClaimType="otpGenerated" />
          </OutputClaims>
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>

Answer 1

Hi @abhay.pai • Thank you for reaching out.

Unfortunately, you cannot merge the Verify code and Continue buttons in one button using Custom Policy. You need to work with a front-end developer to use a custom HTML page for your signup/sign-in with JavaScript/CSS for this purpose.

You may consider using JavaScript MutationObserver to detect that the Continue button has been enabled, then automate the clicks with javascript

-----------------------------------------------------------------------------------------------------------

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

Answer 2

I have a different scenario . I need to enable Continue button only if email verfication is complete. Otherwise it should stay disabled . I have implemented custom policy.Pls help me with sample code