Hello,
I have a problem with phone authentication on my iOS device. When I click on my RecaptchaVerifier container, I get this error:
Uncaught (in promise): FirebaseError: Firebase: Error (auth/internal-error). at@capacitor://localhost/main.52722ef3671ecb05.js:1:302281 create@capacitor://localhost/main.52722ef3671ecb05.js:1:302760 Ee@capacitor://localhost/main.52722ef3671ecb05.js:1:808106 @capacitor://localhost/main.52722ef3671ecb05.js:1:863588 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/main.52722ef3671ecb05.js:1:863349 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 render@capacitor://localhost/main.52722ef3671ecb05.js:1:862435 @capacitor://localhost/main.52722ef3671ecb05.js:1:862094 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/main.52722ef3671ecb05.js:1:864652 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/main.52722ef3671ecb05.js:1:864458 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 run@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:2004 @capacitor://localhost/main.52722ef3671ecb05.js:1:285236 @capacitor://localhost/main.52722ef3671ecb05.js:1:391388 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/1480.b05f7b47f5f0c77e.js:1:593 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 Fv@capacitor://localhost/main.52722ef3671ecb05.js:1:543352 h@capacitor://localhost/main.52722ef3671ecb05.js:1:543520 @capacitor://localhost/main.52722ef3671ecb05.js:1:627862 onInvokeTask@capacitor://localhost/main.52722ef3671ecb05.js:1:514451 runTask@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:2625 invokeTask@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:8308 Z@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:20915 N@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:21203
On the web (using ionic serve) it works perfectly, I can see my reCaptcha.
After investigating, on my device, Auth is fully functional, as is my AppCheck.
Here is my app.module.ts :
import { NgModule } from '@angular/core';
import { Capacitor } from '@capacitor/core'
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { getApp, initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth, initializeAuth, indexedDBLocalPersistence } from '@angular/fire/auth';
import { provideFirestore,getFirestore, initializeFirestore } from '@angular/fire/firestore';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,
provideFirebaseApp(() =>
initializeApp(environment.firebase
)),
provideAppCheck(() =>
initializeAppCheck(undefined, {
provider: new ReCaptchaV3Provider(environment.reCaptchaSiteKey), isTokenAutoRefreshEnabled: true
})
),
provideAuth(() => {
if(Capacitor.isNativePlatform()){
return initializeAuth(getApp(), {
persistence: indexedDBLocalPersistence
});
} else {
return getAuth();
}
}),
provideFirestore(() => {
if(Capacitor.isNativePlatform()){
return initializeFirestore(getApp(), {
ignoreUndefinedProperties: true
});
} else {
return getFirestore();
}
}),
provideStorage(() => getStorage()),
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
bootstrap: [AppComponent],
})
export class AppModule {}
And here is my capacitor.config.ts :
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'myPersonalAppId',
appName: 'myPersonalAppName',
webDir: 'www',
server: {
androidScheme: 'https',
allowNavigation: ['*'],
}
};
export default config;
Please can someone help me I feel like I’ve already tried everything but nothing works…
Thanks!
I’ve made a github issue, I’m in touch with someone on it :