Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/arsath-eng/auth-testing

A comprehensive authentication solution that demonstrates best practices for implementing user authentication in Next.js applications. Features include social login with Google and GitHub, MongoDB integration for user management, protected routes, and a responsive UI built with Tailwind CSS.
https://github.com/arsath-eng/auth-testing

authentication authjs github-authentication google-authentication mongodb nextjs oauth social-login tailwindcss typescript user-authentication

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/arsath-eng/auth-testing
Owner: arsath-eng
Created: 2024-06-11T15:10:25.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-11-01T09:37:03.000Z (4 months ago)
Last Synced: 2024-11-12T17:06:12.208Z (3 months ago)
Topics: authentication, authjs, github-authentication, google-authentication, mongodb, nextjs, oauth, social-login, tailwindcss, typescript, user-authentication
Language: TypeScript
Homepage:
Size: 232 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 🔐 Auth.js v5 Next.js Authentication Project

![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)
![Auth.js](https://img.shields.io/badge/Auth.js-000000?style=for-the-badge&logo=auth0&logoColor=white)

A comprehensive authentication solution built with Next.js and Auth.js v5, featuring multiple sign-in methods and MongoDB integration.

## 📋 Table of Contents
- [Overview](#-overview)
- [Features](#-features)
- [Prerequisites](#-prerequisites)
- [Installation](#-installation)
- [Project Structure](#-project-structure)
- [Configuration](#-configuration)
- [Running the Project](#-running-the-project)
- [Screenshots](#-screenshots)
- [Contributing](#-contributing)
- [License](#-license)

## 🌟 Overview

This project demonstrates a modern authentication implementation using Auth.js v5 in a Next.js application. It provides a secure and scalable solution for handling user authentication with various providers and MongoDB integration.

## ✨ Features

- 🔒 Secure authentication with Auth.js v5
- 🚀 Built with Next.js 14+ and TypeScript
- 📱 Social login integration:
- Google Sign-In
- GitHub Authentication
- 💾 MongoDB database integration
- 🎨 Styled with Tailwind CSS
- 🔐 Protected routes and middleware
- 📱 Responsive design

## 🔧 Prerequisites

Before getting started, ensure you have the following installed:

- Node.js (v18 or higher)
- npm or yarn package manager
- MongoDB Atlas account or local MongoDB installation
- Git

## 🚀 Installation

1. **Clone the repository:**
```bash
git clone https://github.com/arsath-eng/Auth-Testing.git
```

2. **Navigate to the project directory:**
```bash
cd auth-project
```

3. **Install dependencies:**
```bash
npm install
# or
yarn install
```

## 📁 Project Structure

```
AUTH-PROJECT/
├── 📂 .next/ # Next.js build output
├── 📂 action/ # Server actions
├── 📂 app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── auth/ # Authentication pages
│ └── ... # Other app routes
├── 📂 components/ # Reusable React components
├── 📂 lib/ # Utility functions and configurations
│ ├── db.ts # Database connection
│ ├── getSession.ts # Session management
│ └── utils.ts # Helper functions
├── 📂 models/ # MongoDB models
│ └── User.ts # User model definition
├── 📂 public/ # Static assets
├── 📄 .env # Environment variables
├── 📄 auth.ts # Auth.js configuration
├── 📄 middleware.ts # Next.js middleware
└── 📄 [Other config files] # Various configuration files
```

## ⚙️ Configuration

1. **Create a `.env` file in the root directory with the following variables:**

```env
# MongoDB Connection
MONGO_URI='mongodb+srv://your-connection-string'

# Auth.js Secret
AUTH_SECRET='your-secret-key'

# GitHub OAuth
GITHUB_CLIENT_ID='your-github-client-id'
GITHUB_CLIENT_SECRET='your-github-client-secret'

# Google OAuth
GOOGLE_CLIENT_ID='your-google-client-id'
GOOGLE_CLIENT_SECRET='your-google-client-secret'
```

2. **Configure OAuth Providers:**
- Set up OAuth applications in [GitHub Developer Settings](https://github.com/settings/developers)
- Configure OAuth consent in [Google Cloud Console](https://console.cloud.google.com)

## 🚀 Running the Project

1. **Start the development server:**
```bash
npm run dev
# or
yarn dev
```

2. **Open your browser and navigate to:**
```
http://localhost:3000
```

## 📸 Screenshots

admin

user

mongodb

```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

Made with ❤️ by Arsath