Set up E2E tests with Auth0

[masakudamatsu]

E2E tests with Cypress won't work by default with Auth0.

With Next.js, cypress-nextjs-auth0 provides a solution.

Reference: https://github.com/sir-dunxalot/cypress-nextjs-auth0

[masakudamatsu]

Not entirely clear how we should add cypress-nextjs-auth0 to other plugins in cypress/plugins/index.js...

Reference:

• https://github.com/sir-dunxalot/cypress-nextjs-auth0#step-3-register-the-task
• https://docs.cypress.io/api/plugins/writing-a-plugin#Plugins-API

[masakudamatsu]

For creating a test user on Auth0 Dashboard

1. Enable the password grant

   • Expand the Advanced Settings
   • Click the Grant Types tab
   • Check Password
   • Click SAVE CHANGES This way, the log in to Auth0 without redirecting will be enabled.

2. Set Username-Password-Authentication as the value of Default Directory

   • Click the Setting icon at the bottom of the side bar
   • Scroll down to the API Authentication Settings
   • Find the text field for Default Directory (the name of the connection to be used for Password Grant exchanges)
   • Enter Username-Password-Authentication (the default database connections that Auth0 adds to all new tenants)

3. Create a test user

   • Click the User icon at the side bar
   • Click Create user
   • Enter email address
   • Enter password (which is obtained from https://www.lastpass.com/password-generator)

[masakudamatsu]

To add Auth0 credentials, we use cypress.env.json which is git-ignored in the root directory.

• Reference: https://docs.cypress.io/guides/guides/environment-variables#Option-2-cypress-env-json

The auth0CookieSecret is a random string of our choice.

Leave auth0Scope and auth0SessionCookieName as it is.

[masakudamatsu]

We set the port to host Cypress as 3001.

• In cypress.json (reference: https://docs.cypress.io/guides/references/configuration#Global)
• In Auth0 Dashboard (Application > Settings > Application URIs > Allowed Origins (CORS)
• Docs: https://github.com/sir-dunxalot/cypress-nextjs-auth0#step-6-configure-auth0

[masakudamatsu]

We got the following error:

For cy.request('/api/auth/me'):

cy.request() failed on:

http://localhost:3000/api/auth/me

The response we received from your web server was:

  > 401: Unauthorized

with the HTTP response saying "The user does not have an active session or is not authenticated"

For cy.url('/'):

TestingLibraryElementError: Timed out retrying after 4000ms: Unable to find an element with the text: test-user@my-ideal-map-app.com. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

[masakudamatsu]

Chrome DevTools for Cypress show these error messages:

• Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute
  • Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being set in a cross-site context. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
  • Resolve this issue by updating the attributes of the cookie:
    • Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
    • Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests.
  • Affected resources: 1 cookie did_compat | my-ideal-map-app.jp.auth0.com/
  • Learn more: https://web.dev/samesite-cookies-explained/?utm_source=devtools

[masakudamatsu]

Forking the cypress-nextjs-auth0 repo and using my own Auth0 credentials returns the same error.

• This happens even after adding "chromeWebSecurity": false to cypress.json.

But the SameSite cookie attribute warning doesn't show up in DevTools...

[masakudamatsu]

DevTools reveals the following.

When the request to /oauth/token is made, the response includes two cookies did and did_compat. The latter hasn't specified its SameSite attribute, which means its value is lax by default with Chrome (source).

DevTools says that the cookie "was blocked because it came from a cross-site response... The Set-Cookie had to have been set with SameSite=None to enable cross-site usage."