/Securit

Full stack application of a demo logging system

Primary LanguageJavaScript

image


JavaScript · Node JS · Express
API · JSON · mysql2
HTML · CSS · Handlebars
Cookies · JsonWebToken
Your favorite tool?


Intro

SecurIt is a Node JS application to build a demo of secure logging system as an essential backend part of any user interactable web application.

Summary

  • Users can sign up by providing their user ID, name, and email address along with a password.
  • An OTP will be sent to their email address which will be valid for 2 hours.
  • After submitting OTP (for verification) users can enter into the home page and get access to their account.
  • user can Logout / Login their account.
  • In case of password forgotten user can recover their account by the forget password option.
  • A JSON Web Token will be saved to keep a user logged in for a limited time period.
  • Users can change their data/credentials in the settings option.

💻 Tech Stack

Front-End:

handlebars CSS3 JavaScript BootStrap

Back-End:

Javascript nodeJS expressJS

DataBase:

mtSQL

Other:

JWT GIT NPM


File Structure

SecureIt
├───.vscode
├───node_modules                             # all node/NPM modules are here
├───public                                   # styles, fonts, images are statically served from here
│   ├───account                              # Styles for account section (after login)
│   │   ├───1dashboard
│   │   ├───1home
│   │   │   ├───css
│   │   │   └───images
│   │   ├───1setting
│   │   │   ├───css
│   │   │   ├───icons
│   │   │   └───javascript       
│   │   ├───css
│   │   ├───icons
│   │   └───javascript
│   ├───api                                   # API client in front-end
│   ├───assets                                # Styles for landing page and docs
│   │   ├───css
│   │   ├───icons
│   │   ├───images
│   │   └───javascript
│   └───form                                  # Styles for credentials submission form
│       ├───css
│       ├───images
│       └───js
├───src                                       # Total backend processing is performed here
│
├───views                                     # frontend templates are here
│    └───layouts
│
├───.env                                      # All keys, passwords and other secrets will be here
│
├───.gitignore
│
├───packege-lock.json 
│
├───packege.json
│
└───readme.md



snapshots


      dashboard   navigation bar   settings   options



Environment setup

Database Building

as mySql is used as database therefore install mySQL for your system (if not installed) and create a password to access your database.
decide a name for your database and a name for table that will contain inside it.
i.e: database will be securit and table users.
to build the database, run this query in mysql CLI-

CREATE DATABASE securit;
USE securit;
CREATE TABLE users (
username VARCHAR(45) NOT NULL PRIMARY KEY,
password VARCHAR(45) NOT NULL,
ID VARCHAR(45) NOT NULL,
email VARCHAR(45) NOT NULL,
active TINYINT(1) NOT NULL DEFAULT 0,
name VARCHAR(45) NOT NULL,
OTP VARCHAR(45) NULL,
OTP_timestamp INT NULL,
OTP_attempt TINYINT NULL,
password_attempt TINYINT NULL);

dotenv file creation

In this dotenv file all keys and credentials for this web app will be stored.
first things first, create a file named .env at the root of the directory, then fill these data

PORT='5510'
JWT_token='<create a token>'*
DB_HOST='<hostname>'**
DB_USER='root'
DB_PASS='<enter mysql password>'
DB_NAME='securit'***
MAIL_HOST='<smtp.example.com>'****
MAIL_USER='<no-reply@example.com>'*****
MAIL_PASS='<enter email app password>'******

*create a strong key for JSON Web Token. e.g "se8r5g4t5GB5DF4BgdHd8g7er56wA5D65W6465SA4F654"
**type hostname, for local host type 127.0.0.1
***enter database's name which has been created. as we decided our database name is securit
****enter email host name of which service you're using to send email to users. e.g if you're using your gmail account for this then type 'smtp.gmail.com'
*****enter email ID from where email will be sent
******enter app password for email server.
Tip: to use gmail as sender generate app password.
go to the link account.google.com, then go to the security section.
enable 2-step verification feature. an 'App password' feature will be visible just behind 2-step verification option.
generate a key by selecting app: mail and your device

NPM package installation

Install Node JS to run this program in server side. open a terminal and go to it's root directory.
type npm install to install all NPM libraries mentioned in package.json as dependencies

Run this app

environment setup is completed.
now start the server by running npm start
go to the browser and type URL localhost:5510




for any kind of problem or queries contact me on Linkedin