Support for expo.io

[imetallica]

Expo now supports both random and crypto modules, making possible a native integration with the platform.

[yeojz]

@imetallica, @shauntrennery I looked at the expo modules as part of the library refactor. There are 2 issues at the moment:

1. While random is fine, the crypto module doesn't seem to support hmac generation, which is what is needed for OTP.
2. There isn't a simply way for me to add tests for it outside of the expo ecosystem.

I might be missing something since I ain't familiar with expo.io as a platform.

Any thoughts?

[imetallica]

Sorry for the delay, I got stuck at working on something else.

Yeah, maybe the lack of hmac support is a huge blocker for the implementation. Not sure what should we do in this case.

[yeojz]

Looks like dependency on external libraries like crypto-js will still have to proceed until native support comes.

We will just have to keep an eye on it then.

[smithydll]

I have working in react-native-web with expo and crypto-js. However when I try to put on iOS or Android I've run into an issue where Buffer is a Node primitive and is not part of React Native. Either Buffer needs a shim for React Native or a refactor.

[yeojz]

Hi @smithydll Which package are you using at the moment? it it the browser version?

[Oliyy]

Using @otplib/core returns missing variable Buffer when trying to build on iOS and Android using expo, I think this is related to what @smithydll said @yeojz

import { createDigest, createRandomBytes } from '@otplib/plugin-crypto-js';
import { keyDecoder, keyEncoder } from '@otplib/plugin-base32-enc-dec';

const authenticator = new Authenticator({
  createDigest,
  createRandomBytes,
  keyDecoder,
  keyEncoder
});```

[smithydll]

These are my React Native imports if that helps.

import { totpToken, totpOptions, KeyEncodings } from '@otplib/core';
import { keyDecoder, keyEncoder } from '@otplib/plugin-base32-enc-dec';
import { createDigest, createRandomBytes } from '@otplib/plugin-crypto-js';
import QRCode from 'react-native-qrcode-svg';

I then try to generate a one time code from a token.

      const totp = totpToken(
        keyDecoder(totp_token, KeyEncodings.HEX),
        totpOptions({
          createDigest,
          encoding: KeyEncodings.HEX
        })
      );

Then get the issue reported by @Oliyy

I have now resolved my issue by importing feross/buffer.

npm i buffer

then in app.tsx

import { Buffer } from 'buffer';

global.Buffer = Buffer;

see https://github.com/feross/buffer/issues/206