1/ Full guide for authentication with Next 14 + NextAuth 4 + Strapi v4 using Google and credentials provider

I recently started looking into Strapi, a headless cms. As it is backend only, it's up to you to build the frontend including the authentication flow. Obviously you don't want to build this yourself but use one of the authentication libraries on the market.

I already had NextAuth on my todo list so this was the perfect opportunity to use it. So, that is our setup Next + Strapi + NextAuth.

Being new to NextAuth, I had to start of with some basic tutorials and starting guides. But, digging into NextAuth, I quickly found these lacking: not production ready, outdated, incomplete,... On top of that, the NextAuth docs weren't very clear either. Mentioning certain features yet not explaining how to use them, a problem docs often have in my humble opinion.

Goal

So, I decided to take a deep dive and figure everything out by coding it out.

1. The latest Next with server components and server actions.
2. NextAuth with GoogleProvider and CredentialsProvider (email + password).
3. Full integration with Strapi.

Having to look up a lot of this information, it became clear to me that there isn't really a full explanation on this subject. So, I decided to turn it into a series and share it. And here it is: the (only full) guide to using NextAuth with credentials, including email confirmation flow, forgot or change password and error handling.

This series will help you learn NextAuth even if you're not interested in the Strapi part. I would recommend to follow the entire series because I explain certain topics in one chapter while using them in others. Better yet, try coding along to maximize your learning.

Structure

After a setup chapter and some theory, we first setup the GoogleProvider. This is a easier introduction to NextAuth. We don't need forms and state and directly get into NextAuth functionality and customization. Once we finish the GoogleProvider auth process we add the CredentialsProvider and all its steps like signing in and out, resetting passwords,...

Things got out of hands I know. It's more then 20 parts and I'm sorry for that. But, I promise you will get a solid understanding on how to build an auth flow in Next using Strapi and NextAuth. So, don't let the length deter you.

I uploaded all of my code to github per chapter via branches so you can follow along there too.

Hope you enjoy it.