@web3auth/react-native-sdk

Web3Auth React Native SDK

Web3Auth is where passwordless auth meets non-custodial key infrastructure for Web3 apps and wallets. By aggregating OAuth (Google, Twitter, Discord) logins, different wallets and innovative Multi Party Computation (MPC) - Web3Auth provides a seamless login experience to every user on your application.

📖 Documentation

Checkout the official Web3Auth Documentation and SDK Reference to get started!

💡 Features

• Plug and Play, OAuth based Web3 Authentication Service
• Fully decentralized, non-custodial key infrastructure
• End to end Whitelabelable solution
• Threshold Cryptography based Key Reconstruction
• Multi Factor Authentication Setup & Recovery (Includes password, backup phrase, device factor editing/deletion etc)
• Support for WebAuthn & Passwordless Login
• Support for connecting to multiple wallets
• DApp Active Session Management

...and a lot more

⏪ Requirements

• For iOS, only iOS 12+ supported since we requires ASWebAuthenticationSession.

• For Android, Custom Tab support is required.

Selecting your Workflow

In React Native, you have the choice to use one of the following workflows:

• Bare Workflow: Your React Native app is entirely built on your own machine. You can customize your app with Swift/Kotlin native modules.
• Expo Managed Workflow: Your React Native Expo app is built on your Expo's cloud, so you don't have control over the native modules used in the app.

⚡ Installation

npm install @web3auth/react-native-sdk

🌟 Configuration

Configure your Web3Auth project

Hop on to the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.

• Add {YOUR_APP_PACKAGE_NAME}://auth to Whitelist URLs.

• Copy the Project ID for usage later.

Expo Managed Workflow

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

To allow the SDK to work with exported Expo Android apps, you need to place a designated scheme into app.json, like below:

{
  "expo": {
    "scheme": "web3authexposample"
  }
}

Bare workflow Configuration

When using our SDK with a bare workflow React Native app, you have to install a WebBrowser implementation made by us.

npm install --save @toruslabs/react-native-web-browser

Android

• The scheme parameter in the redirectUrl is specificable, and has to be added into the AndroidManifest.xml.

<data android:scheme="web3authrnexample" />

iOS

• The scheme parameter in the redirectUrl is specificable here as well, however, it does not need to be added as a iOS Custom URL Scheme. You may add the scheme to your iOS Info.plist, but it is not required.

Register the URL scheme you intended to use for redirection

• In the Web3Auth Developer Dashboard, add the URL scheme you intended to use for redirection to the Whitelist URLs section.

For example, the scheme mentioned is web3authrnexample and the redirectUrl mentioned is ${scheme}://openlogin, we will whitelist:

web3authrnexample://openlogin

💥 Initialization & Usage

In your sign-in activity', create an Web3Auth instance with your Web3Auth project's configurations and configure it like this:

Expo Managed Workflow

import * as WebBrowser from 'expo-web-browser';
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk";

const web3auth = new Web3Auth(WebBrowser, {
    clientId,
    network: OPENLOGIN_NETWORK.TESTNET, // or other networks
});
const info = await web3auth.login({
    loginProvider: LOGIN_PROVIDER.GOOGLE,
    redirectUrl: resolvedRedirectUrl,
    mfaLevel: 'mandatory', // optional
    curve: 'secp256k1', // optional
});

Bare Workflow

import * as WebBrowser from '@toruslabs/react-native-web-browser';
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk";

const web3auth = new Web3Auth(WebBrowser, {
    clientId,
    network: OPENLOGIN_NETWORK.TESTNET, // or other networks
});
const info = await web3auth.login({
    loginProvider: LOGIN_PROVIDER.GOOGLE,
    redirectUrl: resolvedRedirectUrl,
    mfaLevel: 'mandatory', // optional
    curve: 'secp256k1', // optional
});

🩹 Examples

Checkout the examples for your preferred blockchain and platform in our examples repository

🌐 Demo

Checkout the Web3Auth Demo to see how Web3Auth can be used in an application.

Further checkout the example folder within this repository, which contains a sample app.

💬 Troubleshooting and Discussions

• Have a look at our GitHub Discussions to see if anyone has any questions or issues you might be having.
• Checkout our Troubleshooting Documentation Page to know the common issues and solutions
• Join our Discord to join our community and get private integration support or help with your integration.