AuthXpert

The comprehensive authentication system encompasses a complete process, including login 🔑, registration, email account activation, password reset, and notifications. It features advanced form validation and secure routes 🔒, along with session manipulation and more...

📜 Table of Contents

• 🚀 Live Demo
• 🖼️ Project Screenshots
• 💡 Key Features
• 🛠️ Installation & Set Up
• 🏭 Building & Running for Production
• 🌱 Environment Variables
• 💻 Tech Stack
• 🍰 Contribution Guidelines
• 📝 Creating a Pull Request
• 💖 Like my work?

🚀 Live Demo

Immerse yourself in its design and functionality with an interactive live demo — simply click the link to explore.

Live Preview ➡️ Demo

🖼️ Project Screenshots

Feel free to check out the screenshots of my website for a sneak peek into its captivating user interface.

⬅️ SignUp Page ➡️

⬅️ Account Activation Email ➡️

⬅️ SignIn Page ➡️

⬅️ Home Page ➡️

⬅️ Password Reset Page ➡️

⬅️ Reset Password Email ➡️

💡 Key Features

Here are some of the standout features of the project:

• Login & Registration 🔑: Seamless user access through secure login and registration processes.

• Email Verification and Notifications 📧: Implemented email notifications for account verification and password resets using Elastic Email for added security.

• Password Reset 🔄: Simplify account recovery with a user-friendly password reset mechanism.

• Advanced Form Validation ✅: Enhance user experience with rigorous form validation, minimizing errors and improving data integrity.

• Secure Routes 🔒: Protect sensitive user data by implementing secure routing protocols.

• Session Manipulation 🔄: Effectively manage user sessions to maintain security and accessibility throughout the application.

• Password Strength Estimation 🛡️: Implemented Zxcvbn for estimating password strength, encouraging users to create stronger passwords.

• Customizable Email Templates ✉️: Leveraged Handlebars for personalized email notifications, enhancing user engagement.

• Integration of Modern Tools ⚙️: Utilized React.js, Next.js, MongoDB, TypeScript, and additional libraries such as NextAuth, React Hook Form, and Zod to create a user-friendly and secure authentication system.

This robust authentication system not only enhances user security but also provides a smooth and reliable experience, setting a solid foundation for future expansions. Revolutionize your user experience today with a secure and efficient authentication process!

🛠️ Installation & Set Up

1. Clone the repository:

git clone https://github.com/kranthikumarkaranam/AuthXpert.git

2. Go to the project directory:

cd AuthXpert

3. Install dependencies using npm:

npm install

4. Start the development server:

Before starting the server add these env variables.

npm run dev

🏭 Building & Running for Production

1. Generate a full static production build:

npm run build

2. Preview the site as it will appear once deployed:

npm run start

🌱 Environment Variables

To run this project, you need to add the following environment variables to your .env file in the project's root directory.

Also, feel free to take a look at the .env.example file here.

• MONGODB_URL
• NEXTAUTH_URL
• NEXTAUTH_SECRET
• GITHUB_ID
• GITHUB_SECRET
• GOOGLE_ID
• GOOGLE_SECRET
• DISCORD_ID
• DISCORD_SECRET
• TWITTER_ID
• TWITTER_SECRET
• FACEBOOK_ID
• FACEBOOK_SECRET
• AUTH0_ID
• AUTH0_SECRET
• AUTH0_ISSUER_URL
• MAILING_EMAIL
• MAILING_PASSWORD
• SMTP_HOST
• SMTP_EMAIL
• SMTP_PASSWORD
• SMTP_PORT
• RESET_TOKEN_SECRET
• ACTIVATION_TOKEN_SECRET

💻 Tech Stack

Technologies used in the project:

• Typescript
• React.js
• NEXT.js
• MongoDB
• Mongoose
• JWT
• Next Auth
• React Hook Form
• React Toastify
• React Spinners
• Nodemailer
• Handlebars
• axios
• bcryptjs
• validator
• zod
• zxcvbn

🍰 Contribution Guidelines

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• See Contributing for ways to get started.
• If you have suggestions for adding or removing projects, feel free to open an issue to discuss it, or directly create a pull request by following the guidelines here.
• Please make sure you check your spelling and grammar.
• Create individual PR for each suggestion.
• Also, please read through the Code of Conduct before posting your first idea as well.

📝 Creating a Pull Request

Follow the steps below to Initiate a Pull Request

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

💖 Like my work?

Thank you for taking the time to explore the project. I hope it brings value and joy to those who use it.

If you require any help or have any questions, please don't hesitate to reach out to me here.

Made with ❤️ by KRANTHI.