Skip to main content
Shield with key icon

NextAuth.js

Authentication for Next.js

Looking for a hosted alternative?Try Clerk →
Sponsored

Open Source. Full Stack. Own Your Data.

Easy

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

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

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.

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy