Error: Uncaught (in promise): FirebaseError: Firebase: Error (auth/internal-error)

ThomasTricot commented 1 month ago

Operating System

iOS 17

Browser Version

Capacitor 5.3.0

Firebase SDK Version

json api

Firebase SDK Product:

Auth

Describe your project's tooling

ionic Capacitor

Describe the problem

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!

Steps and code to reproduce issue

I'm sorry, I don't know how to do this.

dlarocque commented 1 month ago

Hi @ThomasTricot, thanks for reporting this issue! A couple questions:

When you say auth and app-check are fully functional on your device, what do you mean exactly?
You mentioned that "on the web, it works perfectly"- does this mean you don't see there error that you're seeing on iOS?

ThomasTricot commented 1 month ago

Hello @dlarocque ! Thank you for taking my problem seriously.

When I say that auth and app-check are functional, let me explain (Both explanation works on my device iOS): For auth, I have a function that launches when my application is launched, telling me that auth is working correctly (I got the log "Firebase Auth is initialized") :
```
async checkFirebaseAuthInitialization() {
const unsubscribe = onAuthStateChanged(this._fireAuth, () => {
  console.log("Firebase Auth is initialized");
  unsubscribe();
}, (error) => {
  console.error('Error initializing Firebase Auth: ', error);
});
}
```
For app-check, I deduce that it works correctly because when I add my application as a test application in console.firebase.com it works correctly. If my app is added, I can retrieve data from my firestore storage, but I can't if I don't add my application to console.firebase.com
No, I don't see any errors when I launch my application in http://localhost:8100 on my browser (without going through Xcode). The sms from the signInWithPhoneNumber function is received and I manage to connect. When I switch to native iOS, I get the error explained earlier. Here's my code that allows me to send an sms that returns the error explained earlier in the catch throw:

import {Auth, onAuthStateChanged, RecaptchaVerifier, signInWithPhoneNumber} from '@angular/fire/auth';

//[ ... ]

  recaptcha() {
    this.appVerifier = new RecaptchaVerifier('sign-in-button', {
      callback: (response:any) => {
      },
      'expired-callback': (response:any) => {
      }
    }, this._fireAuth);
  }

  async signInWithPhoneNumber(phoneNumber:any) {
    try {
      if(!this.appVerifier) {
        this.recaptcha();
      }

      const confirmationResult = await signInWithPhoneNumber(this._fireAuth, phoneNumber, this.appVerifier);

      this.confirmationResult = confirmationResult;
      return confirmationResult;
    } catch(e) {
      console.error("ERROR : " + e)
      throw(e);
    }
  }

  async verifyOtp(otp:any) {
    try {
      if(!this.appVerifier) {this.recaptcha();}
      const result = await this.confirmationResult.confirm(otp);
      console.log(result);
      const user = result?.user;
      console.log(user);
      this.UID = user.uid;
    } catch(e) {
      throw e;
    }
  }

DellaBitta commented 1 month ago

HI @ThomasTricot,

A few more questions, if you don't mind.

The stack traces are obfuscated and they don't tell us which auth operation is failing. Could you add some debug logs to determine if this is in response to a specific operation that you're invoking?

Also I've noticed that this entry repeats in the stack trace which makes me concerned that there's a recursive loop:

c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436

Is there a way for us to better understand what this line is?

Thanks!

google-oss-bot commented 1 week ago

Hey @ThomasTricot. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

google-oss-bot commented 6 days ago

Since there haven't been any recent updates here, I am going to close this issue.

@ThomasTricot if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.

firebase / firebase-js-sdk