Forem: Walkr's-Hub

Password Hashing in Node.js Using bcryptjs Library.

Walkr's-Hub — Mon, 30 Jan 2023 11:16:28 +0000

Our Objective

Here's the picture, You are creating your web application that takes in user information, It could be things such as Credit Card Number, National Identification Number, or even Password e.t.c But when you save it, you still get the raw user data being stored exactly the way it has been inputted. How do we go about hashing certain user information so that we can better secure our data?

Data like these are typically stored in a database, and we need a way to encrypt such data so that it doesn't become easily accessible. Even If someone were to hack our database, all they would see is just a bunch of hashed data they can't do anything with.

Our Development Tool

We would be using the bcryptjs library to achieve this goal, It is a very secure and widely used hashing algorithm, which has a lot of cryptographical use cases. This library will help us solve our security problem. You can click here to learn more about the library.

Prerequisites

Basic Understand of Arrow Functions.
Basic Understanding of Command Line/Terminal.
Async - Await.
Node is installed

What is Hashing?

Hashing is the process of transforming any given key or a string of characters into another value. This is usually represented by a shorter, fixed-length value or key that represents and makes it easier to find or employ the original string.

Getting Started

To kick things off, we need a separate file, where we would be storing the logic for our hashing algorithm, this would serve as the playground for understanding how this library works, Before we implement it in our application.

Go ahead and initialize a directory/folder and then create your JavaScript file inside it. My folder name is models and my filename is index.js.

We would start by installing bcrypt into our project folder by using our terminal. We can run the code below to install bcrypt:



npm i bcryptjs

You should have this result printing:

Writing our Logic

Before we start hashing our data, we need to require the bcryptjs library into our index.js file, this gives us access to the functions necessary for our goal. You can write the code to save the library into a variable.



const bcrypt = require("bcryptjs")

Next, we need to create an Async function that would help us work with the promises that would be returned from bcryptjs, This is because it is a promise based library. Let's create an async function.

I would call mine, myFunction() and invoke the function afterwards.



const myFunction = async () => {

}

myFunction()

You can learn more about async-await in my article

Hashing Data

Let us go ahead and create the information we are trying to hash, we'll be using user password as an example, I would create a variable for this password. We would assume it to be the plain text password our user provides to us.

To get this done, type the code below:



const myFunction = async () => {
   const password = "John2468$"
}

myFunction()

Below this code, we are going to be creating the hashed version of this password by using bcrypt .hash() method. This method returns a promise containing the hashed version of our password and we would await it's value and store it in a variable called hashedPassword.

The .hash() method takes in two arguments, The first being the data to be hashed, in this case our user password, which we have access to via the password variable. The second being the number of rounds we want to perform.

The number of rounds determines how many times the hashing algorithm is going to be executed, Based on my experience with the library i find that a very good number for this is 8, as it strikes a good balance between security and speed. If we use a lesser number of rounds, the algorithm becomes easy to crack and if we use too many rounds, the algorithm takes a long time to run.

Here's the code to make this happen:



const bcrypt = require("bcryptjs")

const myFunction = async () => {
    const password = "John2468$"
    const hashedPassword = await bcrypt.hash(password, 8)
    console.log(password);
    console.log(hashedPassword);
}

myFunction()

When we go ahead and log the result of password and hashedPassword, we get the result printing below:

We see that the hashing algorithm has hashed our data successfully!

The hashed version is what we would be storing in our database.
This is the hashed version of our data and is exactly what we'll be typically storing in our database where we have password.

Hashing Algorithms Vs Encryption Algorithms

When we use encryption algorithms, we can get the original version of our encrypted data back, This is sort of like a reversible process.



    (encrypted)                    (reversed)
data ---------> 12&#errr!@#$uihh$7 ---------> data

In the case of hashing algorithms, we are dealing with a typical one way algorithm which is irreversible once hashing has occurred.



    (encrypted)                    
data ---------> 12&#errr!@#$uihh$7

Now, this is by design, and in this article we are dealing with hashing, which begs the question, How do we go about logging in, so we compare the credentials provided by the user with the one stored in our database just to be sure they are exactly matched.

Comparing Data

bcryptjs gives us a way to compare our stored value, with the one the user would provides when using our API, We would be using the bcrypt.compare() method, which takes in two arguments:

The data to be hashed and compared. i.e user input
The hashed value of that data e.g hashedPassword

Although we are typing this out manually, when we are building api's it would be taken from the users and not just typed by us.

We would create a variable called isMatch and we would use the .compare() method on bcrypt and then pass in the required values, i.e user input and the hashed version we have stored.

Now, we can type the code to get this done, See the code below:



