Dapp share in React Native SDK

Background

As described in the Embedded Wallets infrastructure, the user's private key is split into multiple shares to achieve non-custody:

1. Share A, Managed by the login service across node operators and returned after authentication.
2. Share B, Stored on the user's device.
3. Share C, A recovery share held by the user (for MFA-enabled accounts).

On mobile devices, Share B is typically stored in an in-app browser context. Because users can accidentally clear browser data without realizing the browser was used for authentication, this can break future logins. The dapp share solves this by letting your app store its own backup of a key share directly in app storage.

What is a dapp share?

After a successful login on an MFA-enabled account, Web3Auth returns a dappShare, a 24-word seed phrase that represents half the private key. The React Native SDK keeps it in your app's secure storage until the user signs out, so sign-ins in the meantime don't depend on the browser context.

note

Dapp share is only returned for custom verifiers (not default Web3Auth verifiers) and only when MFA is enabled for the user's account.

How the SDK handles the dapp share

The SDK stores and reuses the dapp share for you:

• After sign-in or MFA setup returns a dappShare, the SDK saves it in the storage you pass to Web3AuthProvider, keyed by the grouped connection ID or, if there is none, the connection ID.
• At the next sign-in, the SDK reads the stored share for the first connection in the project's connection configuration and sends it as dappShare.
• disconnect removes the stored share, so the next sign-in after a sign-out doesn't have one.
• If a stored share exists for that connection, the SDK uses it and ignores any dappShare you pass to connectTo.

You can read the current share from useWeb3AuthUser().userInfo.dappShare.

Pass a dapp share manually

A dappShare you pass to connectTo is used only when the SDK has no stored share for the connection, for example after the user signed out.

To provide a dapp share yourself, for example one you restored from your own backend, pass it to connectTo:

import { AUTH_CONNECTION, MFA_LEVELS, useWeb3AuthConnect } from '@web3auth/react-native-sdk'
import { Button } from 'react-native'

function DappShareLoginView({ dappShare }: { dappShare?: string }) {
  const { connectTo, loading } = useWeb3AuthConnect()

  const login = () =>
    connectTo({
      authConnection: AUTH_CONNECTION.CUSTOM,
      authConnectionId: '<YOUR_CONNECTION_ID>',
      mfaLevel: MFA_LEVELS.MANDATORY,
      dappShare,
    })

  return <Button title="Sign in" disabled={loading} onPress={login} />
}

caution

Treat the dapp share like a secret. Store it only in secure storage and never log it.