Customize the sign-in and registration page in Power App Portals

Let me show you how to customize the sign-in and registration page in Power App Portals.

There is no obvious way to customize the sign-in and registration page in Power App Portals. The pages doesn’t exist in the Web Pages directory, and there is no Web Template. Even if you are logged into the portal as administrator the Portal Content Editor Toolbar doesn’t appear on these pages. There is no way – essentially – to edit the look and feel of these pages.

Well, there is. And you might think it is a dirty hack – but I have used it in production for 2 years without any hiccups. The fix is the same for both the sign-in page and the registration page – and for any other page you cannot reach the normal way. I will demonstrate using the sign-in page.

Short cut

For those of you who know your way around Portals this is a short cut. Copy this code

<script>
  $("#content-container").addClass("signinpage");
</script>
Code language: HTML, XML (xml)

and paste it into the value of the Content Snippet “Account/SignIn/PageCopy”

This will give you a CSS class at the top level div element on the sign-in page. Now you’ll be to add custom styles using the class “signinpage” as the top CSS selector.

The longer story

Out of the box the sign-in page and the registration page look about the same.

The HTML-structure of the content look something like this:

All the CSS selectors in this page is the same as any other page in your portal. Styling this page with CSS will style all other pages the same way. Challenge is to identify a CSS-selector that let us limit the styling to this page only.

Long story short – there is no such CSS-selector. Trust me – I looked.

Now, then, what do we do? We create one.

Because we cannot get to the web page, the page template or the web template we need to work with the smaller parts, the Content Snippets. In this case the Page Copy.

We get this done from the backend. Open the Portal Management App from make.powerapps.com. Not sure what the Portal Management App is? Look at my blog post Map to Configuring Power Apps Portals

Content Snippet “Account/SignIn/PageCopy”

More about Content Snippets from Microsoft Portals Documentation

Navigate to “Content Snippets” and locate “Account/SignIn/PageCopy”

Copy the following code

<script>
  $("#content-container").addClass("signinpage");
</script>
Code language: HTML, XML (xml)

and paste it into the value of the content snippet. It will look like this when you got it right

Save it and – REFRESH the cache – and refresh your sign-in page.

The sign-in page

URL for the sign-in page is always
https://www.[portaldomain]/signin

There will be no apparent change – but if you look closely at the HTML structure trough the browser developer tool you’ll see that there is a new Class “signinpage” on the div with id = content-container.

As all makeovers with some self respect we have before and after pictures, look:

Before

After

Spectacular – right?

Thought it might not look like much it enables me to make the page look like this:

Other pages

There are more pages that work this way, the Registration page, the Change Password page, etc. We use the same approach for them all.

If you cannot find the page copy content snippet for the page you are working with – try to create it. Most of the pages will include a Page Copy if one exist. Use the same script – but give the page another class to separate the styles.

Some important pages to remember:

• Account/RedeemInvitation/PageCopy
• Account/Register/PageCopy
• Account/ChangePassword/PageCopy

You are now able to customize the sign-in and registration page in Power App Portals.

Go bananas and keep it simple. Have fun.