Sign-In Widget (third generation)

The Sign-In Widget enables registration, enrollment, verification, and recovery experiences for your users. It's where everyone in your org starts their Okta session.

The third generation of the Sign-In Widget offers the same user experience as the second generation, and adds accessibility improvements in color contrast, focus management, and screen reader behavior. It establishes a foundation for improvements in customization and globalization.

Is the third generation right for your org?

If your org prioritizes accessibility requirements or wants to avoid future migration efforts, consider enabling the third generation.

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

Self-service password reset flow

The third generation improves the self-service password reset flow by dynamically updating the password requirements as they're met. If a user submits a password that doesn't meet your requirements, they're notified of the ones they missed.

Branding

The third generation makes multibrand customization easier. You can use the API to directly configure Document Object Models (DOM) objects in the SIW HTML file. See Style the Sign-In Widget (third generation).

Browsers

The third generation supports most modern browsers:

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Internet Explorer
  • Microsoft Edge Legacy
  • Embedded browsers like Microsoft Office
  • Hardware integrations like hand-held Android devices

Code configurations

useClassicEngine isn't supported.

Deployment

You can use the third generation in the following ways:

  • Okta-hosted sign-in page (default): Okta provides a sign-in page that's available at your org's URL. By default, a user who signs in on this page is redirected to the Okta End-User Dashboard.

  • Okta-hosted sign-in page (customizable): Okta provides a sign-in page that you can customize and make available under a custom subdomain of your company's top-level domain.

The third generation doesn't support self-hosting.

Compare generations

Feature

Second generation

Third generation

Deployment Redirect (Okta-hosted)

Embedded (self-hosted)

Pinning to a specific Okta-hosted version

Redirect (Okta-hosted)

Pinning to a specific Okta-hosted version
Authenticators Email

Password

Okta Verify (Okta FastPass, push, TOTP)

WebAuthn

Smart Card

Google Authenticator

YubiKey OTP

SMS

Security Question

Custom

Duo Security

RSA

Symantec VIP

IdP authenticator

Social login

 Email

Password

Okta Verify (Okta FastPass, push, TOTP)

WebAuthn

Smart Card

Google Authenticator

YubiKey OTP

SMS

Security Question

Custom

Duo Security

RSA

Symantec VIP

IdP authenticator

Social login
Features IdP Discovery (routing rules)

CAPTCHA

IdP Discovery (routing rules)

CAPTCHA
Flows Profile enrollment

Authenticator enrollment

Authenticator verification

Forgot password

Account unlock

 Profile enrollment

Authenticator enrollment

Authenticator verification

Forgot password

Account unlock

Globalization

 All out-of-the-box translations

String customization

Bring your own language

 All out-of-the-box translations

String customization

Bring your own language

Right-to-left languages (experimental, requires customization)

Branding

 Branding and multibrands

CSS overrides (code editor)

 Branding and multibrands

Code configurations

 Config options:
  • OktaSignIn
  • showSignIn
  • showSignInAndRedirect
  • remove
  • renderEl
  • on
  • authClient
  • issuer
  • clientId
  • redirectUri
  • codeChallenge
  • codeChallengeMethod
  • state
  • scopes
  • flow
  • recoveryToken
  • hide/show
  • off
  • before/after
  • useClassicEngine
  • otp
  • idpDisplay
  • cspNonce
  • hooks (per view)

Events:

  • ready
  • afterError
  • afterRender
  • transformUsername

Hooks:

  • Registration hooks: parseSchema, preSubmit, postSubmit

Links API:

  • registration
  • registration.click
  • backToSignInLink
  • helpLinks

Custom Buttons API

 Config options:
  • OktaSignIn
  • showSignIn
  • showSignInAndRedirect
  • remove
  • renderEl
  • on
  • authClient
  • issuer
  • clientId
  • redirectUri
  • codeChallenge
  • codeChallengeMethod
  • state
  • scopes
  • flow
  • recoveryToken

Events:

  • ready
  • afterError
  • afterRender: This event may not perform as expected if you customize your Sign-In Widget code. See About the afterRender function.
  • transformUsername

Hooks:

  • Registration hooks: parseSchema, preSubmit, postSubmit

Links API:

  • registration
  • registration.click

Multifactor authentication (MFA) for third-party agents

Supported

Limited support. Your third-generation customizations might not work as expected in these scenarios. The authentication flows complete but little or no styling appears on the Sign-In Widget.

Enable the third-generation Sign-In Widget

  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. Click the Settings tab.
  5. In the Sign-In Widget version section, click Edit.
  6. Click the Use third generation toggle so that it's active.
  7. Click Save to draft.
  8. Click Publish.

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

Pin a specific third-generation Sign-In Widget version

By default, the third-generation Sign-In Widget is upgraded to the latest minor version when an upgrade is available, but not to a major version.

You can pin the third-generation Sign-In Widget to a specific version. This lets you select a version that's compatible with custom brands and avoid breaking your configuration when an upgrade occurs. There are several ways to pin to a specific version:

  • Pin to a specific version: Select a specific version, like 7.8. The third-generation Sign-In Widget stays on version 7.8 even after the release of version 7.9. You can pin to version 7.8 or later.
  • Upgrade to minor versions only: Select the major version and the caret character, like 7^. This keeps the third-generation Sign-In Widget on major version 7 and gives you the latest minor version when it's released.
  • Upgrade to the latest version: Select * (asterisk). This upgrades the third-generation Sign-In Widget to the latest major and minor version.

Enable the third-generation Sign-In Widget before you pin to a specific version. See Enable the third-generation Sign-In Widget.

  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. Click the Settings tab.
  5. In the Sign-In Widget version section, click Edit.
  6. Select the version number from the Version dropdown.
  7. Click Save to draft.
  8. Click Publish.

Related topics

Okta Sign-In Widget Upgrade

Customize your sign-in page

Self-Service Registration

Style the Sign-In Widget (third generation)