Skip to main content

How to integrate Auth0 with Web3Auth React Native SDK in Expo Workflow

pnpreact nativeauth0androidioscustom authenticationWeb3Auth Team | December 16, 2022

This guide will cover the basics of how to use the Web3Auth React Native SDK in your React Native application.

Live Demo: Android iOS

Repository: https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-expo-example

How it works?

When integrating Web3Auth React Native SDK with Auth0 the flow looks something like this:

Auth0 SPA Flow

  • When a user logs in with Auth0, Auth0 sends a JWT id_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)
  • Create an Auth0 tenant and configure a Single Page Web Application (SPA for Web) or Native (for Mobile) from Auth0 Console.

  • Please note that Regular Web Applications are also supported as mentioned in the flows above. However, for this guide, we prefer SPA since its implicit flow doesn’t require an application to host a backend server.

Setup

Setup your Auth0 Tenant

  • Add the following URLs for your app to the Allowed Web Origins field when configuring your Auth0 Application.

    Add Callback URL to Auth0 Dashboard

  • You will require the domain and clientId of the newly created application which you can copy from Auth0 Console. Domain and Client ID from Auth0 Dashboard

Enable Social Login

Enable SMS Passwordless

Optional

If you want to implement SMS Passwordless, then this section is for you. Otherwise, you can skip this.

  • Enable SMS on the Authentication > Passwordless page of your Auth0 Dashboard. Auth0 Dashboard to enable SMS Passwordless Option
  • Under the Settings tab, add your Twilio SID and Twilio AuthToken. Auth0 Dashboard to enable SMS Passwordless | Setup
  • Also, update the From number on the same page, and click on the Save button.
  • Next, enable your application under the Applications tab, and click on the Save button. Auth0 Dashboard to enable SMS Passwordless | Enable App
  • You can test sending an SMS from the Try tab. Once, an SMS comes with OTP, it means it has been successfully configured.
Update Lockscreen for SMS Passwordless
update-lock-screen

If you're to use SMS Passwordless, please visit here to set up the Lock Screen of Auth0 from your Auth0 Dashboard.

Enable Email Passwordless

Optional

If you want to implement Email Passwordless, then this section is for you. Otherwise, you can skip this.

  • Enable Email on the Authentication > Passwordless page of your Auth0 Dashboard. Auth0 Dashboard to enable Email Passwordless Option
  • Under the Settings tab, update From and Subject based on your need and click on the Save button. Auth0 Dashboard to enable Email Passwordless | Setup
  • Next, enable your application under the Applications tab, and click on the Save button. Auth0 Dashboard to enable Email Passwordless | Enable App
  • You can test sending an Email from the Try tab. Once, an Email comes with OTP/Link, it means it has been successfully configured.
Update Lockscreen for Email Passwordless
update-lock-screen

If you're to use Email Passwordless, please visit here to set up the Lock Screen of Auth0 from your Auth0 Dashboard.

Setup your Web3Auth Dashboard

  • Create a Project from the Project Section of the Web3Auth Developer Dashboard.

    Plug n Play Project Creation on Web3Auth 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 the sapphire_devnet network during development. While moving to a production environment, make sure to convert your project to sapphire_mainnet or any of the legacy mainnet network mainnet, aqua, or cyan 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.

      Plug n Play Project - Whitelist

Create Auth0 Verifiers

  • Create a Verifier from the Custom Auth Section of the Developer Dashboard with the following configuration:

    • Pick a name of your choice for the verifier identifier. eg. auth0-project

    • Choose Social Login Providers and select Auth0 from the Login Provider dropdown.

    • Next, Choose your Authentication Type from eg. Google, Twitter, GitHub etc.. to be the Auth provider.

    • Paste the Client ID and Auth0 Domain from the Auth0 SPA you created in the above steps. This will be used to validate the JWT token issued by Auth0. And, select Sub or Email as the JWT Verifier ID.

    • Click on the Create Verifier button to create your verifier. It may take up to 10-20 minutes to deploy the verifier on Sapphire Devnet. You'll receive an email once it's complete.

      Create Verifier

    You will require the verifierName of the newly created verifier and clientId of the Plug and Play Project.

Create SMS Passwordless Verifier

Optional

