DEV Community: Candie

Building a middleware with Nextjs

Candie — Mon, 12 Aug 2024 19:59:22 +0000

In this short article, i will be writing about how to build a middleware with nextjs.

I recently built a full blown backend service with nextjs, and i was really blown away with how far gone nextjs is.

You need to have basic knowledge of javascript and nodejs to follow this article.

To get started, you need to

1. Create a nextjs project from your terminal using the command below

npx create-next-app@latest

After running this command, you will get some prompt to configure your project, do that.

After creating the project,

2. Install necessary dependencies by running npm install in your terminal

We will be installing just one package library for authentication, which is jose, an alternative could have been jsonwebtoken, but nextjs middleware runs on the browser, so the edge runtime doesn't implement a bunch of Node.js APIs

3. Start your project in development mode using the command below
npm run dev

4. Create a middleware.js file
Create a middleware.js file at the root of your project, if you're using the /src directory, create the file inside the /src directory

5. Export a middleware function from the file

// /middleware.js

export const middleware = async (req) => {
   try {
   } catch(error){
   console.log(error)
   }
}

6. Extract token from request header

// /middleware.js

import { NextResponse } from 'next/server'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
   } catch(error){
   console.log(error)
   }
}

7. Verify the token using jose

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

// your encoded data will be inside the payload object.

   } catch(error){
   console.log(error)
   }
}

8. Extract data from verified token and set it in the request header

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)
   } catch(error){
   console.log(error)
   }
}

9. Call the next() function and pass the updated request header

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

10. Finally, you need to export a config object from the middleware file that contains configurations about the routes you want to protect.

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const config = {
  matcher:[
   // contain list of routes you want to protect, e.g /api/users/:path*
]
}

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

I hope you find this 10 steps helpful, let me know what you think about this method in the comment section, and feel free to share if a better way to achieve this too.

Thank you.

Checking for palindrome with nodejs

Candie — Mon, 20 May 2024 14:07:11 +0000

This is a very common technical interview question, where they ask you to build a server that can check whether a string is a palindrome or not.

A palindrome is a string that reads the same forwards and backwards.

For example, RADAR, radar is the same when you spell it backwards.

Another example is CIVIC,

Now, how do you write the query that validates whether a string is a palindrome or not?

Let's get started.

Step 1:

Initialize your project with npm init -y

Step 2:

Install necessary dependencies

Express: To create an express app and a server,
body-parser: To parser request body to the server

npm i express body-parser

Step 3:

Create an app.js file and create your server there

// import dependencies
const express = require('express');
const bodyParser = require('body-parser');

// create an express app
const app = express();

// add body parser middleware
app.use(bodyParser.json());

// create a server
app.listen(4000,()=>{
console.log('Server is running on port 4000')
})

Step 4:

Create a route to validate whether a string is a palindrome

// import dependencies
const express = require('express');
const bodyParser = require('body-parser');

// create an express app
const app = express();

// add body parser middleware
app.use(bodyParser.json());

// create a route to validate string
app.post('/validate-string',(req,res)=>{
  // get string from request body;
     const { string } = req.body;

  // check if request body is empty;
  if(!string){
    return res.status(400).json({
    error:true,
    message:'Invalid string'
  })
 }

// validate string.

// step 1: convert string to an array
   const newString = string.split('');

// step 2: reverse the array
   const reversedArray = newString.reverse();

// step 3: convert the array back to string using join() method;
   const convertedString = reversedArray.join('');

// send a response to client;
   return res.status(200).json({
   success:true,
   isPalindrome: convertedString === string ? true : false
 })
})

// create a server
app.listen(4000,()=>{
console.log('Server is running on port 4000')
})

Just like that we have been able to write a query to validate if a string is a palindrome, you can proceed to start the server and test this query in postman.

Let me know what you think about this approach in the comments section and share if you have a better and easier way to achieving this.

HOW TO LAZY LOAD IMAGE IN REACTJS

Candie — Tue, 26 Mar 2024 09:06:38 +0000

Lazy loading images in your react project optimizes your website and also makes it visually appealing to visitors.

We can achieve this in various ways, but I will only highlight two ways

APPROACH 1

The HTML image tag now accepts a loading attribute that takes in either the lazy attribute or the trigger attribute

The lazy attribute tells the browser to only load and download images currently on the browser's viewport and defer other images load and download to when the user scrolls to them.

The eager attribute tells the browser to load all images immediately.

For optimization purposes, adding the lazy attribute reduces build and browser load time.

<img loading='lazy' />

APPROACH 2
We will be using a third party react library to optimize image load and download.

The library is react-lazy-load-image-component

Run the command below to install this package to your react project.

npm install react-lazy-load-image-component

If you're building a large project where you will be using the img tag a lot, I will advise you create a reusable component.

I will name mine Image.jsx

Step 1: Import the react-lazy-load-image-component package to the file
Step 2: Import the lazy load effect you would like to use, iIwill be using blur here.
Step 3: Render the LazyLoadImage component in the file and pass in the needed props as illustrated below
Step 4: Save the file and preview the image

You have successfully optimized your project by implementing lazy image loading.

import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";

export default function Image({src, styles}) {
  return (
    <>
      <LazyLoadImage
        alt={alt}
        className="gallery-img"
        effect="blur"
        src={src}
        width="100%"
        style={styles}
      />
    </>
  );
}

You can customize the effect to your taste, read more about the package here;

Let me know if this was helpful to you in the comment section

BUXURY

Candie — Wed, 19 Jul 2023 10:29:56 +0000

What I built

BUXURY
An ecommerce solution to make shopping experience for both vendors and shoppers easy, seamless and smooth

Category Submission:

Most Visually Pleasing

App Link

https://buxury.vercel.app

API DOCUMENTATION:

https://documenter.getpostman.com/view/27220467/2s93zCaMG3

Screenshots

Description

This project was built using React as frontend and nodejs as a backend.

The project was built to allow shoppers to shop seamlessly online and vendors to sell their product easily to shoppers without hitch.

The most important reason this project was built is to provide a leveling ground for big and small store.

It eliminates the need for a separate website for vendors as each store is built to meet the vendor's specification and the vendor gets to manage orders and payment directly on their dashboard, i am currently working on integrating a wallet and escrow system where vendors can receive payment from customer and withdraw directly to their bank account, and an escrow system to manage orders to reduce incidence of scams, the system holds the customers money until the customer confirms the product has been received.

A store can also be reported on the platform and this can result to suspension/banning of a store.

Most importantly, a store cannot be deleted to avoid/prevent vendors from carting away with shoppers funds.

Link to Source Code

FRONTEND: https://github.com/MrCandie/buxury
BACKEND: https://github.com/MrCandie/buxury-backend

Permissive License

Apache

Background (What made you decide to build this particular app? What inspired you?)

This project was inspired by the need to provide a platform where small scale vendors who can't afford to build a website for their brand can list their products and effectively manage orders

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

Built the project using refine framework and chakra UI framework, designed the backend using nodejs and mongodb as a database.

