Install dependency

NextAuth is an external library, therefore, we need to install it in our project first:

npm install next-auth

Create API Route and configure it

The file path for the newly created file needs to be: pages/api/auth/[...nextauth].js

We copy the example code from NextAuth. Within the array of providers, we can enter as many providers as we wish. We specify one provider: GithubProvider and import it from NextAuth. We also need to import NextAuth, call it and pass it the authOptions object as an argument. Aside from default exporting NextAuth, we also export the authOptions. This is needed for a later step.

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
 
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
};
 
export default NextAuth(authOptions)

Provide Session context

Within our application we want to determine whether a user is logged in or not. This information is stored in the useSession hook. In order to make this hook available in our application, we need to expose the session context at the top level of our application (e.g. _app.js).

import { SessionProvider } from "next-auth/react"
 
export default function App({
  Component,
  // we destructure the session from the pageProps to have access to it
  pageProps: { session, ...pageProps },
}) {
  return (
  // the SessionProvider wraps our Component and contains the session as a prop
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Login Component

The NextAuth documentation offers a comprehensive Login Component that serves as an excellent starting point. This component can be customized to suit your styling preferences. NextAuth includes essential methods such as signIn and signOut, which are demonstrated in their example by being invoked within buttons. Additionally, it utilizes the useSession hook to retrieve the current session data.

The session data will be undefined if no user is currently signed in. If a user is signed in, the session will be an object containing user-specific information. It is useful to log out the session data to understand the type of information it holds. Below is the example code provided in the documentation:

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>
    </>
  )
}

It's a good practice to render the <Login /> component on a high level of the component tree (e.g. inside <Layout />) to make it accessible for all pages of your app.