User Authentication in Next.js with Strapi

This article is a guest post by Nirmalya Ghosh. He is a frontend architect and wrote this blog post through the Craft for the Community program.

In this tutorial, we'll be building a Next.js application and authenticate that with Strapi and NextAuth.

Introduction

Strapi is the leading open-source headless CMS. It's 100% Javascript, fully customizable and developer-first. I've been using Strapi for some of my Open Source projects and the developer experience is really good. It has helped me build prototypes and products much faster.

Next.js is a React framework for building Server-side rendered applications. It has a bunch of features with a good developer experience and supports TypeScript out of the box.

NextAuth is an authentication library built for using with Next.js. It's easy, fast and secure.

The code for this tutorial is available on Github.

Softwares required for running the application

1. Docker (Download link)
2. npm (Download link)
3. yarn (Download link)

Creating a new Next.js application

Let's start by creating a new Next.js application. We can create a Next.js application using the following command:

yarn create next-app

The above command will ask for the name of the project. We'll call it frontend.

Once the setting up of the project and installing all dependencies are complete, we can go inside the frontend directory and start the application using the following command:

cd frontend && yarn dev

The above command will start the application on http://localhost:3000/.

Creating a new Strapi application

In this section, we'll create a new Strapi application using Docker. More information about how to create a new Strapi application using Docker can be obtained from their repository. We'll use Postgres.

We can create a new directory and name it backend in the root of our project. We can create a new file docker-compose.yml inside the backend directory with the following content:

// backend/docker-compose.yml

version: '3'
services:
  strapi:
    container_name: strapi
    image: strapi/strapi
    environment:
      - DATABASE_CLIENT=postgres
      - DATABASE_HOST=db
      - DATABASE_PORT=5432
      - DATABASE_NAME=strapi
      - DATABASE_USERNAME=strapi
      - DATABASE_PASSWORD=strapi
    ports:
      - 1337:1337
    volumes:
      - ./app:/srv/app
    depends_on:
      - db
  db:
    container_name: postgres
    image: postgres
    restart: always
    volumes:
      - ./db:/var/lib/postgresql/data
    ports:
      - 5432:5432   
    environment:
      POSTGRES_USER: strapi
      POSTGRES_PASSWORD: strapi
      POSTGRES_DB: strapi

Now, we need to start Docker and run the following command inside the backend directory to create our new Strapi application:

docker-compose up

• When running this image, Strapi will check if there is a project in the /srv/app folder of the container. If there is nothing then it will run the strapi new command in the container /srv/app folder.

Once the setting up of our Strapi application is complete, we'll be able to view the administration panel at http://localhost:1337/admin.

Next, we'll need to create our first administrator in order to log into the Strapi administration panel:

Once we create our first administrator, we'll be logged into the Strapi administration panel:

Creating and integrating Google OAuth Client into our applications

In this section, we'll be creating a new Google OAuth Client and integrate it into both of Next.js and Strapi applications.

First, we'll need to visit the Google Developer Console to create a new OAuth Client and copy the credentials (Client ID and Client Secret) in our frontend/**.env** file:

1. Create a new OAuth client ID.
2. Choose Web application as the Application Type.
3. Add the following Authorized redirect URIs:

http://localhost:3000/api/auth/callback/google

http://localhost:1337/connect/google/callback

Once we click on the save button, we'll get our new OAuth Client's credentials. We can create a new file .env inside our frontend directory to store all the credentials:

// frontend/.env

NEXT_PUBLIC_API_URL=http://localhost:1337
NEXT_PUBLIC_DATABASE_URL=postgres://strapi:strapi@localhost:5432/strapi?synchronize=true
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID="12345.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="1234-567-9"

You'll need to replace the values of GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET with the values of your new Google OAuth Client.

Next, let's add these credentials to our Strapi application as well. In the Strapi administration panel, we need to add the Google OAuth Client credentials and enable the Google provider. The values can be added in the Providers menu inside the Settings tab.

We need to enter the value of the Google provider and enable that:

