signIn() redirects to error when used in useEffect in Firefox (v5)

[Celsiusss]

Environment

System:
OS: Linux 6.6 Arch Linux
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 10.37 GB / 31.26 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 21.2.0 - /usr/bin/node
npm: 10.2.4 - /usr/bin/npm
Browsers:
Chromium: 119.0.6045.159

npmPackages:
next: 14.0.2 => 14.0.2
next-auth: ^5.0.0-beta.3 => 5.0.0-beta.3
react: ^18 => 18.2.0

Reproduction URL

https://github.com/Celsiusss/nextauth-demo/tree/signin-effect

Describe the issue

Using the signIn() function inside a useEffect hook produces an error.

  useEffect(() => {
    signIn();
  }, []);

The browser redirects to /api/auth/error and shows this page:

Browser JS console gives one error:

ClientFetchError: The operation was aborted.

call stack

AuthError webpack-internal:///(app-pages-browser)/./node_modules/@auth/core/errors.js:41
    ClientFetchError webpack-internal:///(app-pages-browser)/./node_modules/next-auth/lib/client.js:16
    fetchData webpack-internal:///(app-pages-browser)/./node_modules/next-auth/lib/client.js:50
    React 2
    Client webpack-internal:///(app-pages-browser)/./app/client.tsx:16
    React 8
    workLoop webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261
    flushWork webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230
    performWorkUntilDeadline webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534
    EventHandlerNonNull* webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:569
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:630
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/index.js:4
    NextJS 4
    React 2
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/index.js:32
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/client.js:3
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:16
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-next-dev.js:9
    appBootstrap webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:57
    loadScriptsInSequence webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:23
    appBootstrap webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:56
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-next-dev.js:8
    NextJS 7
[app-index.js:34:22](webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js)
    error webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:34
    error webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/hydration-error-info.js:41
    fetchData webpack-internal:///(app-pages-browser)/./node_modules/next-auth/lib/client.js:50
    React 2
    Client webpack-internal:///(app-pages-browser)/./app/client.tsx:16
    React 8
    workLoop webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261
    flushWork webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230
    performWorkUntilDeadline webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534
    (Async: EventHandlerNonNull)
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:569
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:630
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/index.js:4
    NextJS 4
    React 2
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/index.js:32
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/client.js:3
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:16
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-next-dev.js:9
    appBootstrap webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:57
    loadScriptsInSequence webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:23
    appBootstrap webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:56
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-next-dev.js:8
    NextJS 7

The dev server does not log anything.

I could only reproduce this in Firefox.

How to reproduce

The given reproduction URL contains a minimal repo with a client component that uses the shown above code.

Expected behavior

I expected the behavior to be as in Chromium, where this works fine.

[Tap-Kim]

This error seems to be coming from a browser, not a chromium.

The same error occurs in safari.

May I handle this issue? please assign to me~ I'll create PR soon!

[Tap-Kim]

@Celsiusss

I didn't open PR for the following reasons.

In the latest version, this issue has been resolved, and the phenomenon in which the log was not visible only in chromium was that all of the log was lost during page redirection with window.location.href based on the Chrome browser, which may be different from other browsers. Also, make sure you check the "Error" option among the log filter options.

Additionally, the secret value was not specified in auth.ts as one of the reasons for the above error.
Please add it as follows.

openssl rand -hex 32

// auth.ts
export const authConfig = {
  ...
  secret: "your openssl hash value"
} satisfies NextAuthConfig;

As a result, next-auth": "^5.0.0-beta.4 version up is required. It is confirmed that the validate check was not performed with the return value of csrfToken in the current version.

[ndom91]

@Celsiusss can you confirm applying secret and latest version, for example, fixes this for you in FF as well? If so I'll close this as resolved 👍

[Celsiusss]

@Tap-Kim @ndom91
Thank you. I am setting the secret in the NEXTAUTH_SECRET environment variable.

I updated next-auth to 5.0.0-beta.4, but the issue is still there in Firefox 121.
It still works as expected in Chromium, or when calling signIn() elsewhere.

I also enabled the debug option in the auth config, but it does not yield any more logging server side.
JS logs (with persist logs enabled) in Firefox:

Logs

Navigated to http://localhost:3000/
Navigated to http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F
ClientFetchError: NetworkError when attempting to fetch resource. .Read more at [https://errors.authjs.dev#autherror](https://errors.authjs.dev/#autherror)
    AuthError webpack-internal:///(app-pages-browser)/./node_modules/@auth/core/errors.js:49
    ClientFetchError webpack-internal:///(app-pages-browser)/./node_modules/next-auth/lib/client.js:16
    fetchData webpack-internal:///(app-pages-browser)/./node_modules/next-auth/lib/client.js:50
    React 2
    Client webpack-internal:///(app-pages-browser)/./app/client.tsx:16
    React 8
    workLoop webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261
    flushWork webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230
    performWorkUntilDeadline webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534
    EventHandlerNonNull* webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:569
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:630
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/index.js:4
    NextJS 4
    React 2
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/index.js:32
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/client.js:3
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:16
    NextJS 4
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-next-dev.js:9
    appBootstrap webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:57
    loadScriptsInSequence webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:23
    appBootstrap webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-bootstrap.js:56
     webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-next-dev.js:8
    NextJS 7
[app-index.js:34:22](webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js)
Navigated to http://localhost:3000/api/auth/error

It works in about 1 out of 20 times, surprisingly.

I updated the reproduction project to reflect the next-auth update and included the .env file.

[ndom91]

Interesting.. Looks like the same issue I have mentioned here (ndom91/briefkasten#40)

[MinnDevelopment]

I was able to resolve this issue by debouncing the call to signIn in my useEffect hook. I think the problem was react's strict mode running the hook twice, resulting in parallel signIn flows. After debouncing this call, I did not run into the same issue again.

Maybe the signIn function should add a parameter to pass an AbortSignal, similar to fetch?

For instance:

useEffect(() => {
  const ac = new AbortController();
  void signIn(provider, { signal: ac.signal });
  return () => ac.abort();
}, []);

We ended up with this solution:

const signingIn = useRef(false);
useEffect(() => {
  if (signinIn.current) return;
  signingIn.current = true;
  void signIn(provider);
}, []);