ReactNativeでのSHA-256変換

2024/12/02

はじめに

ReactNative で SHA-256 変換を実装する際に、自分が良いと感じた方法を備忘録としてまとめます。
また、変換を導入した際に Android ビルドができなくなるトラブルが発生したため、その解決方法についても触れています。

この記事が、SHA-256 変換の実装や関連トラブルの解決に取り組んでいる方にとって、少しでも参考になれば幸いです。

react-native-quick-cryptoの導入

ReactNative で SHA-256 変換を行うために react-native-quick-crypto を導入します。

パッケージのインストール

以下のコマンドを実行し、パッケージをインストールします。

npm i react-native-quick-crypto
cd ios && bundle exec pod install

※ Expo フレームワークを使用している場合は、コマンドが異なるためこちらを確認してください。

初期化処理

index.js に以下の処理を追加し、global.Buffer と global.crypto を拡張します。

/* index.js */

import { install } from 'react-native-quick-crypto'

install()

metro.config.jsの設定

metro.config.js を以下のように修正します。

/* metro.config.js */

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'crypto') {
    // when importing crypto, resolve to react-native-quick-crypto
    return context.resolveRequest(
      context,
      'react-native-quick-crypto',
      platform
    )
  }
  // otherwise chain to the standard Metro resolver.
  return context.resolveRequest(context, moduleName, platform)
}

babel.config.jsの設定

babel-plugin-module-resolver で alias を設定し、使用するモジュールを ReactNative 用のものに切り替えるようにします。

以下のコマンドを実行し、babel-plugin-module-resolver をインストールします。

npm i babel-plugin-module-resolver -D

babel.config.js で crypto, stream, buffer の alias を以下のように設定します。

/* babel.config.js */

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
+   [
+     'module-resolver',
+     {
+       alias: {
+         'crypto': 'react-native-quick-crypto',
+         'stream': 'readable-stream',
+         'buffer': '@craftzdog/react-native-buffer',
+       },
+     },
+   ],
    ...
  ],
};

使用方法

createHash で SHA-256 へ変換します。

import QuickCrypto from 'react-native-quick-crypto'

const hashed = QuickCrypto.createHash('sha256')
  .update('test@example.com')
  .digest('hex')

変換が正しく行われているか確認するには、以下のコマンドを実行して値が同じであることを確認します。

echo -n 'test@example.com' | shasum -a 256

Android ビルドで発生したエラー

Android でビルドをした際、2 files found with path 'lib/arm64-v8a/libcrypto.so' from inputs:のエラーが発生しました。

2 files found with path 'lib/arm64-v8a/libcrypto.so' from inputs:
 - /node_modules/react-native-quick-crypto/android/build/intermediates/library_jni/debug/jni/arm64-v8a/libcrypto.so
 - /.gradle/caches/transforms-3/e40450c3a59c8f52c60925c89c538791/transformed/jetified-flipper-0.201.0/jni/arm64-v8a/libcrypto.so
If you are using jniLibs and CMake IMPORTED targets, see
https://developer.android.com/r/tools/jniLibs-vs-imported-targets

このエラーは libcrypto.so が重複していることが原因で発生していました。
参考にした issue を元に、app/build.gradle を修正して重複を解消したところ、無事エラーを解消することができました。

同様のエラーで困っている方の参考になれば幸いです。

/* /android/app/build.gradle */

android {
    // ...
    packagingOptions {
        pickFirst 'lib/arm64-v8a/libcrypto.so'
        pickFirst 'lib/x86_64/libcrypto.so'
        pickFirst 'lib/armeabi-v7a/libcrypto.so'
        pickFirst 'lib/x86/libcrypto.so'
    }
    // ...

追記：こちらのトラブルシューティングに解決方法の記載がありました。