gladly-team / next-firebase-auth

Simple Firebase authentication for all Next.js rendering strategies

https://nfa-example-git-v1x-gladly-team.vercel.app/

MIT License

1.34k stars 291 forks source link

When using 'next dev', two requests are sent to /login or /logout #645

Closed yosipy closed 7 months ago

yosipy commented 1 year ago

Describe the bug When set up according to the readme, a page using withAuthUser() will send two requests to /login or /logout.

From my research, this behavior only occurs when using 'next dev'.

It did not reproduce when using 'next build' & 'next start'.

Versions

next-firebase-auth version: 1.0.0-canary.19 Firebase JS SDK: 9.21.0 Next.js: 13.3.1

To Reproduce Steps to reproduce the behavior:

Install into the nextjs project as per the readme instructions.
Access /demo with a browser and check it with a developer tool such as Chrome.

Unconfirmed, but I think the example auth-ssr.js may have the same problem.

Expected behavior Only one access to /login or /logout should be needed.

The image shows the requests accessed at https://nfa-example-git-v1x-gladly-team.vercel.app/auth-ssr .

Debug and error logs

Additional context

lazycipher commented 1 year ago

@yosipy, is this happening locally only? Can you check if strictmode is active or not? https://nextjs.org/docs/pages/api-reference/next-config-js/reactStrictMode

tombouquet commented 1 year ago

I am getting six requests to the login and logout endpoints. This isn't just on dev but also when deployed to vercel in prod env (getting four on prod env). Strict mode is on in dev env.

lazycipher commented 1 year ago

This is the deployed link sent by @yosipy

@RustedBuckett, it calls 2 times in dev if strict mode is on. But not sure why 6. Can I get any deployment or any link to code so that I can try to reproduce?

kmjennison commented 1 year ago

Thanks for the issue. Could this be related to hot reloads or other dev-related rerenders?

424 would serve as a band-aid fix, but it would be good to know the underlying cause here. Help wanted!

thesatyam05 commented 1 year ago

I had the same issue, but having this issue on a development server is not a problem until you experience the same thing with the optimized build. The reason behind you experiencing this issue might be related with strict mode ( causing two renders ) and using useEffect. I hope this helps. 😊

kmjennison commented 7 months ago

Closing this as an expected behavior of React's strict mode:

To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) twice in development.

However, implementing #424 would remove this behavior in development, too.

yosipy commented 6 months ago

Sorry for the late thank you everyone. Thank you again.

As you said, the operation was due to React's Strict mode.