Installing and integrating NextAuth with Next.js and Strapi

In this section, we'll be installing and integrating NextAuth.

We can run the following command inside our frontend directory to install NextAuth as a dependency:

yarn add next-auth

Next, we'll need to create a new file ...nextauth.js inside frontend/pages/api/auth directory with the following content:

// frontend/pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  database: process.env.NEXT_PUBLIC_DATABASE_URL,
  session: {
    jwt: true,
  },
  callbacks: {
    session: async (session, user) => {
      session.jwt = user.jwt;
      session.id = user.id;
      return Promise.resolve(session);
    },
    jwt: async (token, user, account) => {
      const isSignIn = user ? true : false;
      if (isSignIn) {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
        );
        const data = await response.json();
        token.jwt = data.jwt;
        token.id = data.user.id;
      }
      return Promise.resolve(token);
    },
  },
};

const Auth = (req, res) =>
  NextAuth(req, res, options);

export default Auth;

In the NextAuth callback function, we're calling the Strapi Authentication API endpoint. We're storing the JWT and user.id from data that the Strapi API sends us. In this way, we can understand which user is currently authenticated.

We can get the details of the authenticated users from the getSession function of NextAuth. If the getSession function doesn't return us any details, then we can assume that the user is not authenticated.

We'll also need to add the pg package so that NextAuth can connect to our database directly. We can install that package using the following command from our frontend directory:

yarn add pg

We can verify whether NextAuth is working with our application by updating our frontend/pages/index.js with the following content:

// frontend/pages/index.js

import { getSession, signIn, signOut } from "next-auth/client";
import Head from 'next/head';
import Link from "next/link";
import React from "react";

const IndexPage = ({
  session,
}) => {
  const signInButtonNode = () => {
    if (session) {
      return false;
    }

    return (
      <div>
        <Link href="/api/auth/signin">
          <button
            onClick={(e) => {
              e.preventDefault();
              signIn();
            }}
          >
            Sign In
          </button>
        </Link>
      </div>
    );
  };

  const signOutButtonNode = () => {
    if (!session) {
      return false;
    }

    return (
      <div>
        <Link href="/api/auth/signout">
          <button
            onClick={(e) => {
              e.preventDefault();
              signOut();
            }}
          >
            Sign Out
          </button>
        </Link>
      </div>
    );
  };

  if (!session) {
    return (
      <div className="hero">
        <div className="navbar">
          {signOutButtonNode()}
          {signInButtonNode()}
        </div>
        <div className="text">
          You aren't authorized to view this page
        </div>
      </div>
    )
  }

  return (
    <div className="hero">
      <Head>
        <title>Index Page</title>
      </Head>
      <div className="navbar">
        {signOutButtonNode()}
        {signInButtonNode()}
      </div>
      <div className="text">
        Hello world
      </div>
    </div>
  );
};

export const getServerSideProps = async ({ req }) => {
  const session = await getSession({ req });
  return {
    props: {
      session,
    },
  };
};

export default IndexPage;

Now, if we visit http://localhost:3000/, we should be able to view the following screen:

We can log in using our Gmail account once we click on the Sign In button. Once we're signed in, we should be able to view the following screen on http://localhost:3000/:

All the details of the authenticated user is present in the session prop of the page:

We can show the details of the authenticated user by fetching the details from the session prop. Also, the authenticated user will now be visible in the Strapi administration panel:

Conclusion

In this tutorial, we learnt how we can authenticate a Next.js application using Strapi and NextAuth. We've worked with the REST API that Strapi provides out of the box. However, a similar solution can also be implemented for using GraphQL.

The code for this tutorial is available on GitHub. I've also created a boilerplate for using Strapi with Next.js. It'll help you get up and running with Strapi and Next.js really quickly. Feel free to give it a try.

Please note: Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us by reporting it here.

Get started with Strapi by creating a project using a starter or trying our live demo. Also, join our academy to become a Strapi expert, and consult our forum if you have any questions. We will be there to help you.