If you want to implement SMS Passwordless, then this section is for you. Otherwise, you can skip this.

  • Create a Verifier from the Custom Auth Section of the Developer Dashboard with the following configuration:

    • Choose a name of your choice for the verifier identifier. eg. auth0-sms-passwordless

    • Select Custom Providers from the Login Provider.

    • Choose Custom for the JWT Verifier ID and type name.

    • Enter https://{YOUR-DOMAIN}/.well-known/jwks.json as your JWKS Endpoint. This will be used to validate the JWT token issued by Auth0. eg. https://web3auth.eu.auth0.com/.well-known/jwks.json

    • JWT validation fields:

      • iss: https://{YOUR-DOMAIN}
      • aud: {AUTH0-CLIENT-ID}
    • Click on the Create button to create your verifier. It may take up to 10-20 minutes to deploy the verifier on Sapphire Devnet. You'll receive an email once it's complete.

      Create SMS Verifier

    You will require the verifierName of the newly created verifier and clientId of the Plug and Play Project.

Create Email Passwordless Verifier

Optional

If you want to implement Email Passwordless, then this section is for you. Otherwise, you can skip this.

  • Create a Verifier from the Custom Auth Section of the Developer Dashboard with the following configuration:

    • Choose a name of your choice for the verifier identifier. eg. auth0-email-passwordless

    • Choose Social Login Providers and select Auth0 from the Login Provider dropdown.

    • Choose your Authentication Type as Email Passwordless to use Auth0's Email Passwordless.

    • Paste the Client ID and Auth0 Domain from the Auth0 SPA you created in the above steps. This will be used to validate the JWT token issued by Auth0.

    • Click on the Create button to create your verifier. It may take up to 10-20 minutes to deploy the verifier on Sapphire Devnet. You'll receive an email once it's complete.

      Create Email Verifier

    You will require the verifierName of the newly created verifier and clientId of the Plug and Play Project.

  • Add {YOUR_APP_SCHEME}://auth in the Whitelist URL field of the Web3Auth Dashboard.
  • 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

app.json
{
"expo": {
"scheme": "web3authexpoexample" // replace with your own scheme
}
}
  • For constructing your redirectUrl, you'll need to use the expo-linking, which will help you generate a redirectUrl for your app. Make sure you register that URL in the Web3Auth Developer Dashboard.
App.js
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, we will be talking through the Web3Auth React Native SDK.

Installation

@web3auth/react-native-sdk
npm install --save @web3auth/react-native-sdk

Expo Web Browser

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.)

expo install expo-web-browser

Expo Secure Store

We will require a SecureStore implementation to allow for session management without storing the private key on the device.

expo install expo-secure-store

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 customize 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";

Importing SecureStore implementation

import * as SecureStore from "expo-secure-store";

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 a Sapphire Devnet network. For production usage, you can use the Sapphire Mainnet network.

const web3auth = new Web3Auth(WebBrowser, SecureStore, {
clientId,
network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
loginConfig: {
// Add login configs corresponding to the provider
// Auth0 login works with jwt login config
jwt: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "jwt",
clientId: "AUTH0_CLIENT_ID_123ABcdefg4HiJKlMno4P5QR6stUvWXY", // use your app client id you got from auth0
},
// Add other login providers here
},
});
SDK Reference

Authentication

Logging in

Once initialized, you can use the login function of web3auth to navigate the user to the login process. For each login method, you have to select the loginProvider such as google, facebook, twitch, jwt, email_passwordless etc.

JWT

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
// Auth0 login works with JWT loginProvider
loginProvider: "jwt",
extraLoginOptions: {
domain: "https://YOUR-AUTH0-DOMAIN", // Please append "https://" before your domain
verifierIdField: "sub", // For SMS & Email Passwordless, use "name" as verifierIdField
},
});
SDK Reference

If you wish you add Multi Factor Authentication, use dApp Share

Get the User Profile

// Assuming the user is logged in, get the user profile from the web3AuthResponse
var userInfo = web3authResponse.userInfo;

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
}

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.

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();
SDK Reference

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.

connect any blockchain

Please go through the Connect Blockchain Documentation, which contains all the details of the EVM-based blockchain you have selected here.

Troubleshooting React Native issues

Some commonly faced issues and the ways to fix them are addressed in this troubleshooting guide.

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 Support Portal