Using Cypress.io with Auth0 login

[smadmin]

I followed the Auth0 tutorial (End-to-End Testing with Cypress and Auth0) for using Cypress.io (in an Angular app) but I’m not able to get Cypress to persist a successful sign-in.

I am able to sign in (using Auth0) with the Cypress Login command, but as soon as I redirect to another page, my auth guard (which checks for Auth0 login status), prompts for login again and I get this error in Cypress:

myapp.auth0.com refused to connect.

And in the console: Refused to frame 'https://myapp.us.auth0.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

So the auth guard is not finding the login. I suspect this is because Cypress is clearing cookies and local storage, but I haven’t found a workaround. When Auth0 checks for authentication, what EXACTLY does it check? I can whitelist cookies if I knew which ones to preserve.

I tried adding this (from some old code I had) to the top of the test file, but it didn’t help.

const clear = Cypress.LocalStorage.clear
Cypress.LocalStorage.clear = function (keys, ls, rs) {
  if (keys) {  }
}

And in the test:

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

...

afterEach(() => {
    cy.saveLocalStorageCache();
  });

Thanks!

[ddecarme]

Hey @smadmin, we recently ran across a lot of issues with Auth0 integrating with Cypress and eventually got in contact with someone on the Cypress team about it.

Check out this Github issue, and the thread itself for some more context.

https://github.com/cypress-io/cypress/issues/5919#issuecomment-671963102

Long of the short of it, the Cypress team is working on some official integration documentation for Auth0

[konrad.sopala]

Thanks for sharing that @ddecarme!