Lately, I’ve been playing around with Next.js. In my opinion, this is a great library to get a React-based application up and running.

I was just struggling with the authentication of my application. I like to use the Firebase authentication service, so I wanted to implement this in a Next.js app.

I like to think that one of the nice features of Next JS is the server-side rendering. This allows me to perform all the required calls to my backend or database and to render a static webpage based on data retrieved by these calls. This helps with obvious things like SEO, but also for sharing webpages to social media for example. When you share a webpage on Facebook, it will crawl your page and retrieve some preview data to embed inside of the social network. When some of your data is rendered based on client-side calls, there is a big chance that Facebook will have trouble crawling your application.

Next to that, I like the fact that my end-users aren’t able to look around in my API calls. Firebase is a great platform that provides authentication for your applications. It is really easy to check the user authentications state on the client-side via Firebase. At some point, I wanted to check the authentication state while Server Side Rendering a page. I have been struggling a little to make this work.

In this article, I will show step by step how I ended up with my solution. As always, If you see any issues in my solution or if you have some interesting additions to it, feel free to comment below!

#javascript #nextjs #authentication #firebase