shawn-dsilva / Mern Login Signup Component
Minimalistic Sessions based Authentication app 🔒 using Reactjs, Nodejs, Express, MongoDB and Bootstrap. Uses Cookies 🍪
Stars: ✭ 74
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Mern Login Signup Component
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+1604.05%)
Mutual labels: mongodb, express, bootstrap
Movie Website
🎬基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站。
Stars: ✭ 118 (+59.46%)
Mutual labels: mongodb, express, bootstrap
Goeat Api
Rest API for a food delivery application - Built with Express, Postgres, Redis, MongoDB and Nodemailer
Stars: ✭ 36 (-51.35%)
Mutual labels: mongodb, express
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-56.76%)
Mutual labels: mongodb, express
Node Production
Take Your Node.js Project to The Production Environment (VPS/Dedicated Server).
Stars: ✭ 35 (-52.7%)
Mutual labels: mongodb, express
Jwt Node Vue
Repositório responsável pelo primeiro projeto da série de vídeos: Coding Stuff.
Stars: ✭ 29 (-60.81%)
Mutual labels: mongodb, express
Express Mvc Boilerplate
A simple mvc boilerplate for express.js (gulp + expressjs + nodemon + browser-sync)
Stars: ✭ 46 (-37.84%)
Mutual labels: mongodb, express
Mean Angular4 Chat App
MEAN stack with Angular 4 Chat App
Stars: ✭ 41 (-44.59%)
Mutual labels: mongodb, express
Restfeel
RESTFeel: 一个企业级的API管理&测试平台。RESTFeel帮助你设计、开发、测试您的API。
Stars: ✭ 59 (-20.27%)
Mutual labels: mongodb, bootstrap
Tested
Angular Material in MEAN Stack Website Source
Stars: ✭ 35 (-52.7%)
Mutual labels: mongodb, express
Vue Admin Spa Api
本项目使用node.js+express+MongoDB编写后端接口代码，主要为vue-admin-spa（前端项目）提供在线api接口
Stars: ✭ 31 (-58.11%)
Mutual labels: mongodb, express
Nodejs Socketio Chat App
MEAN Stack & Socket.IO Real-time Chat App | A MEAN stack based Real Time chat application
Stars: ✭ 45 (-39.19%)
Mutual labels: mongodb, bootstrap
Eva
🐳🐬Eva : 优雅，简约的完整博客项目 [前后端] (Eva: A concise, simple Blog Project. [FD/BD]) 🐋
Stars: ✭ 57 (-22.97%)
Mutual labels: mongodb, express
Blog By Nodejs
NodeJs + Mongoose + Express + jQuery + BootStrap + Ejs + Webpack搭建多人博客
Stars: ✭ 72 (-2.7%)
Mutual labels: mongodb, bootstrap
Habitica
A habit tracker app which treats your goals like a Role Playing Game.
Stars: ✭ 8,702 (+11659.46%)
Mutual labels: mongodb, express
Shopify Mern Boilerplate
A Boilerplate for creating MERN stack Shopify app.
Stars: ✭ 20 (-72.97%)
Mutual labels: mongodb, express
MERN Login Signup Component
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].