Error : Cannot read property 'getAuthInstance' of undefined while using login in with google IONIC

user_10285400 0
Viewed 780

I am seeing this error while integrating signin with google in ionic using angular by referring the link given below.

Referred link: https://devdactic.com/capacitor-google-sign-in/

ERROR: enter image description here

I have tried debugging the issue and trying to search it in google but didn't find any relevant docs.

Code :

import { Component } from '@angular/core';
import '@codetrix-studio/capacitor-google-auth';
import { Plugins } from '@capacitor/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  userInfo = null;
 
  constructor() { }
 
  async googleSignup() {
    const googleUser = await Plugins.GoogleAuth.signIn(null) as any;
    console.log('my user: ', googleUser);
    this.userInfo = googleUser;
  }
}

And I would like to know is there any alternative for Plugins which is deprecated in @capactior/core

capacitor google-signin ionic-framework angular
3 Answers

I've been struggling with this for a while, the proposed solutions didn't work for me but the following code did:

home.page.ts

import { Component } from '@angular/core';
import {GoogleAuth} from '@codetrix-studio/capacitor-google-auth';
import {Platform} from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: [ 'home.page.scss' ],
})
export class HomePage {
  userInfo = null;

  constructor(public platform: Platform) {
    this.platform.ready().then(async () => {
      GoogleAuth.init();
    });
  }

  async googleSignup() {
    const googleUser = await GoogleAuth.signIn() as any;
    console.log('my user: ', googleUser);
    this.userInfo = googleUser;
  }
}

Then call the googleSignup from the home.page.html :

<ion-button (click)="googleSignup()">Sign in</ion-button>
Admin1

Probably you miss this point in migration Capacitor 2 -> Capacitor 3: https://github.com/CodetrixStudio/CapacitorGoogleAuth#migration-guide

And your code should looks like:

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

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
})
export class AppComponent {
    userInfo = null;

    constructor() { }

    async googleSignup() {
        GoogleAuth.init(); // or await GoogleAuth.init()
        const googleUser = await GoogleAuth.signIn();
        console.log('my user: ', googleUser);
        this.userInfo = googleUser;
    }
}
user_16765090

I had the same problem and I managed to fix it after going through the plugin code.

The problem is @codetrix-studio/capacitor-google-auth 3.0.2 still uses capacitor.config.json while Capacitor 3+ is using capacitor.config.ts. So I just added the old capacitor.config.json and now it works for me. There is already an issue opened for the Capacitor team and I hope they will fix it soon.

user_82539320
Related