2020 / 04

Hi there! How are you? I hope you are well!

Lately, I have been trying to test auth0 login in our production app. This is a very complicated subject in general but there are a lot of resources out there to help you. Even auth0 has great tutorials in order to programmatically login to auth0 (that is without using the UI, although you cannot open the login page due to frame-ancestors restrictions. I think the previous version of auth0 has an option to disable this frame-ancestors from the headers). So, I ended up doing something similar to that tutorial and at some point I realised I had to actually type the user password on my test code. Imagine a scenario like this:

...
cy.login('email', 'password');
...

Or if you want to use it to the background request to the auth0 server inside the login() function (check link above for how to test end-to-end auth0).

So, how do you hide the user password from plain view first on github and then, if you hide it from github, how can you run your test on your CircleCI server?

The answer is not that obvious maybe, but on the other hand this is the solution I came up with, of course after some google around!

I will add a cypress.env.json file and gitignore it. For example:

cypress.env.json

{
    "password": "password"
}

.gitignore

cypress.env.json

and change my test to look like this:

... 
cy.login('email', Cypress.env('password'));
...

…and then the magic! It seems that CircleCI allows you also to add environment variables on project and even organization level. So, if you go on your Project settings page you will see a link on the left named Environment Variables. Check out the official documentation, it will look like this here: https://circleci.com/docs/2.0/env-vars/#setting-an-environment-variable-in-a-project

What is the magic though? If you setup a variable there with the name of CYPRESS_password, CircleCI will pass it down to your actual code and Cypress will pick it up and use it as its own environment variable (that is currently missing since we did not push it to github from the previous step). Also, CircleCI will hide your sensitive variable from plain site by redacting it from the build and hiding it on the job UI. Check screenshot below:

In a few words, CircleCI with replace Cypress.env(‘password’) with the value you specify on the CYPRESS_password variable.

Awesome, right?

Of course, everything is not that ideal. Now, you need to specify the password in two places (with all the maintenance problems this will create, duplication etc) and then you have to remember to add the same names for the environment variables in both places, so if you have a password env var it should have the same “name” on Cypress and CircleCI etc.

PS: Please if you have a better way to do this add a comment below with your solution or link to your solution etc. Cheers!