const bcrypt = require("bcryptjs")

const myFunction = async () => {
    const password = "John2468$"
    const hashedPassword = await bcrypt.hash(password, 8)
    console.log(password);
    console.log(hashedPassword);

    const isMatch = await bcrypt.compare("John2468$", hashedPassword);
    console.log(isMatch);
}

myFunction()

When we run our file again, we should get the boolean called true printing.

Behind the scenes bcrypt has run its hashing algorithm on the user password data, and when compared to the hashedPassword, it shows it to be an exact match.

When we change the value provided such as changing "J" in "John" to "j" we would get a different output printing.



const bcrypt = require("bcryptjs")

const myFunction = async () => {
    const password = "John2468$"
    const hashedPassword = await bcrypt.hash(password, 8)
    console.log(password);
    console.log(hashedPassword);

    const isMatch = await bcrypt.compare("john2468$", hashedPassword);
    console.log(isMatch);
}

myFunction()

This is typically what we would need when we are building our applications, it could be a system where users are required to login and you want to compare the password they have provided, with the one you have in your database. This is a highly recommended way of storing such data.

Conclusion

So far we have seen how to hash certain user data before storing them in our database, using the .hash() method of the bcryptjs library where we have to provide the user data and the number of rounds.
We also covered how to compare values with each other using the .compare() method as well.

To see the implementation of this in an actual project, I used bcrypt while building my REST-API-WITH-MONGOOSE project to secure user password, here's a link to the github repo

The useState Hook: A Deep Dive into React State Management

Walkr's-Hub — Wed, 25 Jan 2023 04:42:16 +0000

React is a JavaScript library for building user interfaces that has gained immense popularity over the years. One of the key features of React is its ability to manage state and render components based on that state. The useState Hook is a way to manage state in functional components, as opposed to using class components and their state object. In this article, we will take a deep dive into the useState Hook and understand how it works, its syntax, practical use cases and best practices.

Before diving into hooks, it's important to understand how state is managed in class components. In a class component, state is declared as an object in the constructor and can be updated using the setState() method. Here's an example of a class component that has a state variable called "count" and a button that increments the count when clicked:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Click me
        </button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

With the introduction of hooks in React 16.8, it's now possible to manage state in functional components using the useState Hook. This allows for a cleaner, more functional approach to writing components, without the need for class components and their associated lifecycle methods.

What's a hook?

A hook is a special function provided by React that allows you to "hook into" React features, such as state and lifecycle methods, in functional components. Hooks are called at the top level of a component, and they only work in functional components or in custom hooks.

To make use of the useState hook in react, simply import it from the react library like so:

import { useState } from 'react';

Declaring a state variable

To declare a state variable in a functional component, you use the useState Hook. The useState Hook returns an array with two elements: the current state value and a function to update the state value. Here's an example of how to declare a state variable called "count" with an initial value of 0:

const [count, setCount] = useState(0);

In this example, the useState hook is called with an initial value of 0. The hook returns an array with the current state value (0) and a function (setCount) to update the state.

Reading State

To read the current value of a state variable, simply access it like any other variable. In the example above, the current value of the count state variable can be accessed by referencing the count variable. Here is an example of reading the count state variable in the render method of a component:

function Counter() {
  const [count, setCount] = useState(0);
  return <p>Count: {count}</p>;
}

Updating state

To update the value of a state variable, you call the function returned by the useState Hook with the new value. Here's an example of how to increment the value of the "count" variable:

setCount(count + 1);

Managing multiple states

It's important to note that the useState Hook only works in the top-level of your component, and it can be called multiple times in a component if you need to manage multiple states.

Updating state based on previous state

The useState Hook also allows you to pass a function as the second argument to set the state, which is useful when you need to update the state based on the previous state. The function receives the previous state as the first argument and returns the new state.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>The count is {count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

In this example, we are passing a function to setCount that takes the previous count and adds 1 to it. This ensures that the count state is always updated correctly, even if multiple updates happen at the same time.

Practical use cases:

The useState hook allows us to manage the state of a variable, There are several ways to use this hook to manage state in our projects. Here are a few examples:

A simple counter:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

export default Counter;

In this example, we are using the useState hook to create a simple counter. We set the initial state to 0 and create a button that when clicked, increments the count by 1 using the setCount function.

A form input with controlled state:

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');

  return (
    <>
      <label>Name:</label>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </>
  );
}

export default Form;

In this example, we are using the useState hook to control the value of an input in a form. We set the initial state of name to an empty string, and we use the setName function to update the state as the user types in the input field. This is known as a "controlled input" because the input's value is directly tied to the component's state.

