#Hi there anybody here with NextJS x
worn musk
Firebase auth is a web library, right? So I have to use it specifically with client side rendering, right?
So, if I log into with Firebase auth, the header with log in and sign up must dynamically change in the client side, right?
signal girder
Depending on your app, I’ve found the easiest way is to instantiate the firebase connection and auth in usecontext, and wrap your app in it, here’s a good blog going through the steps: https://blog.logrocket.com/implementing-authentication-in-next-js-with-firebase/
worn musk
I see, so I have to use Redux or Context API, in other words, I have to make all that logic on the client side, no SSR.
signal girder
Oh, if SSR is what you need, it’s likely middleware that you’ll want to involve, this will be a better solution: https://dev.to/dingran/next-js-firebase-authentication-and-middleware-for-api-routes-29m1
which still involves context, but you can use to protect routes
worn musk
But I feel like, using Redux or Context API will not be in sync with firebase auth instance, and make them be in synchrony will be hard to maintain. (sorry for my English)
signal girder
The authentication with firebase is what creates a token and refresh token for the user to prove they are who they say they are. The token has a 1 hour limit before it needs to be refreshed (This is the only interaction you need with the auth service). You can use this encrypted in headers to pass down the authenticated user to your server.
worn musk
Great, I'll try doing all the logic on the client side using Redux and Firebase's onAuthStateChanged method (changing the UI based on whether the user is logged in). I was worried about making both in sync, or avoid that using SSR. Thank you a lot for your help. 🙂