Refine provided me a very quick startup project and file that got me up and running fast, also i got to learn more about refine framework data providers and automatic routing, which i think is really awesome and great

Additional Resources/Info

Built the backend with node.js, api documentation link and souce code attached above.

COUPON CODE: candie

MANAGING A TEAM WITH NODE.JS (PART 2)

Candie — Sat, 03 Jun 2023 10:02:07 +0000

In case you missed the first part of this article, read here to catch up

In the last article, we were able to

Create a team
Send team invitation,
Accept team invitation

In this article, we will be talking about

Rejecting Invitation
Leaving a team
Removing member from a team
Managing roles in a team

Quickly,

let us create two new users,
Send invitation from one user to another,
then we continue from there

PAYLOAD

// user 1
{
    "name": "john doe",
    "email": "johndoe@gmail.com",
    "password": "test1234"
}
// user 2
{
    "name": "jane doe",
    "email": "janedoe@gmail.com",
    "password": "test1234"
}

STEP 1

Let us send invitation from john doe to jane doe

PAYLOAD:

{
    "email": "janedoe@gmail.com"
}

RESPONSE:

{
    "status": "success",
    "data": "invitation sent to janedoe@gmail.com"
}

STEP 2

Let us take a look at the user object for john and jane

// john
 "data": {
        "user": {
            "_id": "647afd1914c2f48dfc18c846",
            "name": "john doe",
            "email": "johndoe@gmail.com",
            "teams": [
                {
                    "_id": "647aff306dcdb9d9546c7b1b",
                    "name": "nodejs team",
                    "members": [
                        {
                            "name": "john doe",
                            "email": "johndoe@gmail.com",
                            "id": "647afd1914c2f48dfc18c846",
                            "role": "admin"
                        }
                    ],
                    "userId": "647afd1914c2f48dfc18c846",
                    "createdAt": "2023-06-03T08:51:44.822Z",
                    "__v": 1,
                    "id": "647aff306dcdb9d9546c7b1b"
                }
            ],
            "invitations": [],
            "createdAt": "2023-06-03T08:41:06.544Z",
            "__v": 5,
            "id": "647afd1914c2f48dfc18c846"
        }
    }

Inside john's object, the team array contains a team with only one member, which is john, and he is the admin

{
    "status": "success",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0N2FmZDQwMTRjMmY0OGRmYzE4Yzg0OSIsImlhdCI6MTY4NTc4MjUwMiwiZXhwIjoxNjkzNTU4NTAyfQ.NABFYJzvEvOfWUwy5cBnecIrHgDflrF3QVaAsYw_rcc",
    "data": {
        "user": {
            "_id": "647afd4014c2f48dfc18c849",
            "name": "jane doe",
            "email": "janedoe@gmail.com",
            "teams": [],
            "invitations": [
                {
                    "_id": "647aff306dcdb9d9546c7b1b",
                    "name": "nodejs team",
                    "id": "647aff306dcdb9d9546c7b1b"
                }
            ],
            "createdAt": "2023-06-03T08:41:06.544Z",
            "__v": 2,
            "id": "647afd4014c2f48dfc18c849"
        }
    }
}

In the jane user object, the team array is empty, because obviously, jane is not a member of any team yet,

And the invitation array contains one team, nodejs team, the invitation that was sent by john.

STEP 3

REJECTING INVITATION

Now let us compute how to reject the invitation sent by john.

Back to our team controller file

NOTE: Basically the concept is finding the index of the team in the invitation array and deleting it with the Array.splice() method.

// reject team invitation
exports.rejectInvitation = async (req, res) => {
  // find user in db

  const user = await User.findById(req.user.id);

  // find team in db
  // teamID will be gotted as a parameter when we run the request
  const team = await Team.findById(req.params.teamId);

  // check if team exists
  if (!team) {
    return res.status(404).json({
      status: "failed",
      message: "team not found",
    });
  }

  // if team exists, let us find the index of the team in the invitations array
  const teamIndex = user.invitations.indexOf(team.id);

  // remove team id from the invitations array

  user.invitations.splice(teamIndex);

  // save changes
  await user.save();

  return res.status(200).json({
    status: "success",
    message: "invitation rejected",
  });
};

STEP 4

Let us create a route for this request and run it on post man,
NOTE: Pass the team ID as a parameter for this request

router.post(
  "/reject-invitation/:teamId",
  middleware.protect,
  teamController.rejectInvitation
);

RESPONSE:

{
    "status": "success",
    "message": "invitation rejected"
}

To confirm the invitation was rejected, let us take a look at the user object for jane again.

"data": {
        "user": {
            "_id": "647afd4014c2f48dfc18c849",
            "name": "jane doe",
            "email": "janedoe@gmail.com",
            "teams": [],
            "invitations": [],
            "createdAt": "2023-06-03T08:41:06.544Z",
            "__v": 3,
            "id": "647afd4014c2f48dfc18c849"
        }
    }

Now the invitation array is empty, because we have successfully deleted the team from the invitation array.

STEP 5

LEAVING A TEAM

To compute this, let us send a new invitation to jane, then login to jane account to accept the invitation, then we can proceed to leave a team.

Because you have to be a member of a team to leave a team.

RESPONSE:

{
    "status": "success",
    "data": "invitation sent to janedoe@gmail.com"
}

RESPONSE:

{
    "status": "success",
    "message": "invitation to nodejs team accepted"
}

Let us take a look at jane user object to be sure she's now a member of nodejs team

"data": {
        "user": {
            "_id": "647afd4014c2f48dfc18c849",
            "name": "jane doe",
            "email": "janedoe@gmail.com",
            "teams": [
                {
                    "_id": "647aff306dcdb9d9546c7b1b",
                    "name": "nodejs team",
                    "members": [
                        {
                            "name": "john doe",
                            "email": "johndoe@gmail.com",
                            "id": "647afd1914c2f48dfc18c846",
                            "role": "admin"
                        },
                        {
                            "name": "jane doe",
                            "email": "janedoe@gmail.com",
                            "id": "647afd4014c2f48dfc18c849",
                            "role": "member"
                        }
                    ],
                    "userId": "647afd1914c2f48dfc18c846",
                    "createdAt": "2023-06-03T08:51:44.822Z",
                    "__v": 2,
                    "id": "647aff306dcdb9d9546c7b1b"
                }
            ],
            "invitations": [],
            "createdAt": "2023-06-03T08:41:06.544Z",
            "__v": 5,
            "id": "647afd4014c2f48dfc18c849"
        }
    }

As you can see, the node.js team has two members, the admin which is john doe, and a jane doe, a member.

STEP 6

Let us proceed to our controller and compute leaving a team

