Encrypt and decript to Base64 Format in React native

Click on the link for Youtube Tutorial:

https://youtu.be/-OzNsKk6fx0

=======================================================================

In modern mobile applications, security is one of the top priorities for all users. So in this tutorial, we will get to know about one of the aspects of achieving security in our react native application. 

Sometimes in our applications, if we have some sensitive data like passwords/payment info etc, we need to encrypt/decrypt the data. So we will learn how to achieve this scenario in our react native mobile application.

We are using the js-base64 package in this tutorial in order to encrypt the data entered by the user and decrypt the same data.

STEP-1:

First, we need to install the below package.

• npm install js-base64

STEP-2:

Once the installation is completed successfully then we need to import the Base64 from the js-base64 package.

• import {Base64} from 'js-base64';

STEP-3:

Create variables using useState() in functional component.

    

Now we will create two text inputs and two buttons for handling, displaying encrypt and decrypt.

Step-4

For encoding the text entered by the user we will use the below code.

 Base64.encode(inputPwd)

For decoding the text entered by the user we will use the below code.

 Base64.decode(inputPwd)

COPY FULL CODE HERE: 

import React, {useState} from 'react';

import {

  Button,

  TextInput,

  StyleSheet,

  Text,

  ScrollView,

  View,

} from 'react-native';

import {Base64} from 'js-base64';

export const home = ({navigation}) => {

  const [inputPwd, setInputPwd] = useState();

  const [encPwd, setEncPwd] = useState();

  const [decPwd, setDecPwd] = useState();

  const handleInpChange = e => {

    setInputPwd(e);

  };

  const handleEncrypt = () => {

    console.log(inputPwd);

    setEncPwd(Base64.encode(inputPwd));

  };

  return (

    <ScrollView>

      <View style={styleSheet.homeContainer}>

        <Text>Hello User Iam from Home</Text>

        <TextInput

          underlineColorAndroid="transparent"

          onChangeText={e => {

            handleInpChange(e);

          }}

          style={styleSheet.textInput}

          placeholder="Enter Input"></TextInput>

        <Button

          title="Encrypt Pwd"

          onPress={() => {

            handleEncrypt();

          }}></Button>

        <Text style={{fontSize: 20, textAlign: 'center', marginTop: 10}}>

          {encPwd}

        </Text>

        <TextInput

          value={decPwd}

          onChangeText={() => {

            handleInpChange;

          }}

          style={styleSheet.textInput}

          placeholder="Output"></TextInput>

        <Button

          title="Decrypt Pwd"

          onPress={() => {

            setDecPwd(Base64.decode(encPwd));

          }}></Button>

      </View>

    </ScrollView>

  );

};

const styleSheet = StyleSheet.create({

  homeContainer: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  textInput: {

    borderWidth: 1,

    width: '80%',

    borderRadius: 10,

    margin: 20,

    padding: 10,

  },

});

OUTPUT: