This content originally appeared on DEV Community and was authored by Kai Wenzel
The Reason
Cryptography and anything related to it is best left to the experts. So when a requirement came up on a React Native project I was working on, to generate a digital signature for some data, I wanted to use a community supported and verified library. Instead of reinventing the wheel. But things did not go as planned.
The Plan
The initial plan to implement this feature was to use the ever famous, ever supported crypto library bundled with NodeJS.
The code was supposed to simple :
let privateKey = '' //Private key fetched from a remote server let data = "The data I needed to sign";
let sign = crypto.sign("SHA512", data, privateKey)
You see I thought these 3 magical lines of code would fix all my problems.
Well that didn’t work out very well. You see its next to impossible to use the crypto module in React Native for the very simple reason that React Native runs on the JavaScript Runtime, whereas crypto is a NodeJS module. And there is no crypto polyfill for React Native.
After tons of research I found that I basically had two options If I wanted the NodeJS crypto module to work with React Native.
Use Browserify library to convert the crypto to JavaScript Runtime compatible.
Use a NodeJS bridging library to run a NodeJS instance and generate the signature.
Browserify
The Browserify way just did not want to work for me. I tried everything it said in the documentation, Spend countless hours on forums like Stack Overflow and GitHub discussions just trying to make it work. But it was of no avail
NodeJS Bridge
Now, this was a more daring option. I found a library that would allow me to essentially add a NodeJS worker to any mobile app, by communicating with this worker I could essentially use any native NodeJS modules, in my case it was crypto. The library in question is this. Now, after reading the documentation I was beyond thrilled, this seemed to solve all my problems. But our line of work is never this easy ain’t it ?
After installing the package and doing the required setup, the app just refused to build.
So after exhausting the two options I had, I was ready to throw the towel in. But since I came this far, I wanted to do a final bit of googling before I surrendered.
The third and working option!
Lo and behold! The beautiful and elegant **react-native-rsa-native package presented itself before my very eyes, as the third google search result.
After reading the documentation, a small hope began to build in me. But after the past failures, I was cautiously optimistic as ever.
But this time
It works!
How to do it
The steps:
- In your terminal run the following command
npm i react-native-rsa-native
- After Installation import the library to your .js file like so
import {RSA} from 'react-native-rsa-native';
- Fetch or generate the RSA key pair
/*
// The resulting key pair object would look something like this keyPair = { private : 'private key', public : 'public key' }
*/
const generateKeys = async = () => {
let keyPair = await RSA.generateKeys(4096) //4096 Is the key size
return keyPair;
}
- Write the code to generate the signature
const generateRSASignature = async () =>{
//data to be signed
let data = 'Please sign me';
//Generate key pair
let keyPair = await generateKeys();
//Sign the data
let signature = RSA.signWithAlgorithm(data, keyPair.private, RSA.SHA512withRSA); return signature }
Final Code
import {RSA} from 'react-native-rsa-native';
const generateKeys = async = () =>
{
//4096 Is the key size
let keyPair = await RSA.generateKeys(4096)
return keyPair;
}
const generateRSASignature = async () =>{
//data to be signed
let data = 'Please sign me';
//Generate key pair
let keyPair = await generateKeys();
//Sign the data
let signature = RSA.signWithAlgorithm(data, keyPair.private, RSA.SHA512withRSA);
return signature
}
Closing thoughts
So to conclude, I cannot say this is the best way to achieve something like this. But this is the way that helped, and I wanted this to be a resource that I wish I had when I was looking for a similar problem.
Feel free to correct me on my mistakes in the comments and suggest better ways to achieve this.
Thank you for reading.
*That’s it and if you found this article helpful, please hit the ❤️, 🦄 button and share the article, so that others can find it easily :) *
If you want to see more of this content you can support me on Patreon!
Thanks for reading and hope you enjoyed!
This content originally appeared on DEV Community and was authored by Kai Wenzel
Kai Wenzel | Sciencx (2022-07-08T13:18:05+00:00) How to create the mysterious Digital Signatures in React Native!. Retrieved from https://www.scien.cx/2022/07/08/how-to-create-the-mysterious-digital-signatures-in-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.