NextAuth.js

Easy to use

Designed for Next.js and Serverless
Bring Your Own Database – or no database!
(MySQL, MariaDB, Postgres, MongoDB…)
Use JSON Web Tokens or Database Sessions

Easy to sign in

Sign in with any OAuth service
Sign in with any email / passwordless
Built in support for popular OAuth services
(Google, Facebook, Twitter, Auth0, Apple…)

Secure by default

CSRF protection with double submit cookie
Signed, refixed, server-only cookies
Signed + Encrypted (HMAC+AES) JWT
Doesn't require client side JavaScript

npm install next-auth

Step 1 – 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)

Step 2 – 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>
}

View Example Code

NextAuth.js is not affiliated with Vercel or Next.js