Auth does not work in ionic apps on iphone devices or sims

[donhmorris]

Version info

Angular 12.1.1

Firebase 9

@angular/fire 7.0.4

ionic 5.5.2

How to reproduce these conditions

Create a sign in with email and password login. Will work in browser; will not work in iphone simulator or iphone device. It will just hang, waiting for a login result.

Steps to set up and reproduce

1. clone git clone https://donhmorris@bitbucket.org/donhmorris/testlogin.git
2. run npm i
3. run ionic lab
4. login in browser with credentials: email = 'don@test.com'. pwd = 'password'
5. Message will be displayed in app that says "Signed in as don@test.com" and Logout button is displayed on success. A toast will appear in red if an error occurs.
6. stop ionic lab; run ionic cap run ios
7. select an iphone simulator model. Any version will do. Recommend iphone 13.
8. attempt to login using the previous credentials
9. nothing will happen. no errors, exceptions or anything. app just hangs

Notes
A firebase project is setup to specifically test the supplied demo app.

Debug output

** Errors in the JavaScript console **
None
** Output from firebase.database().enableLogging(true); **

** Screenshots **

Expected behavior

Login is successful and a message is displayed showing the email used to sign in.

Actual behavior

App hangs with no error messages

[j0s3v4rg4s]

I found that the login function is working, the problem is on change detection of this.auth.onAuthStateChanged for any strange reason it don't update the user state

[donhmorris]

You made more progress than I did. Regards, Don Morris On Sep 24, 2021, at 4:57 PM, Jose Vargas ***@***.***> wrote:  I found that the login function is working, the problem is on change detection of this.auth.onAuthStateChanged for any strange reason it don't update the user state — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fangular%2Fangularfire%2Fissues%2F2979%23issuecomment-926914828&data=04%7C01%7C%7Ca8a0fa8ab5e44524568608d97f9deece%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637681138557487528%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=uOPLyRYVxAdYn0Q3%2FPiOS9LoXVjzzm8JVeE681FyOQo%3D&reserved=0>, or unsubscribe<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAC3J3ACEWNQGD3R2VZBR5ZLUDTQ33ANCNFSM5EUV5TOA&data=04%7C01%7C%7Ca8a0fa8ab5e44524568608d97f9deece%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637681138557497523%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=VEB144uFiCebgsXMQc7%2Bca9WrxHCPd8An68943QE3Vs%3D&reserved=0>. Triage notifications on the go with GitHub Mobile for iOS<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7C%7Ca8a0fa8ab5e44524568608d97f9deece%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637681138557497523%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=dlwrLf3kWH5l%2BFd8GPeYVTvgkAz7FAaSrC1Y89un8g0%3D&reserved=0> or Android<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7C%7Ca8a0fa8ab5e44524568608d97f9deece%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637681138557507518%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=8WMuPI5LS5GAlyKYGqIFpJQfwfncb%2BZUhicNcckR63Q%3D&reserved=0>.

[playaz87]

Also experiencing this. authstate.subscribe() is not firing when the auth state changes. Anyone found a solution yet?

Downgrading to @angular/fire": "^6.0.4" and "firebase": "^8.0.1" works.

[donhmorris]

I also found downgrading @angular/fire works as well as using Firebase sdk v8. Looks like this was broken in Firebase sdk 9.

[jamesdaniels]

Going to close as this isn't an issue with AngularFire, please open over on the JS SDK repo.

[NLueg]

If anyone also has this issue, I solved it as suggested in the issue firebase/firebase-js-sdk#5019 with this code:

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
  ]
})

[ejirocodes]

Fixed here: https://stackoverflow.com/a/69793220/12624390

[eeschiavo]

I've the same problem but solution provided by @ejirocodes doesn't work for me. I'm using AngularFireAuth and AngularFireStorage.

I can confirm downgrading to @angular/fire": "^6.1.5" and "firebase": "^8.10.0" works.

[rodrigoreal]

If anyone also has this issue, I solved it as suggested in the issue firebase/firebase-js-sdk#5019 with this code:

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
  ]
})

@NLueg thank you man, saved my day, was struggling here for hours.

[bocodigital]

Can you share how you handled it in your component?

[donhmorris]

In your main app component

import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { initializeApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from 'src/environments/environment';

@component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {
const app = initializeApp(environment.firebase);
if (Capacitor.isNativePlatform) {
initializeAuth(app, {
persistence: indexedDBLocalPersistence
});
}
}
}

