![Shield with key icon](/img/logo/logo-sm.png)
NextAuth.js
Authentication for Next.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
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>
</>
}
NextAuth.js is an open source community project.