Sign in with email only

Identity Engine

Enable an email-only sign-in flow in your app using the embedded Okta Sign-In Widget.

Learning outcomes

• Configure your Okta org to enable a user to sign in without a password.
• Integrate a password-optional sign-in flow into an app using the Sign-In Widget.

What you need

• Set up the Sign-In Widget and SDK for your own app
  

Sample code

• Sample ASP.NET Core and Embedded Sign-In Widget Sample Application (opens new window)

---

Update configurations

Before you can start integrating password-optional sign-up flows in your app,

Set up your Okta org for a password-optional use case

. See also

Recommended best practices

.

Note: To test the sign-in integration, you must use a user with an enrolled email authenticator.

Integrate

Summary of steps

The following summarizes the steps involved in the password-optional sign-in flow.

The user submits their username

The user enters their username and clicks Next to start the sign-in flow.

The user starts the email challenge flow

The Sign-In Widget displays a page for the user to start verifying their identity by email. Email is the only choice because:

• The user has only enrolled the email authenticator.
• Email is the only allowed authentication factor in your app integration's app sign-in policy.

The user clicks Send me an email to begin the email challenge flow.

The user verifies their identity with the email authenticator

Okta Identity Engine sends a verification email to the user's primary email address. The email gives the user two ways to verify their identity:

• Copy a one-time passcode (OTP) from the email into the Sign-In Widget and submit it for verification.
• Click a "magic link" in the email that submits the OTP to Identity Engine on your behalf.

Your app requires no changes to use OTP since it's built into the Sign-In Widget. However, using magic links requires you to:

• Ensure that the Sign-In Widget is always initialized with OTP and state values. See the Embedded Okta Sign-In Widget fundamentals guide for details.
• Create an endpoint to handle the callback from the magic link.

The following code defines an endpoint that receives the OTP and state values from the magic link. It then attempts to retrieve the current Sign-In Widget configuration details from the session state. If successful, the OTP and state values are added to the configuration details and passed to the widget. If unsuccessful, the code assumes that the callback hasn't come from the same browser and prompts the user accordingly.

public async Task<ActionResult> Callback(
   string state, string otp, string error = null, string error_description = null)
{
   // handle errors if error is not null

   SignInWidgetConfiguration siwConfig = Session["siwConfig"] as SignInWidgetConfiguration;
   if (siwConfig != null)
   {
       siwConfig.Otp = otp;
       siwConfig.State = state;
       return View("SignInWidget", siwConfig);
   }

   return View(new MagicLinkCallbackModel {
      Message = $"Please enter the OTP '{otp}' in the original browser tab to finish the flow."
   });
}

Note: For more information on magic links and OTP, including customizations and complete user journeys, see Email Magic Links overview.

Your app handles an authentication success response

After the user successfully verifies their identity, Identity Engine sends an interaction code in a query parameter to ${signInRedirectURI}. For example, http://localhost:44314/interactioncode/callback?interaction_code=2JFmObNY8snovJP6_UK5gI_l7RQ-....

Create an endpoint that calls idxClient.RedeemInteractionCodeAsync() to exchange the interaction code for access tokens and AuthenticationHelper.GetIdentityFromTokenResponseAsync() to retrieve the user's OIDC claims information and pass it into your application. The user has now signed in.

public async Task<ActionResult> Callback(
   string state = null, string interaction_code = null, string error = null, string error_description = null)
{
   try
   {
       IIdxContext idxContext = Session[state] as IIdxContext;

       // handle errors if error is not null or interaction_code is null

       Okta.Idx.Sdk.TokenResponse tokens =
         await _idxClient.RedeemInteractionCodeAsync(idxContext, interaction_code);
       ClaimsIdentity identity =
         await AuthenticationHelper.GetIdentityFromTokenResponseAsync(_idxClient.Configuration, tokens);
       _authenticationManager.SignIn(new AuthenticationProperties { IsPersistent = false }, identity);

       return RedirectToAction("Index", "Home");
   }
   catch (Exception ex)
   {
      return View("Error", new InteractionCodeErrorViewModel {
         Error = ex.GetType().Name, ErrorDescription = ex.Message
      });
   }
}

Store these tokens for future requests and redirect the user to the default page after a successful sign-in attempt.