Load the widget

Identity Engine

This guide covers the use case to load the Sign-In Widget, and provides a flow diagram and a sequence of integration steps.

---

Learning outcomes

Understand the sequence of steps to load the Sign-In Widget.

What you need

• An app that uses the embedded Sign-In Widget and Identity Engine SDK
• An Okta org already set up for your use case
• A Sign-In Widget and SDK set up for your own app

Sample code

Java Identity Engine embedded Widget sample app (opens new window)

---

Configuration updates

Make sure to complete the steps to download and configure the SDK, Sign-In Widget, and sample app. These steps guide you to the appropriate repository and location of the embedded Sign-In Widget sample app. They also identify the packages to install and describe other changes to the Okta org that are required for the widget.

Summary of steps

The following diagram shows the sequence of steps to load the Sign-In Widget.

Integration steps

1: Source the Sign-In Widget in your sign-in page

Add the Sign-In Widget source to your sign-in page by referencing the Okta CDN, using the latest version (opens new window) of the Sign-In Widget: 7.31.1

<script src="https://global.oktacdn.com/okta-signin-widget/7.31.1/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://global.oktacdn.com/okta-signin-widget/7.31.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>

See also Using the Okta CDN (opens new window).

2: Add JavaScript to initialize and load the Sign-In Widget

Initialize the Sign-In Widget in the sign-in page, similar to the following snippet:

<script th:inline="javascript">
    var config = {};

    config.baseUrl = /*[[{oktaBaseUrl}]]*/ 'https://{yourOktaDomain}';
    config.clientId = /*[[{oktaClientId}]]*/ '{clientId}';
    config.redirectUri = /*[[{redirectUri}]]*/ '{redirectUri}';
    config.interactionHandle = /*[[{interactionHandle}]]*/ '{interactionHandle}';
    config.codeChallenge = /*[[{codeChallenge}]]*/ '{codeChallenge}';
    config.codeChallengeMethod = /*[[{codeChallengeMethod}]]*/ '{codeChallengeMethod}';
    config.redirect = 'always';
    config.authParams = {
        issuer: /*[[{issuerUri}]]*/ '{issuerUri}',
        pkce: true,
        state: /*[[{state}]]*/ '{state}' || false,
        nonce: /*[[{nonce}]]*/ '{nonce}',
        scopes: /*[[{scopes}]]*/ '[scopes]',
    };

    var signIn = new OktaSignIn(config);

   // Search for URL Parameters to see if a user is being routed to the application to recover password
   var searchParams = new URL(window.location.href).searchParams;
   signIn.otp = searchParams.get('otp');
   signIn.state = searchParams.get('state');

    signIn.showSignInAndRedirect(
      { el: '#sign-in-widget' },
      function (res) {}
    );

</script>

The Okta Sign-In Widget renders in the sign-in page when your app's sign-in page controller is triggered.

Important: In Okta Sign-In Widget version 7+, Identity Engine is enabled by default. If you’re using an earlier version than 7, you must explicitly enable Identity Engine features by setting config.useInteractionCodeFlow = true; in the configuration settings shown in the previous example. If you’re using version 7+ and you want to use Okta Classic Engine rather than Identity Engine, specify config.useClassicEngine = true; in the configuration settings.

3: Run your app

The final step is to run your app. If the Sign-In Widget and your Okta org are properly configured, then the Okta Sign-In Widget displays in your sign-in page: