How To Create Custom Login Page in Power Apps Portal

This blog will present a step-by-step process to help you create a custom login page for the Power Apps Portal.

Prerequisites: –

  • User flows must be set up for the sign-in Azure Active Directory B2C.
  • A web application must be registered in Azure Active Directory B2C.

Follow the steps below to create the custom login page:

Step 1: Create HTML page content

In the above code, the <div id=”api”></div> element indicates where Azure AD B2C content is to be inserted.

Step 2: Build A custom style.css file to give the UI element a visual appeal

Tip: You can also download the sample template code from Git.

Step 3: Create an Azure Blob storage account

To host your HTML content in Blob storage, perform the following steps:

  1. Sign in to the Azure portal.
  2. Make sure you’re using the directory that contains your Azure AD tenant, and which has a subscription.
  3. Select the Directories + Subscriptions icon in the portal toolbar.
  4. On the Portal Settings | Directories + Subscriptions page, find your Azure AD directory under the Directory name list, and then select Switch.
  5. In the Azure portal, search for and select Storage Accounts
  6. Select à  + Create.
  7. Select a Subscription for your storage account.
  8. Create a new Resource Group or select an existing one.
  9. Enter a unique Storage Account Name for your storage account.
  10. Select the geographical Region for your storage account.
  11. Performance can remain Standard.
  12. Redundancy can remain Geo-Redundant Storage (GRS).
  13. Select Review + Create and wait for a few seconds for Azure AD to run the validation process.
  14. It will take few minutes to create the Blob Storage Account. After the deployment is complete, the storage account page opens automatically. If not, you would get a notification with a button labeled as Go to resource.
Step 4: Create a container

To create a public container in Blob storage, perform the following steps:

  1. Under Data storage in the left-hand menu, select Containers.
  2. Select à+ Container.
  3. For Name, enter root. The name can be a name of your choosing, for example Contoso, but we use root in this example for simplicity.
  4. For Public access level, select Blob.
  5. Select Create to create the container.
Step 5: Now you need to Upload our custom page content files into the container, which was created in step 1 and step 2.

Step 6: Configure CORS

Configure Blob storage for Cross-Origin Resource Sharing by performing the following steps:

  1. Navigate to your storage account.
  2. In the left-hand menu, under Settings, select Resource sharing (CORS).
  3. For Allowed origins, enterhttps://your-tenant-name.b2clogin.com. Replace your-tenant-name with the name of your Azure AD B2C tenant. For example, https://fabrikam.b2clogin.com. Use all lowercase letters when entering your tenant name.
  4. For Allowed Methods, select both GET and OPTIONS.
  5. For Allowed Headers, enter an asterisk (*).
  6. For Exposed Headers, enter an asterisk (*).
  7. For Max age, enter 200.
  8. At the top of the page, select Save.
Step 7: Update the user flow
  1. Make sure you’re using the directory that contains your Azure AD B2C tenant.
    1. Select the Directories + Subscriptions icon in the portal toolbar.
    2. On the Portal Settings | Directories + Subscriptions page, find your Azure AD B2C directory under the directory name list, and then select Switch.
  2. In the Azure portal, search for and select Azure AD B2C.
  3. In the left-hand menu, select User flows, and then select the B2C_1_signinuser flow.

4. Select Page Layouts, and then under Unified select Sign-Up Or Sign-In Page; Select Yes for Use Custom Page Content.

5. In Custom Page URL, enter the URI for the custom-ui.html file that you recorded earlier.

6. At the top of the page, select Save.

Now Test the user flow.

  1. In your Azure AD B2C tenant, select User Flows and select the B2C_1_signupsignin1 user flow.
  2. At the top of the page, select Run User Flow.
  3. In the pane on right side, select Run User Flow button. And voilà, you have the page ready!