AD B2C - Customizing sign up flow.

Question

Hello, I am setting AD B2C for mobile applications and I would like to have a separate sign-up and sign-in flow. For sign-up, when I run user flow, I get following interface - ![74510-sign-up.jpg][1] but I would like to have this interface as below - ![74615-wireframe.jpg][2] [1]: /api/attachments/74510-sign-up.jpg?platform=QnA [2]: /api/attachments/74615-wireframe.jpg?platform=QnA could you guide me how ti get this done with AD B2C ?

Answer 1

Hello @Nitin Ambupe · Thank you for reaching out.

Looking at the screenshots you have provided above, I see two problems:

1. You have labeled the social IDP buttons as "Sign up with Google" and "Sign up with Facebook". Once the user signs up, the same buttons can be used for sign-in as well, which might confuse the consumer of the app.
2. The second screenshot is to signup for local accounts, but there is no option for the local users to sign in.

I would suggest you to use 2 pages:

1. Sign in page, which includes option for local users to sign in and all the social IDP buttons as you can't segregate signup and sign in process for social IDPs. Same IDP button is used for both signup and sign in. After initial signup, users will only be using these buttons for sign in.
2. Sign up page, which just presents the users with a form to sign up for local accounts.

For this purpose, deploy LocalandSocialAccounts starter pack. You can then use "setting.showSignupLink" item key as shown below to hide the Sign up now link so that users can use the policy only for sign in purpose.

   <ContentDefinition Id="api.signuporsignin">  
     <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>  
     <RecoveryUri>~/common/default_page_error.html</RecoveryUri>  
     <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.1.0</DataUri>  
     <Metadata>  
       <Item Key="DisplayName">Signin</Item>  
       <Item Key="setting.showSignupLink">false</Item>  
     </Metadata>  
   </ContentDefinition>  

You can then create a SignUP user journey as mentioned below that you can point to, in your RP file e.g. B2C_1A_SignUp which can be used for sign up only.

<UserJourney Id="SignUp">  
  <OrchestrationSteps>  
     
    <OrchestrationStep Order="1" Type="ClaimsExchange">  
      <ClaimsExchanges>  
        <ClaimsExchange Id="SignUpWithLogonEmailExchange" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail" />  
      </ClaimsExchanges>  
    </OrchestrationStep>  
  
    <!-- This step reads any user attributes that we may not have received when in the token. -->  
    <OrchestrationStep Order="2" Type="ClaimsExchange">  
      <ClaimsExchanges>  
        <ClaimsExchange Id="AADUserReadWithObjectId" TechnicalProfileReferenceId="AAD-UserReadUsingObjectId" />  
      </ClaimsExchanges>  
    </OrchestrationStep>  
   
    <OrchestrationStep Order="3" Type="SendClaims" CpimIssuerTechnicalProfileReferenceId="JwtIssuer" />  
  
  </OrchestrationSteps>  
  <ClientDefinition ReferenceId="DefaultWeb" />  
</UserJourney>  

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

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

Answer 2

@AmanpreetSingh-MSFT Thank you so much for the detailed explanation.
Probaby the images I put in weren't clear. Let me try to explain.

I would like to have two buttons on native screen - Sign Up and Sign In.
Sign Up Flow -
Sign up flow is a two step process.
Step 1. - User verification via OTP.
user provides a) Registered email id, b) identifiable information for the product
User submits these and post verification of these two, system would send an OTP to registered email Id.
Step 2 - OTP Verification and user creation
Once the OTP is verified, I would allow user to use local account (email id , password) or social IDP to complete sign up. For the Step-2 screen, I would like to have text field or email id (auto filled) and password first and then social IDP below as alternatives to signup.

I will really appreciate if you could point me in right direction.

Thank you so much !