Instructions for

Load the widget

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

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

Integration steps

The first step is when the user clicks the sign-in link. This link directs the user to the sign-in page where the Sign-In Widget is embedded. On the sample app's landing page, this link is labeled Login and is in the upper-right corner of the page.

Obtain the parameters required to display the Sign-In Widget when the sign-in page loads. Source these parameters using different methods. The main parameters include:

Client ID, issuer, scopes—sourced from the configuration settings
Interaction Handle—obtained from the /interact endpoint
PKCE parameters, otp, state, and nonce—generated values
Base URL—derived from the issuer URL

These parameters are passed to the Sign-In Widget during page load. The sample app sets most of these values in the LoginHandler method.

func (s *Server) LoginHandler(w http.ResponseWriter, r *http.Request) {
  type customData struct {
    IsAuthenticated   bool
    BaseUrl           string
    ClientId          string
    Issuer            string
    Otp                string
    State             string
    Nonce             string
    InteractionHandle string
    Pkce              *PKCE
  }

  //Get PKCE info (code verifier, code challenge, and challenge method)
  s.pkce, err = createPKCEData()

  //Place in session
  session.Values["pkce_code_verifier"] = s.pkce.CodeVerifier
  session.Values["pkce_code_challenge"] = s.pkce.CodeChallenge
  session.Values["pkce_code_challenge_method"] = s.pkce.CodeChallengeMethod
  session.Save(r, w)

  //Get nonce
  nonce, err := generateNonce()

  //Get interaction handle
  interactionHandle, err := s.getInteractionHandle(s.pkce.CodeChallenge)
  s.interactionHandle = interactionHandle

  //Get Issuer
  issuerURL := fmt.Sprintf("%s/", s.config.Okta.IDX.Issuer)
  issuerParts, err := url.Parse(issuerURL)
  baseUrl := issuerParts.Scheme + "://" + issuerParts.Hostname()

  //Setup the data for the Sign-In Widget
  data := customData{
    IsAuthenticated:   s.isAuthenticated(r),
    BaseUrl:           baseUrl,
    ClientId:          s.config.Okta.IDX.ClientID,
    Issuer:            s.config.Okta.IDX.Issuer,
    State:             s.state,
    Nonce:             nonce,
    Pkce:              s.pkce,
    Otp:              s.otp,
    InteractionHandle: interactionHandle,
  }

  //Load the page with the Sign-In Widget and data
  err = s.tpl.ExecuteTemplate(w, "login.gohtml", data)

 }

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

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

Next, add a container div element for the Sign-In Widget.

<div id="okta-signin-widget-container"></div>

Finally, add the JavaScript that loads the Sign-In Widget into the div element. The parameters set in step 2 are being used to initialize the OktaSignIn object.

<script type="text/javascript">
  var config = {};
  config.baseUrl = "{{ .BaseUrl }}";
  config.clientId = "{{ .ClientId }}";
  config.redirectUri = "http://localhost:8000/login/callback";
  config.interactionHandle = "{{ .InteractionHandle }}";
  config.codeChallenge = "{{ .Pkce.CodeChallenge }}";
  config.codeChallengeMethod = "{{ .Pkce.CodeChallengeMethod }}";
  config.debug = true;
  config.authParams = {
    issuer: "{{ .Issuer }}",
    scopes: ['openid', 'profile', 'email'],
  };

   const signIn = new OktaSignIn({
    el: '#okta-signin-widget-container',
    ...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()
    .catch(err => {
      console.log('Error happen in showSignInAndRedirect: ', err);
    });
</script>

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 in the previous code snippet. 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.

After the sign-in page is successfully loaded, the embedded Sign-In Widget appears:

Screenshot of basic Okta Sign-In Widget

Edit This Page On GitHub