Basic sign-in flow with the password factor

Identity Engine

Enable a password-only sign-in flow in your web app using the embedded SDK.

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

Add a password-only sign-in flow to a server-side web app.

What you need

• An app that uses the embedded Okta Auth JavaScript SDK (opens new window)
• Identity Engine SDK set up for your own app

Sample code

Node.js Identity Engine sample app (opens new window)

---

Configuration updates

To configure your app so that it requires only a password, see

Set up your Okta org for a password factor-only use case

.

Summary of steps

The following diagram summarizes the steps involved in a sign-in flow using only a password:

Integration steps

Your app displays the sign-in page

Build a sign-in page that captures both the user's name and their password.

The user submits their username and password

When the user submits their username and password, pass them as parameters to OktaAuth.idx.authenticate() (opens new window).

const authClient = getAuthClient(req);
const transaction = await authClient.idx.authenticate({ username, password });

Your app handles an authentication success response

authenticate() returns a transaction object with a status property indicating the current state of the sign-in flow. Handle the returned IdxStatus value accordingly:

Success status

When the user correctly supplies their password, IdxStatus equals IdxStatus.SUCCESS. Call tokenManager.setTokens() to save the tokens retrieved from the response for future requests, and then redirect the user back to the home page. The user is now signed in.

  const { nextStep, tokens, status, error, } = transaction;
  // Persist states to session
  req.setFlowStates({ idx: transaction });

  switch (status) {
    case IdxStatus.SUCCESS:
      // Save tokens to storage (req.session)
      authClient.tokenManager.setTokens(tokens);
      // Redirect back to home page
      res.redirect('/');
      return;

   // Handle other statuses
}

Other authentication statuses

Handle other returned IdxStatus cases if the user didn't sign in successfully or there are other factors to verify. For example:

switch (status) {
   case IdxStatus.SUCCESS:
      // handle success
   return;
   case IdxStatus.PENDING:
      // Proceed to next step
      try {
         if (!proceed({ req, res, nextStep })) {
            next(new Error(`
            Oops! The current flow cannot support the policy configuration in your org.
            `));
         }
      } catch (err) {
         next(err);
      }
   return;
   case IdxStatus.FAILURE:
      authClient.transactionManager.clear();
      next(error);
   return;
   case IdxStatus.TERMINAL:
      redirect({ req, res, path: '/terminal' });
   return;
   case IdxStatus.CANCELED:
      res.redirect('/');
   return;
}

Get the user profile information

After the user signs in successfully, request basic user information from the authorization server using the tokens that were returned in the previous step.

module.exports = async function userContext(req, res, next) {
  const authClient = getAuthClient(req);
  const { idToken, accessToken, refreshToken } = authClient.tokenManager.getTokensSync();
  if (idToken && accessToken) {
    const userinfo = await authClient.token.getUserInfo(accessToken, idToken);
    req.userContext = {
      userinfo,
      tokens: {
        idToken, accessToken, refreshToken
      }
    };
  }

  next();
};