exports.leaveTeam = async (req, res) => {
  // find user in db
  const user = await User.findById(req.user.id);

  // find team in db
  const team = await Team.findById(req.params.teamId);

  // check if team exists
  if (!team) {
    return res.status(404).json({
      status: "failed",
      message: "team not found",
    });
  }

  // if team exist, check if user is a member of the team
  const member = team.members.find((item) => item.id === user.id);

  // if user is not a member, throw an error and terminate
  if (!member) {
    return res.status(400).json({
      status: "failed",
      message: `you are not a member of ${team.name.toUpperCase()}`,
    });
  }

  // if user is a member, find index of team in the team array on the user object
  const teamIndex = user.teams.indexOf(team.id);

  // delete team from team array
  user.teams.splice(teamIndex);

  // remove user from member array on the team
  const newMembers = team.members.filter((item) => item.id !== member.id);
  team.members = newMembers;

  // save changes
  await team.save();
  await user.save();

  return res.status(200).json({
    status: "success",
    message: `successfully exited ${team.name}`,
  });
};

STEP 7

Let us create a route for this request and run it on postman

router.post(
  "/leave-team/:teamId",
  middleware.protect,
  teamController.leaveTeam
);

RESPONSE:

{
    "status": "success",
    "message": "successfully exited nodejs team"
}

To confirm it was successful, let us take a look at the jane user object once again,

    "data": {
        "user": {
            "_id": "647afd4014c2f48dfc18c849",
            "name": "jane doe",
            "email": "janedoe@gmail.com",
            "teams": [],
            "invitations": [],
            "createdAt": "2023-06-03T08:41:06.544Z",
            "__v": 6,
            "id": "647afd4014c2f48dfc18c849"
        }
    }

As expected, the teams array is empty, which means the request was successful.

STEP 8

REMOVING MEMBER FROM A TEAM

Let us repeat the process of sending an invitation to jane and accepting the invitation, then logging in back to john account to remove jane from the team

    "data": {
        "user": {
            "_id": "647afd4014c2f48dfc18c849",
            "name": "jane doe",
            "email": "janedoe@gmail.com",
            "teams": [
                {
                    "_id": "647aff306dcdb9d9546c7b1b",
                    "name": "nodejs team",
                    "members": [
                        {
                            "name": "john doe",
                            "email": "johndoe@gmail.com",
                            "id": "647afd1914c2f48dfc18c846",
                            "role": "admin"
                        },
                        {
                            "name": "jane doe",
                            "email": "janedoe@gmail.com",
                            "id": "647afd4014c2f48dfc18c849",
                            "role": "member"
                        }
                    ],
                    "userId": "647afd1914c2f48dfc18c846",
                    "createdAt": "2023-06-03T08:51:44.822Z",
                    "__v": 4,
                    "id": "647aff306dcdb9d9546c7b1b"
                }
            ],
            "invitations": [],
            "createdAt": "2023-06-03T08:41:06.544Z",
            "__v": 8,
            "id": "647afd4014c2f48dfc18c849"
        }
    }

Jane is already a member of the nodejs team, now let us log back in to john's account to compute removing jane from the nodejs team.

exports.removeMemberFromTeam = async (req, res) => {
  // extract userId and teamId from the request query
  const { userId, teamId } = req.query;

  // find team in db
  const team = await Team.findById(teamId);
  const user = await User.findById(userId);

  // check if team exist
  if (!team) {
    return res.status(404).json({
      status: "failed",
      message: "team not found",
    });
  }

  // if team exist, check if user is a member of the team
  const member = team.members.find((item) => item.id === userId);

  // if user is not a member, throw an error and terminate
  if (!member) {
    return res.status(400).json({
      status: "failed",
      message: `you are not a member of ${team.name.toUpperCase()}`,
    });
  }

  // if user is a member, filter user out of the team
  const newTeamMember = team.members.filter((item) => item.id !== userId);
  team.members = newTeamMember;

  // remove teamId from teams array on user object
  const teamIndex = user.teams.indexOf(team.id);
  user.teams.splice(teamIndex);

  // save changes
  await team.save();
  await user.save();

  return res.status(200).json({
    status: "success",
    message: `${user.name} successfully removed from ${team.name}`,
  });
};

STEP 9

Let us create a route for this request and run it in postman

router.post(
  "/remove-member",
  middleware.protect,
  teamController.removeMemberFromTeam
);

// request url
http://localhost:8000/api/v1/team/remove-member?teamId=647aff306dcdb9d9546c7b1b&userId=647afd4014c2f48dfc18c849

RESPONSE:

{
    "status": "success",
    "message": "jane doe successfully removed from nodejs team"
}

To confirm, let us take a look at the nodejs team again

