Logging in with Next Auth to a Keycloak account during testing in Cypress

Question

Logging in with Next Auth to a Keycloak account during testing in Cypress

Trying to create e2e tests with Cypress for my NextJs Application. Currently using Next Auth to log into my keycloak account via OAuth and displaying certain nav bar elements based on keycloak roles. To test this, I set up a test realm with test users. However, encountering an error where the State cookie was missing. message from Next Auth appears after attempting to log in during the test process. The same steps work fine when manually testing in the browser.

Steps when testing manually:

Visit the home page
Click on login
Redirected to keycloak
Enter username
Enter password
Login successful, redirected back to home page

Steps when testing with Cypress:

Visit the home page
Click on login
Redirected to keycloak
Enter username
Enter password
After clicking login, redirected to Next Auth error page
Error message: State cookie was missing.
Login failed

Any ideas why Cypress is behaving this way?

Your help is greatly appreciated!

EDIT:

Noted that the next-auth.state cookie still exists upon revisiting the page (verified by checking cookies) post login button click, even though Next Auth claims it doesn't. Confusing situation.

EDIT 2:

Cypress seems to have the cookie, but it's not being passed to my web app as the application's request does not contain any cookie information.

next.js cypress keycloak next-auth

Answer 1

Answer №1

To address the issue, I resolved it by adjusting next-auth's cookies to have a SameSite=None attribute. Below is the snippet of code I implemented (using Auth0 in this instance):

function loginViaAuth0Ui(username: string, password: string) {
  cy.intercept("/api/auth/**", (req) =>
      req.on("response", (res) => {
        const setCookies = res.headers["set-cookie"]
        res.headers["set-cookie"] = (
            Array.isArray(setCookies) ? setCookies : [setCookies]
        )
            .filter((x) => x?.startsWith('next-auth'))
            .map((headerContent) => {
                  const replaced = headerContent.replace(
                      /samesite=(lax|strict)/gi,
                      "secure; samesite=none"
                  )
                  // console.log('replaced', headerContent, 'with', replaced)
                  return replaced
                }
            )
      })
  )

  cy.visit('account')
  cy.findByTestId('auth0-button').click()

  cy.origin('https://my-site.uk.auth0.com/', {args: {username, password}}, ({username, password}) => {
    cy.get('input#username').type(username)
    cy.get('input#password').type(password, {log: false})
    cy.contains('button[value=default]', 'Continue').click()
  })


  cy.url().should('include', '/account')
}

Summary

The root cause lies within the cookie settings and is elaborated on in this article: (which inspired my approach). In essence, next-auth's cookies are configured with a SameSite=Lax attribute, leading to Cypress encountering issues due to running within an enclosed context. Chromium consequently blocks the requests as they are not considered "top-level", visible in the blocked cookies section in the request's cookies tab:

https://i.stack.imgur.com/tTINd.png

The provided code selectively intercepts responses from next-auth to enhance efficiency and updates the cookies to include a SameSite=None attribute, preventing blockages from Chromium.

Answer 2

To address the issue, I resolved it by adjusting next-auth's cookies to have a SameSite=None attribute. Below is the snippet of code I implemented (using Auth0 in this instance):

function loginViaAuth0Ui(username: string, password: string) {
  cy.intercept("/api/auth/**", (req) =>
      req.on("response", (res) => {
        const setCookies = res.headers["set-cookie"]
        res.headers["set-cookie"] = (
            Array.isArray(setCookies) ? setCookies : [setCookies]
        )
            .filter((x) => x?.startsWith('next-auth'))
            .map((headerContent) => {
                  const replaced = headerContent.replace(
                      /samesite=(lax|strict)/gi,
                      "secure; samesite=none"
                  )
                  // console.log('replaced', headerContent, 'with', replaced)
                  return replaced
                }
            )
      })
  )

  cy.visit('account')
  cy.findByTestId('auth0-button').click()

  cy.origin('https://my-site.uk.auth0.com/', {args: {username, password}}, ({username, password}) => {
    cy.get('input#username').type(username)
    cy.get('input#password').type(password, {log: false})
    cy.contains('button[value=default]', 'Continue').click()
  })


  cy.url().should('include', '/account')
}

Summary

The root cause lies within the cookie settings and is elaborated on in this article: (which inspired my approach). In essence, next-auth's cookies are configured with a SameSite=Lax attribute, leading to Cypress encountering issues due to running within an enclosed context. Chromium consequently blocks the requests as they are not considered "top-level", visible in the blocked cookies section in the request's cookies tab:

https://i.stack.imgur.com/tTINd.png

The provided code selectively intercepts responses from next-auth to enhance efficiency and updates the cookies to include a SameSite=None attribute, preventing blockages from Chromium.

Logging in with Next Auth to a Keycloak account during testing in Cypress

Answer №1

Summary

Similar questions

Employ the next-intl library in a non-react component scenario

Discover the best way to utilize useEffect on the server within Next.JS 14!

Tips for modifying the creation of NextJS route handler request object

Retrieving information from the API to populate a child component in Next.js

Input fields in Next.js are experiencing issues with undefined props

I'm facing an issue with SSRProvider in my NextJs application

Encountering a hydration error with the useResponsive hook in Nextjs Material UI

Having trouble capturing screenshots with PuppeteerJS?

Can components be SSGed individually rather than entire pages?

How can I pass my cookie token in a Next.js server-side component request?

Utilize NPM package exclusively for server-side rendering (SSR) within a Next.js application

Looking to implement Socket.io in a Next.js and Node.js application to send a targeted socket emit to a particular user

Creating a fixed sidebar that remains visible while scrolling in Next.js

Alert: The text content did not align. Server indicated as "0" while client indicated as "1"

Executing the callback function

When working with Function components in NextJS, it's important to note that they cannot be assigned refs directly. If you're trying to access a ref within a Function component, you

Leveraging the NextAuth hooks, employ the useSession() function within the getServerSideProps

Issue with locating .env file in GitHub CI Docker environment

When I send data using axios, I receive the response in the config object instead of the data

Creating a flexible route path with additional query parameters