End-to-End Testing with Cypress and Auth0

Blog Discussions
100

Hi!

We are writing e2e tests for our SPA (it uses the @auth0/auth0-react library). We are hoping we can run them against our dev and production environments. We are following the blog post and have created a separate client for the tests that uses the “password” grant type. The tests call /oauth/token and receive the access token and ID token. We are hoping we can send this information to our react SPA. We ended up writing something very similar to dobrek’s solution - after getting the tokens from /oauth/token, we redirect to the react app and set the tokens in local storage. However, calling the API with the access token fails because it’s expecting a signed JWT. Is it possible for the token endpoint to return a signed token? Would it even work if it’s signed by one client (my e2e tests), but used by another client (the react app in dev/production)?

Thanks!

101

@robertino.calcaterra would you be able to follow up on this? Thank you!

102

We are working on this @konrad.sopala (cc @nancy.habecker)

1 Like
103

Is it possible for the token endpoint to return a signed token?

Yes, you will get a JWT Access Token if you specify an audience in the /oauth/token request. See the difference between Opaque and JWT access tokens here: Access Tokens also Call Your API Using Resource Owner Password Flow

Would it even work if it’s signed by one client (my e2e tests), but used by another client (the react app in dev/production)?

Yes, the authorization server signs the JWT, it doesn’t matter to your API which client is bearing the access token.

1 Like
104

It’s a good start but I need more info. In my case I use auth0-react and the Auth0Provider JSX component. This component causes a redirect to login, when user hits a page when they are not logged in.
I need to know the cookies that are needing to be set to make this component accept that a valid login has been completed. I thought I could just set the auth0.is.authenticated cookie but that is not sufficient and redirect is still happening.
Does anyone know what those cookie names and values should be while using Cypress?

105

I use @auth0/auth0-react and useAuth0 -

I don’t want to add “authService.send(“AUTH0”, { user, token })” and change my working application code exclusively for e2e purposes (unless I have to).

I am successfully retrieving a token via the commands.js oauth/token flows…but I have been unable to figure out how to make that work with const { user, isAuthenticated, isLoading, getAccessTokenSilently} = useAuth0();

“We are positioning this topic internally as a high-priority topic” from @dan-auth0 is from 3/2020 -

When convenient, please advise.

@konrad.sopala @robertino.calcaterra

106

Just a heads up that interactive logins will soon be supported in Cypress via https://github.com/cypress-io/cypress/pull/18075

All of the core features are finished, so I believe this will be in a upcoming release.

1 Like
107

Thanks for sharing that @Hawxy !

108

@konrad.sopala any update for auth0/auth0-react users?

109

@robertino.calcaterra do you have any info on the above? Thank you!

110

Following up here @robertino.calcaterra @konrad.sopala

Just wondering if you all are able to provide any rough timelines in light of “We are positioning this topic internally as a high-priority topic” from 3/2020, so that myself and other auth0-react users can plan accordingly.

Best and thank you -

111

Cross-origin support is finally released which should resolve all remaining problems in this space:

Here’s an example implementation for an Auth0 site that uses identifier-first login & automatically redirects on load:

Cypress.Commands.add('loginAsUser', (email, password) => {
    const args = { email, password }
    cy.session(
        args,
        () => {
            // visit homepage
            cy.visit('/')
            // redirects to Auth0
            cy.origin('/**YOUR AUTH0 DOMAIN HERE**/', { args }, ({ email, password }) => {
                cy.get('#username').type(email)
                cy.get('button').contains(/^Continue$/).click();
                cy.get('#password').type(password)
                cy.get('button').contains('Continue').click();
            })
            // assert we've returned to the site
            cy.url().should('contain', '/home')
        }
    )
})

Very simple!

2 Likes
112

Wooohooo thanks for sharing that!

113

Hi everyone! We updated this post!

This blog post is no longer maintained, and it may be out of date. Please use the following resources created by the Cypress team to learn how to use Cypress to test a Single-Page Application (SPA) that uses Auth0:

The updated version is here.

2 Likes
114

If you want to see a working example of a SPA that has end-to-end tests with Cypress, you can also check out Ionic for JHipster. When you generate the Ionic app, it includes Cypress tests that use cy.origin and cy.session (to help honor Auth0 rate-limits).

2 Likes
115

Thanks @robertino.calcaterra and @mraible for sharing all that!

116

I’m currently we’re having a problem using Auth0 together with cypress End to End testing using Nejxt JS. Hope you could help us and give some information and advice. Summary of the Inquiry, the Auth0 is not able to run or pass on cypress e2e when its move to serverSideRendering it always throws us an errors. Below are the current versions and used libraries:

  • Next JS → “next”: “^13.1.1”
  • Auth0 → “@auth0/nextjs-auth0”: “^2.0.1”
  • Cypress → “cypress”: “^12.3.0”,

The Following are the Errors and Steps we have done so far:

  1. When Auth0 (Authentication) on client side it works fine.
  2. When Auth0 (Authentication) moved to serverSideRendering. (code below)

Steps and Things Done so far:

  1. Manually login in the user whic the credentials.
  • followed this docs and article. (https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/)
  • I was able to get a access_token, id_token, expires, token: “bearer”, date
  • but trying to manually add it to session using cy.session() its not able to redirect the user or login the user. Stuck on the same screen even using cy.visit()
    [image]
  • Screen Behavior:
    [image]
  1. Tried to use direct login without cy.origin, cy.visit
    [image]
  • stuck on the same page it has an error, that callback not be called.
  1. Tried the this one as well the login with forms.
    [image]
  • but were having an error on callback and its having 400 which not allowed us to deploy since it has an error. (error below)

[image]

  1. Tried also to cy.visit into a callback after getting a token.
1 Like
117

I am having similar issues being able to login programmatically whilst using @nextjs-auth0 and Cypress. I have been able to login via the UI using Cypress but this is far from ideal considering the volume of E2E testing I want to do and having to be redirected to an Auth0 login screen, while automated, is still time consuming.

I raised this post yesterday and am close but I am struggling to store the appSession cookie correctly which is causing all subsequent requests to be returned with a 401. Link to my post here.

118

Hey there. Just wondering if you’ve found a solution to using cy.session with Auth0 NextJS? Trying to do the same things and would love to be able to use the latest Cypress version.

119

Hi! I haven’t yet no. I have been close with creating some sort of session and storing it as a cookie, but Auth0 keeps returning an error meaning that I must have not created the cookie correctly. If you have made any progress please do share!