Error when trying to log in with Auth0 in Cypress tests

Question

Our application is only accessible to authenticated users and we use Auth0 for the authentication.

We have started writing Cypress tests and we try to log in using Auth0 JavaScript client before each test. The first test always passes without any problems but all other tests fail with the following error:

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://ourdomain.eu.auth0.com/co/authenticate': Document is already detached.

Do we need to make all API calls manually using cy.request() in order to prevent such errors or is there any way how to make Auth0 client work?

Answer 1

I had similar issues with Auth0, but I don't remember getting the error you are getting. In a before block I log in. I call this method in a before() block. Not sure this will help you but it was worth a shot. There should be a better way of doing it and I tried calling their API to do it, but I could never get it to work.. so I hacked this up

Cypress.Commands.add('loginAuth0', () => {
    cy.visit('');
    cy.get('#log-in').click();
    cy.get('[type="email"]').type('MYEMAIL@DOMAIN>COM');
    cy.get('[type="password"]').type('MYPASSWORD');
    cy.get('.auth0-label-submit').click();
    cy.url().should('include', '/callback');
})

in a beforeEach() block I call this method

var accessToken = null; ** this is a global variable at top of file
Cypress.Commands.add('resetLocalStorage', () => {
    if (!accessToken) {
        accessToken = localStorage.getItem('access_token');
    }
    window.localStorage.setItem('access_token', accessToken);

}

in my cypress.json file I turn off chromeWebSecurity

"chromeWebSecurity": false

My spec file you will see something like this

 before(() => {
        cy.loginAuth0();
        cy.wait(2000); 
    })    

    beforeEach(() => {
        cy.resetLocalStorage();
    })