NextAuth.js

Overview

NextAuth.js is a complete open source authentication solution for Next.js applications.

It is designed from the ground up to support Next.js and Serverless.

Follow the examples to see how easy it is to use NextAuth.js for authentication.

Install: npm i next-auth

See next-auth.js.org for more information and documentation.

Features

Authentication

• Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
• Built-in support for many popular OAuth sign-in services
• Supports email / passwordless authentication
• Supports both JSON Web Tokens and database sessions

Own your own data

• An open source solution that allows you to keep control of your data
• Supports Bring Your Own Database (BYOD) and can be used with any database
• Built-in support for for MySQL, MariaDB, Postgres, MongoDB and SQLite
• Works great with databases from popular hosting providers
• Can also be used without a database (e.g. OAuth + JWT)

Secure by default

• Designed to be secure by default and promote best practice for safeguarding user data
• Attempts to implement the latest guidance published by Open Web Application Security Project

Security focused features include CSRF protection, use of signed cookies, cookie prefixes, secure cookies, HTTP only, host only and secure only cookies and promoting passwordless sign-in.

Example

Add API Route

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

const options = {
  site: 'https://example.com'
  providers: [
    // OAuth authentication providers
    Providers.Apple({
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
    // Sign in with passwordless email link
    Providers.Email({
      server: process.env.MAIL_SERVER,
      from: '<no-reply@example.com>'
    }),
  ],
  // SQL or MongoDB database (or leave empty)
  database: process.env.DATABASE_URL
}

export default (req, res) => NextAuth(req, res, options)

Add React Component

import React from 'react'
import { 
  useSession, 
  signin, 
  signout 
} from 'next-auth/client'

export default () => {
  const [ session, loading ] = useSession()

  return <p>
    {!session && <>
      Not signed in <br/>
      <button onClick={signin}>Sign in</button>
    </>}
    {session && <>
      Signed in as {session.user.email} <br/>
      <button onClick={signout}>Sign out</button>
    </>}
  </p>
}

Acknowledgement

NextAuth.js 2.0 is possible thanks to its contributors.

Getting started

Follow the examples to get started.