"teams": [
                {
                    "_id": "647aff306dcdb9d9546c7b1b",
                    "name": "nodejs team",
                    "members": [
                        {
                            "name": "john doe",
                            "email": "johndoe@gmail.com",
                            "id": "647afd1914c2f48dfc18c846",
                            "role": "admin"
                        }
                    ],

Nodejs team only contains john, who is the admin, meaning our logic works too.

So far we have been able to

Create a team
Send team invitation
Accept team invitation
Reject team invitation
Leave team
Remove member from team

In the final part of this article, we will be talking about ROLE MANAGEMENT IN A TEAM

I hope you are excited.

Meanwhile Let me know your thoughts on this in the comments section.

Get my source code here
View my API documentation here

MANAGING A TEAM WITH NODE.JS (PART 1)

Candie — Mon, 29 May 2023 07:59:15 +0000

As a backend developer, have you ever wondered the concept behind

Creating a team
Sending Team invitation to members
Accepting team invitation
Rejecting team invitation
Leaving team
Removing member from team and
managing roles in a team

In this article, I will walk you through how I was able to achieve all of these with Javascript.

REQUIREMENTS

Knowledge of Javascript, Nodejs, and RESTful APIs

LET'S GET STARTED

STEP 1

Let us start with initializing our project in vscode editor using the npm init command

STEP 2

Install necessary dependencies

npm install express body-parser mongoose dotenv jsonwebtoken cors nodemon

STEP 3

Create an express application and connect to your mongodb database

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const mongoose = require("mongoose");
const dotenv = require("dotenv");
dotenv.config();

const app = express()

const corsOptions = {
  origin: "*",
  credentials: true,
  optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.json());

const db = process.env.DATABASE;

async function startServer() {
  const port = process.env.PORT || 8080;
  try {
    const response = await mongoose.connect(db, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log("database connection successful");
    app.listen(port, () => {
      console.log(`app running on port ${port}`);
    });
  } catch (error) {
    console.log(error);
  }
}
startServer();

STEP 4

Add this command to the scripts object inside your package.json file and npm start

"start": "nodemon app.js"

Node.js v18.16.0
[nodemon] starting `node app.js`
database connection successful
app running on port 8000

If you got something like this in your terminal, then we are on the same page, if not, look through your codes.

STEP 5

Let us create our models for users and teams and export them

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema(
  {
    name: {
      type: String,
      default: "",
      trim: true,
    },
    email: {
      type: String,
      required: [true, "email is required"],
      unique: true,
      trim: true,
    },
    password: {
      type: String,
      required: [true, "password is required"],
      trim: true,
    },
    teams: [
      {
        type: mongoose.Schema.ObjectId,
        ref: "Team",
      },
    ],
    invitations: [
      {
        type: mongoose.Schema.ObjectId,
        ref: "Team",
      },
    ],
    createdAt: {
      type: Date,
      default: Date.now(),
    },
  },
  {
    toJSON: { virtuals: true },
    toObject: { virtuals: true },
  }
);

module.exports = mongoose.model("User", userSchema);

Name: name of the user
Email: email of the user,
password: user's password,
teams: A reference to the teams this user belongs to
invitations: A reference to pending team invitations

const mongoose = require("mongoose");

const teamSchema = new mongoose.Schema(
  {
    name: {
      type: String,
      trim: true,
      required: [true, "team must have a name"],
    },
    members: {
      type: Array,
    },
    userId: {
      type: String,
      required: [true, "team must belong to a user"],
    },
    createdAt: {
      type: Date,
      default: Date.now(),
    },
  },
  {
    toJSON: { virtuals: true },
    toObject: { virtuals: true },
  }
);

module.exports = mongoose.model("Team", teamSchema);

members: members in a team
userId: identifier for the creator of the team

STEP 6

Let us quickly create an authentication controller to manage signup and login so we can authenticate users

const User = require("../models/user-model");
const jwt = require("jsonwebtoken");

// CREATE JWT TOKEN
const createJWTToken = (id) =>
  jwt.sign({ id }, process.env.JWT_SECRET, {
    expiresIn: process.env.JWT_EXPIRES_IN,
  });

// CREATE AND SEND JWT TOKEN
const createSendToken = (user, statusCode, res) => {
  const token = createJWTToken(user.id);
  user.password = undefined;
  return res.status(statusCode).json({
    status: "success",
    token,
    data: {
      user,
    },
  });
};

exports.signup = async (req, res, next) => {
  try {
    // check if user exists
    const userExist = await User.findOne({ email: req.body.email });
    if (userExist) {
      return res.status(400).json({
        status: "failed",
        message: "user with this email exists",
      });
    }
    // create user
    const user = await User.create(req.body);

    // send response data
    createSendToken(user, 201, res);
  } catch (error) {
    res.status(400).json({
      status: "failed",
      error: error.message,
    });
  }
};

exports.login = async (req, res, next) => {
  const { email, password } = req.body;
  try {
    // find user
       const user = await User.findOne({ email 
       }).populate("teams").populate({
      path: "invitations",
      select: "name",
    });

    // check if user exist
    if (!user) {
      return res.status(404).json({
        status: "failed",
        message: "user not found",
      });
    }

    //check if password match
    if (user.password !== password) {
      return res.status(401).json({
        status: "failed",
        message: "invalid login credentials",
      });
    }

    // send response
    createSendToken(user, 201, res);
  } catch (error) {
    res.status(400).json({
      status: "failed",
      error: error.message,
    });
  }
};

STEP 7

Create express route for signup and login then send a request from postman

const express = require("express");
const authController = require("../controllers/authController");

const router = express.Router();

router.post("/register", authController.signup);
router.post("/login", authController.login);

module.exports = router;

PAYLOAD:

{
    "email": "testing@gmail.com",
    "password": "test1234"
}

RESPONSE:

{
    "status": "success",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0NzMyYWQzMGNhMjk0MzRkMDRiODQ2YyIsImlhdCI6MTY4NTI2OTIwMywiZXhwIjoxNjkzMDQ1MjAzfQ.Q8aDSekSVKK5zBVkRaJOdqs3JT3G5xniRnpu6zjHO8U",
    "data": {
        "user": {
            "name": "",
            "email": "testing@gmail.com",
            "teams": [],
            "invitations": [],
            "createdAt": "2023-05-28T10:19:47.491Z",
            "_id": "64732ad30ca29434d04b846c",
            "__v": 0,
            "id": "64732ad30ca29434d04b846c"
        }
    }
}

STEP 8

Now let us create our team controller and start creating and managing our team.
Before that, let us quickly create a middleware to protect our endpoint and ensure only authenticated users can access certain resources

NOTE: Use this command to make your JWT available in postman
pm.environment.set("jwt", pm.response.json().token);

const jwt = require("jsonwebtoken");
const User = require("./models/user-model");

const jwt = require("jsonwebtoken");
const User = require("./models/user-model");

const jwt = require("jsonwebtoken");
const User = require("./models/user-model");

// PROTECT ROUTE
exports.protect = async (req, res, next) => {
  // check if token is available on authorization header
  let token;
  if (
    req.headers.authorization &&
    req.headers.authorization.startsWith("Bearer")
  ) {
    token = req.headers.authorization.split(" ")[1];
  }

  // if not, restrict access
  if (!token) {
    return res.status(401).json({
      status: "failed",
      message: "unauthenticated",
    });
  }

  // decode the token to extract the user identifier
  let decoded;

  try {
    decoded = jwt.verify(token, process.env.JWT_SECRET);
  } catch (error) {
    return res.status(401).json({
      status: "failed",
      message: "your login token is invalid",
    });
  }

  // use identifier to find user in database
  try {
    const user = await User.findById(decoded.id);

    // if user does not exist, throw an error and abort operation
    if (!user) {
      return res.status(404).json({
        status: "failed",
        message: "user no longer exists",
      });
    }

    // if user is available, store the user data on the request object

    req.user = user;

    // call the next() middleware
    next();
  } catch (error) {
    return res.status(400).json({
      status: "failed",
      message: error.message,
    });
  }
};

We will be using this middleware to check restrict certain resources to only authenticated users.

Back to our team controller, let us create a team

const Team = require("../models/team-model");
const User = require("../models/user-model");

exports.createTeam = async (req, res, next) => {
  const reqBody = {
    name: req.body.name,
    // remember we stored this user's data on the req object inside the middleware we created.
    userId: req.user.id,
  };
  try {
    // while creating a team, we want to immediately add the creator of the team as an admin of the team.
    const team = await Team.create(reqBody);
    // let us create a member data
    const user = req.user;
    const memberDetail = {
      name: user.name || "",
      email: user.email,
      id: req.user.id,
      role: "admin",
    };

    // let us push this member detail inside the member array on the team model
    team.members.push(memberDetail);

    // let us push the team id into the team array on the user model
    user.teams.push(team.id);

    // let us save these changes
    await team.save();
    await user.save();

    return res.status(201).json({
      status: "success",
      data: team,
    });
  } catch (error) {
    return res.status(400).json({
      status: "failed",
      message: error.message,
    });
  }
};

STEP 8

Let us create a team route and run the request in postman

const express = require("express");
const middleware = require("../middleware");
const teamController = require("../controllers/teamController");
const router = express.Router();

router.route("/").post(middleware.protect, teamController.createTeam);

module.exports = router;

PAYLOAD:

{
    "name": "nodejs team"
}

RESPONSE:

{
    "status": "success",
    "data": {
        "name": "nodejs team",
        "members": [
            {
                "name": "",
                "email": "member@gmail.com",
                "id": "6473372575f23d8038180c71",
                "role": "admin"
            }
        ],
        "userId": "6473372575f23d8038180c71",
        "createdAt": "2023-05-28T11:20:31.553Z",
        "_id": "64733913dff5e9f5e31f4850",
        "__v": 1,
        "id": "64733913dff5e9f5e31f4850"
    }
}

STEP 9

Now let us create another user and send an invitation to join the nodejs team
PAYLOAD:

{
    "email": "member@gmail.com",
    "password": "test1234"
}

RESPONSE:

{
    "status": "success",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0NzMzNzI1NzVmMjNkODAzODE4MGM3MSIsImlhdCI6MTY4NTI3MjM1NywiZXhwIjoxNjkzMDQ4MzU3fQ.cCZywLZekCUPAh_ZNKsLZ0bVrgd-gSm71qFUBIE8jos",
    "data": {
        "user": {
            "name": "",
            "email": "member@gmail.com",
            "teams": [],
            "invitations": [],
            "createdAt": "2023-05-28T11:04:25.981Z",
            "_id": "6473372575f23d8038180c71",
            "__v": 0,
            "id": "6473372575f23d8038180c71"
        }
    }
}

Now let us create the sendInvitation controller

exports.sendInvitation = async (req, res, next) => {
  // pass the team id as a parameter
  const { teamId } = req.params;
  // use the member email to send the invitation,
  // so the member email will be the payload
  const { email } = req.body;

  try {
    // find this user in the database
    const member = await User.findOne({ email });

    // if user doesnt exist
    if (!member) {
      return res.status(404).json({
        status: "failed",
        message: "member not found",
      });
    }

    // if member exist, check if member is already in the team
    // 1. find the team
    const team = await Team.findById(teamId);

    // 2. check if team exists
    if (!team) {
      return res.status(404).json({
        status: "failed",
        message: "team not found",
      });
    }

    // if team exists, check if the member is in the team already
    const memberExist = team.members.find((item) => item.id === member.id);
    if (memberExist) {
      return res.status(400).json({
        status: "failed",
        message: "member is already in the team",
      });
    }

    // if not, send the invitation by pushing the teamID inside the member.invitations array

    // push the team ID into the invitations array on the user model

    member.invitations.push(team.id);

    // save changes
    await member.save();

    return res.status(200).json({
      status: "success",
      data: `invitation sent to ${member.email}`,
    });
  } catch (error) {
    return res.status(400).json({
      status: "failed",
      message: error.message,
    });
  }
};

STEP 10

Create a send invitation route and send the request in postman;
NOTE: Don't forget to pass the teamID as a parameter

router.post(
  "/send-invitation/:teamId",
  middleware.protect,
  teamController.sendInvitation
);

PAYLOAD:

{
    "email": "testing@gmail.com"
}

RESPONSE:

{
    "status": "success",
    "data": "invitation sent to testing@gmail.com"
}

STEP 11

If you are wondering, I created a team with the member@gmail.com endpoint and sent an invitation to testing@gmail.com.

Logging in to the testing@gmail.com account, the invitation array will contain the data we sent

{
    "status": "success",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0NzMyYWQzMGNhMjk0MzRkMDRiODQ2YyIsImlhdCI6MTY4NTI4MDU0NywiZXhwIjoxNjkzMDU2NTQ3fQ.FWf3-xYrF3uxnp572KAS7ZsG-F4XUeSwgJwLY2PFtK8",
    "data": {
        "user": {
            "_id": "64732ad30ca29434d04b846c",
            "name": "",
            "email": "testing@gmail.com",
            "teams": [],
            "invitations": [
                {
                    "_id": "64733913dff5e9f5e31f4850",
                    "name": "nodejs team",
                    "id": "64733913dff5e9f5e31f4850"
                }
            ],
            "createdAt": "2023-05-28T10:19:47.491Z",
            "__v": 2,
            "id": "64732ad30ca29434d04b846c"
        }
    }
}

ACCEPT INVITATION

exports.acceptInvitation = async (req, res, next) => {
  try {
    // pass the teamID as a parameter to accept invitation
    const { teamId } = req.params;
    // find user in database
    const user = await User.findById(req.user.id);

    // find team in database
    const team = await Team.findById(teamId);

    // check if team still exists

    if (!team) {
      return res.status(404).json({
        status: "success",
        message: "team not found",
      });
    }

    // check if the user is already a member of the team
    const memberExist = team.members.find((item) => item.id === user.id);

    if (memberExist) {
      return res.status(400).json({
        status: "failed",
        message: "you are already a member of this group",
      });
    }

    // if user is not a member of the team, now let us accept invitation and add user to the team
    // 1. create user detail
    const userDetail = {
      name: user.name || "",
      email: user.email,
      id: user.id,
      role: "member",
    };

    // 2. add member to the team
    team.members.push(userDetail);

    // 3. remove the team from the invitation array
    const teamIndex = user.invitations.indexOf(team.id);
    user.invitations.splice(teamIndex);

    // 4. add team to the user team array
    user.teams.push(team.id);

    // 5. save changes
    await user.save();
    await team.save();

    return res.status(200).json({
      status: "success",
      message: `invitation to ${team.name} accepted`,
    });
  } catch (error) {
    return res.status(400).json({
      status: "failed",
      message: error.message,
    });
  }
};

STEP 12

Let us create an accept invitation endpoint and run this request in postman.

NOTE: This request needs no payload, justpass the teamID as a parameter on the request

router.post(
  "/accept-invitation/:teamId",
  middleware.protect,
  teamController.acceptInvitation
);

RESPONSE:

{
    "status": "success",
    "message": "invitation to nodejs team accepted"
}

If we login to testing@gmail.com account, we should see the teams object in the teams array and the invitation array should be empty

{
    "status": "success",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0NzMyYWQzMGNhMjk0MzRkMDRiODQ2YyIsImlhdCI6MTY4NTI4MTk3NiwiZXhwIjoxNjkzMDU3OTc2fQ.tQF301JkgBDcDPuyUde0_i4QcjeFm0KP4cX5S9Bikuc",
    "data": {
        "user": {
            "_id": "64732ad30ca29434d04b846c",
            "name": "",
            "email": "testing@gmail.com",
            "teams": [
                {
                    "_id": "64733913dff5e9f5e31f4850",
                    "name": "nodejs team",
                    "members": [
                        {
                            "name": "",
                            "email": "member@gmail.com",
                            "id": "6473372575f23d8038180c71",
                            "role": "admin"
                        },
                        {
                            "name": "",
                            "email": "testing@gmail.com",
                            "id": "64732ad30ca29434d04b846c",
                            "role": "member"
                        }
                    ],
                    "userId": "6473372575f23d8038180c71",
                    "createdAt": "2023-05-28T11:20:31.553Z",
                    "__v": 2,
                    "id": "64733913dff5e9f5e31f4850"
                }
            ],
            "invitations": [],
            "createdAt": "2023-05-28T10:19:47.491Z",
            "__v": 3,
            "id": "64732ad30ca29434d04b846c"
        }
    }
}

Now we have 2 members inside the nodejs team.

I am going to stop here for now, in my next article, I will talk about

Leaving team,
Removing member from team
Rejecting invitation
Managing roles in a team.

Meanwhile, let me know your thought on this method in the comments section.

CREATING PASSWORD VALIDATION/CHECKLIST IN REACT.JS

Candie — Thu, 18 May 2023 05:12:59 +0000

One of your responsibilities as a developer is making sure your users create a strong password to secure their account,

And this can be achieved by adding some checklist and visual validation while they are creating their password.

In these few steps, I will explain how you can create a simple password checklist with regular expressions.

STEP 1

Outline the checklists;
In this post we will be checking for

has uppercase
has lowercase
has special characters
has number
is greater/equal to 8 characters

STEP 2

Create the regular expression to match the checklists

  const lowerCase = /[a-z]/g;
  const upperCase = /[A-Z]/g;
  const numbers = /[0-9]/g;
  const specialCharacter = /[-._!"`'#%&,:;<>=@{}~\$\(\)\*\+\/\\\?\[\]\^\|]+/;

STEP 3

Create an input component for the password

   export default function PasswordComponent(){

   function passwordValidator(e){
        const enteredPassword = e.target.value
   }

   return (
        <input type='password' placeholder='Enter password' 
               onChange={passwordValidator} />
        )}

STEP 4

use useState hook to manage input and validity state state

  export default function PasswordComponent(){
     const [hasLowercase, setHasLowercase] = useState(false)
     const [hasUppercase, setHasUppercase] = useState(false)
     const [hasNumber, setHasNumbe] = useState(false)
     const [hasSpecialCharacter, setHasSpecialCharacter] = 
     useState(false)
     const [passwordIsValid, setPasswordIsValid] = 
     useState(false)

  function passwordValidator(e){
     const enteredPassword = e.target.value
  }

   return (
        <input type='password' placeholder='Enter password' 
              onChange={passwordValidator} />
        )}

STEP 5

Start matching the entered value with the regular expression

export default function PasswordComponent(){
     const [hasLowercase, setHasLowercase] = useState(false)
     const [hasUppercase, setHasUppercase] = useState(false)
     const [hasNumber, setHasNumbe] = useState(false)
     const [hasSpecialCharacter, setHasSpecialCharacter] = 
     useState(false)
     const [passwordIsValid, setPasswordIsValid] = 
     useState(false)

function passwordValidator(e){
    const enteredPassword = e.target.value

// check for lower case

  if (!new_pass.match(lowerCase))  
          setHasLowercase(false);
          setIsValid(false);
      } else {
          setHasLowercase(true);
          setIsValid(true);
      }

// check for uppercase
    if (enteredPassword.match(upperCase)) {
           setHasUppercase(true);
           setPasswordIsValid(true);
        } else {
            setHasUppercase(false);
            setPasswordIsValid(false);
         }

// check for number
     if (enteredPassword.match(numbers)) {
            setHasNumber(true);
            setPasswordIsValid(true);
         } else {
            setHasNumber(false);
            setPasswordIsValid(false);
         }

// check for 8 or more characters
      if (enteredPassword.length >= 8) {
            setIsEightChar(true);
            setPasswordIsValid(true);
          } else {
            setIsEightChar(false);
            setPasswordIsValid(false);
          }

// check for special character
       if (enteredPassword.match(regex)) {
            setHasSpecialCharacter(true);
            setPasswordIsValid(true);
           } else {
            setHasSpecialCharacter(false);
            setPasswordIsValid(false);
           }
     }

       return (
        <input type='password' placeholder='Enter password' 
            onChange={passwordValidator} />
        )}

STEP 6

The passwordIsValid state can be used to render an error to the user

Let me know what you think about this method in the comments section below!

IMAGE/FILE UPLOAD IN NODE.JS WITH CLOUDINARY

Candie — Sun, 07 May 2023 18:12:37 +0000

Image and file upload is a very important concept in backend development especially if you are building a very large application.

You do not want to keep images and files on the server to avoid slowing down of the server.

So storing this files in an external source is advised to optimize performance of the server and application.

Cloudinary is my favorite library for images and file upload, and quickly I am going to get you started on how to start storing images and files on cloudinary

Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs..

REQUIREMENTS:

Knowledge of node.js, express.js and REST APIs.

STEP 1

Initialize your project and install needed dependencies

npm init
npm install express body-parser dotenv cloudinary express-fileupload nodemon

express: create an express app
body-parser: process data sent in an HTTP request body
express-fileupload: makes your uploaded files/images accessible on the req.files object
dotenv: to import environmental variables
Cloudinary: images/file storage library
nodemon: watch files

STEP 2

Create an app.js file, inside it import the installed dependencies and create an express app.

Note: create a .env file in the root of your folder and store your environment variables there.

// import dependencies
const express = require("express");
const bodyParser = require("body-parser");
const fileUpload = require("express-fileupload");
const dotenv = require("dotenv").config();
const cloudinary = require("cloudinary").v2;

// create express app
const app = express()

app.use(bodyParser.json());
app.use(express.json());
app.use(fileUpload({ useTempFiles: true }));

const port = process.env.PORT || 8000;

app.listen(port, () => {
  console.log(`server running at port ${port}`);
});

STEP 3

Create an account with cloudinary here and store your API keys and details (CLOUD_NAME, API_KEY and API_SECRET) inside your .env file

STEP 4

Configure cloudinary in your app.js file

const express = require("express");
const bodyParser = require("body-parser");
const fileUpload = require("express-fileupload");
const dotenv = require("dotenv").config();
const cloudinary = require("cloudinary").v2;

const app = express()

// configure cloudinary
cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_API_SECRET,
});

app.use(bodyParser.json());
app.use(express.json());
app.use(fileUpload({ useTempFiles: true }));

const port = process.env.PORT || 8000;

app.listen(port, () => {
  console.log(`server running at port ${port}`);
});

NOTE: Add this script to your package.json file and npm start

 "scripts": {
    "start": "nodemon app.js"
  },

STEP 5

Create a file-controller.js file and a file-router.js file.
Create an express router inside the file-router.js file and export to app.js file

const express = require("express");
const fileController = require("./file-controller");

// create a router
const router = express.Router();

// create a post router for file upload
router.post("/", fileController.fileUpload);

// export to app.js file
module.exports = router;

STEP 6

Register the file-upload route inside the app.js file

const express = require("express");
const bodyParser = require("body-parser");
const fileUpload = require("express-fileupload");
const dotenv = require("dotenv").config();
const cloudinary = require("cloudinary").v2;

const app = express();

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_API_SECRET,
});

