Skip to main content

Usage of Core Kit SFA React Native SDK

Once you've installed and successfully initialized Web3Auth, you can use it to authenticate your users. Further, you can use the native provider given by Web3Auth to connect the users to the respective blockchain network.

Natively, the instance of Web3Auth (referred to as web3auth in our examples) returns the following functions:

  • connect() - Logs in the User using the verifier, verifierId & idToken mandatorily while subVerifierInfoArray and serverTimeOffset are optional.
  • provider() - Returns the native provider that can be used to make different blockchain transactions.
  • connected() - Returns true or false depending on whether the web3auth instance is available or not.
  • sessionId() - Returns the sessionId of the user as a string.
  • authenticateUser() - Returns a promise of UserAuthInfo object containing the idToken of the user.
  • addChain() - Add chain configuration to the web3auth instance.
  • switchChain() - Switch the chainId to one of the added chainIds.
  • logout() - Logs out the user from the web3auth instance.

Logging in your User​

connect(loginParams: LoginParams)

To log a user in the Web3Auth SFA Web SDK, you need to call connect() function.

VariableTypeDescriptionMandatory
loginParamsobjectLogin ParametersYes

Returns​

connect(loginParams: LoginParams): Promise<IProvider | null>

LoginParams​

connect(loginParams: LoginParams)

On successful login, the connect() function returns a IProvider instance. This instance contains the respective provider corresponding to your selected blockchain. You can use this provider to connect your user to the blockchain and make transactions.

On unsuccessful login, this function will return a null value.

ParameterTypeDescriptionMandatory
verifierstringDetails of the verifier (verifier type, ie. torus, metamask, openlogin etc.)Yes
verifierIdstringVerifier ID's value, sub or email value present in the idToken.Yes
idTokenstringA newly created JWT Token that has not already been sent to Web3Auth or a Duplicate Token error will be thrown.Yes
subVerifierInfoArray?TorusSubVerifierInfo[]Sub verifier infoNo
serverTimeOffset?numberServer time offsetNo

TorusSubVerifierInfo​

ParameterTypeDescription
verifierstringDetails of the verifier (verifier type, ie. torus, metamask, openlogin etc.)
idTokenstringA newly created JWT Token that has not already been sent to Web3Auth or a Duplicate Token error will be thrown.

Usage​

await web3auth.connect({
  verifier: "verifier-name", // e.g. `web3auth-sfa-verifier` replace with your verifier name, and it has to be on the same network passed in init().
  verifierId: "verifier-id-value", // e.g. `Yux1873xnibdui` or `name@email.com` replace with your verifier id(sub or email)'s value.
  idToken: "JWT Token", // replace with your newly created unused JWT Token.
});

Get a native provider​

provider()

Returns the native provider that can be used to make different blockchain transactions.

Returns​

get provider(): IProvider | null;

Get connected status​

connected()

Returns true or false depending on whether the web3auth instance is available or not.

Returns​

get connected(): boolean;

Get sessionId​

sessionId()

Returns the sessionId of the user as a string.

Returns​

get sessionId(): string;

Authenticate the user​

authenticateUser()

Returns a promise of UserAuthInfo object containing the idToken of the user.

Returns​

authenticateUser(): Promise<UserAuthInfo>;

UserAuthInfo​

export type UserAuthInfo = {
  idToken: string;
};

Add a new chain​

addChain(chainConfig: CustomChainConfig)

Add chain configuration to the web3auth instance.

VariableTypeDescriptionMandatory
chainConfigCustomChainConfigChain specific configurationYes

CustomChainConfig​

ParameterTypeDescriptionOptional
chainNamespace
  • string - (Choose between eip155, solana & other)
    • or
  • ChainNamespaceType - (Choose between CHAIN_NAMESPACES.EIP155, CHAIN_NAMESPACES.SOLANA & CHAIN_NAMESPACES.OTHER)
The namespace of your preferred chain. Checkout Providers SDK Reference for understanding RPC Calls.No
chainIdstringThe chain id of the selected blockchain in hexNo
rpcTargetstring
  • RPC Target URL for the selected chainNamespace & chainId.
  • We provide a default RPC Target for certain blockchains, but due to congestion it might be slow hence it is recommended to provide your own RPC Target URL.
No
wsTargetstringWeb socket target URL for the chainYes
displayNamestringDisplay Name for the chainNo
blockExplorerstringBlockchain's explorer URL. (eg: https://etherscan.io)No
tickerstringDefault currency ticker of the network (e.g: ETH)No
tickerNamestringName for currency ticker (e.g: Ethereum)No
decimalsnumberNumber of decimals for the currency ticker (e.g: 18)Yes

Switch the chain​

switchChain(params: {chainId: string;})

Switch to one of the added chains

VariableTypeDescriptionMandatory
chainIdstringid of the chain to switch toyes

Logging out the user​

logout()

Logs out the user and clears the session.

Note

@web3auth/single-factor-auth-react-native SDK only works for users who have not enabled MFA.

MFA enabled users

For MFA enabled users, you'll see Error("User has already enabled mfa, please use the @webauth/webauth-web sdk for login with mfa");

Example​

Note

Please use these examples in conjunction with our troubleshooting guide for React Native Bundler polyfill issues here.

Note

Please set up Firebase configuration in your React Native bare app using the guide here.

App.tsx
import auth from "@react-native-firebase/auth";
import EncryptedStorage from "react-native-encrypted-storage";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import Web3Auth from "@web3auth/single-factor-auth-react-native";

// Get idToken from Firebase
async function signInWithEmailPassword() {
  try {
    const res = await auth().signInWithEmailAndPassword("custom+jwt@firebase.login", "Testing@123");
    return res;
  } catch (error) {
    console.error(error);
  }
}

// Instantiate Web3Auth SFA SDK
const web3AuthSfa = new Web3Auth(EncryptedStorage, {
  clientId: "WEB3AUTH_CLIENT_ID", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet", // Get your network from the Web3Auth Dashboard
  usePnPKey: false, // By default, this sdk returns CoreKitKey
});

// Instantiate Ethereum Provider
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    /*
      pass the chain config that you want to connect with
      all chainConfig fields are required.
      */
    chainConfig: {
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/eth",
      displayName: "mainnet",
      blockExplorerUrl: "https://etherscan.io/",
      ticker: "ETH",
      tickerName: "Ethereum",
    },
  },
});

// Initialize Web3Auth SFA SDK
await web3AuthSfa.init(privateKeyProvider);

const loginRes = await signInWithEmailPassword();
const idToken = await loginRes!.user.getIdToken(true);
const parsedToken = parseToken(idToken);

const verifier = "web3auth-firebase-examples";
// get sub value from firebase id token
const verifierId = parsedToken.sub;

// Login the user
const web3authProvider = await web3auth!.connect({
  verifier, // e.g. `web3auth-sfa-verifier` replace with your verifier name, and it has to be on the same network passed in init().
  verifierId, // e.g. `Yux1873xnibdui` or `name@email.com` replace with your verifier id(sub or email)'s value.
  idToken,
});

// Get the private key, The private key returned here is the CoreKit Key, since the usePnPKey is set to false.
const finalPrivateKey = await web3authProvider!.request({
  method: "eth_private_key",
});