A toggle switch:

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <>
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? 'Turn Off' : 'Turn On'}
      </button>
    </>
  );
}

export default Toggle;

In this example, we are using the useState hook to create a toggle switch. We set the initial state to false and create a button that when clicked, change the state to true or false using the setIsOn function and the ! operator to toggle the state.

Best Practices

Always initialize the state with a default value when the component first renders.
Only update the state with the 'set' function provided by the useState hook.
Splitting state into multiple useState calls if you have multiple pieces of state that are independent of each other.
Avoiding unnecessary re-renders by only updating the state when it is actually necessary.

Conclusion

In conclusion, the useState Hook is a powerful tool for managing state in React. It allows you to add state to functional components, making it easier to write and manage state in your application. By understanding the useState Hook and its capabilities, you can simplify state management in your React application and make it more efficient.

Passing Data in React: The Power of Props

Walkr's-Hub — Wed, 18 Jan 2023 11:13:29 +0000

React is a popular JavaScript library for building user interfaces, and one of its key features is the use of "props", short for properties. In this article, we will explore what React props are, how to pass data using props and why they are important for building efficient and reusable components.

Prerequisites

Before diving into React props, it is important to have a basic understanding of React and JavaScript. If you are new to React, it is recommended that you first familiarize yourself with the concepts of components and JSX before continuing with this article.

What are React Props?

In React, props are used to pass data from a parent component to a child component. Props are passed to a component as an object, and the component can then access the properties of the object to render the component with the appropriate data.

For example, imagine that we have a parent component called "App" and a child component called "WelcomeMessage". The App component contains an instance of the WelcomeMessage component and we want to pass the value of "name" to the "WelcomeMessage" component so that it can display a personalized welcome message.

Here is an example of how we can pass the "name" prop from the App component to the WelcomeMessage component using functional component:

const App = () => {
  return (
    <div>
        <WelcomeMessage name="Emmanuel" />
    </div>
  )
}

const WelcomeMessage = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}

In this example, we are passing the "name" prop as a JSX attribute in the WelcomeMessage component. The WelcomeMessage component then receives the prop as an argument in its function, and we can access the prop's value with the "props" object.

It is important to note that props are read-only, meaning that a component cannot change the value of a prop passed to it. If a component needs to update the value of a prop, it must instead update the state of its parent component, which will then pass the updated prop to the child component.

Passing Data Using Props

Since react components are reusable, we can make duplicates of the WelcomeMessage component and pass to it some more information as props.

Here's an example:

const App = () => {
  return (
    <div>
        <WelcomeMessage name="Emmanuel" alias="Walkr" />
        <WelcomeMessage name="Ogochukwu" alias="Gochman" />
    </div>
  )
}

const WelcomeMessage = (props) => {
  return <h1>Hello, {props.name}! a.k.a Mr. {props.alias}</h1>;
}

In the example above, we added the alias prop to add more information to the WelcomeMessage component, now the component displays the second name each user is also known as.

The Importance of React Props

React props are an essential tool for building efficient and reusable components. By passing data from a parent component to a child component, we can create components that are flexible and can be used in multiple contexts. This allows us to write code that is easy to maintain and test, and it also allows us to create a more modular and scalable application.

In addition, React props enable us to create components that are easy to understand and reason about. By clearly defining the data that a component expects to receive, we can easily understand how a component works and how it can be used.

Conclusion

React props are an important feature of the React library that allow us to pass data from a parent component to a child component. By using props, we can create efficient and reusable components, and make our code easier to understand and reason about. Whether you are a seasoned React developer or just starting out, understanding how to use React props is essential for building high-quality React applications.

React JSX for Beginners: How to Build Dynamic Components

Walkr's-Hub — Thu, 12 Jan 2023 00:28:05 +0000

Introduction

One of the main components of React, a popular JavaScript library for creating user interfaces, is JSX, a syntactic extension that enables you to express HTML-like elements in your JavaScript code. This article will assist you in starting to construct dynamic, responsive components if you are new to React and JSX.

Let's look into JSX's operation first. A transpiler like Babel transforms (converts) JSX into JavaScript when it is used in a React component. Here is an illustration of a straightforward React component created with JSX:

import React from 'react';

function Greet(props) {
  return <h1>Good afternoon, {props.name}</h1>;
}

export default Greet;

The 'Greet' function in this example is a fundamental React component that accepts a single 'props' (short for 'properties') object as an input. The return statement's JSX is translated to JavaScript, which appears as follows:

import React from 'react';

function Greet(props) {
  return React.createElement("h1", null, "Good afternoon, ", props.name);
}

export default Greet;

