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.
thanks for this guide. it is really great.
though my challenge is that the new portal management is that it doesn’t have now the Account/Signin/PageCopy. I’m a little bit lost.
Hello again Kenneth. Portal doesn’t have all possible site settings or content snippets out of the box. There are many we can add ourselves as we need them. If it doesn’t exist – just create it. And make sure you create snippets for each language on your portal. Documentation on site settings: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/configure-site-settings
I think I got it figured out. Additional question, did you add an HTML through Javascript to achieve that look or did you just do this purely in CSS? Thanks
Hello Kenneth. Good to know you figured it out. Please send an image or link to the finished page if possible.
I did not add any HTML trough JavaScript. this is purely CSS. But your could add some HTML to the Page Copy element if you wanted. Cheers!
How to create custom sign-in page (The sign-in page creating to one new page and add a image in background).
[…] Tip! Give your portal login page a personal touch. This blog post will show you how to Customize the Sign in and Registration page in Power Apps Portals […]