Let’s dive straight into it! If you’ve recently set up a B2C provider for your Power Pages site, you might have encountered a notable constraint – the unavailability of password reset for combined local accounts.
Azure AD B2C employs industry-standard authentication protocols, such as OpenID Connect seamlessly integrated with OAuth 2.0. This combination provides a robust and secure solution for facilitating user sign-ins. For a detailed guide on configuring and customizing UI in Azure AD B2C as the identity provider, refer to the following articles:
- Configure the Azure AD B2C provider manually – Power Apps | Microsoft Learn
- Customize the user interface with HTML templates – Azure AD B2C | Microsoft Learn
When opting for Phone/Email signup in B2C User SignUp and SignIn built-in user flow, Self-Service Password reset is disabled.
To address this, configure a standalone password reset user flow. Then get the endpoint from the password reset flow from the Run Flow dialog sidebar. We’ll use this to create a custom button in the Page Layout templates for the Sign-in Sign-up flows. It will be used to manually kick off the password reset flow.
Customize your HTML templates, create a button with the endpoint, and hide or rename other UI elements according to your use case. Use CSS to style the UI elements that Azure AD B2C inserts into your page. I recommend using Azure Blob storage with CORS enabled to host the customized pages. Don’t forget to give your container anonymous access, to be hosted on your Power Pages site. The default page layout templates are available on GitHub.
Next is updating the user flow, Select Page Layouts, and then under Unified sign-up or sign-in page, select ’ Yes ’ to use custom page content. In the Custom page URI, enter the URI for the custom-ui.html file that you recorded earlier from your storage account. Don’t overlook enabling JavaScript on the page layout within the user flow settings. With these adjustments in place, give it a test run!
After a password reset, the subsequent sign-in redirects you to an ‘external authentication failed’ page. To redirect your page effectively, incorporate a custom JavaScript script into the ‘Header’ code of your site.
This solution is intended to assist anyone grappling with these limitations until Microsoft completes the release of this feature. Rest assured, with this workaround, you can navigate through the challenges and ensure a smoother user sign-in experience on your platform.