Cypress Custom Command for Okta Login

oktaLogin.js

Cypress.Commands.add('loginOkta', () => {
  const optionsSessionToken = {
    method: 'POST',
    url: Cypress.env('session_token_url'),
    body: {
      username: Cypress.env('username'),
      password: Cypress.env('password'),
      options: {
        warnBeforePasswordExpired: 'true'
      }
    }
  }

  cy.request(optionsSessionToken).then(response => {
    const sessionToken = response.body.sessionToken;
    const qs = {
      client_id: Cypress.env('client_id'),
      code_challenge: Cypress.env('code_challenge'),
      state: Cypress.env('state'),
      nonce: Cypress.env('nonce'),
      redirect_uri: Cypress.env('redirect_uri'),
      code_challenge_method: 'S256',
      response_mode: 'fragment',
      response_type: 'code',
      scope: ['openid', 'profile', 'email'],
      sessionToken: sessionToken
    }

    cy.request({
      method: 'GET',
      url: Cypress.env('auth_token_url'),
      form: true,
      followRedirect: false,
      qs: qs
    }).then(responseWithToken => {
      const redirectUrl = responseWithToken.redirectedToUrl;

      const accessToken = redirectUrl
      .substring(redirectUrl.indexOf('access_token'))
      .split('=')[1]
      .split('&')[0];

      cy.wrap(accessToken).as('accessToken');

      cy.visit(redirectUrl).then(() => {
        cy.visit('/');
      });
    });
  });
})

Hi @boda234baran,

Yes, this solution is working for me and my team so far.

I got those details by analyzing the POST requests when doing a manual login into my app:

Bear in mind that each environment you have configured in okta will have its own set of properties.
Then it is configured in my env.json properties file

, I don't know the value of code_challenge. It works for me to configure it as empty
"code_challenge": "",

Hi, I am newbie to cypress, how can I integrate this code for okta authentication into my existing tests on Cypress?

Thank you

Here is the solution that worked for me. Two things to point out:

• Your company might be using custom OKTA_AUTHORIZATION_SERVER_ID and not default that is used in the most doc examples
• You should be able to use dummy values for state and nonce

Certain values (like scope) might be different for your Okta configuration, but you should be able to identify them by inspecting the network tab.

Cypress.Commands.add('oktaApiLogin', ({ email, password, url }) => {
  const optionsSessionToken = {
    method: 'POST',
    url: `${Cypress.env('OKTA_DOMAIN')}/api/v1/authn`,
    body: {
      username: email,
      password,
      options: {
        warnBeforePasswordExpired: 'true',
      },
    },
  };

  cy.request(optionsSessionToken).then((response) => {
    const { sessionToken } = response.body;
    cy.log(`sessionToken: ${sessionToken}`);

    const qs = {
      response_type: 'code',
      client_id: Cypress.env('OKTA_CLIENT_ID'),
      state: 'test-state',
      nonce: 'test-nonce',
      redirect_uri: Cypress.env('OKTA_REDIRECT_URI'),
      scope: 'openid offline_access email',
      sessionToken,
    };

    cy.request({
      method: 'GET',
      url: `${Cypress.env('OKTA_DOMAIN')}/oauth2/${Cypress.env(
        'OKTA_AUTHORIZATION_SERVER_ID'
      )}/v1/authorize`,
      form: true,
      followRedirect: false,
      qs,
    }).then((responseWithToken) => {
      const redirectUrl = responseWithToken.redirectedToUrl;
      cy.log('responseWithToken:', responseWithToken);
      cy.log('redirectUrl:', redirectUrl);

      cy.request({
        method: 'GET',
        url: redirectUrl,
        followRedirect: false,
      });

      cy.visit(url);
    });
  });
});

Okta supports hosting a sign-in page under your own domain with Embedded Okta Sign-In Widget. In this way, since you use your domain, cypress work seamlessly.

Okta provides a sign-in page, available at your organization's URL, which allows the user to complete the entire authorization flow, start an SSO (Single Sign-On) session, and set the Okta session cookie in the web browser. You can customize this page with a background image and logo. By default, signing in on this page redirects the user to the Okta user dashboard.

See the GitHub repository for the implementation

PS: Use the embed link, so the login process ends with the application you want to test instead of Okta dashboard.

Edit:
Important update: Cypress has introduced cy.origin() command with version 9.6.0 that allows you to visit multiple origins in a single test. See here for details.

https://dev.to/cypress/multi-domain-origin-testing-in-cypress-1aog

Hey I'm getting this error when running tests/
cy.request() requires a url. You did not provide a url

Should optionsSessionToken have a url in it to provide?

@iamskok hi, is there any example to test if there is MFA enable in okta, In my app we have enabled the okta sms MFA.

Hi, i´m newbie in cypress. how to implement Okta DSSO (Desktop single sign-on) authentication using cypress? with DSSO there is no prompt page to enter user/password for authentication, seems that okta does the authentication in the background when i login into the computer. Since cypress use its own browser to run the automation when it hits the app URL i´m getting an error message saying the i´m not allowed to processed since i´m not authenticated. Please help.
Thanks in advance