This is an Early Access feature. To enable it, please contact Okta Support.
Settings > Customization > Custom Sign In
You can customize the text and the look and feel of the Okta-hosted sign-in page using form controls and an embedded HTML editor provided in the Customization page. When used together with custom URL domain (required) and custom Okta-hosted error page, this feature offers a fully customized end-user sign-in experience hosted by Okta. If you want to build your end-user experience from scratch and host it yourself, you can use the Okta Sign-In Widget and Auth.js SDK to build this functionality (see Related Topics). Screenshot
- No need to host the sign-in page on a separate server.
- Easily preview your custom sign-in page before publishing.
- Deploy specific configurations and capabilities of the Sign-In Widget by selecting major and minor versions.
- Your custom Okta-hosted sign-in page is available only when end usersIn Okta literature, we generally refer to "end users" as the people who have their own Okta home page (My Applications), using chiclets to authenticate into all of their apps. End users do not have any administrative control. When we refer to "users" we are generally referring to the individual(s) who have administrative control. access Okta through your custom URL domainA domain is an attribute of an Okta organization. Okta uses a fully-qualified domain name, meaning it always includes the top-level domain (.com, .eu, etc.), but does not include the protocol (https).. End users will continue to see your default Okta sign-in page when accessing your *.okta.com or *.oktapreview.com orgs.
- You can replace, but not edit, the provided macros when editing code in the embedded editor. For details, see the Important note below.
- The custom Okta-hosted sign-in page feature is supported in mobile browsers but not supported for use with Okta Mobile.
- Go to Settings > Customization.
- Click the Custom Sign In tab.
- (Optional) Select the Okta Sign-In Widget Version:
This option allows you to leverage or omit specific sign-in page capabilities by specifying a particular version of the Okta Sign-In Widget. If you are not familiar with the Okta Sign-In Widget, Okta recommends that you simply select the highest Major Version and the latest Minor Version (default). For details about the Okta Sign-In Widget capabilities supported by major and minor versions, see this Github page.
- Click Edit.
- Click Save.
- Customize the sign-in page:
You can use the form fields on the left side of the page and the HTML editor together or separately to customize the sign-in page.
- Form fields – If you only want to edit links, labels, and headings, use the form fields provided on the left side of the page. These same options are also available in the General tab of the Customization page and changes you make here also appear there, and vice versa.
You can also customize the placeholder text that appears in recovery flows when end users click account recovery links (for example, Forgot password and Unlock account). If you leave a label field blank, Okta uses default text.
Note: Although Okta displays default labels, links, and headings in the end user's Display language or the browser language, Okta does not display localized versions of your custom text and links. If you entered custom text and links in a different language than the end users' Display or browser language, the Sign-In page will have text in more than one language.
- HTML editor – If you are familiar with using HTML and want to change colors, line widths, page layout, button shapes, and other elements, use the embedded editor in the middle of the page to change anything you like according to your needs.
Macros contain all of the configuration parameters for certain page elements.
This macro controls the background image. You can also configure a background image using the Sign-In Configuration option in Settings > Appearance.
OktaUtil defines a global OktaUtil object that contains methods used to complete the Okta log-in flow.
The Early Access version of this feature does not identify specific errors in your custom code.