Best Practices for Customizing Login Flows

fabric Identity supports only the Okta hosted login page for customizing and styling. Here are some best practices that fabric recommends when customizing the login flows.

Login page domain name

Use a subdomain of the userapp's actual domain to host the login page. For example, if the userapp is hosted on the domain example.com, use a subdomain such as login.example.com for the Okta org. Because the hosted login page is a redirect from the userapp, making it appear under a subdomain increases the end users' confidence to provide their credentials on the login page.

The Okta org domain name is also used in email communications sent to the user (welcome email, forgot password email, etc.). Make sure you test these flows during development to ensure that they are redirecting the user to the intended login page.

Common SSO branding

The hosted login page is the same for all userapps within a single user pool. Hence, if the same user pool allows single sign on for users across multiple brands, the login page should be styled and themed as a common entry point for all of the brands.

Minimize non-login related customizations within the login page

Okta uses inline JavaScript to customize its hosted login page. This allows developers to customize the login page to implement custom functionality. fabric recommends that the customizations are limited only to the userapp's login functionality. For example, while it is possible to have dynamic headers and footers on the login page (by making a fetch call), they are not recommended on the login page because they are not related to login functionality. Instead, use static headers and footers on the login page.

Use a separate user pool for each environment served by the same fabric merchant

A single fabric Copilot merchant can support multiple user pools. If the development team is using a single sandbox for both development and staging environments of a userapp, ensure that two separate userapps are created in separate user pools of the same merchant. By default, fabric Identity creates one user pool per fabric merchant. Additional user pools can be created upon request.

Implement custom validation when extending the self-registration form

Okta allows extending the user registration form to request additional details from the user during signup. For these additional fields, ensure that you implement the necessary validations in the custom login page. While Okta supports designating which of these additional details are mandatory, it cannot validate field format or value. For example, it cannot, by itself, validate if an entered ZIP code is a valid ZIP code. Currently, the only field types allowed are string, number, boolean, and integer.

Understand how Okta's Sign-In Widget works

Most login customization can be done by setting the appropriate configurations on Okta's Sign-In Widget, or by providing callback handlers to this widget. The API for this is documented here. fabric strongly recommends that app developers read this documentation before creating custom login pages.