gladly-team/next-firebase-auth

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

Closed this issue · 7 comments

yosipy commented

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

image

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:

  1. Install into the nextjs project as per the readme instructions.
  2. 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.

スクリーンショット 2023-05-01 194902

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

@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

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.

  • 👍3
lazycipher commented

This is the deployed link sent by @yosipy

Screenshot 2023-05-16 at 10 01 10 AM

@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

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

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. 😊

  • 👍1
kmjennison commented

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

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

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