Testing workflows for Auth0 Enabled web apps results in failed redirects

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

[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.