Skip to main content

PnP React Native - v7 to v8

This migration guide provides steps for upgrading from version v7 to v8 of the Web3Auth React Native SDK.

Package Updates​

Update your dependencies in package.json:

"@web3auth/react-native-sdk": "^7.x.x"
"@web3auth/react-native-sdk": "^8.0.0"

"@web3auth/ethereum-provider": "^8.x.x"
"@web3auth/ethereum-provider": "^9.3.0"

"react-native-quick-crypto": "^0.7.6"

Breaking Changes​

Network Enum Update​

The OPENLOGIN_NETWORK enum has been replaced with WEB3AUTH_NETWORK:

import { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk";
import { LOGIN_PROVIDER, WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";

network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET,
network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,

Mandatory privateKeyProvider in Constructor​

The privateKeyProvider parameter must now be provided in the Web3Auth constructor:

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId: "YOUR_CLIENT_ID",
  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  redirectUrl: redirectUrl,
  privateKeyProvider: ethereumPrivateKeyProvider,
});

Connection Status Changes​

The privKey property has been removed. Use the connected property instead. Additionally, since the private key provider is taken as a parameter in the constructor, the setupProvider method is no longer needed, you can directly use the provider property from the Web3Auth instance.

if (web3auth.privKey) {
  await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
  setProvider(ethereumPrivateKeyProvider);
if (web3auth.connected) {
  setProvider(web3auth.provider);
  setLoggedIn(true);
}

Authentication URL Change​

Update the redirect URL pattern:

const redirectUrl = `${scheme}://openlogin`;
const redirectUrl = `${scheme}://auth`;

globals.js Updates​

Update your globals.js file with react-native-quick-crypto. This is required for polyfilling the crypto module.

global.Buffer = require("buffer").Buffer;

// eslint-disable-next-line import/first
import { install } from "react-native-quick-crypto";

install();

// Needed so that 'stream-http' chooses the right default protocol.
global.location = {
  protocol: "file:",
};

global.process.version = "v16.0.0";
if (!global.process.version) {
  global.process = require("process");
  console.log({ process: global.process });
}

process.browser = true;

Make sure to import required files in your entry point:

import "./globals";
import "@ethersproject/shims";
import "@expo/metro-runtime";

Need Help?​

If you encounter any issues during migration, please: