Firebase authentication client side + server side sample project
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