Basic sign-in flow using the widget

Identity Engine

Enable a password-only sign-in flow in your web app using the embedded Sign-In Widget.

Note: Passwords are a security vulnerability because they can be easily stolen and are prone to phishing attacks. Give your users the ability to use other authenticators by replacing password-only sign-in experiences with either a password-optional or a multifactor experience.

To learn about a sign-in use case where the password is optional, see Sign in with email only.

---

Learning outcomes

• Enable Sign-In Widget support in your org and app.
• Add a sign-in flow to a server-side web app that uses the Sign-In Widget and requires only a password.

What you need

• An app that uses the embedded Widget and Okta Java Identity Engine SDK (opens new window)
• The Widget and Identity Engine SDK set up for your own app

Sample code

Okta IDX Embedded Sign In Widget + Spring Sample (opens new window)

---

Configuration updates

The Sign-In Widget uses the Interaction Code flow to interact with the Okta Identity Engine.

Ensure that the Interaction Code flow is enabled:

• In your org
• In your authorization server
• In your app integration

To configure your app so it requires only a password, see Set up your Okta org for a password factor-only use case.

Ensure that the Sign-In Redirect URI that you set in your app integration and your app's config file are the same. If you're using the sample app, this should be https://localhost:8080. Where you see ${yourSignInRedirectUri} in this guide, replace it with your sign-in redirect URI.

Summary of steps

The following diagram illustrates the sequence of steps to sign in to an app by using the embedded Sign-In Widget.

Integration steps

Your app displays the sign-in page

Build a sign-in page that captures the user's name and password with the widget. Ensure that the page completes the steps described in Load the widget when the page loads.

The user submits their username and password

When the user submits their credentials, the widget sends a request to Identity Engine to identify the user. This returns an interaction code to the sign-in redirect URI that you configured earlier.

Exchange interaction code for tokens

Handle the callback from the Identity Engine to the sign-in redirect URI.

The Okta Java SDK uses the Spring Boot framework (opens new window) to handle the OAuth 2.0 authentication flow. However, the Spring security framework doesn't understand the interaction code flow. Therefore:

1. Intercept Spring's OAuth authentication code flow.
2. Exchange the interaction code that is obtained from Okta for an access token.
3. Populate the user profile attributes.
4. Construct an OAuth2AuthenticationToken (opens new window) to hand back to Spring's authentication code flow.

@Override
public Authentication attemptAuthentication(
   final HttpServletRequest request, final HttpServletResponse response)
   throws AuthenticationException, IOException {

   final ServletRequestAttributes servletRequestAttributes =
      (ServletRequestAttributes) RequestContextHolder.currentRequestAttributes();
   final HttpSession session = servletRequestAttributes.getRequest().getSession();

   final MultiValueMap<String, String> requestParams =
      OAuth2AuthorizationResponseUtils.toMultiMap(request.getParameterMap());

   final String interactionCode = requestParams.getFirst("interaction_code");
   final String codeVerifier = (String) session.getAttribute("codeVerifier");

   if (!Strings.hasText(interactionCode)) {
      String error = requestParams.getFirst("error");
      String errorDesc = requestParams.getFirst("error_description");
      throw new OAuth2AuthenticationException(
         new OAuth2Error(error, errorDesc, null));
   }

   // exchange the interaction code for an access and refresh tokens
   final JsonNode jsonNode =
      helperUtil.exchangeCodeForToken(interactionCode, codeVerifier);
   final OAuth2AccessToken oAuth2AccessToken =
      helperUtil.buildOAuth2AccessToken(jsonNode);
   final OAuth2RefreshToken oAuth2RefreshToken =
      helperUtil.buildOAuth2RefreshToken(jsonNode);

   // retrieve user properties
   final OAuth2User oauth2User = helperUtil.BuildOAuth2User(request, response);

   final Collection<? extends GrantedAuthority> mappedAuthorities =
      this.authoritiesMapper.mapAuthorities(oauth2User.getAuthorities());
   final OAuth2LoginAuthenticationToken authenticationResult =
      new OAuth2LoginAuthenticationToken(
            clientRegistration, oAuth2AuthorizationExchange,
            oauth2User, mappedAuthorities, oAuth2AccessToken, oAuth2RefreshToken);
   authenticationResult.setDetails(authenticationDetails);

   // return OAuth2AuthenticationToken to Spring
   final OAuth2AuthenticationToken oauth2Authentication =
      new OAuth2AuthenticationToken(
            oauth2User, authenticationResult.getAuthorities(),
            authenticationResult.getClientRegistration().getRegistrationId());
   oauth2Authentication.setDetails(authenticationDetails);
   return oauth2Authentication;
}

Get the user profile information

After the user signs in successfully, request basic user information from the authorization server using the OAuth2AuthenticationToken (opens new window) returned in the previous step.

Map<String, Object> claims = new LinkedHashMap<>();

try {
   // get user claim info from /v1/userinfo endpoint
   String userInfoUrl = normalizedIssuerUri(issuer, "/v1/userinfo");

   HttpHeaders httpHeaders = new HttpHeaders();
   headers.set("Authorization", "Bearer " + oAuth2AccessToken.getTokenValue());
   headers.setAccept(Collections.singletonList(MediaType.APPLICATION_JSON));

   HttpEntity<String> requestEntity = new HttpEntity<>(null, httpHeaders);

   ParameterizedTypeReference<Map<String, Object>> responseType =
      new ParameterizedTypeReference<Map<String, Object>>() { };
   ResponseEntity<Map<String, Object>> responseEntity =
      restTemplate.exchange(userInfoUrl, HttpMethod.GET, requestEntity, responseType);

   claims = responseEntity.getBody();
} catch (Exception e) {
   logger.error("Error retrieving profile from user info endpoint", e);
}