Authenticate to Auth0 (via Google) in Cypress

[luke.skywalker]

Hello,
I have an existing single page react app that I’ve recently added login for via Auth0; and added authentication to API requests from this app by passing the Authorization: Bearer <token> in HTTP requests. So far, all good. The structure is seomthing like this:

...

    <Auth0Provider
      domain="<redacted>.us.auth0.com"
      clientId="<redacted>"
      authorizationParams={{
        redirect_uri: `${window.location.origin}`,
        audience: '<redacted>,
      }}
    >
     ...
            <AppProvider>
...
    </Auth0Provider>
...

The issue is I also run Cypress (not in CI, but locally, which is fine for now) against my UI. Now, as expected, when cypress spins up Chrome, the login screen is there (which is basically a button, that when clicked, goes to the Auth0 Universal Login page, using () => loginWithRedirect()).

What I would like to do is have login taken care of (ideally with cookies and localStorage data), so it is already signed in when Cypress hits a page; this way the App behavior wouldn’t be any different when testing (for instance, authenticated API calls would still work, etc.)

1. Preferably be signed in via setting localStorage or cookie values, so that the login screen never even appears in the app from the perspective of cypress; I would prefer not to have to press the ‘login with google’ button for various reasons (bot detection, etc.)

I was wondering if this could be accomplished by taking the contents of either localStorage or cookies from my Chrome and setting those cookies in Cypress. For instance:

 cy.setCookie('auth0_compat',abcdefg', {
    domain: 'abc-123-us.auth0.com',
  });

However, this did not work (and my guess is there are a number of reasons this may happen; I tried setting the cookies in cypress before my test, from this list of cookies here Authentication API Cookies (I am still looking into this)

I did come cross some posts and this guide, https://frontside.com/blog/2022-01-13-auth0-simulator/, but I’m still a little unclear on how they solved this in that guide (a full code example would help); further more, the cypress docs here mention they are for the older Classic Login Experience instead of the Universal Login Experience that I have today (Auth0 Authentication | Cypress Documentation)

Any advice? Has anyone been able to set login state in cypress via localStorage or cookies directly, so that its not even a factor?

Other possibilities

• Somehow indicate to Cypress to use my Chrome browser (to make use of my state), instead of the vanilla instance of chrome that is spun up by cypress; is there a way to specify which Chrome Cypress is specifying?
• Manually login somehow once with the vanilla chrome Cypress has spun up; and make sure the localStorage and cookies are not wiped by Cypress subsequently
• See if it’s possible in auth0 to setup a specific test user account that uses a username/password instead of the Google auth; is this possible?

[luke.skywalker]

Another follow up: is it possible to take an existing access Token and use that for programatic login? If I could just take an access token from my existing app, and set that in some config in cypress, that would be more than enough to unblock me.

[luke.skywalker]

For anyone looking for this in the future: I ended up making a test user that only uses username/password auth (not the google sign-in button); and adapted the example code from Cypress for logging in by typing the username/password into the actual GUI. Cypress is able to save and restore that session accordingly. The other alternative the docs state (progmatic login) didn’t work for me.

Another thing to note: the Cypress documentation mentions localStorage, but from what I see, everything was stored as cookies, not localStorage. Auth0 Authentication | Cypress Documentation

[valavalkar]

Do you mind sharing your code snippets and how you were able to store everything as cookies to get the session to persist?