I am trying to create a login mand for Cypress and noticed their blog on how to do this does not match the expected values for the Auth0 React SDK. It appears they have used a custom express app to handle the login vs using the SDK to handle this (as per the offical Auth0 documentation).

The Cypress official documentation produces a local storage key value pair that looks like the below.

const item = {
        body: {
          decodedToken: {
            claims,
            user: { ... },
            audience,
            client_id,
          },
        },
        expiresAt: exp,
      }

window.localStorage.setItem('auth0Cypress', JSON.stringify(item))

However the one created by the Auth0 React SDK produces something similar to:

const item = {
      body: {
        access_token,
        audience,
        client_id,
        decodedToken: {
          claims,
          user: { ... },
          encoded,
          header
        },
        expires_in,
        id_token,
        scope,
        token_type
      },
      expiresAt: exp
    }

window.localStorage.setItem(`@@auth0spajs@@::${client_id}::${audience}::${scope}`, JSON.stringify(item))

I am able to get the https://${auth)_domain}/oauth/token request working, however am not able to work out how to get the data from the response in a way for it to fit the data structure the Auth0 react SDK wants it in.

Has anyone had any success with this?

---

After doing some exploring, it appears the response I get back from the /oauth/token does not contain all of the fields that the value the Auth0 React SDK outputs when it signs in.

I have also noticed that Auth0 has a guide on how to integrate with Cypress however it does not use this SDK, instead it uses the SPA SDK. That guide also uses a custom login form, where I am using the LockUI.

One thing to note is that I am not using an backend to authenticate (like in most of the examples). I using the loginWithRedirect to login as per the offical remendation.

I am trying to create a login mand for Cypress and noticed their blog on how to do this does not match the expected values for the Auth0 React SDK. It appears they have used a custom express app to handle the login vs using the SDK to handle this (as per the offical Auth0 documentation).

The Cypress official documentation produces a local storage key value pair that looks like the below.

const item = {
        body: {
          decodedToken: {
            claims,
            user: { ... },
            audience,
            client_id,
          },
        },
        expiresAt: exp,
      }

window.localStorage.setItem('auth0Cypress', JSON.stringify(item))

However the one created by the Auth0 React SDK produces something similar to:

const item = {
      body: {
        access_token,
        audience,
        client_id,
        decodedToken: {
          claims,
          user: { ... },
          encoded,
          header
        },
        expires_in,
        id_token,
        scope,
        token_type
      },
      expiresAt: exp
    }

window.localStorage.setItem(`@@auth0spajs@@::${client_id}::${audience}::${scope}`, JSON.stringify(item))

I am able to get the https://${auth)_domain}/oauth/token request working, however am not able to work out how to get the data from the response in a way for it to fit the data structure the Auth0 react SDK wants it in.

Has anyone had any success with this?

---

After doing some exploring, it appears the response I get back from the /oauth/token does not contain all of the fields that the value the Auth0 React SDK outputs when it signs in.

I have also noticed that Auth0 has a guide on how to integrate with Cypress however it does not use this SDK, instead it uses the SPA SDK. That guide also uses a custom login form, where I am using the LockUI.

One thing to note is that I am not using an backend to authenticate (like in most of the examples). I using the loginWithRedirect to login as per the offical remendation.

• javascript
• reactjs
• cypress
• auth0

Share Improve this question Follow edited Apr 27, 2021 at 9:47 Charklewis asked Apr 23, 2021 at 0:39 CharklewisCharklewis 5,70166 gold badges4040 silver badges8282 bronze badges 4

• Check this article auth0./blog/end-to-end-testing-with-cypress-and-auth0 – Alexander Mokin Commented Apr 29, 2021 at 22:58
• The SKD used in this guide is not the same as the remended SDK for React. It makes use of APIs such as checkSession() which are not exposed in the official React SDK. – Charklewis Commented Apr 30, 2021 at 0:53
• Don't worry about checkSession. You don't have to call it explicitly. Auth0 React SDK is simply a wrapper fro atuh0 spa sdk so it calls checkSession implicitly all the time (e.g. when you create a client). When you do redirect to callback with a token, if you set up everything properly in Auth0 React SDK, your sdk will set all required cookies and storage properties. – Alexander Mokin Commented Apr 30, 2021 at 14:16
• You can also go through the whole Lock workflow with lockUI see example here github./auth0/auth0-spa-js/blob/… – Alexander Mokin Commented Apr 30, 2021 at 14:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

After a bit of investigating and help from the Auth0 team, I was successful in making this work.

Here is the code I used:

Cypress.Commands.add("login", () => {
  cy.clearLocalStorage();

  const email = "";
  const password = "";
  const client_id = "";
  const client_secret = "";
  const audience = "";
  const scope = "";

  cy.request({
    method: "POST",
    url: "",
    body: {
      grant_type: "password",
      username: email,
      password,
      audience,
      scope,
      client_id,
      client_secret,
    },
  }).then(({ body: { access_token, expires_in, id_token, token_type } }) => {
    cy.window().then((win) => {
      win.localStorage.setItem(
        `@@auth0spajs@@::${client_id}::${audience}::${scope}`,
        JSON.stringify({
          body: {
            client_id,
            access_token,
            id_token,
            scope,
            expires_in,
            token_type,
            decodedToken: {
              user: JSON.parse(
                Buffer.from(id_token.split(".")[1], "base64").toString("ascii")
              ),
            },
            audience,
          },
          expiresAt: Math.floor(Date.now() / 1000) + expires_in,
        })
      );
      cy.reload();
    });
  });
});

You have to make sure that the config you pass in is exactly the same as the config you use in the Auth0 Provider.

Once thing to note that tripped me up, was that I was also using refresh tokens. If this is the case make sure to add offline_access to your scope.

I have a public repo to download a working solution - https://github./charklewis/auth0-cypress.

For those who e across this in the future. We created an alternative approach of testing Auth0 with Cypress which doesn't require changing code in the actual application.

The approach that we use is to run a local service that exposes the same API as Auth0. We packages this service as an NPM package. You can read about it in our blog post https://frontside./blog/2022-01-13-auth0-simulator/

Here is what your test end up looking like,

import auth0Config from '../../cypress.env.json';

describe('log in', () => {
  it('should get token without signing in', () => {
    cy.createSimulation(auth0Config)
      .visit('/')
      .contains('Log out')
      .should('not.exist')
      .given({
        email: '[email protected]'
      })
      .login()
      .visit('/')
      .contains('Log out')
      .logout();
  });
});

There is an example in the Cypress Real World App, a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows in addition to a Auth0 Authentication Testing Strategies Guide which details the changes in to an Auth0 application and the Cypress Real World App.