NextAuth.js with OAuth, Email Verification using Resend

This guide demonstrates how to integrate OAuth login using NextAuth.js, Resend for sending email verification links, and saving user data in PostgreSQL in a Next.js project.

demo.nextauth.mp4

Prerequisites

• Next.js
• PostgreSQL Database
• NextAuth.js
• Resend for sending email verification code
• Prisma ORM for PostgreSQL
• Basic understanding of OAuth providers like Google and Github

Steps to setup the project

1. Clone the project and install the dependecies

   git clone https://github.com/Yash-946/Nextauth-Template.git
   

   npm i
   

2. Setup the Environment variables, copy .env.example to .env

   DATABASE_URL=""
   NEXTAUTH_SECRET=""
   GOOGLE_CLIENT_SECRET=""
   GOOGLE_CLIENT_ID=""
   GITHUB_CLIENT_ID=""
   GITHUB_CLIENT_SECRET=""
   RESEND_API_KEY=""
   

3. Get the database connection url from Neon and than these commands to migrate the database and generate the prisma client

   npx prisma migrate deploy
   npx prisma generate
   

4. You can change the NEXTAUTH_SECRET as per your need

5. For RESEND_API_KEY make sure you have a domain and it is verify by Resend , only than you can send emails to anyone.

6. For setting up Google and Github secrets here is the demo 👇. Doc

demosetup.mp4

7. Final run npm run dev