I am migrating an Ionic/Angular app from using a combination of Firebase and Angular/Fire Namespace compat libraries to the Angular/Fire modular libraries.
The updated code, using @angular/fire modular libraries works fine on the local web browser through ionic serve and on Android devices/emulator. But when running the same code on iOS devices or emulators I run into the following issue
- The call to
onAuthStateChangedat the start does't return anything, including not returning a null value on first call - And on a related note the call to
signInWithCustomTokenhangs - normally after successful sign in, it will trigger the onAuthStateChanged but that is not responding as in (1) above and hangs where the call is made, as though waiting for onAuthStateChanged to trigger.
Code for onAuthStateChanged called at the start of the App is
import { getAuth, onAuthStateChanged, signInWithCustomToken, UserCredential } from '@angular/fire/auth'; export class LoginService { loginInit() { const auth = getAuth(); this.unsubscribeFn = onAuthStateChanged(auth, async (user) => { if(!user) { this.loginUser(); } else { // Initialize user account } } async loginUser() { // Get custom token from backend after validation this.loginToken = this.getCustomToken(); const auth = getAuth(); const creds: UserCredential = await signInWithCustomToken(auth, this.loginToken); } } I am using @angular/fire for all my Firebase calls and in this case onAuthStateChanged and signInWithCustomToken calls. I have tried different versions of firebase (11.0.2, 9.22.1 and 8.10.1) and that of @angular/fire (7.6.1 and 16.0.0) to see if that helps.
I am using the following code in app.module to initialize
provideFirebaseApp(() => initializeApp(environment.firebase)), provideAuth(() => getAuth()), provideDatabase(() => getDatabase())], My ionic info output is included below.
Ionic: Ionic CLI : 7.2.0 (/Users/username/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.7.5 @angular-devkit/build-angular : 16.2.16 @angular-devkit/schematics : 16.2.16 @angular/cli : 16.2.16 @ionic/angular-toolkit : 12.1.1 Capacitor: Capacitor CLI : 6.2.0 @capacitor/android : 6.2.0 @capacitor/core : 6.2.0 @capacitor/ios : 6.2.0 Cordova: Cordova CLI : not installed Cordova Platforms : not available Cordova Plugins : not available Utility: cordova-res : not installed globally native-run : 2.0.1 System: ios-sim : 8.0.2 NodeJS : v22.11.0 (/Users/username/.nvm/versions/node/v22.11.0/bin/node) npm : 10.9.0 OS : macOS Unknown Xcode : Xcode 16.0 Build version 16A242d Given that the same code works for Android devices/emulators and Web, it seems to point to some setting/configuration missing for iOS. I did a fresh reinstall of the iOS platform for ionic but that didn't help either.
I have been trying various combinations but there is no error and am not sure how to debug or resolve this issue. Appreciate any help/guidance from the community.
Resolution For people running into this issue, I was able to resolve this by changing this line of code in app.module
provideAuth(() => getAuth()) to
provideAuth(() => { if (Capacitor.isNativePlatform()) { return initializeAuth(getApp(), { persistence: indexedDBLocalPersistence }) } else { return getAuth() } }) 
onAuthStateChangedandsignInWithCustomToken, but never show what exactly you're doing with them.onAuthStateChangedandsignInWithCustomToken. Please note that this code is working for Android devices and emulators and local web browser. It is only for iOS devices and emulators where theonAuthStateChangeddoesn't return any value andsignInWithCustomTokencall hangs without any error. Thank you for your help. Please let me know if I can provide any additional info.