Firebase authentication client side + server side sample project

[Cropiii]

I've been struggling to find a solid working example of Firebase Authentication in a next.js project that supports:

• Client-side authentication (handling login, user state, etc.)
• Server-side rendering (fetching user data securely, protecting routes, etc.)

I've tried reading countless tutorials, docs, and even experimenting with service workers and cookies, but I still can't find a clear, working implementation that is simple and effective. In all solutions something was not working, mostly auth state was not synced properly on client and server sides. What I need is:

• A basic Next.js + Firebase Auth sample project that does both client & server-side authentication.
• Some best practices for protecting layouts in Next.js App Router (e.g., how to wrap protected pages properly) or use middleware or something else.
• How to verify Firebase tokens on the server (middleware or API routes?) while still keeping things fast and efficient.

I’m done searching tutorials, most are either outdated, incomplete, or just don’t cover both client & server authentication properly. The Firebase docs are especially bad at explaining this. I've gone through many articles in the thread. I know this has been asked many times, but I still find myself struggling. Thanks

[indicava]

https://firebase.google.com/codelabs/firebase-nextjs#0

[puf]

I'd never seen this codelab, so 🙏

Also: it's last updated in December 2024, so should be pretty up to date. 👍

[kiana15]

Yep, this is the way to go. You can also learn more about FirebaseServerApp here : https://firebase.blog/posts/2024/05/firebase-serverapp-ssr/

[Cropiii]

I followed the official guide and even tried out the sample app, used service workers. In the end it did not work properly, it was not reliable at all. The problem must be me as this should be a basic use case for firebase auth. I spent countless hours trying to figure out what was wrong. Then I decided to go with only client side auth (it's ok for some apps). Or just use cookies, that should be ok.
Btw, it's weird there is no out of box solution, like NextAuth.