Cypress: Testing workflows for Auth0 Enabled web apps results in failed redirects

[ChaseBig]

Our web app has recently been integrated with Auth0 login so my tests all need to be updated to accommodate Auth0 and it's redirect functionality.

I was able to find this Auth0 article for getting cypress to work with Auth0 apps and have done everything stated in the tutorial but the Cypress GUI is failing to handle the redirects correctly. https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/

Whenever I run my tests, the test steps are run through and seem to be working correctly and I'm correctly authenticated with Auth0 but Cypress keeps redirecting itself from the correct URL to just showing data:, in the URL bar. I have followed the tutorial exactly and am positive all of my Auth0 env variables are correct. For whatever reason, the cy.visit('xxx') causes the redirect logic to freak out and I end up with it getting stuck at data:, for whatever reason.

(I hid the auth0 url for privacy. The url syntax is as follows: POST 200 https://company-dev.auth0.com/oauth/token)

Desired behavior:

The page should redirect to the intended post-auth0 authentication url.

Steps to reproduce: (app code and test code)

Follow this tutorial for an Auth0 app and run it.

login_test.spec.js

context('Confirm Correct Admin Functionality ', () => {
  beforeEach(() => {
    cy.on('uncaught:exception', err => {
      expect(err.message).to.include('Ignoring error for now')
      return false
    })
    // indexedDB.deleteDatabase('localforage')
    // cy.clearLocalStorage()
    // cy.clearCookies()
    cy.viewport(1920, 1080)
  })

  // Test 1
  it('Confirm basic Auth0 login functionality', () => {
    // Cypress.currentTest.retries(3)
    cy.visit('http://localhost:5002/')
    cy.log('finds the auth token input box, then sign in')
cy.adminLogin()
      .then(resp => {
        return resp.body
      })
      .then(body => {
        const { access_token, expires_in, id_token } = body
        const auth0State = {
          nonce: '',
          state: 'some-random-state'
        }
        // *******************************
        // THIS DOESN'T WORK, THIS CAUSES CYPRESS TO TRY AND VISIT A FILE-PATH RATHER THAN A URL
        // const callbackUrl = `/callback#access_token=${access_token}&scope=openid&id_token=${id_token}&expires_in=${expires_in}&token_type=Bearer&state=${auth0State.state}`;
        // cy.visit(callbackUrl, {
        // *******************************
        // Instead, I'm bypassing the const and passing in the direct url
        cy.visit(
          `http://localhost:5002/?callback#access_token=${access_token}&scope=openid&id_token=${id_token}&expires_in=${expires_in}&token_type=Bearer&state=${
            auth0State.state
          }`,
          {
            onBeforeLoad(win) {
              win.document.cookie =
                'com.auth0.auth.some-random-state=' + JSON.stringify(auth0State)
            }
          }
        )
      })
    cy.visit('http://localhost:5002/properties')
    cy.confirmAdminLogin()
    cy.log('Admin Login Successful')
  })
})

commands.js

Cypress.Commands.add('adminLogin', (overrides = {}) => {
  Cypress.log({
    name: 'loginViaAuth0'
  })

  const options = {
    method: 'POST',
    url: Cypress.env('auth_url'),
    body: {
      grant_type: 'password',
      username: Cypress.env('auth_username'),
      password: Cypress.env('auth_password'),
      audience: Cypress.env('auth_audience'),
      scope: 'openid profile email',
      client_id: Cypress.env('auth_client_id'),
      client_secret: Cypress.env('auth_client_secret')
    }
  }
  cy.request(options)
})

Versions

Cypress v3.7.0
Mac OSX: Most recent Catalina version
CircleCi CD/CI

[ianhatton]

We were having the exact same issue as above. We managed to get this passing when running the tests in the GUI by using:

cy.setCookie("com.auth0.auth.some-random-state", JSON.stringify(auth0State));
cy.setCookie("SameSite", "None");
cy.visit(callbackUrl);

instead of the onBeforeLoad function, but our tests still fail with a cross-origin error when running through the command line.

[ChaseBig]

@ianhatton Thank you so much for responding! I figured I had just gotten myself into another unfixable Cypress nuance. I am going to give this a shot!

@wyang36

[jennifer-shehane]

Issues in our GitHub repo are reserved for potential bugs or feature requests. This issue will be closed since it appears to be neither a bug nor a feature request.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

[ChaseBig]

This is an issue. Cypress doesn't seem to work with Auth0 and especially not when run from electron browser.

I have been searching every online article I can possibly find and I have posted in the gitter chat multiple times in the last two weeks but no one responds.

No one seems to know anything about how to solve this issue.

[jennifer-shehane]

@ChaseBig Cypress does work with Auth0. We use Auth0 ourselves in our Dashboard product and have the login tested. We agree that it should be better documented but to claim it does not work with Auth0 is not correct.

[sandrinodimattia]

I shared a post here with detailed steps on how to use Cypress with Auth0 (for SPAs and Regular Web Applications): https://sandrino.dev/blog/writing-cypress-e2e-tests-with-auth0

[drewdecarme]

@jennifer-shehane can you share your configuration/setup?

[jennifer-shehane]

Our team is working on publishing a better guidance for testing Auth0 through our Real World App. There’s a guide in progress here where you can leave comments: https://gist.github.com/kevinold/31dbbebd1cb75f311d798f5bc81574a4

There’s a branch that is work in progress here: https://github.com/cypress-io/cypress-realworld-app/tree/kevin/auth0

[drewdecarme]

@jennifer-shehane That's huge, thank you! There's a dearth of content out there on how to properly interface the Auth0 universal login experience. Do you have an ETA on when you and your team will be ready to merge?

[kevinold]

Just a note that the gist (https://gist.github.com/kevinold/31dbbebd1cb75f311d798f5bc81574a4) has been updated to use a programmatic login vs UI based login.

An updated work in progress branch is here: https://github.com/cypress-io/cypress-realworld-app/tree/kevin/auth0-programmatic-login