Error with NextAuth + React-query This Suspense boundary received an update before it finished hydrating

[enyelsequeira]

Environment

System:
OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 106.13 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node
Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
npm: 9.6.4 - ~/.volta/tools/image/npm/9.6.4/bin/npm
Browsers:
Brave Browser: 113.1.51.110
Chrome: 112.0.5615.137
Firefox: 111.0.1
Safari: 16.4

Reproduction URL

https://github.com/enyelsequeira/react-query-hydration-issue/tree/next-auth-issue

Describe the issue

So I am using react-query with next-auth, however when combined these and using suspense I get an error like the one below, I am trying to use suspense with react query, a very simple example can be found.

what I have found

• If you delete the query provider works fine
• if you delete the next-auth provider also works fine
• even if you try to move it the provider around it will still fail and throw that error

How to reproduce

Clone
add .env
and run it

Expected behavior

The expected behavior should be that even when using suspense I should not have that error and that both providers should be able to stay within the same

[enyelsequeira]

Hey @balazsorban44 not sure if you have any feedback on this? I mentioned this to the react query and might be because of next-auth, not sure if there are any workarounds TanStack/query#5335 (comment)

[enyelsequeira]

hey @balazsorban44 Really sorry to bother you with this issue, but wondering if there are any workarounds for this?

[philwolstenholme]

We're having the same issue here, I think. It's preventing us from using the suspense: true option in React Query, which we'd really like to do so we can share the same loading UI for our Next 13 server component routes with our client-side use of React Query.

The RQ maintainer mentioned this on TanStack/query#5335 (comment):

So the culprit is actually SessionProvider from next-auth.

Here is your sandbox, session provider removed, and it works: https://codesandbox.io/s/rough-meadow-fi9no0

To the best of my knowledge, their code isn't safe for suspense streaming. I can see a bunch of setState in useEffect, and this probably happens while we're streaming things down, hence the error. They are not using useSyncExternalStore.

I wonder if this will be resolved in #7443?

[enyelsequeira]

Right now, I really want to use next-auth to handle authentication, but currently this is a drawback we are also facing, I made a small reproduction from the fork here #7443 (comment)

if you do make it work let me know, so far I haven't found a way around it @balazsorban44

[l0gicgate]

@philwolstenholme I just tried NextAuth v5 and the issue still persists.

[balazsorban44]

Copying my recent answer from Twitter.

https://x.com/balazsorban44/status/1811722891915886894

There's no reason to use SessionProvider with React Query. In fact, I toyed with an official integration before https://github.com/nextauthjs/react-query, but dropped it as I had no bandwidth to maintain. All you need to do is hook up fetch /api/auth/session though.

We could add a guide! Anyone wants to PR?

Technically, Auth.js is nothing else than some endpoints that React Query can integrate with itself. SessionProvider is basically just a poorer version of React Query implementation.

See the source here https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react.tsx