Check out the example project
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
All requests to
/api/auth/* (signin, callback, signout, etc) will automatically be handed by NextAuth.js.
See the options documentation for how to configure providers, databases and other options.
Add React Hook
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!
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
Check out the client documentation to see how you can improve the user experience and page performance by using the NextAuth.js client.
When deploying your site set the
NEXTAUTH_URL environment variable to the canonical URL of the website.
To set environment variables on Vercel, you can use the dashboard or the
now env command.