Handling Tests on Protected Pages with Cypress / Auth0

Photo by Georg Bommeli on Unsplash

There are already existing tutorials on Cypress Auth0 authentication both on cypress.io and auth0.com as following:

Auth0 Authentication | Cypress Documentation

End-to-End Testing with Cypress and Auth0

Purpose of this article

While we are testing in Cypress, there will always be a point that we will have to test protected pages.

This can create multiple issues especially with a third-party provider like Auth0 which you have minimal control over. We are gonna be looking at potential problems that can be caused by this and the best possible solutions.

It is considered that you already use Cypress and Auth0 and have basic knowledge about them. This article won’t be going into too much detail on how to set them up, but rather using them together.

Naive Approach to Authenticate The User

So a basic approach would be to go to your login page, fill out the login form, and based on the token received from there take your actions.

That would have been correct if you had control over the login page, but since Auth0 is a third-party application it is not advised to do that.

The best practice is never to visit or test third-party sites over which you have no control. -Brian Mann co founder of Cypress

So we will be using “password” grant type to access our token. Be aware that password grant type is not advised for public access.

More on password grand type and how it works, can be found here:

Resource Owner Password Flow

Inside your project…

Inside cypress.json we will be setting some env parameters.

We are setting them inside cypress.json so we can use them in multiple files. For bigger projects with multiple environments, you may consider setting multiple config files, to work for different environments.

Inside support/commands.js we will be creating a new command:

After we have done this. Time to test out the login. Inside the integrations folder, we create a file named login.js.

For this example, it is assumed in your application:

auth0/auth0-spa-js library is used for Auth0.
Refresh token method is used.
localStorage is enabled.

Did you manage to successfully login? That is great, but now let's look at some problems.

Cypress before every test clears the localStorage data. Because of this, we will have to get the token data, again and again, each time we run the tests.

Not only that we will have to write the login function each time we write a test unnecessarily repeating ourselves.

Wouldn’t it be ideal to run login.js once, and use the token data received from there in every test? Without sending a request for a token every time we run a test?

Why this is necessary?

Auth0 is a service.

What does that mean? Well, every service has its limits.

Management API Endpoint Rate Limits

In Auth0, there are certain limits to how many requests you can send each second. Which by the way is much lower when it’s a free plan. So imagine running 100 tests and trying to authenticate the user every time for each of those tests, or having two different environments that Cypress is working on.

It’s not sustainable.

DRY (Do Not Repeat Yourself)

Let's say you don’t care about the cost. You would have to send a request every time and for each of your tests, you would have to implement the same logic.

And in the future, if you have to change the logic of the login, you will have to go to every single test and change that login logic.

Saving our Local Storage Data To Use It Later

Store Your Token Data

Since Cypress doesn’t have a method to prevent localStorage data from being deleted as to the date this article was written, we will have to make a workaround for this issue.

First, we are gonna need a couple of commands to achieve what we want to do.

So we navigate back to commands.js and add a couple of new commands.

After we add these commands we make a small change inside login.js. Below is the updated version of login.js.

Now before every each test we will call our cy.restoreLocalStorage(); command.

Example:

By calling the restoreLocalStorage command we restore the token data we created inside login.js.

Finally, inside .gitignore we add the following line so that every time the login-cache file is created git ignores it.

cypress/fixtures/login-cache.json

Well, that is all! Hope you have been able to authenticate using Auth0 inside your tests.

Special thanks to Mücahit Gürbüz and Emre Kesin for their support and feedback.