Add authentication to your Next.js app with NextAuth.js

Cover Image for Add authentication to your Next.js app with NextAuth.js
Marouane Reda
Marouane Reda
If you need to understand the basics of Next.js, i recommend this course. (Disclaimer : this is an affiliate link that may earn me a small commission, but with no extra cost to you if you choose to enroll)

Implementing authentication in an app from the ground app is a sensitive and tedious process, luckily several new ways emerged to make this task easier (Firebase authentication, Auth0, passport.js, …) . We will see in this article how to implement authentication in our Next.js app using NextAuth.js.

What is NextAuth

NextAuth.js is a flexible, easy to use and secure open source authentication solution designed from the ground up to support Next.js and Serverless. It support multiple providers like Facebook, Google, Twitter, Github, … and the traditionnal email/password authentication method.

We will see now how to implement authentication using NextAuth.js and Github as a provider.

Step 1 : Create our app and install the packages

Let’s create our app first :

npx create-next-app nextauth-app

and install NextAuth.js:

npm install next-auth

Step2 : Configure our Github provider

To configure the authentication providers for our app, we will go to pages/api, then create the directory auth and under it the file […nextauth].js :

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    // OAuth authentication providers, here GitHub...
        clientId: process.env.GITHUB_ID,
        clientSecret: process.env.GITHUB_SECRET

Here we configure the Github provider with the clientId and the secret. these will be configured for the test environnement in the .env.local file in the root of our project :


Where do I get these credentials?

You need to log in to your GitHub account, then go to

From there you will add the application name, the url of your app ( localhost in our case, since we are only testing in our case) , and the callback url ( the callback is [url of your app]/api/auth/callback/[provider] , so in our case http://localhost:3000/api/auth/callback/github )

then you will be redirected to a page where you will see you client ID and can generate the secret.

Step 3 : Update your index.js and _app.js

In your index.js, we will now check if the user is logged in , which means a session exists, and show his username and a button to logout or if it is not logged in, then we show the log in button. Note that the session , the sign in and sign out method come out of the box with NextAuth.js.

The index.js file will look like this :

import {
  useSession, signIn, signOut
} from 'next-auth/client'

export default function Component() {
  const [ session, loading ] = useSession()
  if(session) {
    return <>
      Signed in as {} <br/>
      <button onClick={() => signOut()}>Sign out</button>
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>

We need also to add the provider we configured earlier to _app.js so the session can be verified in all the pages of the app.

_app.js :

import { Provider } from 'next-auth/client'

export default ({ Component, pageProps }) => {
  return (
    <Provider session={pageProps.session} >
      <Component {...pageProps} />

Step4 : Check the final result

So There is our home page :

We will now login, and we are redirected to the Github authentication screens :

We are now logged in :


We have seen in this article how to implement easily authentication in our app using NextAuth.js and Github. The same process can be done using Facebook, Google, Twitter, …