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('/');
      });
    });
  });
})

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