MERN authentication using JWT and HTTP-Only cookie

Overview

MERN Authentication Starter

This is a starter app for a MERN stack application with authentication. This is for a SPA (Single Page Application) workflow that uses the Vite Build tool. This authentication workflow is based off of my MERN Stack From Scratch | eCommerce course.

It includes the following:

  • Backend API with Express & MongoDB
  • Routes for auth, logout, register, profile, update profile
  • JWT authentication stored in HTTP-only cookie
  • Protected routes and endpoints
  • Custom middleware to check JSON web token and store in cookie
  • Custom error middleware
  • React frontend to register, login, logout, view profile, and update profile
  • React Bootstrap UI library
  • React Toastify notifications

Usage

Env Variables

Rename the .env.example file to .env and add the following

NODE_ENV = development
PORT = 5000
MONGO_URI = your mongodb uri
JWT_SECRET = 'abc123'

Change the JWT_SECRET to what you want

Install Dependencies (frontend & backend)

npm install
cd frontend
npm install

Run


# Run frontend (:3000) & backend (:5000)
npm run dev

# Run backend only
npm run server

Build & Deploy

# Create frontend prod build
cd frontend
npm run build
You might also like...

IDLIX Scrapper API with cookie

IDLIX Scrapper API with cookie

IDLIX Scrapper About IDLIX Scrapper, IDLIX API Hak Cipta Projek ini dilindungi oleh MIT yang dimana penggunanya boleh menggunakan, mendistribusikan, m

Dec 16, 2022

Netlify functions session cookie 🍪

netlify-functions-session-cookie 🍪 Cryptographically-signed session cookies for Netlify functions. Summary Install Concept and Usage API Environment

Jun 8, 2022

A cookie banner for Bootstrap 5 websites

A cookie banner for Bootstrap 5 websites

Bootstrap cookie banner A cookie banner for websites using Bootstrap 5. Demo: Bootstrap Version used: 5.1.3 Usage Include the CSS and js files. !-- C

Dec 3, 2022

Dead simple cookie-based session for Deno Fresh.

Fresh Session 🍋 Dead simple cookie-based session for Deno Fresh. Get started Fresh Session comes with a simple middleware to add at the root of your

Jan 5, 2023

A simple cookie consent plugin for jQuery

jquery.cookie-consent A simple jQuery plugin for requesting consent for cookie usage. Live demo See a live demo on CodePen Installation Using npm npm

Nov 29, 2022

Utility for authorizing user in a connected app, creating JWT to authenticate against it, and perform a sample callout.

Question: What is this for? Answer: When configuring a Salesforce Connected app to use certificates to authenticate you will use JSON Web Tokens to a

Jun 15, 2022

node.js project based jwt-auth / register-login-logout

JSON Web Token / Authentication-Authorization JSON Web Token allows us to check Authorization (Session Control). JSON Web Token (JWT) is an open stand

Sep 15, 2022

node.js project based jwt-auth / register-login-logout

JSON Web Token / Authentication-Authorization JSON Web Token allows us to check Authorization (Session Control). JSON Web Token (JWT) is an open stand

May 28, 2022

Projeto com validação JWT Tela de Login

ValidacaoJWT This project was generated with Angular CLI version 13.3.6. Development server Run ng serve for a dev server. Navigate to http://localhos

Sep 7, 2022
Comments
  • minor frontend fixes

    minor frontend fixes

    Header.js Badge not used, removed

    eslintrc option for development --> env: { browser: true, es2020: true, node: true },

    Screen:

    ProfileScreen {Link, useNavigate} not used, removed

    ProfileScreen -after button b4 Form close, added- {isLoading && < Loader / > }

    ProfileScreen changed redirect to '/' in try catch for password

    RegisterScreen {useLocation} not used, removed

    opened by dglnyc 0
Owner
Brad Traversy
Full stack web developer and online instructor, specializiing in mostly JS, but also write Python, PHP and some other stuff.
Brad Traversy
React.js Login, Logout, Registration example with JWT and HttpOnly Cookie

React Login and Registration example with JWT and HttpOnly cookie For more detail, please visit: React Login and Registration example with JWT and Htt

null 37 Dec 24, 2022
This repository aims to create a POC about authentication and authorization using NestJS, Prisma and JWT.

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Vinícius Fraga Modesto 2 Nov 2, 2022
A dead simple JWT-based authentication library for Next.js framework.

nexauth A dead simple JWT-based authentication library for Next.js framework. Getting Started Visit https://betagouv.github.io/nexauth/#/install to ge

beta.gouv.fr 12 Aug 2, 2022
We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Zuri Training 17 Dec 2, 2022
A utility package to help implement stateless CSRF protection using the Double Submit Cookie Pattern in express.

Double CSRF A utility package to help implement stateless CSRF protection using the Double Submit Cookie Pattern in express. Dos and Don'ts • Getting

Psifi Solutions 24 Dec 28, 2022
📡Usagi-http-interaction: A library for interacting with Http Interaction API

?? - A library for interacting with Http Interaction API (API for receiving interactions.)

Rabbit House Corp 3 Oct 24, 2022
A CRUD implementation using sequelize, mySQL, NODEJS, Express, JWT and other technologies.

A ideia do projeto é simular o funcionamento do backend de um blog através da implementação de uma aplicação em Node.js usando o pacote sequelize para

Vinicius Savordelli 6 May 11, 2022
Learn how to set up Supabase auth for both the frontend and backend of your application using a JWT - JSON web token.

Supabase auth, frontend + backend - example with Next.js Learn how to set up Supabase auth for both the frontend and backend of your application using

YK 7 Nov 20, 2022
🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker ?? Just enter your GitHub name and track your followings!

Youngkwon Kim 10 Jun 15, 2022
A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sidebars, etc

Unclutter Browser Extension A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sideb

null 849 Jan 9, 2023