Starter Code - Full Setup of Next.js and Firebase Auth + Firestore + Cloud Messaging

[shreyas-jadhav]

Hi Guys!
From past few weeks, I was working with next-firebase-auth and Firebase apps. No doubt it's a great library, but as a not so pro developer I wasted a lot of time finding examples, solving errors to make Firebase Apps work well with Next.js.

Most terrible issue I faced was caused by accidentally using Admin SDK in my client side. And I literally no idea or traces, why I was getting errors. Then, I doubted that next-firebase-auth was causing errors as it had already initialized SDK (I was wrong), so I wasted a lot of time finding an examples how to make work Firebase Apps with next-firebase-auth. I didn't find any examples to make them work together with proper structure and setup.

Then, I had to find way to implement with Firebase Cloud Messaging, as the official examples didn't provide sufficient way to make it work with their Firestore's example, it did waste my lot of time, and probably others too.

There wasn't a single example to make all Firebase Apps work together. So after a few day, I finally made one by myself! And I hope it would help a lot of you guys, if you are making one of such projects or plan to.
Just grab my template and start working. I have the Auth(Protected pages, login custom element) already setup, Project structure for Firestore (references/functions/client-admin SDKs) already setup, and even Firebase Cloud Messaging (service workers, get-token) setup already! I guess this would save someone's a hell of a lot of time, especially beginners.

Just add you environment variables and you have everything working already!

Check out the demo and here's my template repository - next-firebase-starter.
Enjoy!

[amirhemm]

Great example, have you considered lazy loading some of the firebase modules to improve performance?

[amirhemm]

I've been wrestling with this issue for a while as well. I got everything to work but I cant get the lazy loading to work properly.

[shreyas-jadhav]

which modules are you taking about? 'firebase/auth' etc. or the SDK?

[amirhemm]

Yeah. Check out this gist for the examples.

[shreyas-jadhav]

Yes. Actually I have lazy loaded the messaging module while enabling the messaging. Check this out https://www.github.com/shreyas-jadhav/next-firebase-starter/tree/main/utils%2Ffirebase%2Fmessaging%2FenableMessaging.js

[amirhemm]

I guess I was just focusing on auth module that's why I must have missed that. It's a bit trickier to get the auth module lazy loaded though. Do you agree?