Handling custom login/registration/profile pages for local authentication in Power Pages is quite nuanced, and there are some platform restrictions to be aware of. Following are the ways how you can customize the login/registration page:
Option 1: Customize Existing OOB Login and Registration Pages
You can extend the out-of-the-box login, registration, and profile pages using Web Templates, JavaScript, and Liquid (within supported boundaries).
Steps:
- Go to Portal Management App.
- Locate the Web Page called "Login" or "Register".
- Find the associated Web Template.
- You can extend the logic using Liquid, and inject JS to modify the UI.
- For styling or additional UI elements, use custom CSS or JS, but you can't modify the form submission behavior itself.
🛑 You cannot change the action URL (e.g., posting to /_services/auth/login/local) — that’s handled internally.
Option 2: Use External Identity Provider (if full customization is required)
- If you're looking for complete control over the UI and authentication flow, consider using Azure AD B2C (MSAL package) in react or another OIDC-compliant provider. This lets you:
- Design fully custom login/registration UIs outside Power Pages.
- Handle authentication externally.
- Redirect users back to Power Pages with a token (via OpenID Connect).
Option 3: Create Custom Registration and Profile Pages (Only)
- This is supported to some extent — here's how:
For Custom Registration Page. You can use:
- A custom form connected to the Contact table, with anonymous access.
- Power Automate flow triggered on form submission (or directly via Web API).
- Ensure appropriate table permissions for anonymous users.
- But you cannot directly "sign in" the user after registration without using the OOB login form.
For Profile Page:
- Once the user is authenticated:
- You can use Web API to load/update Contact data.
- Use Liquid + JavaScript to display and edit fields.
- Add your custom logic using JS/Power Automate/Web API.
Managing User Sessions (Authenticated Experience)
- Once a user is authenticated via the platform:
- Use the user object in Liquid:
- liquid
{% if user %}
Hello {{ user.fullname }}
{% endif %}
- Use JavaScript + Web API to get/set contact values for the current user.
- For Web API, ensure proper table permissions for the authenticated web role.
To invite new users, you can configure a Power Automate flow that triggers when a new record is created in the Contact table. Within the flow, you can generate a custom invitation code, create a corresponding record in the Invitation table, and send an email notification to the newly registered user. The email should include the invite code along with the link to your Power Pages site.
Hope this helps!
Thanks.
