Configure custom Sign In and Sign Out buttons in PowerApps/ Dynamics 365 Portals

Recently we received a requirement where the custom wanted to implement custom signin and sign out buttons for Power Apps portals.

And trust me, it’s quite easy to achieve the same. The most important stuffs that you need to know for portal sign in and sign out are the sign in and sign out endpoints. They are

Sign In – https://<portal url>/SignIn
Sign Out – https://<portalurl/Acount /Login/LogOff.

Once you know these endpoints, it’s basically designing the HTML you wish and then redirecting the user to the appropriate endpoints of Sign In and Sign Out. However for the sake of completeness of the blog we will develop a complete solution.

I will customize the Header Template for my Custom Portal and add “Sign In” and “Sign Out” buttons in Power Apps Portals.

I go to my Web Templates->Create new Web Template name it as Custom Header Template as shown

Template Source Code:

{% if user == null %}

{% else %}

{% endif %}

</div>

I am constructing a div container and using liquid object “user” to determine whether I am signed in or not. Now my template is ready and I go to my websites and open the available Custom Portal website and change the Header Template to “Custom Header Template”. Observe the highlighted part in the above code. This is important. You show the Sign In button only when the liquid “user” object is null and Sign Out button only when the user is already logged in. The HTML can be anything of your choice.

All are my customizations are in place now I refresh the portal to see my buttons. As you can see my custom Sign In button is seen. Sign Out is not visible as the user is not logged in.