Next.js Authentication: Implementing Secure User Authentication and Authorization

Hey there, welcome to my blog! In this post, I'm going to show you how to implement secure user authentication and authorization in your Next.js app. Next.js is a popular framework for building fast and scalable web applications using React. But how do you handle user authentication and authorization in Next.js? How do you protect your routes and data from unauthorized access? How do you integrate with different authentication providers like Google, Facebook, or GitHub? These are some of the questions that I will try to answer in this post.

Why Authentication and Authorization?

User authentication and authorization are essential features for any web application that requires users to sign up, log in, and access restricted content. Authentication is the process of verifying the identity of a user, while authorization is the process of granting or denying access to certain resources based on the user's role or permissions. There are many ways to implement authentication and authorization in Next.js, but in this post, I will focus on using NextAuth.js, a library that simplifies the process and provides a lot of benefits.

What is NextAuth.js?

NextAuth.js is an open-source library that provides an easy way to add authentication and authorization to your Next.js app. It supports various authentication providers like Google, Facebook, GitHub, Twitter, and more. It also supports email/password, magic link, and one-time password (OTP) authentication methods. It handles sessions, cookies, tokens, CSRF protection, and encryption for you. It also provides hooks and callbacks for customizing the behavior and appearance of your authentication flow. And it works well with any database or API.

Installing NextAuth.js

To use NextAuth.js in your Next.js app, you need to install it as a dependency:

npm install next-auth
or
yarn add next-auth
or
pnpm add next-auth 

Adding NextAuth to API route

You need to create a file called [...nextauth].js in the pages/api/auth folder of your project. This file will contain the configuration for NextAuth.js, such as the authentication providers you want to use, the database connection string, the session options, and any custom logic you want to add. For example, here is a basic configuration that enables Google and GitHub authentication:

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],

  // A database is optional, but required to persist accounts in a database
  database: process.env.DATABASE_URL,
});

You also need to create environment variables for your provider credentials and your database connection string. You can use a .env file in the root of your project for this purpose. For example:

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
DATABASE_URL=your_database_connection_string

Make sure to replace the values with your own credentials and connection string. You can get them from the developer console of each provider and from your database provider.

Adding Session Provider

Once you have set up NextAuth.js in your project, you can use it to add authentication and authorization features to your app. For example, you can use the useSession hook to get the current user session in any component. Although to be able to use useSession first, you'll need to expose the session context, <SessionProvider />, at the top level of your application:

// pages/_app.jsx
import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Getting User Session on the Client Side

You are able to use useSession hook and other NextAuth hooks everywhere in you components as here:

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

Getting User Session on the Server Side

You can also use the getServerSession() function to get the current user session on the server side:

// pages/api/restricted.js
import { getServerSession } from "next-auth/next"
import { authOptions } from "./auth/[...nextauth]"

export default async (req, res) => {
  const session = await getServerSession(req, res, authOptions)

  if (session) {
    res.send({
      content:
        "This is protected content. You can access this content because you are signed in.",
    })
  } else {
    res.send({
      error: "You must be signed in to view the protected content on this page.",
    })
  }
}

As you can see, getting the user session on the client side and server side with NextAuth.js is pretty straightforward. You just need to import the useSession and getServerSession functions and then you can access the session objects and use them for whatever you need.

I hope you found this article helpful and learned something new. If you are interested in reading more about Next.js and other web development topics check out my previous articles about Next.js Performance Optimization and Next.js API Routes. Thanks for reading and happy coding!