Cypress + NextAuth Error: ESOCKETTIMEDOUT

[hect1c]

Hey guys,

I have integrated next-auth using the credentials provider and this seems to be working well throughout the app with my apollo client, however I am having a hard time getting my Cypress tests to pass

Currently via Cypress I run true e2e tests, meaning I have a local backend server setup in a docker container and run my tests against this with either seeded data on the backend, or via various cypress commands or methods created to help create some data for my tests. These are mainly around users data required to perform the various actions required.

Before next-auth we would get an jwt accessToken after login for a user from our backend and just store this in a cookie which would be reused via our apollo client which would retrieve this cookie. With next-auth this changed slightly but we essentially just get this from the getSession(ctx) method in our use-apollo and run this as the authorization header for all of our requests for an authenticated user.

When trying to setup Cypress + NextAuth I basically replaced the below line

cy.setCookie('accessToken', [acessToken]) 

with

Cypress.Commands.add('setAuthCookies', function ({ user }) {
  Cypress.log({
    name: 'setAuthCookies',
    displayName: 'Setting auth cookies',
    message: [`🪄 Setting auth cookies`],
  })

  const payload = {
    exp: Math.floor(Date.now() / 1000) + 24 * 60 * 60,
    name: `${user.firstName} ${user.lastName}`,
    email: user.email,
    sub: user.id,
    accessToken: user.accessToken,
  }
  console.log('payload', payload)
  const encodedPayload = sign(payload, Cypress.env('NEXTAUTH_SECRET'), {
    algorithm: 'HS512',
  })
  cy.setCookie('next-auth.session-token', encodedPayload, {
    httpOnly: true,
    path: '/',
  })
  cy.setCookie('refreshToken', user.refreshToken)
})

This would essentially get the accessToken from the direct api call to our backend logged in user, and then take this token and set the required signed next-auth.session-token signed.

My issue is when I run various tests where user is pre-authenticated on my first cy.visit to any authenticated page NextJS builds my /api/auth/[...nextauth] file and I imagine it goes through the logic of verification etc. For some reason this takes a long time and the page doesn't load and then I get the following error:

cy.visit() failed trying to load:

http://localhost:3000/path/to/page

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

  > Error: ESOCKETTIMEDOUT

Common situations why this would fail:
  - you don't have internet access
  - you forgot to run / boot your web server
  - your web server isn't accessible
  - you have weird network configuration settings on your computer

So I have VPN on and assumed it must be related so I turned it off, reran same issue. Then I decided to just turn off my wifi, eureka it works. But why?

Whenever I have my wifi on I consistently get this issue on any and all tests, and with my wifi off it works fine. I'm wondering when going to the /api/auth/[...nextauth] there must be something going on with the fetch behaviors that next-auth has? The real problem is this is also happening on my Gitlab CI server and I can see there essentially when trying to visit an authenticated page, it's next-auth is not properly running or being authenticated (even though I know the flow I have works well with my wifi off) and rerouting to the login page. I believe the same issue I'm getting locally is happening on the CI server.

I also notice the following error in my console logs

error - node_modules/next-auth/react/index.js (392:0) @ _callee6$
ReferenceError: window is not defined

Prior to the next-auth integration this was working all fine, so I suspect it's definitely related to next-auth and possible to the fetch method utilized. I will take a look at the next-auth code and see if I can find it more what's going on here.

Providing a reproducible repo will be difficult but I will see if I can manage somehow.

[balazsorban44]

error - node_modules/next-auth/react/index.js (392:0) @ _callee6$
ReferenceError: window is not defined

This suggests that you are calling a client-side-only API (maybe the signIn method?) from an environment where window is not defined.

See which functions are supposed to work where: https://next-auth.js.org/getting-started/client

[hect1c]

Hey,

Thanks for the quick response.

So I checked and I can see where that error is coming from. With Apollo Client I have a global error handler where I was listening for errors from the server, if there were any that returned me an UnAuthenticated error code I would then attempt to use signOut to sign them out, however as you suggested this was being called from server-side and since signOut is a client-side only api I was getting this error. I have looked to ensure this piece of code only runs client-side. Thank you, but my main problem still exists which is the timeout issue.

With the following error

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

  > Error: ESOCKETTIMEDOUT

Common situations why this would fail:
  - you don't have internet access
  - you forgot to run / boot your web server
  - your web server isn't accessible
  - you have weird network configuration settings on your computer

I checked and confirm the cookie I'm signing is correctly verified and in my use-apollo I check for the getSession and accessToken and those are correct and aligned with what I signed initially. Again what is weird is this all works correctly if I have my wifi off....not sure how to debug this properly.

[hect1c]

[Update]

I was able to resolve my issue locally by setting a no_proxy=localhost , more info here: https://docs.cypress.io/guides/references/proxy-configuration#Set-a-proxy-on-Linux-or-macOS

Seems still in my Gitlab CI, even though I export the NO_PROXY, I am still getting the issue. It does seem that this issue is not next-auth related but more so related to Cypress and how it proxies requests to the browser.

[hect1c]

So this was the solution actually. I was only getting the issue on my CI as I needed to proxy each of the NEXTAUTH_URL for each environment but in my test I just use localhost:3000 and I needed to set that in my environment variable