How I setup Authentication in 10 minutes in Next.js?

Setting up authentication is the most vital and arduous task in the complete frontend journey. The intricacies and nuances accrue a long list of base and edge cases that one can easily skip some of them and invite hackers to do weird stuff with your application. Hence, keeping this thing in mind, I first thought of going with Auth0 service but their free tier was limited and the pricing was also not cheap. Though I have heard a lot about their service, still I wasn't ready for this. So thought of building it again. Rolled up my sleeves and started reading about sessions, cookies, and JWTs (whoever you are, you have to revise the core concepts before diving into something - you should spend major time sharpening your ax, then cut the tree). In my pursuit of learning from the best blogs out there, I stumbled upon a blog by logrocket which talks about Next-Auth. This led me to give it a shot and voila! my authentication setup was ready under 10 minutes with the global session that I could use anywhere and they also handle all the edge cases by themselves. I just did the following steps:

After installing the libarary, I setup the boilerplate code for google oauth and manual auth. First let's setup the API in /api/auth/[...nextauth].js

Code Snippet

Now, move to the client, make a page component and add: