next-auth
Advanced tools
NextAuth.js is a complete open-source authentication solution for Next.js applications. It provides a simple and secure way to add authentication to your Next.js app, supporting various authentication providers, including OAuth, email/password, and custom credentials.
OAuth Authentication
NextAuth.js supports OAuth authentication with various providers like Google, Facebook, GitHub, etc. The code sample demonstrates how to configure Google and Facebook OAuth providers.
```javascript
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
export default NextAuth({
providers: [
Providers.Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
}),
Providers.Facebook({
clientId: process.env.FACEBOOK_CLIENT_ID,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET
})
]
});
```Email/Password Authentication
NextAuth.js allows email/password authentication by sending magic links to users' email addresses. The code sample shows how to configure the email provider.
```javascript
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
export default NextAuth({
providers: [
Providers.Email({
server: process.env.EMAIL_SERVER,
from: process.env.EMAIL_FROM
})
]
});
```Custom Credentials Authentication
NextAuth.js supports custom credentials authentication, allowing you to define your own logic for authenticating users. The code sample demonstrates a simple username/password authentication.
```javascript
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
export default NextAuth({
providers: [
Providers.Credentials({
name: 'Credentials',
credentials: {
username: { label: 'Username', type: 'text' },
password: { label: 'Password', type: 'password' }
},
authorize: async (credentials) => {
const user = { id: 1, name: 'User' };
if (credentials.username === 'user' && credentials.password === 'password') {
return Promise.resolve(user);
} else {
return Promise.resolve(null);
}
}
})
]
});
```Session Management
NextAuth.js provides session management, allowing you to access the user's session data on both the client and server sides. The code sample shows how to retrieve the session in a Next.js page using getServerSideProps.
```javascript
import { getSession } from 'next-auth/client';
export async function getServerSideProps(context) {
const session = await getSession(context);
return {
props: { session }
};
}
```Passport is a popular authentication middleware for Node.js. It is highly flexible and supports a wide range of authentication strategies. Compared to NextAuth.js, Passport requires more manual setup and configuration, but it offers greater flexibility and can be used with any Node.js framework.
Auth0 is a cloud-based authentication service that provides a comprehensive solution for authentication and authorization. It supports various authentication methods and integrates well with many platforms. Compared to NextAuth.js, Auth0 is a third-party service that requires a subscription for advanced features, but it offers a more extensive set of features and easier integration with multiple platforms.
Firebase Authentication is a part of Google's Firebase platform, providing backend services to authenticate users in your app. It supports email/password, phone number, and various social providers. Compared to NextAuth.js, Firebase Authentication is a managed service that integrates seamlessly with other Firebase services, but it may not offer the same level of customization as NextAuth.js.
Authentication for Next.js
Open Source. Full Stack. Own Your Data.
NextAuth.js is a complete open source authentication solution for Next.js applications.
It is designed from the ground up to support Next.js and Serverless.
This is a monorepo containing the following packages / projects:
next-auth package@next-auth/*-adapter packagesnpm install next-auth
The easiest way to continue getting started, is to follow the getting started section in our docs.
We also have a section of tutorials for those looking for more specific examples.
See next-auth.js.org for more information and documentation.
NextAuth.js can be used with or without a database.
Advanced options allow you to define your own routines to handle controlling what accounts are allowed to sign in, for encoding and decoding JSON Web Tokens and to set custom cookie security policies and session properties, so you can control who is able to sign in and how often sessions have to be re-validated.
NextAuth.js comes with built-in types. For more information and usage, check out the TypeScript section in the documentation.
// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import AppleProvider from "next-auth/providers/apple"
import GoogleProvider from "next-auth/providers/google"
import EmailProvider from "next-auth/providers/email"
export default NextAuth({
secret: process.env.SECRET,
providers: [
// OAuth authentication providers
AppleProvider({
clientId: process.env.APPLE_ID,
clientSecret: process.env.APPLE_SECRET,
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
// Sign in with passwordless email link
EmailProvider({
server: process.env.MAIL_SERVER,
from: "<no-reply@example.com>",
}),
],
})
The useSession() React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.
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>
</>
)
}
Use the <SessionProvider> to allow instances of useSession() to share the session object across components. It also takes care of keeping the session updated and synced between tabs/windows.
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
If you think you have found a vulnerability (or not sure) in NextAuth.js or any of the related packages (i.e. Adapters), we ask you to have a read of our Security Policy to reach out responsibly. Please do not open Pull Requests/Issues/Discussions before consulting with us.
NextAuth.js is made possible thanks to all of its contributors.
We're happy to announce we've recently created an OpenCollective for individuals and companies looking to contribute financially to the project!
Clerk
💵
|
Auth0
💵
|
FusionAuth
💵
|
Stytch
💵
|
Prisma
💵
|
Neon
💵
|
Beyond Identity
💵
|
Lowdefy
💵
|
Descope
💵
|
Badass Courses
💵
|
Encore
💵
|
Arcjet
💵
|
Route4Me
💵
|
Netlight
☁️
|
Checkly
☁️
|
superblog
☁️
|
Vercel
☁️
|
We're open to all community contributions! If you'd like to contribute in any way, please first read our Contributing Guide.
ISC
FAQs
Authentication for Next.js
The npm package next-auth receives a total of 923,958 weekly downloads. As such, next-auth popularity was classified as popular.
We found that next-auth demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.