const fileRouter = require("./file-router");

app.use(bodyParser.json());
app.use(express.json());
app.use(fileUpload({ useTempFiles: true }));

// register route in app.js file
app.use("/api/file-upload", fileRouter);

const port = process.env.PORT || 8000;

app.listen(port, () => {
  console.log(`server running at port ${port}`);
});

STEP 7:

Inside the file-controller.js file, import cloudinary and let us start writing the file-upload logic

Don't forget the express-fileupload dependency we installed will make the uploaded image available on the req.files object

So let us extract it

exports.fileUpload = async (req, res) => {
  const uploadedImage = req.files.image;
};

STEP 8:

Parse the uploaded image/file to cloudinary;

Note: Create a folder inside your cloudinary media library and pass the name of the folder as an arguement like this

const cloudinary = require("cloudinary").v2;

exports.fileUpload = async (req, res) => {
  const uploadedImage = req.files.image;

  const result = await 
    cloudinary.uploader.upload(uploadedImage.tempFilePath, {
    use_filename: true,
    folder: "your_folder_name_here",
  });
};

STEP 9:

The result object contains a secure_url parameter which is a url to the image you uploaded on cloudinary,

So pass this url to the frontend to display the uploaded image or paste in your browser to view the image

const cloudinary = require("cloudinary").v2;

