Creating a custom authentication system can be a time-consuming task, and this is where NextAuth.js comes in handy. It provides secure authentication support for applications built with the Next.js framework.

What Is NextAuth.js?

NextAuth.js is an open-source lightweight library that provides authentication and authorization support for Next.js applications. It lets developers quickly and easily set up authentication and authorization for their Next.js apps. It provides features such as authentication with multiple providers, email, and passwordless authentication.

How Does NextAuth.js Work in Authentication?

NextAuth.js’s authentication solution provides a client-side API that you can integrate into your Next.js application. You can use it to authenticate users with different sign-in providers with whom they have created accounts.

Under the hood, users get redirected to a provider’s sign-in page. Upon successful authentication, the provider returns session data that contains the user’s payload. This payload can then authorize access to the application and its resources.

New Feature Updates in NextAuth.js (v4)

In December 2022, NextAuth.js released its fourth version. This version has been improved from its earlier version, v3, with new updates and modifications. The changes mainly focus on improving the usage of the library in the authentication process.

1. Updates to the useSession Hook

You can use the useSession hook to check if a user is signed in or not. In this new version, the useSession hook returns an object that provides a more straightforward way to test states, thanks to the addition of the status option. See the code below:

2. SessionProvider Context Becomes Mandatory

The new version four mandates the usage of the SessionProvider context. This means you will have to wrap your app with the useSession Provider. NextAuth.js recommends wrapping your app within the _app.jsx file.

Additionally, the clientMaxAge method has been replaced with refetchInterval. This will make it easier to fetch the session periodically in the background.

3. Importing Providers Individually

NextAuth.js provides several provider services which you can use to sign in a user. They include:

Using built-in OAuth Providers (e. g. GitHub, Google). Using Email Provider.

In this new version, you need to import each provider individually.

4. Other Minor Changes

The client-side import has been renamed to next-auth/react from next-auth/client. Changes to the arguments of the callback methods: signIn({ user, account, profile, email, credentials })session({ session, token, user })jwt({ token, user, account, profile, isNewUser })

Getting Started With NextAuth.js in Authentication

To integrate NextAuth.js in your Next.js applications, follow the steps below:

Create a Next. js Application by running this command: npx create-next-app Run npm install next-auth in your terminal to install NextAuth. js in your Next. js Application. Visit the NextAuth. js official documentation and select your preferred provider/s from the list of those supported. Next, create an account in the developer console of your selected provider/s and register your Next. js application. In the developer console of your selected provider/s, specify the home route URL and the callback redirect URL, save the changes and copy the ClientID and Client Secret. In your Next. js application root directory, create a . env file to hold the Client ID and Client Secret. Lastly, in the /pages/api directory, create a new folder called auth. In the auth folder, create a new file, and name it [. . . nextauth]. js. In the file created, add the code below. The code shows NextAuth. js client-side API using a Google Provider:

You can now go ahead and build a login authentication page. Here is a DOM rendering for a login component:

The useSession Hook accesses the current user session object. Once a user signs in and is authenticated by Google, a session object with the user payload is returned. This allows Next.js to render the user details on the client side of the app, for this case the email.

Custom Authentication Systems vs. Ready-to-Use Solutions Such as NextAuth.js

Choosing between building a custom authentication system and integrating a ready-to-use authentication solution such as NextAuth.js, it is important to consider the cost, complexity, and security of each solution.

If you have the resources and expertise to develop a custom authentication system, that may be the best approach for you. However, if you are looking for an out-of-the-box solution that is easy to implement, secure, and cost-effective then NextAuth.js may be a good choice to consider. Ultimately, the choice will depend on your needs and preferences.