An open API service indexing awesome lists of open source software.

https://github.com/dharmveer97/next-auth-mongoose

A production-ready authentication template with NextAuth v5, MongoDB/Mongoose, and TypeScript. Supports credentials + OAuth providers.
https://github.com/dharmveer97/next-auth-mongoose

custom-form formik middleware mongodb mongoose next-auth-v5 nextjs15 react19 typescript vercel vercel-deployment yup

Last synced: 4 months ago
JSON representation

A production-ready authentication template with NextAuth v5, MongoDB/Mongoose, and TypeScript. Supports credentials + OAuth providers.

Awesome Lists containing this project

README

          

```markdown
# NextAuth v5 + Next.js 15 + React 19 + Mongoose Starter 🔥

A production-ready authentication template using NextAuth v5, MongoDB/Mongoose, and TypeScript. It supports both credentials and OAuth providers.

## 🚀 Quick Start

### 1. Clone the repository:

```bash
git clone git@github.com:dharmveer97/next-auth-mongoose.git
cd next-auth-mongoose
```

### 2. Install dependencies

```bash
npm install
# or
bun install
```

### 3. Create a `.env.local` file

```env
MONGODB_URI="your_mongodb_connection_string"
NEXTAUTH_SECRET="generated_secret_here"
NEXTAUTH_URL="http://localhost:3000"
GOOGLE_CLIENT_ID="your_google_oauth_id"
GOOGLE_CLIENT_SECRET="your_google_oauth_secret"
```

### 4. Generate `NEXTAUTH_SECRET`

```bash
openssl rand -base64 32
# or
npx auth secret
```

### 5. Start the development server

```bash
npm run dev
# or
bun run dev
```

## 🔧 Key Technologies

- **Authentication**: NextAuth v5
- **Database**: MongoDB + Mongoose ODM
- **Frontend**: React 19 + TypeScript
- **Forms**: Formik + Yup validation
- **Styling**: Tailwind CSS
- **Security**: BcryptJS password hashing

## 📂 Project Structure

```
├── app/
│ ├── api/auth/[...nextauth]/route.ts
│ └── (auth)/
├── components/
│ └── Auth/
├── models/
│ └── User.ts
├── lib/
│ └── mongoose.ts
└── types/
└── next-auth.d.ts
```

## 🛠️ MongoDB Setup

1. Create a free cluster at [MongoDB Atlas](https://www.mongodb.com/atlas/database).
2. Get your connection string:

```env
MONGODB_URI="mongodb+srv://:@cluster.mongodb.net/dbname?retryWrites=true&w=majority"
```

## 🔐 Google OAuth Setup

1. Go to [Google Cloud Console](https://console.cloud.google.com/).
2. Create OAuth 2.0 credentials.
3. Add the authorized redirect URI:

```
http://localhost:3000/api/auth/callback/google
```

## 🧩 TypeScript Models

### `models/User.ts`

```typescript
import { Schema, model } from 'mongoose';

const UserSchema = new Schema({
name: { type: String },
email: { type: String, unique: true },
password: { type: String, select: false },
role: { type: String, enum: ['user', 'admin'], default: 'user' },
emailVerified: { type: Date, default: null },
}, { timestamps: true });

export const User = model('User', UserSchema);
```

## 🚨 Security Features

- Password hashing with bcryptjs
- CSRF protection
- HTTPS-only cookies
- Secure session management
- Environment variable validation
- Type-safe API routes

## 📦 Deployment

### Vercel

1. Set environment variables in project settings.
2. Add the build command: `npm run build`.
3. Enable Serverless Functions.

### Netlify

```yaml
# netlify.toml
[build]
command = "npm run build"
publish = ".next"
```

## 💡 Usage Tips

- Customize the sign-in page in `app/(auth)/login/page.tsx`.
- Add more OAuth providers in `[...nextauth]/route.ts`.
- Extend the User model with additional fields.
- Use `getServerSession()` for server-side authentication.
- Implement rate limiting for authentication endpoints.

---

**Keywords**: Next.js Authentication, MongoDB Auth, NextAuth v5 Tutorial, React 19 Starter, TypeScript Auth Template, Mongoose User Model, Google OAuth Integration, Secure Login System

```