As you can see, JSX is transpiled into a React call. React elements are created using the createElement() function. The type of element to construct (in this case, "h1") is the first argument to the createElement() function. The second argument is an object containing any props that should be supplied to the element.

The definition and rendering of components is one of the key uses of JSX in React. A component is a piece of reusable UI that can accept props and be rendered more than once with various props.

import React from 'react';

function Article(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.body}</p>
    </div>
  );
}

const article = {
  title: 'React JSX for Beginners',
  body: 'How to build dynamic components with React and JSX'
};

ReactDOM.render(<Article {...article} />, document.getElementById('root'));

Title and Body are two props that the Article component in this example accepts in order to render the title and body of an article. The Article component is defined using JSX. The information from a given article is then sent as props to the component, which is then rendered in the HTML root element.

The ability to conditionally render items depending on specific criteria is another way to utilize JSX in React. For Example:

import React from 'react';

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

Another thing to remember is that JSX elements must have a single parent element in order to function properly; otherwise, an error will occur. When there are several elements, they must be contained within a single element; a div is a frequent example.

Conclusion

JSX helps to build user interfaces and is used to define the structure and content of a React component. It looks similar to HTML, but it's actually a syntax extension for JavaScript. It can return a value or receive a value as props which the conventional HTML code wouldn't let you do.

Mordern Javascript: Utilizing The Async-Await Feature.

Walkr's-Hub — Sat, 06 Aug 2022 07:56:00 +0000

Introduction

In modern JavaScript where we have features like Promises and arrow functions etc. None of them are, In my opinion a bigger improvement to the language than Async-Await. Async-Await makes it easy to work with our promise based code that looks more synchronous than asynchronous.

In this article we would be looking at how Async functions work in great detail, It's advantages and practical use cases.

What is Async-Await?

Async Await is merely a small set of tools that makes it easier to work with promises. It allows continuous usage of promise methods, and it helps us to better manage a lot of asynchronous activities while building our applications.

Prerequisites

How to use the Command Line/Terminal.
Basic Understanding of Javascript Promises.
Writing Arrow Functions.
Using setTimeout().
Node is installed.

Getting Started

We'll start by creating a directory that contains our JavaScript file. You can go to your terminal and type the following:

mkdir async

To change directory into async , type the code below:

cd async

To create a new Javascript file called "async-await.js" with a variable inside it, type the code below:

echo var msg > async-await.js

Now, we can open up our directory in visual studio code via the command below:

code .

Functions and Async Functions (How they differ)

To really grasp how functions differ from Async Functions, Let us create an arrow function called 'doWork'. This function is going to be empty and we would log it's result to the console using the code below:

let doWork = () => {
};
console.log(doWork())

This would print out on our terminal undefined when we run our async-await.js file, this is because functions usually expect a return value. To run our file, open up your command line and type:

node async-await

In order to make our function an async function, all we would do is mark the function as async, just before the function declaration. i.e

let doWork = async () => {
};
console.log(doWork())

With this small change to the code we are already changing the behavior of our program. We would no longer see undefined printing to our terminal. To see this, we need to run our file once again by using:

node async-await

In this case what we get back is a promise that has been fulfilled with the value of undefined.

This is the first thing to note about async-functions, Async functions always return a promise. This promise is fulfilled with the value, you choose to return from the function. Currently we are not returning anything, that's why it is fulfilled with undefined.

Now, let us explicitly return a value from the async function. To do this, let us return a string containing my name.

let doWork = async () => {
   return "Emmanuel"
};
console.log(doWork())

One thing to note though, the return value from doWork() is not "Emmanuel", it is actually still a Promise, that has been fulfilled with the string "Emmanuel". When we run our code, we see what this means

Using `.then()` and `.catch()`

We aren't really doing much by just logging out a return value, let's see how to use the .then() method to run some code when the async function gets fulfilled.

To get this done, we just need to use the .then() method on our doWork function. As an example, we would simply log the result of its embedded arrow function. Which contains the return value of the async function

let doWork = async () => {
   return "Emmanuel"
};

doWork().then((result) => {
   console.log("Result", result)
})

Here's the result for that:

We can also set up a .catch() call which is simply a function that gets an error. Lets's chain it to our .then() method with the code below:

let doWork = async () => {
   return "Emmanuel"
};

doWork().then((result) => {
   console.log("Result", result)
}).catch((e) => {
  console.log("e", e);
})

Just one small problem, When we run our file, we still get the result to be "Emmanuel".

So, how do we ever get .catch() to run?
Well, if we throw an error from our async function, It's going to be the same as rejecting the promise that gets sent back from the async function.
To throw an error, modify your code with the one below:

