The user clicks the sign-in page link

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.

Get the data to initialize the Sign-In Widget

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)

 }

Display the Sign-In Widget using initialization 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.40.5

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

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

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.

Complete the sign-in page load

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