How to add a custom page in Azure B2C custom policy flow?

Question

Could I have my custom page displayed before the sign-up page? It will be a required text field with a "Continue" button. After clicking on the "Continue" button the regular sign-up page will be displayed. Is it possible to do?

I am using Custom Policy with MFA. It works fine, just need to add pre-sign-up page and verify the answer before the sign-up process begins.

Answer 1

Hi @Andrey Kuznetsov ,

Thanks for reaching out.

Yes, it is possible to display a custom page before the sign-up page in Azure AD B2C. You need to add the self asserted page template to create a custom page with a required text field and a "Continue" button. You can then configure your user flow to use this custom page as the first step in the sign-up process .

Locate the Content Definitions element and add the following code to define a new content definition for your custom page:

<ContentDefinition Id="api.selfasserted.pre.signup">
  <LoadUri>https://your-custom-page-uri</LoadUri>
  <RecoveryUri>https://your-custom-page-uri</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.2.0</DataUri>
  <Metadata>
    <Item Key="DisplayName">Pre-Signup Page</Item>
  </Metadata>
</ContentDefinition>

Replace your-custom-page-uri with your custom page.

Locate the technical profile and add a new technical profile for self asserted page. You can then add a validation technical profile to verify the user's input before proceeding to the sign-up process.

<TechnicalProfile Id="SelfAsserted-PreSignUp">
  <DisplayName>Pre-Signup Page</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.ClaimsTransformationProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <Metadata>
    <Item Key="ContentDefinitionReferenceId">api.selfasserted.pre.signup</Item>
  </Metadata>
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="answer" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="answer" Required="true" />
    <OutputClaim ClaimTypeReferenceId="objectId" />
  </OutputClaims>
  <ValidationTechnicalProfiles>
    <ValidationTechnicalProfile ReferenceId="PreSignUpValidation" />
  </ValidationTechnicalProfiles>
</TechnicalProfile>

Replace PreSignUpValidation with your validation technical profile.

Locate the user journey element and add your page before sign up page.

<UserJourney Id="SignUp">
  <OrchestrationSteps>
    <OrchestrationStep Order="1" Type="ClaimsExchange">
      <ClaimsExchanges>
        <ClaimsExchange Id="PreSignUp" TechnicalProfileReferenceId="SelfAsserted-PreSignUp" />
      </ClaimsExchanges>
    </OrchestrationStep>
    <OrchestrationStep Order="2" Type="ClaimsExchange">
      <ClaimsExchanges>
        <ClaimsExchange Id="SignUpWithLogonEmail" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail" />
      </ClaimsExchanges>
    </OrchestrationStep>
  </OrchestrationSteps>
</UserJourney>

Reference: https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-custom-policy

Hope this will help.

Thanks,

Shweta

---

Please remember to "Accept Answer" if answer helped you.