Skip to content

Commit d12cd4b

Browse files
committed
web support also added
1 parent 95e657c commit d12cd4b

File tree

5 files changed

+349
-103
lines changed

5 files changed

+349
-103
lines changed

README.md

+169-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# 📚 **React Native Integration Guide for `rn-encryption` Library**
22

33
This guide explains how to directly access methods from the `rn-encryption` library in a **React Native project**, including usage examples for AES, RSA, Hashing, HMAC, Random String, and Base64 utilities.
4+
- **Mobile (iOS & Android): Utilizes native implementations through JSI (JavaScript Interface) via Turbo Modules for encryption.**
5+
- **Web: Leverages crypto.subtle for encryption functionality. https://www.npmjs.com/package/web-secure-encryption is being used to support encryption for web.**
46

57
---
68

@@ -92,7 +94,9 @@ import {
9294
} from 'rn-encryption';;
9395
```
9496

95-
Each method can be accessed directly without a default object wrapper.
97+
- **Each method can be accessed directly without a default object wrapper.**
98+
- **Please note that encryptFile/decryptFile methods are not available for web yet.**
99+
- **All web methods have promises while few native methods can be called without promises.**
96100

97101
---
98102

@@ -136,7 +140,7 @@ Each method can be accessed directly without a default object wrapper.
136140
- **`decryptFile(inputPath: string, key: string): Promise<string>`**
137141
---
138142

139-
## 🛠️ **6. Usage Examples**
143+
## 🛠️ **6.Native Usage Examples**
140144

141145
```tsx
142146
import { useState } from 'react';
@@ -437,12 +441,169 @@ const styles = StyleSheet.create({
437441

438442
```
439443

440-
# ** Keychain Integration for keys**
441-
- It is recommended to save keys in Keychain only. You can refer example in this repo. This is anb sample and can be modified according to the requirements.
444+
## 🛠️ **7.Web Usage Examples**
445+
```tsx
446+
import { View, Text, StyleSheet, Button } from 'react-native';
447+
import { generateAESKey, encryptAES, decryptAES, generateRSAKeyPair, encryptRSA, decryptRSA, generateECDSAKeyPair, signDataECDSA, verifySignatureECDSA, generateHMACKey, hmacSHA256, hmacSHA512, hashSHA256, hashSHA512, generateRandomString, base64Decode, base64Encode } from 'rn-encryption';
448+
449+
export default function HomeScreen() {
450+
451+
const handleAESEncryption = async () => {
452+
const sampleObject = {
453+
name: 'John Doe',
454+
age: 30,
455+
roles: ['admin', 'editor'],
456+
};
457+
try {
458+
const generatedKey = await generateAESKey();
459+
const jsonString = JSON.stringify(sampleObject);
460+
const encryptedString = await encryptAES(jsonString, generatedKey);
461+
462+
// Decrypt and parse JSON
463+
const decryptedJsonString = await decryptAES(encryptedString, generatedKey);
464+
const decryptedObject = JSON.parse(decryptedJsonString);
465+
console.log('Decrypted Object:', generatedKey, );
466+
} catch (err: unknown) {
467+
468+
console.log('❌ Error:123', err);
469+
470+
}
471+
};
472+
473+
async function handleAsyncRSAEncryption() {
474+
const plaintext = 'Hello, RSA Encryption!';
475+
const generatedKeys = await generateRSAKeyPair();
476+
try {
477+
// Step 1: Encrypt the plaintext using the Public Key
478+
const encryptedData = await encryptRSA(
479+
plaintext,
480+
generatedKeys.publicKey
481+
);
482+
// Step 2: Decrypt the encrypted data using the Private Key
483+
const decryptedData = await decryptRSA(
484+
encryptedData,
485+
generatedKeys.privateKey
486+
);
487+
// Step 3: Validation
488+
if (decryptedData === plaintext) {
489+
console.log('✅ RSA Encryption and Decryption Successful!');
490+
} else {
491+
console.error('❌ Decrypted data does not match original plaintext!');
492+
}
493+
} catch (error) {
494+
console.error('⚠️ RSA Error:', error);
495+
}
496+
}
497+
498+
const hashing = async () => {
499+
try {
500+
console.log('--- Hashing ---');
501+
const sha256Hash = await hashSHA256('Hello Hashing');
502+
console.log('SHA-256 Hash:', sha256Hash);
503+
504+
const sha512Hash = await hashSHA512('Hello Hashing');
505+
console.log('SHA-512 Hash:', sha512Hash);
506+
} catch (err) {
507+
console.log('error is', err);
508+
}
509+
};
510+
511+
const hmac = async() => {
512+
try {
513+
const macKey = await generateHMACKey(256)
514+
console.log('--- HMAC ---',macKey);
515+
516+
const hmachash = await hmacSHA256('Hello HMAC', macKey);
517+
console.log('HMAC-SHA256:', hmachash);
518+
} catch (err) {
519+
console.log('error is', err);
520+
}
521+
};
522+
523+
const base64 = async () => {
524+
try {
525+
console.log('--- Base64 Encoding/Decoding ---');
526+
const base64Encoded = await base64Encode('Hello Base64 Encoding');
527+
console.log('Base64 Encoded:', base64Encoded);
528+
529+
const base64Decoded =await base64Decode(base64Encoded);
530+
console.log('Base64 Decoded:', base64Decoded);
531+
} catch (err) {
532+
console.log('error is', err);
533+
}
534+
};
535+
536+
const createRandomString = async () => {
537+
try {
538+
console.log('--- Utilities ---');
539+
const randomString = await generateRandomString(16);
540+
console.log('Random String:', randomString);
541+
} catch (err) {
542+
console.log('error is', err);
543+
}
544+
};
545+
546+
const signData = async () => {
547+
const keyPair = await generateECDSAKeyPair();
548+
const data = 'Hello, ECDSA!';
549+
const signature = await signDataECDSA(data, keyPair.privateKey);
550+
const isValid = await verifySignatureECDSA(data, signature, keyPair.publicKey);
551+
552+
console.log('Signature:', signature);
553+
console.log('Is Valid Signature:', isValid);
554+
};
555+
556+
return (
557+
<View style={styles.container}>
558+
<Text style={styles.header}>Dynamic Routing Example</Text>
559+
<Button title="Encrypt & Decrypt AES" onPress={handleAESEncryption} />
560+
<Button title="Encrypt & Decrypt RSA" onPress={handleAsyncRSAEncryption} />
561+
<Button title="Sign data" onPress={signData} />
562+
<Button title="Hashing" onPress={hashing} />
563+
<Button title="HMAC" onPress={hmac} />
564+
<Button title="Base64 Encoding" onPress={base64} />
565+
<Button title="Generate random" onPress={createRandomString} />
566+
</View>
567+
);
568+
}
569+
570+
const styles = StyleSheet.create({
571+
container: {
572+
flex: 1,
573+
padding: 16,
574+
justifyContent: 'center',
575+
backgroundColor: '#f4f4f4',
576+
},
577+
header: {
578+
fontSize: 20,
579+
fontWeight: 'bold',
580+
marginBottom: 16,
581+
textAlign: 'center',
582+
},
583+
item: {
584+
padding: 16,
585+
marginVertical: 8,
586+
backgroundColor: '#fff',
587+
borderRadius: 8,
588+
shadowColor: '#000',
589+
shadowOpacity: 0.1,
590+
shadowRadius: 4,
591+
elevation: 2,
592+
},
593+
text: {
594+
fontSize: 16,
595+
},
596+
});
597+
```
598+
599+
# **Keychain Integration for keys**
600+
- **Key Storage:** It is recommended to save encryption keys in Keychain (iOS) and Keystore (Android) for enhanced security.
601+
- **Example Implementation:** You can refer to an example in this repository for guidance.
602+
- **Customization:** The provided example serves as a sample implementation and can be modified according to specific requirements.
442603

443604
---
444605

445-
## 🐞 **7. Troubleshooting**
606+
## 🐞 **8. Troubleshooting**
446607

447608
1. **Library Not Found:**
448609
- Run `npx react-native link rn-encryption`.
@@ -459,15 +620,15 @@ const styles = StyleSheet.create({
459620

460621
---
461622

462-
## **8. Best Practices**
623+
## **9. Best Practices**
463624

464625
1. **Do Not Hardcode Keys:** Use `.env` or secure storage for keys.
465626
2. **Handle Errors Gracefully:** Wrap calls in `try-catch` blocks.
466627
3. **Validate Key Sizes:** Ensure AES and RSA keys meet size requirements.
467628

468629
---
469630

470-
## **9. FAQ**
631+
## **10. FAQ**
471632

472633
**Q: Does the library support both Android and iOS?**
473634
A: Partially, `rn-encryption` fully supports ios and encryptAES & decryptAES for Android platforms.
@@ -480,7 +641,7 @@ A: Add console logs and verify that keys and data are correctly passed.
480641

481642
---
482643

483-
## **10. Security Best Practices**
644+
## **11. Security Best Practices**
484645

485646
1. Use Strong Keys: Always use AES-256 for symmetric encryption and RSA-2048 for asymmetric encryption.
486647
2. Key Storage: Store keys securely using Android Keystore and iOS Keychain.

package.json

+23-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rn-encryption",
3-
"version": "2.3.0",
3+
"version": "2.4.0",
44
"description": "Encryption",
55
"source": "./src/index.tsx",
66
"main": "./lib/commonjs/index.js",
@@ -48,7 +48,25 @@
4848
"keywords": [
4949
"react-native",
5050
"ios",
51-
"android"
51+
"android",
52+
"web",
53+
"encryption",
54+
"AES encryption",
55+
"RSA encryption",
56+
"Hashing",
57+
"base64",
58+
"turbo modules",
59+
"native encryption",
60+
"crypto",
61+
"security",
62+
"HMAC",
63+
"ECDSA",
64+
"react-native-security",
65+
"cross-platform-encryption",
66+
"data-protection",
67+
"react-native-encryption",
68+
"react-native-crypto",
69+
"typescript-encryption"
5270
],
5371
"repository": {
5472
"type": "git",
@@ -187,5 +205,8 @@
187205
"type": "turbo-module",
188206
"languages": "kotlin-objc",
189207
"version": "0.45.5"
208+
},
209+
"dependencies": {
210+
"web-secure-encryption": "^1.0.2"
190211
}
191212
}

0 commit comments

Comments
 (0)