[Bug]: Firebase new RecaptchaVerifier() on Capacitor iOS does not load

[arnotixe]

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 6.2.0
@capacitor/core: 6.2.0
@capacitor/android: 6.2.0
@capacitor/ios: 6.2.0

Installed Dependencies:

@capacitor/cli: 6.1.2
@capacitor/core: 6.1.2
@capacitor/android: 6.1.2
@capacitor/ios: 6.1.2

Other API Details

npm 10.8.2
node v18.20.5
pod 1.15.2
@angular/fire 17.0.1
firebase 10.12.5

Platforms Affected

• iOS
• Android
• Web

Current Behavior

• using angular/fire *

on iOS,

const rV = new RecaptchaVerifier(
        this.auth,
        'recaptcha-container',
        { size: 'invisible' },
      );
      
console.log('recaptcha', rV);

console shows recaptcha is null after the new RecaptchaVerifier() call.
The container div exists (see container member)

[log] - recaptcha {"parameters":{"size":"invisible"},"type":"recaptcha","destroyed":false,"widgetId":null,"tokenChangeListeners":{},"renderPromise":null,

"recaptcha":null,

"auth":{"apiKey":"...","authDomain":"[<domain>](<domain>)","appName":"[DEFAULT]",
"currentUser":{"uid":"...","email":"[[email protected]]
"stsTokenManager":{"refreshToken":"...","accessToken":"...","expirationTime":1733109734049},"createdAt":"1599854209412","lastLoginAt":"1733103632180","apiKey":"...","appName":"[DEFAULT]"}},"isInvisible":true,

"container":{"ngContext_":269},

"_recaptchaLoader":{"hostLanguage":"","counter":0,"librarySeparatelyLoaded":false}}


... some time later, when trying to phoneAuthProvider.verifyPhoneNumber(), logs say

⚡️  [log] - auth VERIFY err auth/internal-error Firebase: Error (auth/internal-error). {"code":"auth/internal-error","customData":{},"name":"FirebaseError"}

Works on

• web
• android native build
• iOS safari web browser

× iOS native build

I THINK this is related to the captcha not being able to load through Capacitor? This could of course be an angular/fire or firebase issue but it only breaks on capacitor on iOS 🤔

On the other hand there are very few debugging details to be found

Expected Behavior

expected captcha to initialize and not be null

Project Reproduction

Additional Information

This could be an angular/fire or firebase issue, but it looks like it only breaks on Capacitor on iOS

[arnotixe]

A pretty old (7 years ) https://stackoverflow.com/questions/44081040/ionic2-authentication-firebase that suggests the problem is in recaptcha checking the origin of the source (which would be capacitor, if I get it right).

If I'm right on the above, there is likely no solution/out of scope to capacitor and this issue can be closed. I was just interested in finding out whether the problem is effectively Recaptcha or if it is Capacitor/if Capacitor is able to work around it.

If it is not Capacitor, it is also puzzling that it works on android but not iOS? 🤔

[arnotixe]

As a workaround, I ended up with this for iOS NATIVE only for now:

• Send the iOS Native user to https://webversion.of.my.app/phone-login?sendback=true
• Recaptcha works on the web version of the app, even on iOS :)
• Once logged in with SMS, the special param to that login page ?sendback=true triggers fetching a signin token for the logged-in user with a cloud function and then
• Send the user back to the native app with a deep link https://domain.intercepted.by.app/login?token=<the token>

A "little" clunky and unsure whether Apple will approve it at all 🙃 but at least the concept works works.

Downsides are of course that

• user is actually also logged on to the web client, so
• if user is already logged on with a different phone number on the web client, the same(wrong) user will also be logged on to the native app
• Apple might block the whole setup (deny the app).
  • Backup plan for that would be to just disallow SMS login on iOS devices, not ideal but cordova's not going to happen anyway.