NextAuth.js

Open Source. Full Stack. Own Your Data.

Clerk complete user management

More than authentication...
Complete user management.

Get started for free

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.