Auth model created by Using nodeJs for backend & reactJs for frontend with the help of TailwindCss in styling

Overview

project cover

The Universal Auth System

Using The MERN Stack Including Mysql

--> The project is divded to two separte projects

1- The Client side ->

  • containing the react project Front-End
  • the client Auth Functions and storing user tokens methods
  • powered with the Tailwind CSS frameWork for styling perposes
  • using JWT package to create, handle, decode tokens
  • Axios package used to create the http requests & hnadling the connections between the back,front servers

2- The Server side ->

  • containing the Node project Back-End
  • The server Auth Main Functions --> Register, login, logout
  • verfiy mail by sending otp from the server to the client mail Using NodeMailer
  • Forget password by sending new pass from the server to client mail & ask him to change it once logged in again
  • update Client account Password & verfiy the user before updating using JWT Verfiy
  • Refresh Tokens function to update user Access token in case of expiration

Setup Steps

  • install Docker And init the docker compose file included in the project --> Optinal (you can use your favorate mysql database)
  • create db for your project in phpmyadmin interface
  • init the db.sql file included in the root of the project by copying it in the sql section on phpmyadmin it will create all the tables for you
  • open sever-side project
  • init npm install command in it to install necessary packages included in the packages.json file
  • create the .env file on the project and you will fint a .env example file in the project root compy it and place your info in it

---> you should create somthing like that

DATABASEHOST = 'db host'
DATABASEUSER = 'db username'
DATABASEPASSWORD = 'db password'
DATABASE = 'db name'

JWT_SECRET = 'JWT secret' // commoly we use HS256
,JWT_REFRESH_SECRET = 'JWT refresh secret' // commoly we use RS256
,JWT_EXPIRES_IN = 'expriration  time' // see the jwt package docs for more info about that 

PORT = 5000 // change it if you want to use another port

MAIL_SERVER = Gmail // for testing i use a new gamil made for dveloping only and enabel the low applications securty acess to be able to send from it by nodemailer
MAIL_USER = 'your email'
MAIL_PASS = 'email password'
  • init command npm start in the terminal
  • start Testing and add-on the rest of your project
after finishing from the back it's time for the front -->
  • open teh project in another directory
  • init npm install command to install the nesscary packages
  • init npm start command to start your front-end server
  • now you have your front & back sides workig fine
  • Well done... now it's time to start building your project and impress the world with your ideas
ps:
  • The system might have some problems if founded please report it to me so I can fix it in the future
  • please if there is any comments for better exprenice or security send to me to help the system be better for the other developers
  • the technolgy which used to create the server is Express Genertaor you can check it out from here
  • in the server mailing section you can use your personal Gmail account to send the mails for testing but you need to Allow security option in Gmail called Allow less secure apps as i metion in the .env file setup

Used Techs Reference:

# Technology Description
1 Node.js javascript frame work
2 express.js server creator and handler package
3 react.js the main front end framework
4 tailwindcss the styling css framework
5 JWT json web tokens used to create and handle access tokens
6 axios the http request handler package
7 bcrypt package to encrypt passwords
8 nanoid the package used to create ids
9 dotenv used to storing secret varaibles
10 nodemon for server handling
11 docker used to init the mysql & phpmyadmin containers
You might also like...

Ecommerce-backend-nestjs - Ecommerce app with Nestjs + Prisma ORM + GraphQL + SQLite

ECOMMERCE BACKEND NESTJS APP Nestjs + Prisma ORM + GraphQL + SQLite USER Create Account Login Product Create Product Get Products Get Product Search P

Apr 6, 2022

The Firma Project - Backend

The Firma Project - Backend

Firma About This is a backend for Firma Project. The Firma project is another corporate piece of software to engage employees to collaborate with othe

Feb 5, 2022

A simple comment system with backend support.

A simple comment system with backend support.

Waline A simple comment system with backend support. 中文 README Documatation English | 简体中文 Feature Fast Really Safe Support full markdown syntax Simpl

Jan 9, 2023

