@auth/express fails to parse requests

[BorisTheTripper]

Environment

System:
OS: Windows 10 10.0.22631
CPU: (8) x64 Intel(R) Core(TM) i5-9300HF CPU @ 2.40GHz
Memory: 4.83 GB / 15.92 GB
Binaries:
Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.3.1 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
Chrome: 122.0.6261.131
Edge: Chromium (122.0.2365.92)
Internet Explorer: 11.0.22621.1
npmPackages:
next: ^13.4.19 => 13.4.19
next-auth: ^4.23.0 => 4.23.0
react: 18.2.0 => 18.2.0
@auth/core: ^0.28.0 => 0.28.0
@auth/express: ^0.5.0 => 0.5.0

Reproduction URL

https://github.com/BorisTheTripper/nextauth-token-error

Describe the issue

I've implemented the Express /auth/* middleware as per the docs. I also added some logs before passing request data to the middleware (apps/server/src/main.ts, line 16).

What happens during page load:

1. A /session request is sent twice, both times successfully, from what I can tell.
2. Trouble starts at the /_log requests. Both times they have the following body:

{
  level: 'error',
  code: 'CLIENT_FETCH_ERROR',
  error: '[object Object]',
  url: '/api/auth/session',
  message: 'Cannot convert undefined or null to object',
  client: 'true'
}

And both times, the below parsing error occurs on the server:

[auth][error] UnknownAction: Cannot parse action at /auth/_log .Read more at https://errors.authjs.dev#unknownaction

What happens after clicking "sign in" button:

1. /auth/providers and /auth/csrf are sent, both successfully, it seems.
2. Finally, /auth/signin/github is sent and returns a redirect to a valid URL (which you can check by following it). However, the actual redirect never happens, and in the browser console you'll see the request to the redirect URL marked with a CORS error.

---

P.S. In the Next.js config, I'm using the rewrites() to proxy the requests as shown below (see at apps/client/next.config.mjs):

async rewrites() {
  return [
    {
      source: "/api/:path*",
      destination: "http://localhost:4000/:path*",
    },
  ];
}

How to reproduce

1. git clone https://github.com/BorisTheTripper/nextauth-token-error.git

2. (Optionally) change the existing oauth credentials in .env with your own. If you do, make sure to configure your app as follows:

   

3. pnpm install

4. pnpm run dev

5. Go to localhost:3000 while watching the terminal logs. If you see an ECONNREFUSED error, just go to apps/server/src/main.ts, edit the file slightly & save to trigger nodemon one more time. After this, refresh the broser page & you should see NextAuth logs in the server app.

6. Click "sign in" button & watch what happens in the server logs and browser request tab as you attempt to sign in.

Expected behavior

Auth should work.

[hillac]

I can see you're trying to use next-auth for the client with an @auth/express server. I don't think this was really intended. If you have the express server running fine and can log in fine using localhost:4000/auth/signin, you can just use the api.

For my react client I just used a html form that posts to {express server}/auth/signin/{provider} with csrfToken and callbackUrl as hidden params in the body:

<form action={`${config.BACKEND_URL}/auth/signin/google`} method='POST'>
  <input type='hidden' name='csrfToken' value={csrfToken} />
  <input type='hidden' name='callbackUrl' value={`${config.BACKEND_URL}/redirect`} />
  <button type='submit'>
    Sign in with Google
  </button>
</form>

You need to get the csrf from the json api /auth/csrf. The html form is needed because the redirect can't come from a fetch or XMLHttpRequest. I suspect if you use that just for signin, you might be able to use next-auth for everything else.