Next.js Starter Template with Authentication

#nextjs#github#nextauth#prisma

Posted on Feb 11, 2025•2 min read

Introduction

After completing Fin Flow, I was doing fine, but I realized I needed a To-Do App. My lazy habits meant I needed a structured way to execute my day. So, I decided to build one.

But then, while setting up the app, I had a moment of clarity—or maybe just frustration. The setup process was exactly the same as Fin Flow. The same authentication setup, folder structure, and initial configurations. I thought, why not make this easier? Instead of reinventing the wheel every time, I decided to create a Next.js starter template that I could use for any future projects.

Thus, the Next.js Starter with Authentication was born.

The Idea Behind the Template

Instead of setting up the same boilerplate every single time, I took the base code from Fin Flow and generalized it. The idea was simple:

User Authentication: Signup, Login with email/password & Google login
Email Verification: Verification emails with Resend API, including a resend feature
Structured Framework: Modular code with predefined authentication pages
Environment Configurations: .env.example provides necessary variables for configuration

This way, anytime I wanted to start a new project, I wouldn’t have to deal with the boring parts—just clone the repo and get going.

Authentication Routes

Login: /auth/login
Signup: /auth/signup
Email Verification: /auth/verify

How to Set Up and Use the Template

I’ve open-sourced the template so anyone can use it! 🚀

📌 GitHub Repository: Next.js Starter with Authentication

1. Clone the Repository

git clone https://github.com/DivyanshuLohani/next-js-starter-with-authentication.git
cd next-js-starter-with-authentication

2. Install Dependencies

npm install

3. Configure Environment Variables

Rename .env.example to .env.local and fill in the required fields, including API keys for Resend and Google authentication.

For Google Login, add the following URIs to your Google OAuth redirect settings:

Production: https://{YOUR_DOMAIN}/api/auth/callback/google
Development: http://localhost:3000/api/auth/callback/google

4. Run the Development Server

npm run dev

The project will be running at localhost:3000.

Authentication Configuration

This project uses NextAuth.js for authentication. Modify the configuration in:

src/lib/auth/authOptions.ts

to customize authentication behavior, providers, and callbacks.

Final Thoughts

This template has already saved me a lot of time, and I hope it helps others too. If you’re tired of setting up the same Next.js authentication flow over and over again, give it a try!

Let me know what you think—or better yet, contribute to the repo and help improve it. 💡

TL;DR

Built a Next.js starter template to streamline project setup
Includes authentication (email/password, Google login, email verification)
Modular and scalable structure for easy customization
Open-source and available on GitHub for anyone to use