Using NextAuth.js in Next.js 13

In this tutorial, we’ll use NextAuth.js in order to incorporate authentication inside Next.js 13 app. Instructions given herein will work on any Linux, macOS or Windows WSL. Next.js 13 requires Node.js 16.14 or higher – assuming you have the minimum required Node.js version, enter following command in the terminal to install Next.js 13 app:

npx create-next-app@13

Keep pressing Enter for default selections in installation prompts. Once installation is finished, go inside my-app folder by entering:

cd my-app 

Then execute following command in order to add NextAuth.js to the project:

npm install next-auth

Now create folders api/auth/[…nextauth] inside my-app/app folder by entering following command:

mkdir -p app/api/auth/[...nextauth]

Then create route.ts inside the above folder:

touch app/api/auth/[...nextauth]/route.ts

And then insert following code inside route.ts:

import type { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import GithubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"
import NextAuth from "next-auth";

export const authOptions: NextAuthOptions = {
    session: {
      strategy: "jwt",
    },
    providers: [
      CredentialsProvider({
        name: "Credentials",
        credentials: {
          email: {
            label: "Email",
            type: "email",
            placeholder: "example@example.com",
          },
          password: { label: "Password", type: "password" },
        },
        async authorize(credentials) {
          const user = { id: "1", name: "Admin", email: "admin@admin.com" };
          return user;
        },
      }),
      GithubProvider({
        clientId: process.env.GITHUB_ID,
        clientSecret: process.env.GITHUB_SECRET,
      }),
      GoogleProvider({
        clientId: process.env.GOOGLE_ID,
        clientSecret: process.env.GOOGLE_SECRET,
      }),
    ],
  };

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Now you’re able to access routes signin(), logout() etc. from within your app. To check this, replace all code inside app/page.tsx with following:

'use client'

import { signIn, signOut } from "next-auth/react";
import Link from "next/link";

export default async function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="relative flex place-items-center">

        <button onClick={() => signIn()} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2">
          Sign in
        </button>

        <Link href="/register" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2">
          Register
        </Link>

        <button onClick={() => signOut()} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2">
          Sign Out
        </button>
        
        <Link href="/profile" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2">Profile</Link>

      </div>
    </main>
  )
}

Run the development server by entering:

npm run dev

Then surf to:

localhost:3000

Press on Sign in button to see that Nextauth.js has been successfully incorporated inside the app. Of course, back-end implementation including third-parties (Github, Google) API keys remains to be included – let’s save that for another day 😉