NextAuth.js

Open Source. Full Stack. Own Your Data.

Easy

Built in support for popular services
(Google, Facebook, Auth0, Apple…)
Built in email / passwordless / magic link
Use with any username / password store
Use with OAuth 1.0 & 2.0 services

Flexible

Built for Serverless, runs anywhere
Bring Your Own Database - or none!
(MySQL, Postgres, MSSQL, MongoDB…)
Choose database sessions or JWT
Secure web pages and API routes

Secure

Signed, prefixed, server-only cookies
HTTP POST + CSRF Token validation
JWT with JWS / JWE / JWK
Tab syncing, auto-revalidation, keepalives
Doesn't rely on client side JavaScript

npm install next-auth

Add authentication in minutes!

Server /pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth'
import AppleProvider from 'next-auth/providers/apple'
import FacebookProvider from 'next-auth/providers/facebook'
import GoogleProvider from 'next-auth/providers/google'
import EmailProvider from 'next-auth/providers/email'

export default NextAuth({
  providers: [
    // OAuth authentication providers...
    AppleProvider({
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
    // Passwordless / email sign in
    EmailProvider({
      server: process.env.MAIL_SERVER,
      from: 'NextAuth.js <no-reply@example.com>'
    }),
  ]
})

Client (App) /pages/_app.jsx

import { SessionProvider } from "next-auth/react"

export default function App({
  Component, pageProps: { session, ...pageProps }
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps}/>
    </SessionProvider>
  )
}

Client (Page) /pages/index.js

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

Example Code

NextAuth.js is an open source community project.