Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
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.
- 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



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
![]()
![]()
![]()
![]()
```## 🤝 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