Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

134
Views
Firebase Authentication Sticks Capacitor Ionic on iOS

I am using angular-fire for firebase authentication on Ionic-Capacitor. It works fine on the web and android, but not on IOS.

When I inspected the app network activity, I realized the app is able to get an Authentication response successfully from firebase, but it's not fulfilling the async call.

My app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({mode: 'ios'}), AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
]})

This is how I am initializing Angular fire.

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

This is a FirebasePlugin issue! All you need to do is to initialize AngularFire with the latest method.

OLD Method (Wrong) -

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({mode: 'ios'}), AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
]})

Working Method (NEW)

import {getApp, initializeApp, provideFirebaseApp} from "@angular/fire/app";
import {getAuth, initializeAuth, provideAuth, indexedDBLocalPersistence} from "@angular/fire/auth";

@NgModule({

  imports: [
    provideFirebaseApp(() =>      initializeApp(environment.firebaseConfig)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        })
      } else {
        return getAuth()
      }
    })]
})

After modifying the initializing approach, you'll need to remove usage of AngularFireAuth, instead use it like:-

import {Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "@angular/fire/auth";

export class UserService {
 constructor(private auth : Auth) {

const user: any = await signInWithEmailAndPassword(this.auth,email,password);

}

Also, you can visit the latest docs of AngularFire to understand it better.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs