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 code editor, you need to first associate the brand with a custom domain. See Customize domain and email address.
  • 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

  1. In the Admin Console, go to CustomizationsBrands.
  2. Select a brand.
  3. Go to the Pages tab, and then click Edit or Configure for the Sign-in page.
  4. Optional for multibrand users. On the Page Design tab, choose a style from the Base style panel.
  5. 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. See Style the sign-in page.
  6. Click Save and publish.

Change the labels and settings

  1. In the Admin Console, go to CustomizationsBrands.
  2. Select a brand.
  3. Go to the Pages tab. In the Sign-in page section, click Edit or Configure.
  4. On the Labels tab, click Edit for the type of label you want to edit.
  5. 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.
  6. To customize whether users can see their passwords as they type, change the Password visibility toggle.
  7. 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.

  8. 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.

  9. 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.
  10. 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).
  11. 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).
  12. 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.
  13. 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.
  14. 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).

Related topics

Customize domain and email address

Style the Okta-hosted Sign-In Widget

Apply your theme to Okta email notifications

FAQ: How Blocking Third Party Cookies Can Potentially Impact Your Okta Environment