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.


  • 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


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

Quick Start

Clone the repository

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": "", 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



Login with Error message


Register with Error message

Register with Success message

Profile Page

Alternatives To Mern Login Signup Component
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,118,155
Reactjs (170,673
Express (31,869
Mongodb (31,259
Redux (28,756
Bootstrap (28,402
Authentication (26,979
Session (14,085
Login (14,051
Cookies (8,494
Register (7,702
Minimalistic (5,196
Express Session (126