• Founder Drive
  • Posts
  • My thoughts on Authentication in Next.js after using all the major auth services

My thoughts on Authentication in Next.js after using all the major auth services

How to choose the right authentication service for your next web app.

I am starting a new project and I am considering using Supabase for authentication. However, I am using PlanetScale for the database.

Let's also take a look at Clerk, which seems easy to implement and use. But there's a catch: the user data is stored separately from the application data.

No worries, let's try using NextAuth.js for authentication. It's great because I can store the user data in my PlanetScale database.

However, this approach seems quite complicated. I would need to build a custom action for user sign-up, handle custom email verification, and manage tokens and other tasks.

This is frustrating! I wish I already knew which authentication service to use for my project!

In this newsletter post, I will discuss the topic of authentication in Next.js.

I won't recommend a specific authentication service, but I will provide information about the advantages, disadvantages, pain points, and more for each of these services.

This way, you can choose the one that best suits your project!

Supabase

Introduction

Supabase is more than just an authentication service. It is a complete BaaS (Backend as a Service) that includes Database, Authentication, Edge Functions, Realtime subscriptions, Storage, Vector embeddings, and more.

Advantages

I consider Supabase as my preferred authentication service because it offers all the necessary features. With Supabase, I can manage user data, create custom sign-up and sign-in forms, and even customize emails.

The main advantages of using Supabase are:

  • Storing user data in Supabase's PostgreSQL database.

  • Full-fledged Backend-as-a-Service (BaaS) functionality.

  • Easy management of sign-ups.

  • Easy management of sign-ins.

  • Customization of emails through the Supabase dashboard.

Disadvantages

The major disadvantage of incorporating Supabase into your Authentication flow arises when you are already utilizing a different database such as PlanetScale and a custom ORM like Prisma.

The issue that arises in this scenario is that, because you are already utilizing a different database, your users' data is stored in yet another separate database.

For example, if you have configured Prisma to utilize your Supabase database for your application data, it will still be referencing the Supabase schema.

The major disadvantages of using Supabase are as follows:

  • The requirement to use Supabase's Database

  • Challenges in utilizing Prisma and other ORMs

  • Limited customization options for emails

Clerk

Introduction

Clerk is an all-in-one solution for authentication and user-management. Their literal headline is "More than Authentication, Complete user-management”.

It’s not just some APIs or functions you can use to authenticate your user, it provides complete UI components that you can just “plug” in your application and get working.

Advantages

The main advantage of Clerk is its simplicity and the fact that it doesn't require any additional "hard work". By adding <ClerkProvider /> and middleware.ts, you can quickly get started.

Clerk provides prebuilt React UI components such as <SignIn />, <SignUp />, and <UserButton />, which allow you to easily integrate authentication into your app without having to create your own sign-in and sign-up forms.

The key advantages of Clerk are:

  • Easy integration

  • Prebuilt UI components

  • No need to handle errors, tokens, sessions, etc.

  • A simple dashboard for managing users

  • The Organization feature, which can be used to create groups of users

Disadvantages

The biggest disadvantage of Clerk is that the user's data is stored separately from your application data. This can be problematic.

For example, if you want to reference the user in a table within the application data, such as "posts", you will need to add the userId to your "posts" table. Then, to fetch the user of a post, you will first need to retrieve the post and then use the userId to retrieve the user from the Clerk API.

The major disadvantages of Clerk are:

  • User data is stored separately from app data

  • Clerk branding is present on the UI components

  • Limited customization options

  • Some Clerk APIs, such as useSignUp() and useSignIn(), are very hard to use.

NextAuth

Introduction

NextAuth is a self-hosted authentication solution that provides full control over the authentication process. It offers a set of adapters for various frameworks and services, enabling you to customize the authentication flow to your specific requirements.

Advantages

The biggest advantage of NextAuth is the ability to have full control over the authentication flow. This means you can customize and send your own emails, create your own sign-in and sign-up forms, and manage your own users.

Having control also allows you to have the users' data in the same place as the app data. You can use your own database and connect it with one of NextAuth's database adapters, such as Prisma.

The major advantages of NextAuth are:

  • Full control over the authentication flow

  • Users' data is in the same place as app data

  • Ability to bring your own database and ORM

  • Customization options for emails, sign-in and sign-up forms, etc.

  • Easy-to-use APIs and functions

Disadvantages

The major disadvantage of NextAuth is the complexity of the configuration process. Because you have full control, you need to ensure that everything is configured correctly, which can be complicated.

Another drawback is that you have to manage everything related to the users, including tokens, sessions, and profiles.

The major disadvantages of NextAuth are:

  • Complex configuration

  • Need to manage all aspects of user management

  • Responsibility to encrypt passwords for password provider

  • Requirement to send your own emails using email services like Resend

Conclusion

After reading through the post, I hope you’ll be able to choose the correct authentication service/provider for your next web application or startup. And if you’re still reading to this point, then that means you like my work!

If yes, be sure to subscribe to the newsletter. I post on this newsletter every week on Wednesday, and Saturday. I mainly focus on writing about Indie Hacking, UI/UX Design, and Web Development. You can also check me out on other platforms. Thanks for reading!

Join the conversation

or to participate.