Multi-Factor Authentication: reCAPTCHA Flow Issues on Simulators and Emulators

[jonnaup03]

When attempting to use Firebase Multi-Factor Authentication (MFA) with phone number verification, I encounter different issues on simulators and emulators, although the functionality works as expected on real devices.

On Android Emulator:
The app works correctly on a real android device, but on the Android Emulator, the following issues occur:

[auth/app-not-authorized] This app is not authorized to use Firebase Authentication. Please verify that the correct package name, SHA-1, and SHA-256 are configured in the Firebase Console. [ Invalid app info in play_integrity_token ]

This error suggests a mismatch or missing configuration of the package name, SHA-1, or SHA-256 keys in the Firebase Console, which causes Firebase to reject the app on the emulator. Additionally, the reCAPTCHA flow does not open a web browser as expected, preventing the MFA process from completing.

On iOS Simulator:
The app works correctly on a real iOS device, but on the iOS simulator, the following issues occur:

Browser Behavior: The reCAPTCHA verification flow opens in an external web browser and returns without completing the reCAPTCHA challenge. Upon returning to the app, the following error occurs:

[auth/internal-error] {"error":{"code":403,"message":"Requests from this iOS client application <empty> are blocked.","errors":[{"message":"Requests from this iOS client application <empty> are blocked.","domain":"global","reason":"forbidden"}],"status":"PERMISSION_DENIED","details":[{"@type":"type.googleapis.com/google.rpc.ErrorInfo","reason":"API_KEY_IOS_APP_BLOCKED","domain":"googleapis.com","metadata":{"consumer":"projects/20577282704","service":"identitytoolkit.googleapis.com"}}]}}

The error indicates that requests from the iOS client application are blocked, with a specific note that the API key is blocked for the iOS app.

The app is configured to work with multiple Firebase projects (prod and dev). The correct Firebase configuration is dynamically set depending on the environment (production or development), but these issues are occurring specifically in simulators and emulators.

Expected Behavior:

The app should authenticate using Firebase MFA on both Android Emulator and iOS Simulator, with reCAPTCHA opening in a web browser (on both platforms) and the flow returning to the app without errors, similar to how it works on real devices.

Environment Details:

React-Native-CLI Version: 0.73.5
@react-native-firebase/auth Version: 19.3.0

[mikehardy]

I wonder if for dev on android at least, configuring and setting up a debug token for app check would work ? No experience here, this is a brainstorm so if it doesn't work, sorry for any wasted effort

For iOS I'm unsure also - I'll note that the firebase version there is pretty out of date but I'm not sure this would actually help, just best practice to always be up to date before logging an issue

You might also try re-downloading the config files for the dev project to make sure they are up to date after changing auth items - those things can and do change when you enable new auth methods

Finally, you mention what sounds like a somewhat complicated multi-project setup - I do the same and I understand the utility. But I wonder if creating a very very simple / aimed at reproducing project with just one firebase project connection and nothing but a single App.tsx that just attempts to make this work might be helpful? You can try this to create a skeleton for it - https://github.com/mikehardy/rnfbdemo/blob/main/make-demo.sh

[BlindDev]

Is it technically possible that for MFA with reCaptcha on iOS the web page initiated by firebase always points to the primary app configuration and ignores the secondary instance?
it is either related to the MFA Resolver:

fAuth.getMultiFactorResolver

or phone verification

fAuth.verifyPhoneNumberWithMultiFactorInfo

where fAuth supposed to be the secondary project instance

And in the mean time, on real device where silent push notification works instead of reCAPTCHA, it works as expected

[mikehardy]

There were problems with secondaries before, but I assume (dangerous! but should be valid in this case?) that users are successfully using it since a PR specifically to make it work was posted and merged from the community #7564

[jonnaup03]

Updated Details for iOS simulator:
I used Xcode to debug the Browser Behavior issue on the iOS Simulator when attempting to use Firebase Multi-Factor Authentication (MFA). Below is the flow and the relevant logs captured during the process:

Issue:
When the reCAPTCHA verification flow opens in an external web browser, it returns to the app without completing the reCAPTCHA challenge. Upon returning, the app throws the following error:

[auth/internal-error] {"error":{"code":403,"message":"Requests from this iOS client application <empty> are blocked.","errors":[{"message":"Requests from this iOS client application <empty> are blocked.","domain":"global","reason":"forbidden"}],"status":"PERMISSION_DENIED","details":[{"@type":"type.googleapis.com/google.rpc.ErrorInfo","reason":"API_KEY_IOS_APP_BLOCKED","domain":"googleapis.com","metadata":{"consumer":"projects/20577282704","service":"identitytoolkit.googleapis.com"}}]}}

Logs Captured in Xcode:

-[RNFBAuthModule verifyPhoneNumberWithMultiFactorInfo:::::] [Line 868] using instance verifyPhoneNumberWithMultiFactorInfo: secondary  
-[RNFBMessagingAppDelegate application:didReceiveRemoteNotification:fetchCompletionHandler:] [Line 126] didReceiveRemoteNotification Firebase Auth handled the notification with instance: secondary  
-[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:]  perform input operation requires a valid sessionID. inputModality = Keyboard, inputOperation = <null selector>, customInfoType = UIEmojiSearchOperations 

After the above logs, the app throws the error mentioned earlier, preventing the MFA process from completing.

Below screenshots are attached, showing the browser opening and the app error that occurs after returning to the app.

Screenshots:

[mikehardy]

I'm still not sure what to say - there's evidence people are using it and no other issues. Perhaps the reverse client ID isn't correct in the plist file for the project from firebase console, perhaps something else? I just don't know and won't have time to look into this more closely unfortunately

[jonnaup03]

I understand that there are no other issues being reported, and I appreciate your input.

Regarding the reverse client ID in the plist file, I have already checked that it has been correctly added and matches the one in the Firebase Console. It’s possible that this could still be a contributing factor, especially since the issue only occurs on simulators/emulators.

[BlindDev]

Is it possible that the API keys restriction causes this? Like if there's an API key for firebase that is restricted by the iOS App bundle identifier but the reCaptcha flow opened in a web view is getting rejected by API key restrictions?

[github-actions]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.