NextAuth.js

Source URL: https://next-auth.js.org/

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 (
      )
    }

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.