Azure B2C - Radio Button with Sign In Options - azure-ad-b2c

Question

I am looking to build a Custom Policy with Radio button selectors.
Right now the policy works by taking the email entered in orchestration step 1, and then doing a validation check on the email address. If the email is a registered email it will go to a Step where the user will be shown a radio button with the option to sign in with phone with a OTP or use the password on file associated with the mail address entered.
I have built the following in the Sign in Policy..
<OrchestrationStep Order="4" Type="ClaimsExchange">
<Preconditions>
<Precondition Type="ClaimsExist" ExecuteActionsIf="true">
<Value>extension_mfaByPhoneOrEmail</Value>
<Action>SkipThisOrchestrationStep</Action>
</Precondition>
</Preconditions>
<ClaimsExchanges>
<ClaimsExchange Id="SelfAsserted-Select-MFA-Method" TechnicalProfileReferenceId="SelfAsserted-Select-MFA-Method" />
</ClaimsExchanges>
</OrchestrationStep>
And then in extensions
<TechnicalProfile Id="SelfAsserted-Select-MFA-Method">
<DisplayName>{Claim:signInName}</DisplayName>
<Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Metadata>
<Item Key="ContentDefinitionReferenceId">api.MFAselfasserted</Item>
</Metadata>
<InputClaims>
<InputClaim ClaimTypeReferenceId="signInName" PartnerClaimType="signInNames.emailAddress" Required="true"/>
</InputClaims>
<OutputClaims>
<OutputClaim ClaimTypeReferenceId="extension_mfaByPhoneOrEmail" Required="true" />
</OutputClaims>
</TechnicalProfile>
Claim type is
<ClaimType Id="extension_mfaByPhoneOrEmail">
<DisplayName>You can request a verification code to sign in without your password, or enter your password.</DisplayName>
<DataType>string</DataType>
<UserInputType>RadioSingleSelect</UserInputType>
<Restriction>
<Enumeration Text="Phone" Value="phone" SelectByDefault="true" />
<Enumeration Text="Email " Value="email" SelectByDefault="false" />
</Restriction>
</ClaimType>
This does generate the radio buttons. But I would like to be able to add the password box with the email option. Similar to this.
I cannot figure out how to generate the password box there in that selection.

Answer 1

In your Select-MFA-Method technical profile, move the radio button under DisplayClaims, and add the Password ClaimType under DisplayClaims as well. You'll have to adjust the CSS at your content definition to put the password field in between the two buttons, however.
<TechnicalProfile Id="SelfAsserted-Select-MFA-Method">
<DisplayName>{Claim:signInName}</DisplayName>
<Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Metadata>
<Item Key="ContentDefinitionReferenceId">api.MFAselfasserted</Item>
</Metadata>
<InputClaims>
<InputClaim ClaimTypeReferenceId="signInName" PartnerClaimType="signInNames.emailAddress" Required="true"/>
</InputClaims>
<DisplayClaims>
<DisplayClaim ClaimTypeReferenceId="extension_mfaByPhoneOrEmail" Required="true" />
<DisplayClaim ClaimTypeReferenceId="password" />
</DisplayClaims>
</TechnicalProfile>