Code Monkey home page Code Monkey logo

mern-authentication-app-sample's Introduction

About The Project

A sample MERN (fullstack) app to demonstrate Authentication with JWT tokens, BCrypt, React and others.

Built with:

BACKEND (Database)

  • MongoDB Atlas
  • Mongoose (to write queries and interact with Mongo Atlas in general)

BACKEND (Server)

  • NodeJS
  • Express ^4 (middleware)
  • Bcrypt (for password hashing).
  • jsonwebtokens (or JWT) (for authentication purposes)
  • cookieparser (parsing cookies middleware)
  • CORS (to enable and configure CORS since we are interacting with a front-end client)
  • dotenv (for storing sensitive information such as database keys)
  • Morgan (loggin middleware)

FRONTEND (Client)

  • React (with useState, useEffect hooks)
  • React Router (with Protected Route implementation)
  • Axios (for Http requests)
  • Bootstrap 4

Setup

First, clone the repo using the command:

  git clone

Set up (free) MongoDB Atlas

Since this app is using MongoDB Atlas (Free tier is ok) as a dabatase you will need first so set up an account (if you do not have one) and a database's collection.

Create and edit a .env file to store private keys, etc..

You will need to add in the root directory a .env file. Inside this file, you will need to add your secrets keys to access the database and to sign and verify JWT tokens.

Here's an example of how the .env file can look like:

   DB_USER = <put your username here>
   DB_PASSWORD = <put your password here>
   DB_URL = <put the entire MongoDB atlas URL here>

   JWT_SECRET = <put the secret JWT random string here>

Run npm install to install dependencies

Navigate to the project directory and run this command

  npm install

Then, navigate the client folder and run the same command to run all the client's dependencies.

Start the server

Navigate to the project directory and run this command

  npm start 

Start the react app

Navigate to the client folder and run this command

  npm start

Todo

  • Clean-up unused components and react alerts
  • Refactor React code to improve maintainability
  • Add inline comments to explain all major steps in the code
  • Check resolver functions in the client for error handling (the one in use now works but I think it can be improved / simplified )

License

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

mern-authentication-app-sample's People

Contributors

mnove avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.