Using Web3Auth React Native SDK in Expo Workflow
This guide will cover the basics of how to use the Web3Auth React Native SDK in your React Native application.
Live Demo: [Coming Soon]
Repository: https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-expo-example
Quick Start
npx degit Web3Auth/web3auth-pnp-examples/react-native/rn-expo-example w3a-rn-expo-demo && cd w3a-rn-expo-demo && npm install
# For Android
npm run android
# For iOS
npm run ios
How it works?
When integrating Web3Auth React Native SDK with Social Login the flow looks something like this:
When a user logs in with
Google
, Google sends a JWTid_token
to the app. This JWT token is sent to the Web3Auth SDK's login function.Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self custodial way, resulting in easy onboarding for your user to the application.
Prerequisites
For Web Apps: A basic knowledge of JavaScript is required to use Web3Auth SDK.
For Mobile Apps: For the Web3Auth Mobile SDKs, you have a choice between iOS, Android, React Native & Flutter. Please refer to the Web3Auth SDK Reference for more information.
Create a Web3Auth account on the Web3Auth Dashboard
- Expo SDK 45 and above (for Expo Managed Workflow)
Setup
Setup your Web3Auth Dashboard
Create a Project from the Project Section of the Web3Auth Developer Dashboard.
Enter your desired Project name.
Select the Product you want to use. For this guide, we'll be using the Plug n Play product.
Select the Platform type you want to use. For this guide, we'll be using the Web Application as the platform.
Select the Web3Auth Network as
Sapphire Devnet
. We recommend creating a project in thesapphire_devnet
ortesnet
network during development. While moving to a production environment, make sure to convert your project tosapphire_mainnet
or any of the legacy mainnet networkmainnet
,aqua
, orcyan
network. Otherwise, you'll end up losing users and keys.Select the blockchain(s) you'll be building this project on. For interoperability with Torus Wallets, you have the option of allowing the user's private key to be used in other applications using Torus Wallets (EVM, Solana, XRPL & Casper).
Finally, once you create the project, you have the option to whitelist your URLs for the project. Please whitelist the domains where your project will be hosted.
- Add
{YOUR_APP_SCHEME}://auth
in the Whitelist URL field of the Web3Auth Dashboard.
Configure Deep Link
- Adding URL scheme to
app.json
To allow the Expo based SDK to work with exported Expo Android apps, you need to add the designated scheme into app.json
{
"expo": {
"scheme": "web3authexpoexample" // replace with your own scheme
}
}
- For constructing your
redirectUrl
, you'll need to use theexpo-linking
, which will help you generate aredirectUrl
for your app. Make sure you register that URL in the Web3Auth Developer Dashboard.
import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";
const resolvedRedirectUrl =
Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
? Linking.createURL("web3auth", {})
: Linking.createURL("web3auth", { scheme: scheme });
Using the Web3Auth SDK
To use the Web3Auth SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To know more about the available SDKs, please have a look at this documentation page.
For this guide here, we will be talking through the Web3Auth React Native SDK.
Installation
@web3auth/react-native-sdk
- npm
- Yarn
- pnpm
npm install --save @web3auth/react-native-sdk
yarn add @web3auth/react-native-sdk
pnpm add @web3auth/react-native-sdk
Expo Web Browser
When using our SDK with a Expo-based React Native app (aka managed workflow, you have to install the expo-web-browser
package as a WebBrowser
implementation.)
expo install expo-web-browser
Initialization
After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two step process,
Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project. Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customise your Web3Auth Instance.
Importing Web3Auth
You may also import additional types from the SDK to help in the development process.
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk";
Importing a WebBrowser
implementation
import * as WebBrowser from "expo-web-browser";
Instantiating Web3Auth
It's time to create an instance of Web3Auth in the project.
We need clientId
and target Web3Auth network
to initialize the web3auth
object.
You can get your
clientId
from registering (above) on the Developer Dashboard.network
signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have aTESTNET
network. For production usage, you can use theCYAN
,MAINNET
, &AQUA
networks.dangerPlease don't use the
TESTNET
network for production usage. You may end up losing user keys.
const web3auth = new Web3Auth(WebBrowser, {
clientId,
network: OPENLOGIN_NETWORK.CYAN, // MAINNET, AQUA, CYAN or TESTNET
});
Authentication
Logging in
Once initialized, you can use the login
function of web3auth
to navigate user to the login process. For each login method, you have to select the
loginProvider
such as google
, facebook
, twitch
, jwt
, email_passwordless
etc.
If you are using custom authentication through Auth0 or Custom JWT, you have to use the JWT
login provider.
Additionally, in extraLoginOptions
you have to provide the details required by that specific method as mentioned here.
Once a user logs in, the Web3Auth SDK returns their reconstructed private key. For EVM Blockchains, the secp256k1
private key is used to sign
transactions. We also return an ed25519
compatible private key for other blockchains.
const web3authResponse = await web3auth.login({
redirectUrl: resolvedRedirectUrl,
mfaLevel: "default", // Pass on the mfa level of your choice: default, optional, mandatory, none
loginProvider: "google", // Pass on the login provider of your choice: google, facebook, discord, twitch, twitter, github, linkedin, apple, etc.
});
If you wish you add Multi Factor Authentication, use dApp Share or select Curve for your React Native application, read the linked documentation.
Sample loginResponse
{
"aggregateVerifier": "tkey-google",
"email": "john@gmail.com",
"name": "John Dash",
"profileImage": "https://lh3.googleusercontent.com/a/Ajjjsdsmdjmnm...",
"typeOfLogin": "google",
"verifier": "torus",
"verifierId": "john@gmail.com",
"dappShare": "<24 words seed phrase>", // will be sent only incase of custom verifiers
"idToken": "<jwtToken issued by Web3Auth>",
"oAuthIdToken": "<jwtToken issued by OAuth Provider>", // will be sent only incase of custom verifiers
"oAuthAccessToken": "<accessToken issued by OAuth Provider>" // will be sent only incase of custom verifiers
}
Get the User Profile
// Assuming the user is logged in, get the user profile from the web3AuthResponse
var userInfo = web3authResponse.userInfo;
Using the web3Auth.login()
function, you can get the details of the logged in user. Please note that these details are not stored anywhere in
Web3Auth network.
Sample userInfo
{
"aggregateVerifier": "tkey-google",
"email": "john@gmail.com",
"name": "John Dash",
"profileImage": "https://lh3.googleusercontent.com/a/Ajjjsdsmdjmnm...",
"typeOfLogin": "google",
"verifier": "torus",
"verifierId": "john@gmail.com",
"dappShare": "<24 words seed phrase>", // will be sent only incase of custom verifiers
"idToken": "<jwtToken issued by Web3Auth>",
"oAuthIdToken": "<jwtToken issued by OAuth Provider>", // will be sent only incase of custom verifiers
"oAuthAccessToken": "<accessToken issued by OAuth Provider>" // will be sent only incase of custom verifiers
}
Logout
Use the logout
function of web3auth
to log the user out. This function doesn't work in iOS, so you need to navigate the user back manually.
web3auth.logout();
Interacting with the Blockchain
Once a user logs in, the Web3Auth SDK returns their reconstructed private key. For EVM Blockchains, the secp256k1
private key is used to sign
transactions. We also return an ed25519
compatible private key for other blockchains. Similar to how we're using this private key in the ethers.js
library in this example, you can connect to any other blockchain of your choice.
Please go through the Connect Blockchain Documentation, which contains all the details of the EVM based blockchain you have selected here.
Example code
The code for the application we developed in this guide can be found in the Web3Auth React Native Example. Check it out and try running it locally yourself!
Questions?
Ask us on Web3Auth's Community Portal