Cypress Issues Integrating Auth0 with cy.origin and cy.session

Question

I am currently facing a persistent issue while testing my application with Cypress, particularly when attempting to handle login through Auth0. To work around cross-origin issues, I followed the documentation and used cy.origin and cy.session, but have not been able to overcome the problem. :(

The error I got:

CypressError: Timed out retrying after 4000ms: The command was expected to run against origin https://xxxxxxxx.auth0.com but the application is at origin https://xxxxxxxxx-app-web.vercel.app. This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly. Using cy.origin() to wrap the commands run on https://xxxxxxxxxx-app-web.vercel.app will likely fix this issue. cy.origin('https://xxxxxxxxx-app-web.vercel.app', () => { <commands targeting https://xxxxxxxxxxx-app-web.vercel.app go here> })

The setup in cy.session means the second argument being passed which aims directly to the cy.origin part.

Despite going through Auth0 and Cypress documentation, I haven't been able to find a solution, I'm quite new to cypress and automation

For reference, here's my commands.js configuration:

const baseUrl = Cypress.config('baseUrl')

Cypress.Commands.add('loginSession', (email, password) => {
  cy.session(([email, password]), () => {
    cy.visit(baseUrl); 

    cy.origin(Cypress.env('CYPRESS_AUTH0_USER'), 
      {args: [email, password]},
      ([email, password]) => {
        cy.get('#username').type(email); 
        cy.get('#password').type(password); 
        cy.get('button[data-action-button-primary="true"]').click(); 
      }
    );
    cy.url().should('include', Cypress.config('baseUrl'));
  })
});

My test:

describe('Main E2E Flow', () => {
  beforeEach(() => {
    cy.loginSession(Cypress.env('CYPRESS_EMAIL'), Cypress.env('CYPRESS_PASSWORD'));
  });

  it('Checks for Create Profile button for unauthenticated users', () => {
    cy.contains('Create a Profile').should('exist');
  });
});

Any assistance or suggestions on how to correctly configure the cy.origin and cy.session for Auth0 authentication in Cypress would be greatly appreciated.

Answer 1

It looks like the wrong domain (the app domain) is used as the URL parameter for the cy.origin() command.

Since the controls accessed inside cy.origin() are auth-ish, they are probably served from the auth domain.

cy.origin('https://xxxxxxxx.auth0.com',     // point at the domain where callback
                                            // code is working
  {args: [email, password]},
  ([email, password]) => {
    cy.get('#username').type(email); 
    cy.get('#password').type(password); 
    cy.get('button[data-action-button-primary="true"]').click(); 
  }
)

That's the first step to try. I've also seen mention that the code that navigates to the auth domain should also be inside the cy.origin() callback when there is a redirect involved

Ref: cy-origin-and-immediate-redirect

cy.origin('https://xxxxxxxx.auth0.com', {args: [email, password]}, ([email, password]) => {

    cy.visit('https://xxxxxxxxx-app-web.vercel.app')  // redirects to auth

    cy.get('#username').type(email); 
    cy.get('#password').type(password); 
    cy.get('button[data-action-button-primary="true"]').click(); 
  }
)

Not related, but you can also try putting the cy.url() check as a validation step for cy.session()

Cypress.Commands.add('loginSession', (email, password) => {
  cy.session(([email, password]), () => {
    cy.visit(baseUrl); 

    cy.origin(Cypress.env('CYPRESS_AUTH0_USER'), // check is actually the auth URL
      {args: [email, password]},
      ([email, password]) => {
        cy.get('#username').type(email); 
        cy.get('#password').type(password); 
        cy.get('button[data-action-button-primary="true"]').click(); 
      }
    )
  },
  {
    validate() {
      // expect auth has returned to baseUrl (valid login only)
      cy.url().should('include', Cypress.config('baseUrl'))
    },
  })
})

Answer 2

As @SuchAnIgnorantThingToDo-UKR pointed out based in the Ref: cy.origin() and immediate redirect there was missing a Click in the Login button which redirectes back to the Vercel App, that is why user remained in Auth0 trying to validate things that should be on vercel App URL. To maintain the session active (creating and recreating it for each "it" blocks I added a Visit (url) at the beforeEach.

    const baseUrl = Cypress.config('baseUrl')
    Cypress.Commands.add('loginSession', (email, password) => {
      cy.session(([email, password]), () => {
        cy.visit(baseUrl);
        **cy.contains('Sign In').click();**
        cy.origin(Cypress.env('CYPRESS_AUTH0_USER'),
          {args: [email, password]},
          ([email, password]) => {
            cy.get('#username').type(email);
            cy.get('#password').type(password);
            cy.get('button[data-action-button-primary="true"]').click();
          }
        );
      })
    });

BeforeEach for the Tests:

 describe('authorized User Validations', () => {
  beforeEach(() => {
    cy.loginSession(
    Cypress.env('CYPRESS_EMAIL'), 
    Cypress.env('CYPRESS_PASSWORD'));
    **cy.visit(baseUrl);**
  });

This helped me a lot too as Ref: How to test multiple domains or origins with Cypress