exports.fileUpload = async (req, res) => {
  const uploadedImage = req.files.image;

  const result = await 
    cloudinary.uploader.upload(uploadedImage.tempFilePath, {
    use_filename: true,
    folder: "your_folder_name_here",
  });

  return res.status(201).json({
    src: result.secure_url,
  });
};

FINAL STEP:

Call this route /api/file-upload and upload your image/files.

Checkout my source codes here

GETTING STARTED WITH CHAKRA UI

Candie — Fri, 05 May 2023 18:00:59 +0000

If you are a frontend developer that loves to develop with React.js, and you need a library that can speed up your work, productivity, make you write less code and help you design excellent user friendly and responsive UI, then CHAKRA UI is your guy!.

I used to develop React applications before with Tailwindcss, at least that's faster than while using vanilla CSS.

Recently I built a very big app with React.js and Tailwindcss for a client, and I built another with React.js and Chakra UI, the difference is clear.

With Tailwind, I had to code out every component, and that consumed a lot of time.

NOTE: If you are just starting out, I would advice you learn and understand the fundamentals before you try out any frameworks.

But while I was working with Chakra UI, I finished a very big app in about a week.

I was able to achieve this because I used Chakra UI which gave me most of the components I needed for the app, so all I needed to do was refactor it so I can reuse wherever I needed that component again.

