Authenticate Neon Postgres application users with Auth.js
Learn how to add passwordless authentication to your Neon Postgres database application using Auth.js and Resend
Auth.js (formerly NextAuth.js) is a popular authentication solution that supports a wide range of authentication methods, including social logins (e.g., Google, Facebook), traditional email/password, and passwordless options like magic links. For simple authentication flows, such as social logins, Auth.js can operate using only in-memory session storage (in a browser cookie). However, if you want to implement custom login flows, or persist the signed-in users' information in your database, you need to specify a database backend.
For example, passwordless authentication methods like magic links require secure storage of temporary tokens. Magic link login has become increasingly popular since it eliminates the need for users to remember complex passwords, reducing the risk of credential-based attacks.
In this guide, we'll walk through setting up a simple Next.js application, using Neon Postgres as the database backend for both Auth.js authentication and application data. We'll use Resend for sending magic link emails. We will cover how to:
- Set up a Next.js project with Auth.js for magic link authentication
- Create a Neon Postgres database and configure it as the Auth.js database backend
- Configure Resend as an authentication provider
- Implement a basic authenticated feature (a simple todo list)
Prerequisites
To follow along with this guide, you will need:
- A Neon account. If you do not have one, sign up at Neon. We'll use a database named
neondb
in the following examples. - Node.js and npm installed on your local machine. We'll use Node.js to build and test the application locally.
- A Resend account for sending emails. Resend offers a free tier to get started.
- A domain
Initialize your Next.js project
Run the following command in your terminal to create a new Next.js project:
Now, navigate to the project directory and install the required dependencies:
For authentication, we'll use the Auth.js
library (aliased as v5 of the next-auth
package), which provides a simple way to add authentication to Next.js applications. It comes with built-in support for Resend as an authentication provider. We use the @neondatabase/serverless
package as the Postgres client for the Auth.js
database adapter.
Also, add a .env
file to the root of your project, which we'll use to store the Neon connection string and the Resend API key:
Setting up your Neon database
Initialize a new project
- Log in to the Neon console and go to the Projects section.
- Click the New Project button to create a new project.
- Choose your preferred region and Postgres version, then click Create Project.
Retrieve your Neon database connection string
Navigate to the Connection Details section to find your database connection string. It should look similar to this:
Add this connection string to your .env
file:
Configuring Auth.js and Resend
Set up Resend
-
Sign up for a Resend account if you don't already have one.
-
In the Resend dashboard, create an API key.
-
Add the API key to your
.env
file: -
Optional: Resend requires verification of ownership for the domain you use to send emails from. If you own a domain, you can follow the instructions here to verify ownership.
For this example, we'll use the test email address (
onboarding@resend.dev
) to send emails. However, this only works for the email address you use to sign up for a Resend account, so you won't be able to sign in from other email accounts.
Configure Auth.js
Create a new file auth.ts
in the root directory of the project and add the following content:
This file sets up Auth.js with the Neon Postgres adapter and configures the Email provider for magic link authentication.
Additionally, Auth.js
also requires setting up an AUTH_SECRET
environment variable, which is used to encrypt cookies and magic tokens. You can use the Auth.js
CLI to generate one:
Add the generated secret to your .env
file:
Implement authentication routes
Create a new dynamic route at app/api/auth/[...nextauth]/route.ts
with the following content:
This route file imports the authentication handlers from the auth.ts
file that handle all auth-related requests — sign-in, sign-out, and redirect after authentication.
The auth
object exported from ./auth.ts
is the universal method we can use to interact with the authentication state in the application. For example, we add a message above the main app layout that indicates the current user's name and a sign-out button at the bottom.
Implementing the application
Create the database schema
Create a new file app/db/schema.sql
with the following content:
This schema defines all the tables required for the Auth.js
library to work, and also the todos
table that we'll use to store the todo list for each user.
To apply this schema to your Neon database, you can use the Neon SQL Editor in the web console or a database management tool like psql.
Implement the Todo list feature
Create a new file app/TodoList.tsx
:
Update the main page
Replace the contents of app/page.tsx
with:
Create API routes for the todos feature
Create a new file app/api/todos/route.ts
:
This implements a simple API endpoint that allows users to create new todos.
Create another file app/api/todos/[id]/route.ts
:
This implements a simple API endpoint that allows users to update the status of a todo.
Running the application
To start the application, run:
This will start the Next.js development server. Open your browser and navigate to http://localhost:3000
to see the application in action. When running for the first time, you'll be see a Sign In
link which will redirect you to the Auth.js
widget, prompting you to input your email address. Enter your email to receive a magic link. Once authenticated, you'll be able to add and manage your todos.
Note that if you are using the test email address (onboarding@resend.dev
) to send emails, you won't be able to sign in from other email accounts.
Conclusion
In this guide, we demonstrated how to set up a Next.js application with Auth.js for magic link authentication, using Neon Postgres as the database backend for both authentication and application data. We implemented a simple todo list feature to showcase how authenticated users can interact with the application.
Next, we can add more routes and features to the application. The auth
method can be used in the Next.js API routes or middleware to protect endpoints that require authentication.
To view and manage the users who authenticated with your application, you can query the users
table of your Neon project. Similarly, all the generated magic link tokens are logged in the verification_token
table, making it easy to audit and revoke access to your application.
Source code
You can find the source code for the application described in this guide on GitHub.
Resources
For more information about the tools and libraries used in this guide, refer to the following documentation:
Need help?
Join our Discord Server to ask questions or see what others are doing with Neon. Users on paid plans can open a support ticket from the console. For more detail, see Getting Support.