PnP React Native - v3 to v4
Third parameter to web3auth constructor
To introduce session management without storing the private key in the device, a new parameter is introduced to the web3auth constructor. This is the Storage
parameter.
In Expo-managed workflow
When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install the expo-web-browser
package as a WebBrowser
implementation. You also need to install expo-secure-store
to store the user's session.
expo install expo-web-browser expo-secure-store
import * as WebBrowser from 'expo-web-browser'
import * as SecureStore from 'expo-secure-store'
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from '@web3auth/react-native-sdk'
const clientId = 'YOUR WEB3AUTH CLIENT ID'
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
clientId,
network: OPENLOGIN_NETWORK.TESTNET, // or other networks
})
In Bare React native workflow
Install Web3Auth's React Native SDK in your React Native project. When using our SDK with a bare workflow React Native app, you have to install a WebBrowser
implementation made by us and a Storage
implementation provided by react-native.
- npm
- Yarn
- pnpm
- Bun
npm install --save @toruslabs/react-native-web-browser react-native-encrypted-storage
yarn add @toruslabs/react-native-web-browser react-native-encrypted-storage
pnpm add @toruslabs/react-native-web-browser react-native-encrypted-storage
bun add @toruslabs/react-native-web-browser react-native-encrypted-storage
import * as WebBrowser from '@toruslabs/react-native-web-browser'
import EncryptedStorage from 'react-native-encrypted-storage'
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from '@web3auth/react-native-sdk'
const clientId = 'YOUR_WEB3AUTH_CLIENT_ID'
const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
clientId,
network: OPENLOGIN_NETWORK.TESTNET, // or other networks
})
Polyfilling required are different
For Bare React Native workflow
Add globals.js
file to your project and import it into your index.js
file.
global.Buffer = require('buffer').Buffer
// 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
import { AppRegistry } from 'react-native'
import './globals'
import App from './App'
import { name as appName } from './app.json'
console.log('index.js')
AppRegistry.registerComponent(appName, () => App)
Then, add the following to your metro-config.js
file.
Install empty-module
, crypto-browserify
and readable-stream
packages.
- npm
- Yarn
- pnpm
- Bun
npm install --save empty-module crypto-browserify readable-stream
yarn add empty-module crypto-browserify readable-stream
pnpm add empty-module crypto-browserify readable-stream
bun add empty-module crypto-browserify readable-stream
const { getDefaultConfig } = require('metro-config')
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname)
const defaultSourceExts = [...sourceExts, 'svg', 'mjs', 'cjs']
return {
resolver: {
extraNodeModules: {
assert: require.resolve('empty-module'), // assert can be polyfilled here if needed
http: require.resolve('empty-module'), // stream-http can be polyfilled here if needed
https: require.resolve('empty-module'), // https-browserify can be polyfilled here if needed
os: require.resolve('empty-module'), // os-browserify can be polyfilled here if needed
url: require.resolve('empty-module'), // url can be polyfilled here if needed
zlib: require.resolve('empty-module'), // browserify-zlib can be polyfilled here if needed
path: require.resolve('empty-module'),
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('readable-stream'),
},
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: process.env.TEST_REACT_NATIVE
? ['e2e.js'].concat(defaultSourceExts)
: defaultSourceExts,
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
}
})()
For Expo managed workflow
Before running npm run ios
or npm run android
in your Expo-managed workflow project, run the following command.
npx expo prebuild
This generates the native folder structure for your project, just like you would have in a bare workflow project. This is required for the polyfills to work.
Create a globals.js
file in your project and import it into your index.js
file.
global.Buffer = require('buffer').Buffer
// 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
Then add this line to your index.js
file.
import './globals'
Once you have done the above, create a new metro.config.js file in your project and add the following to it.
Install @expo/metro-config
, empty-module
, crypto-browserify
and readable-stream
packages.
- npm
- Yarn
- pnpm
- Bun
npm install --save @expo/metro-config empty-module crypto-browserify readable-stream
yarn add @expo/metro-config empty-module crypto-browserify readable-stream
pnpm add @expo/metro-config empty-module crypto-browserify readable-stream
bun add @expo/metro-config empty-module crypto-browserify readable-stream
const { getDefaultConfig } = require('expo/metro-config')
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname)
const defaultSourceExts = [...sourceExts, 'svg', 'mjs', 'cjs']
return {
resolver: {
extraNodeModules: {
assert: require.resolve('empty-module'), // assert can be polyfilled here if needed
http: require.resolve('empty-module'), // stream-http can be polyfilled here if needed
https: require.resolve('empty-module'), // https-browserify can be polyfilled here if needed
os: require.resolve('empty-module'), // os-browserify can be polyfilled here if needed
url: require.resolve('empty-module'), // url can be polyfilled here if needed
zlib: require.resolve('empty-module'), // browserify-zlib can be polyfilled here if needed
process: require.resolve('empty-module'), // process can be polyfilled here if needed
path: require.resolve('empty-module'),
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('readable-stream'),
},
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: process.env.TEST_REACT_NATIVE
? ['e2e.js'].concat(defaultSourceExts)
: defaultSourceExts,
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
}
})()
web3auth.login()
does not return any response
Previous versions of the SDK returned a response object with the login()
method. This is no longer the case. The login()
method now returns a Promise<void>
. You can use the getters such as the web3auth.privKey()
to get the private key of the user (default is secp256k1
key). Or use web3auth.ed25519Key()
to get the ed25519
key. Lastly, for userInfo, instead of accessing the object properties directly you can use the web3auth.userInfo()
. Types for the react-native PnP SDK.
import { EncryptedStorage } from './types/IEncryptedStorage'
import { SecureStore } from './types/IExpoSecureStore'
import { IWeb3Auth, SdkInitParams, SdkLoginParams, State } from './types/interface'
import { IWebBrowser } from './types/IWebBrowser'
declare class Web3Auth implements IWeb3Auth {
private initParams
private webBrowser
private keyStore
private state
private sessionManager
constructor(
webBrowser: IWebBrowser,
storage: SecureStore | EncryptedStorage,
initParams: SdkInitParams
)
get privKey(): string
get ed25519Key(): string
init(): Promise<void>
login(options: SdkLoginParams): Promise<void>
logout(): Promise<void>
userInfo(): State['userInfo']
private _syncState
private request
private _authorizeSession
}
export default Web3Auth
Check out our react-native PnP examples in the PnP examples repo to know how to use the new SDK methods.