This strategy sped up my productivity x3 and it made my work as a frontend developer easy and less stressful.

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

I know by now you are wondering, HOW DO I START WITH CHAKRA UI?.

The sweetest thing about Chakra UI is, their documentation is very easy to grab and understand.

If you have used tailwindcss before or material UI, then understanding Chakra UI will be a walk over for you.

HOW TO GET STARTED

STEP 1:

Install Chakra UI into your React application

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

STEP 2

Set up Chakra provider inside the root of your React application.
Most likely your index.js file

import react from 'react'
import { ChakraProvider } from '@chakra-ui/react'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
   <ChakraProvider>
        <App />
    </ChakraProvider>
  </React.StrictMode>
);

STEP 3

You are ready to start using Chakra UI in your react applications

import { Box, Text } from '@chakra-ui/react'

export default function App(){
return ( 
     <Box>
        <Text>WELCOME TO CHAKRA UI</Text>
     </Box>
)

SET UP 2FA IN NODE.JS WITH SPEAKEASY

Candie — Tue, 02 May 2023 21:21:33 +0000

Adding 2FA to your application create an extra layer of security for your users, to protect their detail from scammers and hackers.

Passwords do not completely secure your application, infact, if the only layer of security on your application is password, your application is very vulnerable to scammers and hackers, because 6 in 10 people use the same password across all their accounts and platform, so access to the password, places the user at extreme risk if there's absence of an extra layer of security.

2FA is an extra layer of security to make sure only authorized personnel gain access to certain resources.

2FA might be in the form of security questions & answers, access token, biometric authentication and tokens.

So quickly we are going to be walking through 2FA in node.js using the speakeasy library

REQUIREMENTS

Basic understanding of Javascript

Speakeasy is a onetime passcode generator that supports Google authenticator and other two factor devices. more info

STEP 1

initialize your project by running

npm init

STEP 2

Run this command to install needed dependencies

npm install express mongoose dotenv body-parser speakeasy

STEP 3

Create an app.js file and then create an express app

const express = require("express");
const dotenv = require("dotenv").config();
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());
app.use(express.json());

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`server up and running at port ${port}`));

STEP 4

Connect your express app to mongodb using the mongoose package installed earlier.

NOTE: Add your database connection string and password to the .env file

const express = require("express");
const dotenv = require("dotenv").config();
const bodyParser = require("body-parser");
const mongoose = require("mongoose");

const app = express();

// middlewares
app.use(bodyParser);
app.use(express.json());

// connect to database
const db = process.env.DATABASE;

mongoose
  .connect(db, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("database connection successful"));

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`server up and running at port ${port}`));

STEP 5

install nodemon globally to monitor changes in the app.js file

npm install -g nodemon

then add this command to the scripts object inside your package.json file

  "scripts": {
    "start": "nodemon app.js"
  },

STEP 6

Open your terminal and npm start

npm start

