离子角+电容器+火力基地。 使用新的 Capacitor 3 和 Firebase 9 帮助迁移 Google 登录代码

Question

I hope someone can help me how to make this old codes for firebase google sign-in to work in the new capacitor 3 and firebase 9. The auth import doesn't work anymore.

here's my code in my auth.service.ts:

import {
  Injectable
} from '@angular/core';
import {
  AngularFireAuth
} from '@angular/fire/compat/auth';
import {
  AngularFirestore,
  AngularFirestoreDocument
} from '@angular/fire/compat/firestore';
import '@codetrix-studio/capacitor-google-auth';
import {
  Plugins
} from '@capacitor/core';
import {
  auth
} from 'firebase/app';
import 'firebase/auth';

export class AuthService {
  constructor(private afAuth: AngularFireAuth, private afs:
    AngularFirestore) {}

  async googleSignup() {
    const googleUser = await Plugins.GoogleAuth.signIn(null) as any;
    const credential = auth.GoogleAuthProvider.credential(
      googleUser.authentication.idToken);
    const afUser = await this.afAuth.signInWithCredential(credential);
    return this.updateUserData(
      afUser.user,
      googleUser.givenName,
      googleUser.imageUrl
    );
  }

and here my code for introduction.page.ts where auth.service.ts is called:

import {
  AuthService
} from '../../services/auth.service';
import {
  Router
} from '@angular/router';

export class IntroductionPage implements OnInit {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}

  openGoogleSignup() {
    this.auth.googleSignup().then((res) => {
      this.router.navigateByUrl('/app');
    }, err => {
      // Canceled the sign up
    });
  }
}

I've already tried the new import method below for GoogleAuth but I can't follow up with the credentials in my old codes. And I get the error "Unhandled Promise rejection: Cannot read properties of undefined (reading 'getAuthInstance')"

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';

Thank you in taking the time to read this, I'm hoping that someone can guide me to this new methods. Goodday everyone.

Answer 1

for all who might have a similar problem in the future. i've managed to find solution thanks to mr.grimm. the imports should go like this:

    import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    import firebase from 'firebase/compat/app';

and the method to call Google sign in is like this:

    async googleSignup() {
        await GoogleAuth.init();
        const googleUser = await GoogleAuth.signIn();
        const credential = firebase.auth.GoogleAuthProvider.credential();
    }