javascript - How do I encrypt a data field in a Firebase database?

Question

I'm using React and while adding data to the Firebase database, I need to encrypt the 'aadhar' value in the users collection, so the one viewing the database can't checkout the 'aadhar' value. And then, while displaying it in the app, I need it to display the decrypted value again.

Firebase component -

import firebase from 'firebase';

var firebaseConfig = {
    (all the keys)
};

export var firebaseApp = firebase.initializeApp(firebaseConfig);
var db = firebaseApp.firestore();

export default db;

Where I'm inputting the data -

import React, { useState } from "react";
import { Link } from 'react-router-dom';
import "../../App.css";
import db from "../Firebase/firebase";

const ExternalUser = () => {
  const [name, setName] = useState("");
  const [number, setNumber] = useState("");
  const [address, setAddress] = useState("");
  const [aadhar, setAadhar] = useState("");

  const [loader, setLoader] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoader(true);

    db.collection("users")
      .add({
        name: name,
        number: number,
        address: address,
        aadhar: aadhar
      })
      .then(() => {
        setLoader(false);
        alert("Your info has been submitted??");
      })
      .catch((error) => {
        alert(error.message);
        setLoader(false);
      });

    setName("");
    setNumber("");
    setAddress("");
    setAadhar("");
  };

  const numChange = (e) => {
    const re = /^[0-9]+$/;
    if (e === '' || re.test(e)) {
      setNumber(e)
    }
  }

  const aadharChange = (e) => {
    const re = /^[0-9]+$/;
    if (e === '' || re.test(e)) {
      setAadhar(e)
    }
  }


  return (
    <div>
        <form className="form" onSubmit={handleSubmit}>

            <h1>Hello There.</h1>
            <h3>Please provide your information below.</h3>

            <label>Full Name</label>
            <input
                placeholder="Full Name"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />

            <label>Contact No.</label>
            <input
                placeholder="Contact No."
                type="text"
                value={number}
                onChange={(e) => numChange(e.target.value)}
            />

            <label>Full Address</label>
            <textarea
                placeholder="Full Address"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
            ></textarea>

            <label>Aadhar No.</label>
            <input
                placeholder="Aadhar No."
                type="text"
                value={aadhar}
                onChange={(e) => aadharChange(e.target.value)}
            />

            <button
                type="submit"
                style={{ background: loader ? "#ccc" : " rgb(2, 2, 110)" }}
            >
                Submit
            </button>
            <h5>Done with the registration?</h5>
            <Link to='/'>Home Page</Link>
        </form>
    </div>
    
  );
};

export default ExternalUser;

And finally where I'm displaying all the data -

import React from 'react';
import useFirestore from '../Hooks/UseFirestore';
import { Link } from 'react-router-dom';
import { Logout } from '../Logout/Logout';
import './Dashboard.css';

const Dashboard = () => {
    const { docs } = useFirestore('users');
    console.log(docs);

    return (
        <div>
            <div className="sidenav">
                <Link className='sidebar-element' to='/externaluser'>New User</Link>
                <Link className='sidebar-element' to='/login' onClick={Logout}>Log Out</Link>
            </div>

            <div className="main">
                <div className="table-users">
                    <div className="header">Users</div>
                    <table cellspacing="0">
                        <tr>
                            <th className='heading'>Full Name</th>
                            <th className='heading'>Phone No.</th>
                            <th className='heading'>Aadhar No.</th>
                            <th className='heading' width="230">Address</th>
                        </tr>
                        {docs && docs.map(doc => (
                            <tr>
                                <td>{doc.name}</td>
                                <td>{doc.number}</td>
                                <td>{doc.aadhar}</td>
                                <td>{doc.address}</td>
                            </tr>
                        ))}
                    </table>
                </div>
            </div>
        </div>
    );
}

export default Dashboard;

question from:https://stackoverflow.com/questions/65641116/how-do-i-encrypt-a-data-field-in-a-firebase-database

Answer 1

Waitting for answers