Customize your sign-in page

When users attempt to access to your apps, they're directed to an Okta-hosted sign-in page. Customize this page to provide a seamless user experience that fits your brand. You can apply your theme, modify the labels and URLs, and change the visibility settings.

Before you begin

You must be a super admin or an org admin, or have a role with customizations permissions.
Set a theme for your org.
Set your browser to at least 750 pixels in height to properly display the sign-in page.
If you plan to use the HTML/CSS/JS code editor, you need to first associate the brand with a custom domain. See Customize domain and email address.
The JSON editor doesn't require a custom domain.
If you used the code editors for the sign-in page but want to use custom branding instead, turn off the Code editor toggle. Customizations that you made with the code editors overwrite the branding for those pages.

Apply your theme

In the Admin Console, go to Customizations > Brands.
Select a brand.
Go to the Pages tab, and then click Edit or Configure for the Sign-in page.
Optional for multibrand users. On the Page Design tab, choose a style from the Base style panel.
Optional. If your org uses a custom sign-in page and you're familiar with HTML, you can make more advanced customizations with the code editor. To use the HTML/CSS/JS editor, keep Base Editor selected in the editor type dropdown list, and then toggle on Code editor. See Style the sign-in page. To use the JSON editor, select JSON Editor from the editor type dropdown list. See Customize your sign-in page with JSON.
Click Save and publish.

Change the labels and settings

In the Admin Console, go to Customizations > Brands.
Select a brand.
Go to the Pages tab. In the Sign-in page section, click Edit or Configure.
On the Labels tab, click Edit for the type of label you want to edit.
Enter new values for any of the headings, labels, and links that you want to customize.
For example, if you allow users to sign in with an identifier, you can change the Username label to describe which identifiers they can use.
To customize whether users can see their passwords as they type, change the Password visibility toggle.
To add a custom link that appears on the authenticator page of the Sign-In Widget, enter values in the Custom link text and Custom link URL fields. Default links appear in the end users' display language or the browser language, but Okta doesn't localize custom links. If your custom link isn't in the end users' display or browser language, the sign-in page displays text in more than one language.
To customize the link on the Authenticator verification page, enter new values in the Factor Page and Custom Link fields. Note: This is an Early Access feature.
To change the Keep me signed in text, enter new values in the Title, Subtitle, Accept button, or Reject button fields. Note: This is an Early Access feature.
To customize the messaging for authenticator enrollment grace periods, enter new text strings in the Required soon description, Required soon custom link text, and Required soon custom link URL fields. Note: This is an Early Access feature.
To use the third-generation Sign-In Widget, open the Settings tab and click the Use third generation toggle so that it's active. See Sign-In Widget (third generation).
To pin the third-generation Sign-In Widget to a specific version, open the Settings tab and select the version number from the Version dropdown list. See Sign-In Widget (third generation).
To customize whether the user's identifier appears on authentication and enrollment pages, open the Settings tab and then change the Sign-In Widget User Identifier toggle.
Click Save to draft. Yellow dots appear next to the tab label, top control buttons, and the section headings that contain changes. They don't appear after you publish the changes.
Click Publish.

Note:

Customizations that you made in the second-generation Sign-In Widget don't appear if you move to the third-generation Sign-In Widget. To recreate them, see Style the Sign-In Widget (third generation).

Customize your sign-in page with JSON

Early Access release. See Enable self-service features.

The JSON editor lets you customize the Sign-In Widget through a single JSON configuration. Unlike the HTML/CSS/JS code editor, the JSON editor doesn't require a custom domain, and it's available for the Okta default brand and for custom brands. See the JSON configuration schema for the list of properties that you can override.

Note:

Overriding theme tokens in your JSON configuration is only supported on the third-generation Sign-In Widget. See Sign-In Widget (third generation).

In the Admin Console, go to Customizations > Brands.
Select a brand.
Go to the Pages tab, and then select Configure for the Sign-in page.
On the Page Design tab, select JSON Editor from the editor type dropdown list.
In the confirmation dialog, select Proceed to code editor.
Select Edit, enter your JSON configuration, and then select Save to draft. If your JSON contains errors, the editor flags them inline and prevents you from saving until you fix them.
Preview your changes, and then select Publish.

Note:

If you switch from the JSON editor to the base editor or to the HTML/CSS/JS editor, Okta removes your custom JSON code. Copy your JSON configuration before you switch editors if you want to keep it.