A simple url shorter API built with nodejs running on Kubernetes in Google Cloud, using PostgreSQL for storage and cloud sql proxy.

Simple URL Shorter - Google Cloud - Kubernetes A simple url shorter API built with nodejs running on Kubernetes in Google Cloud, using PostgreSQL for

Nov 25, 2021

Bulk follow GitHub users using a NodeJS script.

Github bulk follow Getting Started Prerequisites Clone the project to your local environment: git clone [email protected]:farid-ouachrar/github-bulk-

Sep 27, 2021

just a graphql example created by typescript + fastify + mikro-orm(postgresql) + mercurius(graphql adaptor) + type-graphql

fastify-mikro-orm-mercurius-graphql-example A MikroORM boilerplate for GraphQL made with Fastify, Mercurius, Typescript using TypeGraphQL 📦 Packages

Aug 28, 2022

Cli created by shoulders to facilitate the development of Nest.js applications that use our seed!

Nest CLZ Your CLI by Shoulders to create a backend started with nest-seed Installation We will launch the application soon! Using npm: npm i -g nest-c

Mar 22, 2022

ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used

Jan 3, 2023

NodeJS PostgreSQL database performance insights. Locks, index usage, buffer cache hit ratios, vacuum stats and more.

Node Postgres Extras NodeJS port of Heroku PG Extras with several additions and improvements. The goal of this project is to provide powerful insights

Nov 14, 2022
Owner
m.bebars
Hi my name is Bebars, I am full stack developer still learning about lots of things opened to join projects and learn more
m.bebars
Thin Backend is a Blazing Fast, Universal Web App Backend for Making Realtime Single Page Apps

Website | Documentation About Thin Thin Backend is a blazing fast, universal web app backend for making realtime single page apps. Instead of manually

digitally induced GmbH 1.1k Dec 25, 2022
A typescript data mapping tool. To support mutual transforming between domain model and orm entity.

ts-data-mapper A typescript mapping tool supports mutual transforming between domain model and orm entity. In most case, domain model is not fully com

zed 8 Mar 26, 2022
Mercurius Auth Plugin

mercurius-auth Mercurius Auth is a plugin for Mercurius that adds configurable Authentication and Authorization support. Features: Define auth directi

null 71 Dec 23, 2022
A starter template for Nest.js with MongoDB, GraphQL, JWT Auth, and more!

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

Michael Guay 19 Dec 25, 2022
Connect to private Google Cloud SQL instance through Cloud SQL Auth Proxy running in Kubernetes.

⛅ google-cloud-sql A CLI app which establishes a connection to a private Google Cloud SQL instance and port-forwards it to a local machine. Connection

Dinko Osrecki 10 Oct 16, 2022
A Gmail Clone which built with ReactJS and Redux. You can sign in with your Google Account, compose a new e-mail and send realtime emails to the project.

Gmail Clone with ReactJS A Gmail Clone that you can sign in with your Google Account, compose a new e-mail and send realtime emails to the project. Cl

Özge Coşkun Gürsucu 49 Nov 14, 2022
Eine einfache Möglichkete Tailwindcss und Alpine.js mit REDAXO zu nutzen

TAR - Tailwindcss - Alpine.js - REDAXO Eine einfache Möglichkeit REDAXO mit Tailwindcss zu nutzen Installation: yarn install oder npm install Die gewü

Thorben 3 Feb 24, 2022
A back-end server aplication created using node.js, express and mongodb.

Course Material and FAQ for my Complete Node.js, Express and MongoDB Bootcamp This repo contains starter files and the finished project files for all

Pablo César Jiménez villeda 1 Jan 4, 2022
Realtime database backend based on Operational Transformation (OT)

This README is for [email protected]. For [email protected], see the 1.x-beta branch. To upgrade, see the upgrade guide. ShareDB ShareDB is a realtime databa

ShareJS 5.5k Dec 29, 2022
📠 The backend of the Fairfield Programming Association website.

Backend Server Features Duck Generator We didn't want to use people's faces for the profile pictures. This was for three reasons: we didn't want to pa

Fairfield Programming Association 25 Nov 23, 2022