October 29, 2020

Using bcrypt with React Native

Yo folks! Today we are going to convert a string into an encrypted hash using bcrypt in React Native. A very simple and small task. Let’s first understand what bcrypt is.

bcrypt is a password-hashing function designed by Niels Provos and David Mazières, based on the Blowfish cypher and presented at USENIX in 1999

Wikipedia

Download the starting project from below

Now, open the project in your favorite code editor and open your terminal and navigate to the project directory. Run the following command to install all the required dependencies

npm install

After installing all the dependencies, open your project folder and navigate to the android folder. Create a file local.properties and within the file, write down your Android SDK location like this.

// MacOS
sdk.dir = /Users/<username>/Library/Android/sdk

// WindowsOS
sdk.dir =    C:\\Users\\<username>\\AppData\\Local\\Android\\sdk

Save the file and use the following command to run the project

Android

npx react-native run-android

iOS

npx react-native run-ios

The following screen should be shown when the screen starts up

Open another tab in your terminal and run the following command to install bcrpyt for react-native.

npm i react-native-bcrypt

Let’s do some react-native practice by resolving the TODO within src/screens/home/index.js. The first TODO is to write the logic within handleChange & handleSubmit.

Solving handleChange: Add the following line within the handleChange function

const handleChange = (value) => {
    setText(value);
  };

Solving handleSubmit: Here we need to get the value and convert it into hash. Let’s import bcrypt first and then underneath the imports and above the component write the function which will take string as an input and convert it into a hash and return it.

import React, { useState } from 'react';
import { Button, TextInput } from 'react-native-paper';
import { Image, SafeAreaView, View, Text, StatusBar } from 'react-native';
import bcrypt from 'react-native-bcrypt';

import styles from './styles';

const encrypt = (text) => { // <- THIS
  return bcrypt.hashSync(text, 0);
};

We used a bcrypt function called hashSync which auto generates a salt and a hash.

In cryptography, a salt is random data that is used as an additional input to a one-way function that hashes data, a password or passphrase. Salts are used to safeguard passwords in storage.

Now let’s call the encrypt function in the handleSubmit function and pass the text stored in the state which is the value from the input which we are storing in the handleChange function

const handleSubmit = () => {
  const hash = encrypt(text);
  setHashed(hash);
  setIsHashed(true)
};

We capture the encrypted hash into the variable hash and then set the hashed value in the state and then we set the hashed value true so we can display the hashed value. After saving the file, try entering “Hello” in the input field and press the convert button.

To explore regarding bcrypt and it’s functionality, check out their npm page here. We hope you’ve learned the basic of text encryption. Let us know below in the comments if you face any issue within the tutorial.

Useful links:

  1. React Native Documentation
  2. React Native Paper
  3. Bcrypt for React Native

Help us grow by liking, commenting and sharing 👍