Expo Web Browser disappears if users attempt authenticator setup

When asking for help in this category, please make sure to provide the following details:

  • SDK Version:
    @web3auth/base-provider”: “9.7.0”,
    @web3auth/react-native-sdk”: “8.1.0”
  • Platform:
    React Native

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

import * as WebBrowser from 'expo-web-browser'
import * as SecureStore from 'expo-secure-store'
import Web3Auth, { type SdkLoginParams } from '@web3auth/react-native-sdk'
import {
  CommonPrivateKeyProvider,
  type CommonPrivKeyProviderConfig,
} from '@web3auth/base-provider'

const auth = new Web3Auth(WebBrowser, SecureStore, {
        clientId: expoConstants.web3authClientId,
        network: expoConstants.web3authNetwork,
        privateKeyProvider,
        redirectUrl,
        mfaSettings: {
          deviceShareFactor: {
            enable: true,
            priority: 1,
            mandatory: true,
          },
          passwordFactor: {
            enable: true,
            priority: 2,
            mandatory: true,
          },
          // 12 word recovery phrase
          backUpShareFactor: {
            enable: true,
            priority: 3,
            mandatory: false,
          },
          socialBackupFactor: {
            enable: true,
            priority: 4,
            mandatory: false,
          },
          authenticatorFactor: {
            enable: true,
            priority: 5,
            mandatory: false,
          },
        },
      })

      void auth.init()

Hey support team!

I’m using the latest React Native SDK, with relevant initialization code above. My implementation works great, no issues with initialization / deep link flow, etc.

The issue I’m seeing is with users attempting to set up their authenticator app for security.

Expo Web Browser does not persist if you background the Web3Auth flow in order to open an authenticator app like Google Authenticator.

What this does is that the user tries to set up authentication, goes to their auth app, and when they come back the whole Web3Auth flow is gone.

Is there a way to persist this webview, or an alternative to Expo Web Browser that I can provide to the React Native SDK initialization (preferably one that is supported by Expo…)

Thank you!

Thank you for the detailed context and code snippet, Michael!

Summary of your issue:

  • SDK: Web3Auth PnP React Native SDK
  • SDK Versions:
  • Platform: Expo Managed Workflow (React Native)
  • Web Browser: Using expo-web-browser
  • Issue: When users attempt to set up an authenticator app (e.g., Google Authenticator) during MFA, the Expo Web Browser (which handles the Web3Auth flow) is closed if the user backgrounds the app to switch to the authenticator. Upon returning, the Web3Auth flow is lost, causing a poor user experience.
  • Request: Looking for a way to persist the Web3Auth webview/browser or an alternative to expo-web-browser that works with Expo and allows users to return to the authentication flow after switching apps.

Context

This is a known limitation with expo-web-browser—when the app is backgrounded (such as when switching to another app), the web browser session is closed and cannot be restored. This impacts flows like MFA setup, which often require users to switch apps temporarily.

References:


Possible Solutions & Recommendations

  1. Expo Managed Workflow Limitation:

    • The Expo Managed Workflow currently only supports expo-web-browser for the Web3Auth SDK, which is subject to the limitations you described.
    • There is no built-in way to persist the web browser session after the app is backgrounded in this workflow.
  2. Switch to Bare Workflow:

    • If your project requirements allow, consider migrating to the Bare React Native Workflow. This lets you use the @toruslabs/react-native-web-browser package, which may have better handling of backgrounding and session persistence.
    • Bare Workflow Setup Guide
  3. User Experience Workarounds:

    • Add in-app instructions to encourage users to copy the MFA code or complete setup before switching apps.
    • Consider providing an option to send the MFA code to another device or via email for easier access.
  4. Feature Request:

    • If staying on Expo Managed Workflow is a must, you might consider submitting a feature request to the Expo team for improved session persistence in expo-web-browser.

Next Steps

  • If you can consider the Bare Workflow, that is the most robust solution for your use case.
  • If you must stay with Expo Managed, unfortunately, this is a limitation imposed by the underlying Expo WebBrowser module and not directly by Web3Auth.

Let us know if you need guidance on migrating to Bare Workflow or have any other questions!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours