AD B2C - Customizing sign up flow.

Nitin Ambupe 1 Reputation point
2021-03-05T04:49:59.417+00:00

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 ?

Microsoft Entra External ID
Microsoft Entra External ID
A modern identity solution for securing access to customer, citizen and partner-facing apps and services. It is the converged platform of Azure AD External Identities B2B and B2C. Replaces Azure Active Directory External Identities.
2,719 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. AmanpreetSingh-MSFT 56,461 Reputation points
    2021-03-05T07:22:25.193+00:00

    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.

    0 comments No comments

  2. Nitin Ambupe 1 Reputation point
    2021-03-05T08:56:56.1+00:00

    @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 !

    0 comments No comments