Example
Check out the example project
The easiest way to get started is to clone the example application and follow the instructions in the README.
You can find a live demo of the example project at next-auth-example.now.sh
Add to an existing project
The example code below shows how to add authentication to an existing Next.js project.
Add API route
To add NextAuth.js to a project create a file called [...nextauth].js
in pages/api/auth
.
All requests to /api/auth/*
(signin, callback, signout, etc) will automatically be handed by NextAuth.js.
tip
See the options documentation for how to configure providers, databases and other options.
Add React Hook
The useSession()
React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.
That's all the code you need to add authentication with NextAuth.js to a project!
tip
You can use the useSession
hook from anywhere in your application (e.g. in a header component).
Add to all pages
To allow session state to be shared between pages - which improves performance, reduces network traffic and avoids component state changes while rendering - you can use the NextAuth.js Provider in pages/_app.js
.
tip
Check out the client documentation to see how you can improve the user experience and page performance by using the NextAuth.js client.
Deploying
When deploying your site set the NEXTAUTH_URL
environment variable to the canonical URL of the website.
tip
To set environment variables on Vercel, you can use the dashboard or the now env
command.