Implement basic authentication (#3)

* Implement basic authentication

Implementation of authentication middleware for API endpoints with basic
authentication.

Username, password and authentication token are configurable via
environment variables.

Moved HTML templates to root and added build, linter and start scripts.

* Improved logging

Improved logging by updating the format and adding request id to server.

Storing logs in a file.

* Configured eslint

Added eslint configuration with several rules for disallowing console,
debugger, checking unused vars, prefer imports and strict checks for
boolean conditions.

Author: abame

.cspell.json

@@ -9,7 +9,8 @@
         "package-lock.json",
         "report",
         ".env",
-        ".github"
+        ".github",
+        "dist"
     ],
     "language": "en",
     "noConfigSearch": true,
@@ -22,7 +23,9 @@
         "stefanzweifel",
         "SHELLCHECK",
         "DEVSKIM",
-        "gitmessage"
+        "gitmessage",
+        "uuidv",
+        "EDITMSG"
     ],
     "version": "0.2"
 }

.env.dist

@@ -1,2 +1,5 @@
 API_BASE_HOST=http://127.0.0.1:3000
-PORT=3000
+PORT=3000
+AUTH_TOKEN='CHANGE_ME' #base64 encoding of AUTH_USERNAME and AUTH_PASSWORD
+AUTH_USERNAME=CHANGE_ME
+AUTH_PASSWORD=CHANGE_ME

.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.eslintrc.js
+.prettierrc.js

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+    "root": true,
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "./tsconfig.json",
+        "sourceType": "module",
+        "ecmaVersion": 2020
+    },
+    "plugins": ["@typescript-eslint/eslint-plugin"],
+    "rules": {
+        "@typescript-eslint/strict-boolean-expressions": [
+            2,
+            {
+                "allowString": false,
+                "allowNumber": false
+            }
+        ],
+        "@typescript-eslint/interface-name-prefix": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "eqeqeq": ["error", "always"],
+        "no-console": "warn",
+        "no-debugger": "error",
+        "padding-line-between-statements": [
+            "error",
+            {
+                "blankLine": "always",
+                "prev": "block-like",
+                "next": "*"
+            }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "off",
+            {
+                "destructuredArrayIgnorePattern": "^_"
+            }
+        ],
+        "@typescript-eslint/consistent-type-imports": [
+            "error",
+            {
+                "prefer": "type-imports"
+            }
+        ]
+    },
+    "ignorePatterns": ["dist", "**/node_modules/**"]
+}

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .env
 megalinter-reports/
+dist
+access.log

.jscpd.json

@@ -11,6 +11,7 @@
         "**/.idea/**",
         "**/report/**",
         "**/*.svg",
-        "megalinter-reports"
+        "megalinter-reports",
+        "dist"
     ]
 }

.mega-linter.yml

@@ -1,6 +1,10 @@
 APPLY_FIXES: all # all, none, or list of linter keys
 SHOW_ELAPSED_TIME: true
 FILEIO_REPORTER: false
+EXCLUDED_DIRECTORIES:
+    - dist
+    - node_modules
+    - megalinter-reports
 DISABLE_LINTERS:
     - BASH_SHELLCHECK
     - REPOSITORY_CHECKOV

.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.github

package.json

