Failed to execute 'postMessage' on 'DOMWindow'

Current behavior

When using the Okta login method given in Cypress docs, I see the following error in the console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3001') does not match the recipient window's origin ('http://localhost:49528').
onWindowLoadHandler @ authorize?client_id=<hidden>&code_challenge=3KwOJPf4bItZwGMJmDZKmSPPpv2VMgs6XYZP94x7ZWM&code_challenge_method=S256&nonce=L9EuCQI55v5BKTrD8IWrqWupuGd9AYkrdMwvwLoZ5asvZKgHRn8yJSI2hpAO9iRV&prompt=none&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fauth%2Flogin&response_mode=okta_post_message&response_type=code&sessionToken=<hidden>&state=489BKJ0Aaq3462jkWTOySD8vKtWwtRgIuNAf7e0CIEG04NYZES7UClfKSChYYNRT&scope=openid email:39

Desired behavior

The okta login should complete without errors, and the token data should be saved in localStorage.

Test code to reproduce

import { OktaAuth } from "@okta/okta-auth-js";

Cypress.Commands.add("loginOkta", () => {
  console.log("Running loginOkta...");
  cy.request({
    method: "POST",
    url: `https://${Cypress.env("okta_domain")}/api/v1/authn`,
    body: {
      username: Cypress.env("username"),
      password: Cypress.env("password"),
    },
  })
  .then(({ body }) => {
    console.log("BODY ->", body);
    const user = body._embedded.user;
    const config = {
      issuer: `https://${Cypress.env("okta_domain")}/oauth2/default`,
      clientId: Cypress.env("client_id"),
      redirectUri: Cypress.env("redirect_uri"),
      scope: ["openid", "email", "profile"],
    };

    const authClient = new OktaAuth(config);
    console.log("Created authClient");

    return authClient.token
      .getWithoutPrompt({ sessionToken: body.sessionToken })
      .then((value) => {
        console.log("VALUE ->", value);
        return value;
      })
      .then(({ tokens }) => {
        const userItem = {
          token: tokens.accessToken.value,
          user: {
            sub: user.id,
            email: user.profile.login,
            given_name: user.profile.firstName,
            family_name: user.profile.lastName,
            preferred_username: user.profile.login,
          },
        };

        window.localStorage.setItem("oktaCypress", JSON.stringify(userItem));

        log.snapshot("after");
        log.end();
      });
  });
});

When I run this I see the following output in the browser console:

Running loginOkta...
BODY -> Object
Created authClient
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3001') does not match the recipient window's origin ('http://localhost:49528').

So it appears to fail in the call to getWithoutPrompt(), since VALUE -> not printed to the console.

I also tried adding the Cypress config mentioned here, but it made no difference.

Versions

cypress 7.2.0 @okta/okta-auth-js 4.9.0

[humancore-olga]

Almost 2 months waiting for an answer on this subject and nothing yet… Is it going to be fixed at some point or just ignored?

[AtofStryker]

@artem-gavrylenko-tvscientific I believe has hit the nail on the head here.

Likely to avoid any issues with programmatic login, you should set your baseUrl to your expected application origin. @dustin-rcg your cy.request happens before your baseUrl is established via a cy.visit. Because of this, postMessage looks to fail from the API due to security reasons. Setting your base url to http://localhost:3001 will set window.top for you to the correct domain without having to do a visit and should fix the error. To set baseUrl for your needs, please check out our docs on setting environment variables!

This same issue came up in #23733, in which a reproduction repository was provided. I have a pull request open to show how to fix this issue with cy.request I have discussed above, as well as how to log into okta using the experimentalSessionAndOrigin commands cy.origin and cy.request. Both work and can be used to whatever preference you have.

Cheers and let us know if you have any issues moving forward!

Note: Also documented in https://github.com/cypress-io/cypress/issues/23733#issuecomment-1287438828