[bocodigital]

Im looking at what @rodrigoreal did. Looks like what @donhmorris is saying is to ditch angularfire all together for native. But it looks like @rodrigoreal added that to his appModule but I don't get how that works.

[bocodigital]

@donhmorris are you removing all the angularfire imports from the appModule?

[donhmorris]

You can do the same thing with angular fire. Playing bf 2042 right now. I’ll see if I can grab my code for angular fire in a few b

[bocodigital]

@donhmorris thanks!!

[rodrigoreal]

@bocodigital

app.module.ts

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth, indexedDBLocalPersistence, initializeAuth } from '@angular/fire/auth';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { provideMessaging, getMessaging } from '@angular/fire/messaging';

imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        });
      } else {
        return getAuth()
      }
    }),
    provideMessaging(() => getMessaging()),
    provideStorage(() => getStorage()),
]

And for exemple in my auth service you need to do something like that:

import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
constructor(
    private afAuth: Auth,
  ){}
  
  signinWithEmailAndPasswordd(email: string, password: string) {
    return signInWithEmailAndPassword(this.afAuth, email, password);
  }
}

[donhmorris]

@bocodigital I can't find that code. Weird. I know I did it.
What others have shown for angular fire is what I remember I did.

[bocodigital]

@donhmorris and @rodrigoreal right now my firebsase and firestore services are using compat. Can I mix them?

[rodrigoreal]

@bocodigital idk man, i dont think so, i was also using compat, but i migrated it to modular when i upgraded to firebase 9 and i only discovered this problem after, so i cant help you to fix that with compat.

[bocodigital]

@rodrigoreal @donhmorris I got it working with a combo of compat and modular. I will just port the whole thing to modular. I don't see the point of angular fire though since firebase v9 has everything you need.

[eeschiavo]

I can confirm @rodrigoreal solution is working but the app must use angular fire 7 APIs.

[MaxLeggieri]

If anyone also has this issue, I solved it as suggested in the issue firebase/firebase-js-sdk#5019 with this code:

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
  ]
})

@NLueg thank you man, saved my day, was struggling here for hours.

This also resolved my issue, still can't found an official bug on this.
The mix between web and native is still blurry on a so popular tool.

[jamesonsaunders]

The real problem: firebase-js-sdk on mobile iOS assumes google API (gapi) exists on the window, even when it isn't used.

I found a work around: Mock window.gapi before using firebase auth login:

window['gapi'] = {
  load: (name: string) => Promise.resolve(),
  iframes: {
    getContext: () => {
      return {
        iframe: {
          contentWindow: {
            postMessage: (message: any) => {
              console.log("gapi iframe message:", message);
            }
          }
        }
      }
    }
  }
} as any;

[nskoro]

using firebase 9.8.4 worked

[SheldonHage]

@MaxLeggieri I believe I read on the Firebase GitHub that this was expected behavior and your code example is the correct implementation so they chose not to open a bug report. This worked for me as well btw.

[Joep-DDQ]

the provideAuth() implementation also solved my issue. Can't believe this isn't mentioned in the docs. I wasted weeks on this!

[lukeweston1234]

In case anyone is using Bootstrapped components

In your main.ts

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideRouter(routes),
    importProvidersFrom(
      IonicModule.forRoot({}),
      provideFirebaseApp(() => initializeApp(environment.firebase)),
      provideAuth(() => {
        if (Capacitor.isNativePlatform()) {
          return initializeAuth(getApp(), {
            persistence: indexedDBLocalPersistence,
          });
        } else {
          return getAuth();
        }
      }),
      provideFirestore(() => getFirestore()),
      provideStorage(() => getStorage()),
      provideFunctions(() => getFunctions())
    ),
  ],
});

[inertjade]

@bocodigital

app.module.ts

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth, indexedDBLocalPersistence, initializeAuth } from '@angular/fire/auth';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { provideMessaging, getMessaging } from '@angular/fire/messaging';

imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        });
      } else {
        return getAuth()
      }
    }),
    provideMessaging(() => getMessaging()),
    provideStorage(() => getStorage()),
]

And for exemple in my auth service you need to do something like that:

import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
constructor(
    private afAuth: Auth,
  ){}
  
  signinWithEmailAndPasswordd(email: string, password: string) {
    return signInWithEmailAndPassword(this.afAuth, email, password);
  }
}

Thank you so much for posting this. I am now able to get past this blocker.