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 won't appear if you move to the third generation. To recreate them, see Style the Sign-In Widget (third generation).

The Sign-In Widget (third generation) doesn’t support multifactor authentication for third-party agents.

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)

Automatic deployment of latest GA 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

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
  • transformUsername

Hooks:

  • Registration hooks: parseSchema, preSubmit, postSubmit

Links API:

  • registration
  • registration.click

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 won't appear if you move to the third generation. To recreate them, see Style the Sign-In Widget (third generation).

Related topics

Okta Sign-In Widget Upgrade

Customize your sign-in page

Self-Service Registration

Style the Sign-In Widget (third generation)