In my Ionic 5 capacitor app, I have a button that calls this function

import {
  signInWithEmailAndPassword, signOut,
  User, UserCredential,
  } from '@angular/fire/auth';
    

//...blah blah blah

async signIn(value)
      { 
        try {alert('signing in')
          return (await signInWithEmailAndPassword(this.auth, value.email, value.password)).user
        } catch (error) {
          alert('what the heck?'   error)
        } 
      }

This works fine on the web and on Android (it returns the object and proceeds). On iOS simulator & the device, it works with livereload, but without livereload, it does nothing, not even return anything. The 'signing in' pops up, but doesn't proceed from there.

Any idea why this is the case?

CodePudding user response：

After struggling, luckily I found what needs to be done.

In your app.component.ts add below code :

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
      });
    }
  }
}

CodePudding user response：

In your app.module.ts file, add the following to your imports array.

provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),

and import the necessary functions & values from @angular/fire/auth.

This is a similar solution to Puneet Kushway. I find this solution better, as it keeps your app.component.ts file uncluttered.