End-to-End Testing with Cypress and Auth0

I’ve been unable to get past the “login_required” exception you mention. I’ve tried setting the auth0 session cookie manually, but maybe I’m not setting the correct cookie or value.

Not sure if this affects your tests, but there’s a bug with cypress v3.1.1 and above where cookies aren’t being set correctly: https://github.com/cypress-io/cypress/issues/3221

1 Like

I was able to fix this by changing my tenant settings (the Default Directory property, mentioned in the section Auth0 Setup & Configuration above). It was a little hard to find. On your dashboard, click on your account dropdown in the upper-right, then click “settings.” The property you want to change is under “API Authorization Settings.” Setting this to “Username-Password-Authentication” as mentioned in the article got me past the error.

1 Like

So how do you test a restricted page? This just times out:

 describe('Restricted page', () => {
  it('should render the page', () => {
    cy.login().then(() => {
      cy.visit('/restricted')
      cy.get('h1').contains('Restricted')
    })
  })
})
1 Like

With the new Auth0-spa-js package, I can not use cy.request() to get the authorization code from login API because the URL now has a random state.
Do you have a workaround solution for this issue?

3 Likes

Did you figure this out? I’m having the same issues, I can’t get this to work because it gives me an invalid token error. Saying the state does not match

1 Like

For now, this is the workaround solution of me.

  1. Disable chrome security in Cypress config.
  2. Login through the auth0 page (we will redirect to log-in page and log out due to the fact that I cannot generate the random state in the new auth0 package)

Note: If you’re not custom login page in auth0, use the classic page in Universal Login. I found that the new UI of Auth0 login page has a lot of security enhance that prevents us render auth0 in an iframe.


Then, Go to Auth0 → Tenant Setting → Advanced → Enable Clickjacking Protection to allow auth0 load in an iframe.
image

Ok, that all the step that I did to make it work. Hope this help you

2 Likes

Thanks a ot for sharing it with the rest of community @corruptedmonk!

I wish a solution like this post will be available for Auth0-spa-js package soon!

1 Like

Hey there @Ali-Doustkani!

It would be great actually if you can share that feedback along with the context with repo maintainers by raising a GitHub issue in the repo. Thank you!

@Ali-Doustkani
Check out my solution in the comment above.
This is the solution for Auth0-spa-js package for now.

1 Like

Thanks a lot for sharing that with the rest of community @corruptedmonk!

I finally did it in your way. Thanks for the comment!

2 Likes

Glad you have it working @Ali-Doustkani!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

Hi @konrad.sopala. Essentially how can we achieve similar to the result in this article using the new auth0 library?

1 Like

Hey there @jonathan.dudley!

I moved your reply here as it seems more appropriate. Can you specify your question a little bit more as I’m not sure what you mean :slight_smile: Thank you!

Hi @konrad.sopala. Thanks for moving my reply here, as I was able to find the workaround from @corruptedmonk above to get my cypress login test working.

So it’s great to have a workaround, but it would be excellent if there was a way with Auth0 SPA JS to login programmatically to our application (similar to the way proposed in the article I linked to in my previous comment), so that we would not have to login and logout every time which will slow down the test suite.

Would it be be possible for the team to add new version of the above article for Auth0 SPA JS?

Thanks.

2 Likes

I guess potentially it can be possible but it all depends on team’s bandwidth. I would just suggest submitting product feedback regarding that using our feedback form:

Hi. Just chiming in now as I’m starting to use Cypress now.

@konrad.sopala - the solution in this thread is not an actual solution imo. It does numerous things that go against best practices that both Auth0 and Cypress recommend. The point of using Auth0 is to have top-notch security… lowering the level of security (by disabling protections against malicious attacks in Auth0) in order to properly test an application should not be acceptable.

The point of this blog post was to provide a manner in which to securely test an Auth0 authenticated SPA with Cypress. This blog post seems to be outdated. I followed everything exactly as per the guide, and tried debugging this on my own with a variety of ideas for an hour or two now. I started with something along the lines of what @corruptedmonk suggested until realizing that it went against both Cypress and Auth0 best practices. Then I found this guide, and was disappointed that it isn’t current.

And not only that… based off of everything everybody else is saying, even if I was able to get my access_token, etc. back (which I can’t - right now I’m just being redirected to auth0.com and getting the html for that page back) - this wouldn’t even work with the library that you ask everybody working with an SPA to use.

5 Likes