Awesome Open Source
Awesome Open Source

MERN Login Signup Component

Update 3rd April 2021 : React and NodeJS packaged updated/fixed using npm audit, Packages updated may have breaking changes, If running the code in this repo causes any issues, send me an e-mail ⚠

Minimalistic, ready-to-use component for Sessions based Login and Sign-Up using Reactjs, Redux, Bootstrap Node.js + Express and MongoDB, can be used as a starting point for another project that needs authentication.

Features

  • Login page with success/error messages
  • Register page with success/error messages
  • Protected Profile page route that needs authentication to access
  • Persistence achieved using Sessions, with session ID stored on Cookie
  • Logout deletes session in database and cookie from browser
  • Fully responsive across Desktop, Tablet and Mobile

Prerequisites

  • Node.js
  • NPM
  • React
  • MongoDB Atlas MongoURI
  • .env file with ENV variables, a .env template is provided

Quick Start

Clone the repository

 https://github.com/shawn-dsilva/mern-login-signup-component.git

Install packages for Node backend

 cd mern-login-signup-component
 npm install

Install packages for React client

 cd mern-login-signup-component/client
 npm install

To Test Locally

remove the line "homepage": "https://demos.shawndsilva.com/sessions-auth-app", from client/package.json remove basename="/sessions-auth-app" from client/src/index.js

Start Dev Server ( both React server and Nodejs server )

 npm run dev

Image Gallery

Homepage

Login

Login with Error message

Register

Register with Error message

Register with Success message

Profile Page


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,535,723
Reactjs (75,636
Nodejs (55,313
Mongodb (14,667
Redux (13,315
Express (11,599
Bootstrap (10,126
Session (587
Cookies (371
Express Session (122
Related Projects