Using Auth0 with Web3Auth React Native SDK
This guide will cover the basics of how to use the Web3Auth React Native SDK in your React Native application.
Repository: https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/react-native/rn-bare-auth0-example
Quick Start
npx degit Web3Auth/web3auth-pnp-examples/react-native/rn-bare-auth0-example w3a-rb-bare-auth0-demo && cd w3a-rb-bare-auth0-demo && npm install
# For Android
npm run android
# For iOS
cd ios && pod install && cd .. && npm run ios
How it works?
When integrating Web3Auth React Native SDK with Auth0 the flow looks something like this:
When a user logs in with
Auth0
, Auth0 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
React Native Release 0.71 and above (for Bare React Native Workflow)
iOS Platform Target Version 14 and above
Android Target SDK Version 31 and above
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’re preferring 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.
- Additional to your own URLs for the application, please add
- https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications) and
- https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications).
- Additional to your own URLs for the application, please add
You will require
domain
andclientId
of the newly created application which you can copy from Auth0 Console.
Enable Social login
- Enable
Google
or other social provider on theAuthentication > Social
page of your Auth0 Dashboard. - Vist https://auth0.com/learn/social-login to learn more.
Enable SMS Passwordless
If you want to implement SMS Passwordless, then this section is for you. Else you can skip this.
- Enable
SMS
on theAuthentication > Passwordless
page of your Auth0 Dashboard. - Under
Settings
tab, add yourTwilio SID
andTwilio AuthToken
. - Also, update the
From
number on the same page, and click on theSave
button. - Next, enable your application under
Applications
tab, and click on theSave
button. - You can test sending a SMS from the
Try
tab. Once, a SMS comes with OTP, it means it has been successfully configured.
Update Lockscreen for SMS Passwordless
If you're to use SMS Passwordless, please visit here to setup the Lock Screen of Auth0 from your Auth0 Dashboard.
Enable Email Passwordless
If you want to implement Email Passwordless, then this section is for you. Else you can skip this.
- Enable
Email
on theAuthentication > Passwordless
page of your Auth0 Dashboard. - Under
Settings
tab, updateFrom
andSubject
based on your need and click on theSave
button. - Next, enable your application under
Applications
tab, and click on theSave
button. - 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
If you're to use Email Passwordless, please visit here to setup 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.
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.
Create Auth0 Verifiers
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-project
- Select
Auth0
from the Login Provider. - Choose your Authentication Type from
eg. Google, Twitter, Github etc..
to be the Auth provider. - Paste the
Client ID
andAuth0 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
Create
button to create your verifier. It may take up to 10-20 minutes to deploy verifier on testnet. You'll receive an email once it's complete.
You will require the
verifierName
of the newly created verifier andclientId
of the Plug and Play Project.- Choose a name of your choice for the verifier identifier.
Create SMS Passwordless Verifier
If you want to implement SMS Passwordless, then this section is for you. Else 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
from the Login Provider. - Choose
Custom
for theJWT Verifier ID
and typename
. - Enter
https://{YOUR-DOMAIN}.auth0.com/.well-known/jwks.json
as yourJWKS Endpoint
. This will be used to validate the JWT token issued by Auth0. - JWT validation fields:
- iss:
https://{YOUR-DOMAIN}.auth0.com
- aud:
{AUTH0-CLIENT-ID}
- iss:
- Click on
Create
button to create your verifier. It may take up to 10-20 minutes to deploy verifier on testnet. You'll receive an email once it's complete.
You will require the
verifierName
of the newly created verifier andclientId
of the Plug and Play Project.- Choose a name of your choice for the verifier identifier.
Create Email Passwordless Verifier
If you want to implement Email Passwordless, then this section is for you. Else 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
- Select
Auth0
from the Login Provider. - Choose your Authentication Type as
Passwordless
to use Auth0's Email Passwordless. - Paste the
Client ID
andAuth0 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
Create
button to create your verifier. It may take up to 10-20 minutes to deploy verifier on testnet. You'll receive an email once it's complete.
You will require the
verifierName
of the newly created verifier andclientId
of the Plug and Play Project.- Choose a name of your choice for the verifier identifier.
- Add
{YOUR_APP_SCHEME}://auth
in the Whitelist URL field of the Web3Auth Dashboard.
Configure Deep Link
- Android
- iOS
- Make sure that the minimum SDK compile version in
build.gradle
is 31 or more.
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
- Add the intent filter with
scheme
defined in yourAndroidManifest.xml
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
# replace with your own scheme
<data android:scheme="web3authrnexample" />
</intent-filter>
- SDK version 31 requires you to explicitly define
android:exported="true"
inAndroidManifest.xml
, check whether it is correctly present or not.
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
- Your
redirectUrl
is your defined scheme following some identifier or your choice. For example, if your scheme isweb3authrnexample
, you can define yourredirectUrl
asweb3authrnexample://openlogin
. Make sure you register thisredirectUrl
in the Web3Auth Developer Dashboard.
const scheme = "web3authrnbareexample"; // Or your desired app redirection scheme
const resolvedRedirectUrl = `${scheme}://openlogin`;
- Make sure that the minimum SDK compile version in
Podfile
is 14 or more.
platform :ios, '14'
- Install the Cocoa Pods within your project directory.
cd ios && pod install && cd ..
- In iOS, you don't need to add
redirectUrl
as a iOS Custom URL Scheme, however, you may can add it to yourInfo.plist
, but it is not required. Make sure yourredirectUrl
is registered in the Web3Auth Developer Dashboard.
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
Adding a Web Browser Module
We will also require a WebBrowser
implementation to allow our JS-based SDK to interact with the native APIs, and there are different extra
installation steps depending on whether you are using the bare workflow or managed workflow. Since we're using the SDK with a bare workflow React
Native app, you have to install a WebBrowser
implementation made by us as a porn from the Expo Web Browser Module.
@toruslabs/react-native-web-browser
- npm
- Yarn
- pnpm
npm install --save @toruslabs/react-native-web-browser
yarn add @toruslabs/react-native-web-browser
pnpm add @toruslabs/react-native-web-browser
Adding a EncryptedStorage
Module
We will also require a EncryptedStorage
implementation to allow for session management without storing the private key on the device.
- npm
- Yarn
- pnpm
npm install --save react-native-encrypted-storage
yarn add react-native-encrypted-storage
pnpm add react-native-encrypted-storage
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 "@toruslabs/react-native-web-browser";
Importing a EncryptedStorage
implementation
import EncryptedStorage from "react-native-encrypted-storage";
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, EncryptedStorage, {
clientId,
network: OPENLOGIN_NETWORK.CYAN, // MAINNET, AQUA, CYAN or TESTNET
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
},
});
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 user can access the key by web3auth.privKey()
. For EVM Blockchains, the secp256k1
private key is used to sign
transactions. We can get an ed25519
compatible private key for other blockchains using web3auth.ed25519Key()
.
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
},
});
If you wish you add Multi Factor Authentication, use dApp Share or select Curve for your React Native application, read the linked documentation.
Get the User Profile
// Assuming the user is logged in, get the user profile from the web3auth object
var userInfo = web3auth.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.
web3auth.logout();
Interacting with the Blockchain
Once a user logs in, the user can ccess the private key by web3auth.privKey()
. For EVM Blockchains, the secp256k1
private key is used to sign
transactions. We can get an ed25519
compatible private key for other blockchains using web3auth.ed25519Key()
. 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