A Full MERN Stack Authentication Web

Explore the docs »

Live Demo: piedev.herokuapp.com

About App

A mern stack authentication system featuring tons of errors handling, form validation with transactional email sending e.g: account activation, password reset link, and protecting routes and AppBar.

Features and Errors handling

• 100% Responsive with nice a drawer and little animation
• Form Validation
• Create user
• Sending email verification link
• Resend Verification Link
• Protecting root / route from unverified email
• Protecting root / router if user not signed in
• Controlling signin state httpOnly cookie
• Sending forget password link and updating

You may get emails on spam folder as the SMTP only for served for demo purpose

Built With

• Express
• MongoDB
• React
• jwt
• react-hook-form
• Node Mailer

Getting Started

1. npm or yarn. I prefer yarn.

   npm install npm@latest -g
   npm install --global yarn
   

2. Clone the repo

   git clone https://github.com/pieeee/MERN-Stack-Authentication.git
   

3. Navigate to server folder and install dependencies via yarn or npm install.

4. Navigate to client folder and install dependencies via yarn or npm install.

5. Find the .env.local in server directory and fill it with your variables.

   JWT_SECRET =
   MONGO_URI =
   SMTP_USER =
   SMTP_PASS =
   NODE_ENV =
   

6. On ther server directory run yarn dev to start server on http://locahost:4000 in the development mode.

7. On ther client directory run yarn start to run application on http://locahost:3000 in the development mode.

App Structure

Client

┣ client
┃ ┣ src
┃ ┃ ┣ Assets
┃ ┃ ┣ Components
┃ ┃ ┃ ┣ Errors
┃ ┃ ┣ Config
┃ ┃ ┣ Helpers
┃ ┃ ┣ Pages
┃ ┃ ┃ ┣ ForgotPass.js
┃ ┃ ┃ ┣ Home.js
┃ ┃ ┃ ┣ Register.js
┃ ┃ ┃ ┗ Signin.js
┃ ┃ ┣ Utils
┃ ┃ ┣ App.js
┃ ┃ ┣ Custom.scss
┃ ┃ ┣ index.js
┃ ┣ package.json

Server

┣ server
┃ ┣ src
┃ ┃ ┣ configs
┃ ┃ ┣ resources
┃ ┃ ┃ ┗ users
┃ ┃ ┃ ┃ ┣ user.model.js
┃ ┃ ┃ ┃ ┗ user.router.js
┃ ┃ ┣ utils
┃ ┃ ┃ ┣ emails
┃ ┃ ┃ ┃ ┣ views
┃ ┃ ┃ ┃ ┗ index.js
┃ ┃ ┃ ┗ auth.js
┃ ┃ ┣ index.js
┃ ┃ ┗ server.js
┃ ┣ .babelrc
┃ ┣ package.json

Contributing

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.

1. Fork the Project
2. Create your Feature Branch
3. Commit your Changes
4. Push to the Branch
5. Open a Pull Request
6. Review and Help me to refactoring code.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Email: [email protected]

Project Link: MERN-Stack-Authentication