Sunday, August 11, 2019

React Native Password Encryption and Decryption using Base64 Method

This tutorial explains how encrypt and decrypt password text using Base64 method in react native application. Encoding and decoding a string in Base64 with JavaScript can be quite handy. It's in no way meant to be a secure encryption method, but it is extremely useful for writing obfuscated strings to either a document (your webpage) or a cookie file without needing to worry about quotes or characters breaking things. A most famous password encryption technique is known as Base64 encryption which is used by hundreds of websites and mobile applications to store their password.In this example we are going to encrypt and decrypt TextInput field value using Base64 library in react native.

React Native Password Encryption and Decryption using Base64 Method


Installation of Dependency

To use Base64 method in react native we need to use js-base64 in our project directory first.
npm install js-base64 --save 

Encryption & Decryption using Base64 Method in React Native

Lets see the complete source code that helps to encrypt and decrypt password text using Base64 method in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the js-base64 library.
npm install js-base64 --save 

Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native, js-base64  packages import all required components.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { Base64 } from 'js-base64';

Step 5: Lets create constructor block inside your App component. In the constructor block we have created two state variables named as passwordHolder and showData.
passwordHolder : It is used to hold the entered password text in TextInput component.
showData : It is used to hold the password after applying the Encryption.

Step 6: Create a function named as encryptPassword(). This function use Base64 component to convert the TextInput entered string in Base64 encryption and store the encrypted password into state.
  encryptPassword = () => {
    var encode = Base64.encode(this.state.passwordHolder);
    this.setState({ showData: encode });
  }

Step 7: Create a function named as encryptPassword(). Create a function named as decryptPassword(). This function use Base64 component to Decrypt the encrypted string into normal format and store in State.
  decryptPassword = () => {
    var decode = Base64.decode(this.state.showData);
    this.setState({ showData: decode });
  }

Step 8: Implement render method inside the App class and wrapped the below layout design inside the root View component.  
 render() {
    return (
      <View style={styles.Container}>

        <TextInput
          placeholder="Enter Password Here"
          onChangeText={data => this.setState({ passwordHolder: data })}
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
        />

        <TouchableOpacity style={styles.button} onPress={this.encryptPassword} >
          <Text style={styles.text}>Click to Encode Password</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={this.decryptPassword} >
          <Text style={styles.text}>Click to Decode Password</Text>
        </TouchableOpacity>

        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>
          {this.state.showData}
        </Text> 

      </View>
    );
  }

Step 9 : Apply the below style sheet design. 
const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInputStyle: {
    textAlign: 'center',
    height: 42,
    width: '80%',
    borderWidth: 1,
    borderColor: '#9e9e9e',
    borderRadius: 7,
  },
  button: {
    width: '80%',
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#ec407a',
    borderRadius: 3,
    marginTop: 20
  }, 
  text: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
    padding: 5
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to encrypt and decrypt password text using Base64 method in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { Base64 } from 'js-base64';

export default class App extends Component {

  constructor() {
    super()
    this.state = {
      passwordHolder: '',
      showData: '',
    }
  }

  encryptPassword = () => {
    var encode = Base64.encode(this.state.passwordHolder);
    this.setState({ showData: encode });
  }

  decryptPassword = () => {
    var decode = Base64.decode(this.state.showData);
    this.setState({ showData: decode });
  }

  render() {
    return (
      <View style={styles.Container}>

        <TextInput
          placeholder="Enter Password Here"
          onChangeText={data => this.setState({ passwordHolder: data })}
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
        />

        <TouchableOpacity style={styles.button} onPress={this.encryptPassword} >
          <Text style={styles.text}>Click to Encode Password</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={this.decryptPassword} >
          <Text style={styles.text}>Click to Decode Password</Text>
        </TouchableOpacity>

        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>
          {this.state.showData}
        </Text> 

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInputStyle: {
    textAlign: 'center',
    height: 42,
    width: '80%',
    borderWidth: 1,
    borderColor: '#9e9e9e',
    borderRadius: 7,
  },
  button: {
    width: '80%',
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#ec407a',
    borderRadius: 3,
    marginTop: 20
  }, 
  text: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
    padding: 5
  }
});

Screenshot :


React Native Password Encryption and Decryption using Base64 Method

React Native Password Encryption and Decryption using Base64 Method

React Native Password Encryption and Decryption using Base64 Method

 This is all about React Native Password Encryption and Decryption using Base64 Method. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


1 comment: