Skip to content

Mobile SDK for Embedded Wallet (React Native)

The Sequence Embedded Wallet SDK can be used with React Native for complete Sequence Embedded Wallet and Indexer integration.

You can see a full example of how to use the SDK or download the template in the Embedded Wallet React Native Demo repository.

Preview

Setting up with your own credentials/keys

Follow this guide to get your project access key and other credentials/keys: https://docs.sequence.xyz/solutions/builder/embedded-wallet/

./ios and ./android folder specific instructions for credentials/keys

iOS

Set CFBundleURLSchemes and GIDClientID in the Info.plist file for Google sign in.

Android

Set the intent-filter in the AndroidManifest.xml file for Google sign in.

Dependencies

Required Sequence packages

  • @0xsequence/waas
  • @0xsequence/react-native

Other Required dependencies/shims

Common

  • ethers (5.7.2)

  • ethersproject/shims

  • expo

  • react-native-quick-crypto

  • react-native-mmkv

  • react-native-keychain

  • babel-plugin-module-resolver (as dev dependency)

For Apple and Google login

  • expo-web-browser
  • expo-auth-session
  • @invertase/react-native-apple-authentication (use the forked version specified in the package.json)

For Email login

  • react-native-url-polyfill
  • web-streams-polyfill

Integration details

Setup shims for ethers and other crypto related packages

Firstly, make sure to do this step as early in your apps lifecycle as possible. In this demo these are imported and set at the top in App.tsx.

import { install } from "react-native-quick-crypto";
install();
 
import "@ethersproject/shims";
 
import "react-native-url-polyfill/auto";
import { ReadableStream } from "web-streams-polyfill";
globalThis.ReadableStream = ReadableStream;

Secondly, we need to set aliases for the shims, in babel.config.js with help of the dev dependency babel-plugin-module-resolver, and also we need to make sure to use pbkdf2 from react-native-quick-crypto. This helps us speed up the random value generation. See babel.config.js for the code snippet to update the aliases.

(See https://github.com/ethers-io/ethers.js/issues/2250#issuecomment-1321134111 for more details on react-native-quick-crypto alias setup)

Initialize Sequence WaaS

export const sequenceWaas = new SequenceWaaS(
  {
    network: initialNetwork,
    projectAccessKey: projectAccessKey,
    waasConfigKey: waasConfigKey,
  },
  localStorage,
  null,
  new KeychainSecureStoreBackend()
);

(Check waasSetup.ts file for more details)

Signing in

Once you have an initialized Sequence WaaS instance, you can use it to sign in with email, Google or Apple. See the google code snippet below for an example, and check the App.tsx file for more details.

const nonce = await sequenceWaas.getSessionHash();
 
const redirectUri = `${iosRedirectUri}:/oauthredirect`;
 
const scopes = ["openid", "profile", "email"];
const request = new AuthRequest({
  clientId,
  scopes,
  redirectUri,
  usePKCE: true,
  extraParams: {
    nonce: nonce,
    audience: webClientId,
    include_granted_scopes: "true",
  },
});
 
const result = await request.promptAsync({
  authorizationEndpoint: `https://accounts.google.com/o/oauth2/v2/auth`,
});
 
if (result.type === "cancel") {
  return undefined;
}
 
const serverAuthCode = result?.params?.code;
 
const configForTokenExchange: AccessTokenRequestConfig = {
  code: serverAuthCode,
  redirectUri,
  clientId: iosClientId,
  extraParams: {
    code_verifier: request?.codeVerifier || "",
    audience: webClientId,
  },
};
 
const tokenResponse = await exchangeCodeAsync(configForTokenExchange, {
  tokenEndpoint: "https://oauth2.googleapis.com/token",
});
 
const userInfo = await fetchUserInfo(tokenResponse.accessToken);
 
const idToken = tokenResponse.idToken;
 
if (!idToken) {
  throw new Error("No idToken");
}
 
try {
  const signInResult = await sequenceWaas.signIn(
    {
      idToken: idToken,
    },
    randomName()
  );
 
  console.log("signInResult", JSON.stringify(signInResult));
} catch (e) {
  console.log("error", JSON.stringify(e));
}

Wallet operations

Once signed in, you can use the sequenceWaas instance to perform wallet operations like sending transactions, signing messages, etc. See the google code snippet below for an example, and check the App.tsx file for more details.

// Signing a message
const signature = await sequenceWaas.signMessage({ message: "your message" });
 
// Sending a txn
const txn = await sequenceWaas.sendTransaction({
  transactions: [
    {
      to: walletAddress,
      value: 0,
    },
  ],
});