@@ -7,16 +7,26 @@
     "license": "MIT",
     "private": true,
     "scripts": {
-        "start:dev": "nodemon src/app.ts"
+        "build": "tsc",
+        "start:dev": "nodemon src/app.ts",
+        "start": "node dist/app.js",
+        "linter": "npx mega-linter-runner"
     },
     "dependencies": {
+        "body-parser": "1.20.2",
+        "cors": "2.8.5",
         "dotenv": "16.3.1",
         "express": "4.18.2",
         "helmet": "7.0.0",
-        "nunjucks": "3.2.4"
+        "morgan": "1.10.0",
+        "nunjucks": "3.2.4",
+        "uuid": "9.0.0"
     },
     "devDependencies": {
+        "@types/uuid": "9.0.2",
+        "@types/cors": "2.8.13",
         "@types/express": "4.17.17",
+        "@types/morgan": "^1.9.4",
         "@types/node": "20.3.3",
         "@types/nunjucks": "3.2.3",
         "eslint": "8.44.0",

src/app.ts

@@ -2,16 +2,52 @@ import dotenv from 'dotenv'
 import express from 'express'
 import nunjucks from 'nunjucks'
 import helmet from 'helmet'
+import bodyParser from 'body-parser'
+import cors from 'cors'
+import morgan from 'morgan'
+import { createWriteStream } from 'fs'
+import { join } from 'path'
+import type { NextFunction, Request, Response } from 'express'
+import { v4 as uuidv4 } from 'uuid'
 import routes from './routes'
 
 dotenv.config()
 
 const port = process.env.PORT ?? 3000
 const app = express()
 
+app.use((request: Request, response: Response, next: NextFunction) => {
+  const requestID = uuidv4()
+  request.headers['X-Request-Id'] = requestID
+  response.set('X-Request-Id', requestID)
+  next()
+})
+
+morgan.token('id', (request: Request) => {
+  return request.headers['X-Request-Id'] as string
+})
+
+// adding Helmet to enhance your API's security
 app.use(helmet())
 
-nunjucks.configure('src/views', {
+// using bodyParser to parse JSON bodies into JS objects
+app.use(bodyParser.json())
+
+// enabling CORS for all requests
+app.use(cors())
+
+// adding morgan to log HTTP requests
+const accessLogStream = createWriteStream(join(__dirname, '../access.log'), {
+  flags: 'a'
+})
+app.use(
+  morgan(
+    ':date[iso] - :id - :remote-addr - :method :url - :response-time ms',
+    { stream: accessLogStream }
+  )
+)
+
+nunjucks.configure('views', {
   autoescape: true,
   express: app
 })

src/middleware/security/authentication.ts

@@ -0,0 +1,10 @@
+import type { Request, Response, NextFunction } from 'express'
+export default (request: Request, response: Response, next: NextFunction) => {
+  if (request.headers.authorization === `Basic ${process.env.AUTH_TOKEN}`) {
+    return next()
+  }
+
+  return response
+    .status(403)
+    .send({ status: 'fail', message: 'Authorization failed' })
+}

src/routes/api/v1/hello-world.ts

@@ -1,12 +1,27 @@
 import type { Request, Response } from 'express'
 import express from 'express'
+import authentication from '../../../middleware/security/authentication'
 
 const router = express.Router()
 
-router.get('/', (_request: Request, response: Response) => {
+router.get('/', authentication, (_request: Request, response: Response) => {
   response.json({
     status: 'success',
-    message: 'Hello World API!'
+    message: 'Hello World API!',
+    products: [
+      {
+        id: '1',
+        name: 'MacBook Pro'
+      },
+      {
+        id: '2',
+        name: 'HP'
+      },
+      {
+        id: '3',
+        name: 'Dell'
+      }
+    ]
   })
 })
 export default router

src/routes/api/v1/index.ts

@@ -1,4 +1,4 @@
-import { Express } from 'express'
+import type { Express } from 'express'
 import helloWorldRoute from './hello-world'
 
 export default (app: Express) => {

src/routes/index.ts

@@ -1,4 +1,4 @@
-import { Express } from 'express'
+import type { Express } from 'express'
 import v1 from './api/v1'
 import render from './render'
 

src/routes/render/hello-world.ts

@@ -4,11 +4,21 @@ import express from 'express'
 const router = express.Router()
 
 router.get('/', async (_request: Request, response: Response) => {
-  const result = await fetch(`${process.env.API_BASE_HOST}/api/v1/hello-world`)
+  const token = Buffer.from(
+        `${process.env.AUTH_USERNAME}:${process.env.AUTH_PASSWORD}`
+  ).toString('base64')
+  const result = await fetch(
+        `${process.env.API_BASE_HOST}/api/v1/hello-world`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Basic ${token}`
+          }
+        }
+  )
   const data = await result.json()
 
-  response.render('hello-world.html', {
-    message: data.message
-  })
+  response.render('hello-world.html', { data })
 })
 export default router

src/routes/render/index.ts

@@ -1,4 +1,4 @@
-import { Express } from 'express'
+import type { Express } from 'express'
 import helloWorldRoute from './hello-world'
 
 export default (app: Express) => {

src/views/hello-world.html

@@ -1,8 +1,13 @@
 {
     "compilerOptions": {
+        "outDir": "dist",
         "module": "commonjs",
         "esModuleInterop": true,
-        "sourceMap": false
+        "sourceMap": false,
+        "rootDir": "src",
+        "strictNullChecks": true,
+        "skipLibCheck": true
     },
-    "exclude": ["node_modules"]
+    "include": ["src"],
+    "exclude": ["node_modules", "megalinter-reports"]
 }

tsconfig.json

@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="keywords" content="NodeJs, Terraform, DemoApp">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
   </head>
   <body>
     {% block content %}{% endblock %}

src/views/base.html renamed to views/base.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+{% extends 'base.html' %}
+
+{% set title = 'Hello World' %}
+
+{% block content %}
+  <div class="container">
+    <h1 class="text-center mt-5">{{ data.message }}</h1>
+    <table class="table table-responsive table-striped table-hover table-sm">
+      <thead class="table-info">
+        <tr><th>ID</th><th>Name</th></tr>
+      </thead>
+      <tbody>
+        {% for product in data.products %}
+        <tr>
+          <td>
+            {{ product.id }}
+          </td><td>{{ product.name }}</td></tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+{% endblock %}