I'm trying to simply encrypt a message using a given key and iV. I've tried several libraries to achieve this but Expo isn't compatible with any of them. I couldn't find any encryption libraries for Expo (That support AES). I guess my question is : How do I encrypt data in React Native running Expo
Ps : I am not interested in expo-crypto
Another possibility (what I did) is to use the CryptoES library.
https://www.npmjs.com/package/crypto-es
After long search I found it, it is a continued development of the 3.1 version of the CryptoJS library and can be used with Expo.
npm i --save crypto-es crypto-js
import CryptoES from "crypto-es";
Then you should encrypt the text, for example:
var mytexttoEncryption = "Hello"
const encrypted = CryptoES.AES.encrypt(mytexttoEncryption ,"your password").toString();
var C = require("crypto-js");
var Decrypted = C.AES.decrypt(E, "your password");
var result =Decrypted.toString(C.enc.Utf8);
console.log(result)
Use crypto-js#3.1 , 3.1.x version use Math.random() and doesn't require node "crypto" package. It's not as safe as the latest version but works for me.
yarn add crypto-js#3.1
I only use it for decrypting. If you really need it for some security requirements I suggest you encrypt it in server node enviroment.
I decided to use jshashes for my React-native & Expo project. The goal of this module is to reimplement hash node's crypto functions in pure javascript without dependency on node:
yarn add jshashes
first use this command :
npm i crypto-es
then now you should import it with this command :
import CryptoES from "crypto-es";
then you should encrypt the text :
for example :
var mytexttoEncryption = "Hello"
const encrypted = CryptoES.AES.encrypt(mytexttoEncryption ,"your password").toString();
now for decryption :
install the package of crypto-js with this command :
npm i crypto-js
then lets decrypt it
var C = require("crypto-js");
var Decrypted = C.AES.decrypt(E, "your password");
var result =Decrypted.toString(C.enc.Utf8);
console.log(result)
so use this it will be ok
Related
I am creating my first Grafana panel plugin to display GLG grphics. I am using react simple panel plugin.
For GLG implementation I am having GLG static library(can't install with npm). So I added my GLG library files(GlgCE.js, GlgTooklitCE.js, gunzip.min.js) in external folder. I am importing all these library files in SimplePanel.tsx file. One of my step is to decompress created the data.In my GlgToolkit.js I am having below code which creates object for Zlib.Gunzip and decompress the data which is in Uint8Array format.
tproto.__glg_gunzip_hook__ = (data) => {
var gunzip = new Zlib.Gunzip(data);
return gunzip.decompress();
};
My problem is that above code is not working, while debugging I can say its unable to create object for Zlib.Gunzip. It returing undefine for gunzip variable, and data is not getting decompress.
I will be great if anybody caan help me on this.How can one library file can communicate with other(in this case gunzip.min.js).
I found my own solution, I imported the gunzip.min.js file in my library file.
import * as Zlib from './gunzip.min.js';
I want to compress/encode gltf file using draco programatically in threejs with reactjs. I dont want to use any commandline tool, I want it to be done programatically. Please suggest me a solution.
I tried using gltf-pipeline but its not working in client side. Cesium library was showing error when I used it in reactjs.
Yes, this is can be implemented with glTF-Transform. There's also an open feature request on three.js, not yet implemented.
First you'll need to download the Draco encoder/decoder libraries (the versions currently published to NPM do not work client side), host them in a folder, and then load them as global script tags. There should be six files, and two script tags (which will load the remaining files).
Files:
draco_decoder.js
draco_decoder.wasm
draco_wasm_wrapper.js
draco_encoder.js
draco_encoder.wasm
draco_encoder_wrapper.js
<script src="assets/draco_encoder.js"></script>
<script src="assets/draco_decoder.js"></script>
Then you'll need to write code to load a GLB file, apply compression, and do something with the compressed result. This will require first installing the two packages shown below, and then bundling the web application with your tool of choice (I used https://www.snowpack.dev/ here).
import { WebIO } from '#gltf-transform/core';
import { DracoMeshCompression } from '#gltf-transform/extensions';
const io = new WebIO()
.registerExtensions([DracoMeshCompression])
.registerDependencies({
'draco3d.encoder': await new DracoEncoderModule(),
'draco3d.decoder': await new DracoDecoderModule(),
});
// Load an uncompressed GLB file.
const document = await io.read('./assets/Duck.glb');
// Configure compression settings.
document.createExtension(DracoMeshCompression)
.setRequired(true)
.setEncoderOptions({
method: DracoMeshCompression.EncoderMethod.EDGEBREAKER,
encodeSpeed: 5,
decodeSpeed: 5,
});
// Create compressed GLB, in an ArrayBuffer.
const arrayBuffer = io.writeBinary(document); // ArrayBuffer
In the latest version of 1.5.0, what are these two files? draco_decoder_gltf.js and draco_encoder_gltf.js. Does this means we no longer need the draco_encoder and draco_decoder files? and how do we invoke the transcoder interface without using MeshBuilder. A simpler API would be musth better.
I'm in the early stages of developing an app with react-native, and I need a DB implementation for for testing and development. I thought that the obvious choice would be to use simple JSON files included with the source, but the only way I see to load JSON files requires that you know the file name ahead of time. This means that the following does not work:
getTable = (tableName) => require('./table-' + tableName + '.json') // ERROR!
I cannot find a simple way to load files at runtime.
What is the proper way to add test data to a react-native app?
I cannot find a simple way to load files at runtime.
In node you can use import() though I'm not sure if this is available in react-native. The syntax would be something like:
async function getTable(tableName){
const fileName = `./table-${tableName}.json`
try {
const file = await import(fileName)
} catch(err){
console.log(err
}
}
though like I said I do not know if this is available in react-natives javascript environment so ymmv
Unfortunately dynamic import not supported by react-native but there is a way so to do this
import tableName1 from './table/tableName1.json';
import tableName2 from './table/tableName2.json';
then create own object like
const tables = {
tableName1,
tableName2,
};
after that, you can access the table through bracket notation like
getTable = (tableName) => tables[tableName];
I am trying to post two inputs with axios and I want to base64 encode them before I send them.
Deprecated since v6
const encodedString = new Buffer('your string here').toString('base64');
Use Instead
const encodedString = Buffer.from('your string here').toString('base64');
Consider using base-64 as well which is compatible with btoa and atob, worked for me in react and react native:
npm install base-64 --save
import {decode as base64_decode, encode as base64_encode} from 'base-64';
let encoded = base64_encode('YOUR_DECODED_STRING');
let decoded = base64_decode('YOUR_ENCODED_STRING');
In case you are using typescript, use #types/base-64 for typing
npm i --save-dev #types/base-64
Is better you use Buffer.from('Your String').toString('base64'), because new Buffer is deprecated
I'm pretty new to Angular. I'm trying to incorporate the openPGP library to my app (client side). I need some help on how to incorporate a javascript library to the Angular App. Thanks!
I'm reading through the openPGP docs https://github.com/openpgpjs/openpgpjs
and the example provide in the docs is below:
var openpgp = require('openpgp');
var key = '-----BEGIN PGP PUBLIC KEY BLOCK ... END PGP PUBLIC KEY BLOCK-----';
var publicKey = openpgp.key.readArmored(key);
var pgpMessage = openpgp.encryptMessage(publicKey.keys, 'Hello, World!');
I prefer not to use require to source in openPGP to my app. So I've tried
var openpgp = window.openpgp; which seems to not throw any error here. However, I get TypeError: Cannot read property 'key' of undefined error.
I should mention that I have installed openpgp using bower install.
I'm still trying to figure out what I can do to refer to openPGP in the Angular app. Thanks.
If you're on the client-side, use a script tag, like
<script src="/path/to/openpgp.js"></script>
instead of require()