let doWork = async () => {
   throw New Error("Something went wrong")
   return "Emmanuel"
};

doWork().then((result) => {
   console.log("Result", result)
}).catch((e) => {
  console.log("e", e);
})

This time around, when we run our code we get our "e" string as well as the entire error object.

Using the Await operator

So far we have looked at the basic structure of Asynchronous Functions. Now, we would be exploring the other half of the Async-Await feature.
The await operator can only be used in async functions and since the whole point of async await is to make things easier when working with promise based code.

To spice things up, let's create a promise based code, this would just be a promise that adds up two numbers after two seconds, Here's the code for that:

const add = (a, b) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })
}

let doWork = async () => {
   throw New Error("Something went wrong")
   return "Emmanuel"
};

doWork().then((result) => {
   console.log("Result", result)
}).catch((e) => {
  console.log("e", e);
})

If we were to use promise chaining, the code would require .then() calls and callback functions, just to get the value of add().

With Async-Await, it eliminates this monotonous way of doing things.

What we get access to, inside our async-funtion is the await operator. The await operator works with promises. And since we already have a promise called add, we would use it with the await operator. We are going to add two numbers together and then await the result of the add promise, which we would store inside our variable called "sum" and then return the value of "sum"

const add = (a, b) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })
}

let doWork = async () => {
   const sum = await add(1, 99);
   return sum
};

doWork().then((result) => {
   console.log("Result", result)
}).catch((e) => {
  console.log("e", e);
})

When we run our async-await.js file again, we get the result below.

Performing Multiple Tasks with Async-Await

Awesome, we have used await for the first time in our application. We can even take things a step further by performing other promise based tasks in our async function.

I would be making more calls to add() by using the value for the the previous sums. Here's the code for that

const doWork = async () => {
   const sum =  await add(1, 99)
   const sum2 = await add(sum, 50)
   const sum3 = await add(sum2, 3)
   return sum3
}

This is going to make several calls to sum, we would have to wait 2 seconds for every promise to get fulfilled. This tells us that async-await doesn't necessarily make things faster, it just makes things easier to work with. After we wait for 6 seconds, we would get out final result to be 153

One advantage Async-Await gives us, is the ability to put all of our promise calls in the same scope. This makes for more readable and synchronous looking code.

Now, all that's left is to wrap things up by writing some error handling code when our promises get rejected. We would be adding an if statement that helps us to check if the numbers to be added by sum() are negative numbers. We would return the reject code so that it finishes and then rejects the promise if that condition is met.

Let's improve our add() function by adding the if statement.

const add = (a, b) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (a < 0 || b < 0) {
                return reject('Numbers must be non-negative')
            }

            resolve(a + b)
        }, 2000)
    })
}

If we run our async-await file after this is added, we would get the same output, But when we make some changes to the numbers in add(), We get our error showing up: Here's the code and image for that below:

const add = (a, b) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (a < 0 || b < 0) {
                return reject('Numbers must be non-negative')
            }

            resolve(a + b)
        }, 2000)
    })
}

const doWork = async () => {
    const sum = await add(1, -99)
    const sum2 = await add(sum, 50)
    const sum3 = await add(sum2, -3)
    return sum3
}

doWork().then((result) => {
    console.log('result', result)
}).catch((e) => {
    console.log('e', e)
})

The output:

The output is going to get logged after we wait for the initial 2 seconds which is on our setTimeout() function.

Conclusion

So far, we have looked at how async await differs from functions, the await operator and how to perform multiple tasks with async-await. We also learned that async-await gives us one-scope to put in our promises in.

I hope this article has been of help, Please leave a comment and follow me to get more content.

Forem: Walkr's-Hub

Password Hashing in Node.js Using bcryptjs Library.

Our Objective

Our Development Tool

Prerequisites

What is Hashing?

Getting Started

Writing our Logic

Hashing Data

Hashing Algorithms Vs Encryption Algorithms

Comparing Data

Conclusion

The useState Hook: A Deep Dive into React State Management

What's a hook?

Declaring a state variable

Reading State

Updating state

Updating state based on previous state

Practical use cases:

Best Practices

Conclusion

Passing Data in React: The Power of Props

Prerequisites

What are React Props?

Passing Data Using Props

The Importance of React Props

Conclusion

React JSX for Beginners: How to Build Dynamic Components

Introduction

Conclusion

Mordern Javascript: Utilizing The Async-Await Feature.

Introduction

What is Async-Await?

Prerequisites

Getting Started

Functions and Async Functions (How they differ)

Using .then() and .catch()

Using the Await operator

Performing Multiple Tasks with Async-Await

Conclusion

Using `.then()` and `.catch()`