if you get something like this, then you're good to go, if not go through the codes again, probably you are making a mistake somewhere

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node app.js`
server up and running at port 5000
database connection successful

STEP 7

Create a model folder, and inside create a token-model.js file

This file will be used to structure and store the secret string gotten from speakeasy

inside the token-model.js file, paste in the following codes

const mongoose = require("mongoose");

const tokenSchema = new mongoose.Schema(
  {
    secret: String,
    authIsSet: {
      type: Boolean,
      default: false,
    },
  },
  {
    toJSON: { virtuals: true },
    toObject: { virtuals: true },
  }
);

module.exports = mongoose.model("Token", tokenSchema);

STEP 8

Create a controller folder, and inside create an authentication-controller.js file

Inside this file, import the Token model from the token-model.js file, import speakeasy and create a simple controller function

const Token = require("../model/token-model");
const speakeasy = require("speakeasy");

exports.generateSecret = async (req, res, next) => {};

STEP 9

Our 2FA process follows 3 flow

Generate a secret key
Generate a set-up key and paste in google authenticator app
Authenticate the token for the first time

GENERATE SECRET KEY

Run this command to generate a secret key, and save it to mongodb

const Token = require("../model/token-model");
const speakeasy = require("speakeasy");

exports.generateSecret = async (req, res, next) => {
  const secretToken = speakeasy.generateSecret();
  try {
    const token = await Token.create({ secret: secretToken.base32 });
    return res.status(201).json({
      status: "success",
      message: "secret token generated",
      token: secretToken.base32
      tokenId: token.id,
    });
  } catch (error) {
    return res.status(400).json({
      status: "error",
      message: error.message || "something went wrong",
    });
  }
};

GENERATE A SET-UP KEY

Generate a set-up key by pasting the secretToken.base32 returned from calling the speakeasy.generateSecret() command string inside your authenticator app

STEP 10

Create a router folder and inside, create a token-router.js file and import express and create a simple router.

const express = require("express");
const authenticationController = require("../controller/authentication-controller");

const router = express.Router();

router.post("/generate-secret", authenticationController.generateSecret);

module.exports = router;

import the router into your app.js file and register the route

app.use("/auth", authRouter);

STEP 11

Now go to postman and fire this endpoint
http://localhost:5000/auth/generate-secret

You should get this response

{
    "status": "success",
    "message": "secret token generated",
    "token": "H4XE22DMGZCD6NCHGJKC6JDSMFJV2T3EHF4DCUTJNNTGGYKWKNIQ"
    "tokenId": "68r77hdfbnnmdnmfdju8",
}

STEP 12

Now copy and paste the token inside your google authenticator app, then you are ready to proceed to the final step, which is verifying the token for the first time.

VERIFY THE TOKEN

Now we want to make sure the token on the client and server match.
After entering your set-up key, then enter the token you get to verify against the secret string that was generated in step 9.

Let us create a verifyToken function inside our controller and start the verification process

exports.verifyToken = async (req, res, next) => {
  const secretToken = await Token.findById(req.params.id);
  const enteredToken = req.body.token;

  const verified = speakeasy.totp.verify({
    secret: secretToken.token.secret,
    encoding: "base32",
    token: enteredToken,
  });
  if (!verified) {
    return res.status(403).json({
      message: "verification failed",
    });
  }
await secretToken.authIsSet = true

  return res.status(200).json({
    status: "success",
    message: "verification successful",
    verified: verified,
  });
};

STEP 13

Create a verify-token route to fire this request

router.post("/verify-token/:id", authenticationController.verifyToken);

if after firing this endpoint, you get this response, then you have successfully added 2FA to your application!.
CONGRATULATIONS

{
    "status": "success",
    "message": "verification successful",
    "verified": true
}

I hope you found this write up helpful!.
Checkout my codes here github

Let me know your thoughts in the comment section

JAVASCRIPT ARRAY.MAP() METHOD

Candie — Mon, 01 May 2023 14:15:10 +0000

For me, I believe Javascript Array.map() method is one of the most important array methods to understand especially if you are a frontend developer.

So quickly I am going to explain the concept of the Array.map() method and highlight couple of scenerios where it can be useful.

REQUIREMENT

Knowledge of basic javascript

What are JavaScript Arrays?

JavaScript arrays allows storing a collection of multiple items under a single variable name.

in simple terms, think of this like a high school with 30 students, and the school needs to convey the entire students to a location, the bus the school use in convening the entire students can be equated to a javascript array.

For example,

const array = []

This is the syntax for writing a javascript array,

An opening square bracket and a closing square bracket, the contents will be between as illustrated using the students example below

const students = ['josh', 'steph', 'segun', 'femi', 'adeola']

using this format, it is very easy for us to perform operations on the 5 students in the students array,
for instance if the school wants the total number of students in the school, that is very easy to get by just calling the array.length property

const students = ['josh', 'steph', 'segun', 'femi', 'adeola']
const totalStudents = students.length

// output = 5

So basically javascript arrays makes it easy for developers to manage/query/manipulate simple and complex data to achieve a particular aim.

for instance, if steph in the students array was expelled, and need to be eliminated from the students array, calling the array.splice method achieves that with just 1 line of code

const students = ['josh', 'steph', 'segun', 'femi', 'adeola']
students.splice(1, 1)
console.log(students)

// output = ['josh', 'segun', 'femi', 'adeola']

So understanding Javascript array concept as a developer is a must, because it will make your life and work a lot easier.

Array.map() Concept

The javascript Array.map() method creates or returns a new array after performing an action on each element of the array.

For example, the students array, I want to add more information about the students other than just their name,

I want to add the student age and birth year,

Below contains two array elements containing both the students age and birth year.

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]

_Worthy of note that each array element have an index property to locate and identify each element in the array, _

we will be using the index of the element to properly map these data together

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]
const students = ['josh', 'segun', 'femi', 'adeola']

Now let's call the map method on the student array and properly and dynamically map age and year to each students

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]
const students = ['josh', 'segun', 'femi', 'adeola']

const mappedStudents = students.map((student, i)=> {
   return {
        name: student,
        age: studentAge[i],
        birthYear: studentBirthYear[i]
     }
   }
 )

console.log(mappedStudents)
// output = [
    {name: 'josh', age: 18, birthYear: 2005}
    {name: 'segun', age: 22, birthYear: 2001}
    {name: 'femi', age: 19, birthYear: 2004}
    {name: 'adeola', age: 17, birthYear: 2006}
]

We can still go further and conditionally manipulate this data by add an adult tag for student 18years and above, and adding an child tag to students less than 18years old;

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]
const students = ['josh', 'segun', 'femi', 'adeola']

const mappedStudents = students.map((student, i)=> {
   return {
        name: student,
        age: studentAge[i],
        birthYear: studentBirthYear[i]
     }
   }
 )

const newMappedStudents = mappedStudents.map((student, i)=>{
   return {
       name: student.name,
       age: student.age,
       birthYear: student.birthYear,
       status: student.age >= 18 ? 'adult' : 'child'
     }
   }
)

// output = [
    {name: 'josh', age: 18, birthYear: 2005, status: 'adult'} 
    {name: 'segun', age: 22, birthYear: 2001, status: 'adult'} 
    {name: 'femi', age: 19, birthYear: 2004, status: 'adult'} 
    {name: 'adeola', age: 17, birthYear: 2006, status: 'child'}
]

Looking at the lines of codes we've been writing, the use for the Array.map() method is limitless, especially when working with Javascript frameworks like React.js,

The Array.map() method is mostly used when there is a new to output multiple list of a particular item.

Some important points to note about the Array.map() method

_1. Array.map() creates a new array from calling a function for every array element

Array.map() does not execute the function for empty elements.
Array.map() does not change the original array._

Let me know your thoughts about Array.map() methos in the comment section...

HOW TO GENERATE 4 DIGIT OTP WITH JAVASCRIPT

Candie — Sun, 30 Apr 2023 09:41:58 +0000

Are you looking to generate OTP codes for your application for authentication?
Follow these few steps and you will be able to do that.

STEP 1
Generate a random number between 0 and 9000

const randomNum = Math.random() * 9000
console.log(randomNum)

// will log random numbers like (1758.36816277815,8591.126356595876,380.85504639047053)

STEP 2
Format the random number, to eliminate the decimals

const randomNum = Math.random() * 9000
const formattedRandomNum = Math.floor(randomNum)
console.log(formattedRandomNum)

// will log random numbers like (1758,8591,380)

STEP 3
Add 1000 to the generated value to make sure the length is always 4.

Note: Math.random() will generate random numbers between 0 and 8999, so adding 1000 to this random number, the highest can only be 9999, so our max length of 4 is always ensured and preserved.

const randomNum = Math.random() * 9000
const token = Math.floor(1000 + randomNum)
console.log(token)

// will log random numbers like (2758,9591,1380)

STEP 4
Refactor into a function you can call each time you need to generate a token.

function generateToken(){
   const randomNum = Math.random() * 9000
   return Math.floor(1000 + randomNum)
}

// will log random numbers like (2758,9591,1380)

STEP 5
Call the function and your token is generated, then you can go ahead and hash the code/use it for what you intent.

function generateToken(){
   const randomNum = Math.random() * 9000
   return Math.floor(1000 + randomNum)
}

generateToken() 
// will return random numbers like (2758,9591,1380)

Hope you found this content helpful?
Subscribe to my youtube channel here
Subscribe to my youtube channel