GAPI is not defined

[Zaphod-Beeblebrox]

Followed tutorial here: https://devdactic.com/capacitor-google-sign-in/

Haven't tried native app yet, but when running as PWA/WEb, I get this error: vue.runtime.esm.js?2b0e:1888 ReferenceError: gapi is not defined at GoogleAuthWeb.eval (web.js?9e96:64) at Generator.next () at eval (web.js?9e96:6) at new Promise () at __awaiter (web.js?9e96:2) at eval (web.js?9e96:54) at new Promise () at GoogleAuthWeb.eval (web.js?9e96:54) at Generator.next () at eval (web.js?9e96:6)

This is a Vue PWA APp that I'm adding capacitor functionality into to make it work on native Android/Ios.

ANY help appreciated.

thanks,

[SantiagoIlli]

I have the same issue, and i used the same tutorial

When I tried to google about it, and found that adding this line:

<script src="https://apis.google.com/js/platform.js"></script>

in the index.html would "solve it" but then another issue appears:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'getAuthInstance' of undefined

I'll let you know if some solution cames up.

[SantiagoIlli]

I did a lot of research and found the error.

Is here:

He uses: "google-signin-client_id"

But in the tutorials/readme it's written as:

"google-sign-in-client_id"

Look the difference its between "signin" and "sign-in"

Maybe it should change to "google-sign-in-client_id", but for now as a work around you can change in your index.html:

this line:

<meta name="google-sign-in-client_id" content="HERE-YOUR-APP-ID.apps.googleusercontent.com" />

to this:

<meta name="google-signin-client_id" content="HERE-YOUR-APP-ID.apps.googleusercontent.com" /> And it works fine.

Hope it helps!

[caiquetorres]

In my case I was using the new Capacitor 3. I had the same problem, but using that

GoogleAuth.init();

it worked

[reslear]

i'm add vue example to instruction https://github.com/CodetrixStudio/CapacitorGoogleAuth#vue-3

[marcelonnunes]

GoogleAuth.init();

I'm using the new Capacitor 3 and I also got the same problem. I'm following the Devdactic tutorial (https://devdactic.com/capacitor-google-sign-in/).

If I call the GoogleAuth.init() and GoogleAuth.signIn() functions; in my login.page.ts file the error happens.

login.page.ts

// import '@codetrix-studio/capacitor-google-auth'; // capacitor v2

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

googleSignup() {

   GoogleAuth.init();
   GoogleAuth.signIn();

}

I needed to call GoogleAuth.init() on app.component.ts and then call GoogleAuth.signIn() on login.page.ts

app.component.ts

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

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

    GoogleAuth.init();

  }
}

login.page.ts

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

googleSignup() {

   GoogleAuth.signIn();

}

[reslear]

i don't have big experience with angular, but I think need add this hook after DOM ready (i found like ready() => Promise):

  // app.component.ts 
  
  constructor() {
    this.initializeApp();
  }
  initializeApp() {
    this.platform.ready().then(() => {
      GoogleAuth.init();
    });
  }  

[juanmafont]

I'm using Angular 11, Ionic 5 and Capacitor 3, I can Init, login and logout, from web app and from android app. ALL OK.

I initiated plugin into my authService, calling from app.component.ts All logic: Init, login and logout is made into a service ( authService.service.ts).

But something happen, can not call GoogleAuth methods from this service, only from out, from app.component.ts, if I try call it from authService, then GAPI not defined is launched.

  // app.component.ts 
  
  constructor() {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.authService.gooogleAuthInitWeb();
    });
  }  

I can login, and logout from template app.component.html

 // app.component.html

 <ion-item (click)="authService.googleLogout()" *ngIf="(authService.user$ | async)?.id; else loggin">
       <ion-icon slot="start" name="log-out"></ion-icon>
        <ion-label>{{ "LOGGOUT" | translate }}</ion-label>
 </ion-item>
 <ng-template #loggin>
 <ion-item (click)="authService.googleLogin()">
     <ion-icon slot="start" name="key"></ion-icon>
     <ion-label>{{ "LOGGIN" | translate }}</ion-label>
     </ion-item>
</ng-template>

and this is the code into authService, only main methods.

  // auth-service.service.ts

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

  public async googleLogout() {
   .....
    const logout = await GoogleAuth.signOut() as any;
   ......
  }

  public async googleLogin(): Promise<IUser> {
    return GoogleAuth.signIn().then(userG => { ...... });
  }

  // Only needed when web
  public gooogleAuthInitWeb() {
    GoogleAuth.init();
  }

All, ok, but something strange happen when I try call googleLogin() from same auth-service.service.ts . When I try to re-login because authService detect user session caduced, if I try to call googleLogin() from (same) inside authService give me error:

core.js:6210 ERROR Error: Uncaught (in promise): ReferenceError: gapi is not defined
ReferenceError: gapi is not defined
    at web.js:59
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at GoogleAuthWeb.signIn (web.js:49)

at authService I call:

  // auth-service.service.ts

constructor( ....  ) {

    this.platform.ready().then(async () => {
    
               // Try it add here -> GoogleAuth.init();    but with same error result 
               // Try it add here -> GoogleAuth.init();   and remove from app.component.ts,  but with same error result    
               
               .........

               // Detected user session caduced try to re-login 
               // (I try  also to logout before, but also give me GAPI NOT DEFINED when call logout)
               if (invalid) {
              // Expired, re-authentificated
              console.log('User idtoken invalid or too old. Signup again...');
             // Call whatever  GoogleAuth.signIn(), GoogleAuth.signOut(), .....
             //  ..... GoogleAuth.refresh() I got always same fail, gapi not defined
              this.googleLogin();  <----   HERE FAILS and give me GAPI NOT DEFINED
            }

It's its possible call googleLogin() -> ( GoogleAuth.signIn() ) from inside authService ? Because I always got NOT GAPI

[juanmafont]

I'm using Angular 11, Ionic 5 and Capacitor 3, I can Init, login and logout, from web app and from android app. ALL OK.

core.js:6210 ERROR Error: Uncaught (in promise): ReferenceError: gapi is not defined
ReferenceError: gapi is not defined
    at web.js:59
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at GoogleAuthWeb.signIn (web.js:49)

at authService I call:

  // auth-service.service.ts

constructor( ....  ) {

    this.platform.ready().then(async () => {
    
               // Try it add here -> GoogleAuth.init();    but with same error result 
               // Try it add here -> GoogleAuth.init();   and remove from app.component.ts,  but with same error result    
               
               .........

               // Detected user session caduced try to re-login 
               // (I try  also to logout before, but also give me GAPI NOT DEFINED when call logout)
               if (invalid) {
              // Expired, re-authentificated
              console.log('User idtoken invalid or too old. Signup again...');
              // Call whatever  GoogleAuth.signIn(), GoogleAuth.signOut(), .....
              //  ..... GoogleAuth.refresh() I got always same fail, gapi not defined
              this.googleLogin();  <----   HERE FAILS and give me GAPI NOT DEFINED
            }

It's its possible call googleLogin() -> ( GoogleAuth.signIn() ) from inside authService ? Because I always got NOT GAPI

HOW I FIXED THIS ?

Remove

GoogleAuth.init();

from my code

then add this to index.html

 // index.html

<head>
    ......
    <script src="https://apis.google.com/js/platform.js?onload=onLoad"></script>
</head>

<body>
  <script>
    gapi.load("client:auth2", function() {
    gapi.auth2.init({
      client_id: "653953884673- XXXXXXXXXXXXXXXXe.apps.googleusercontent.com" 
    });
  });
  </script> 
 .................
</body

Obviously, change client_id: with your client ID (for web app) code.

Now, all OK, can login, logout, refresh and can call GoogleAuth methods from my authService.service.ts and also from app.component.ts.

NOTE: Updated removed 'async defer' from load script at head.

[juanmafont]

Second way to fix: First fix way is:

1 - At your application source directory create a 'scripts' dir:

    mkdir scripts  
    cd scripts

2 - Download platform.js from google. wget https://apis.google.com/js/platform.js

3 - Modify angular.json with:

"scripts": [{
              "input": "scripts/platform.js",
              "inject": false,
              "bundleName": "platform"
             }]

4 - Modify index.html:

 // index.html

<head>
    ......
    <script src="platform.js"></script>
</head>

<body>
  <script>
    gapi.load("client:auth2", function() {
    gapi.auth2.init({
      client_id: "653953884673- XXXXXXXXXXXXXXXXe.apps.googleusercontent.com" 
    });
  });
  </script> 
 .................
</body

[FabioGoncalves]

I did follow the tutorial (https://devdactic.com/capacitor-google-sign-in/) and I made it on web, but testing on android after I choose my google account it's stuck in google loading, any suggestion? I am using capacitor 3 with Vue

Ps: I tried all your suggestions and nothing :(

[rtpHarry]

Seems that the missing ingredient is outlined in the docs here:

• https://github.com/CodetrixStudio/CapacitorGoogleAuth#web

(which is to call the init function from the correct location depending on your framework)

[FabioGoncalves]

Oh I fixed it, if anyone has trouble follow those issues:

• https://github.com/CodetrixStudio/CapacitorGoogleAuth/issues/109

• https://github.com/CodetrixStudio/CapacitorGoogleAuth/issues/116

[AndreaIaco17]

GoogleAuth.init();

I'm using the new Capacitor 3 and I also got the same problem. I'm following the Devdactic tutorial (https://devdactic.com/capacitor-google-sign-in/).

If I call the GoogleAuth.init() and GoogleAuth.signIn() functions; in my login.page.ts file the error happens.

login.page.ts

// import '@codetrix-studio/capacitor-google-auth'; // capacitor v2

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

googleSignup() {

   GoogleAuth.init();
   GoogleAuth.signIn();

}

I needed to call GoogleAuth.init() on app.component.ts and then call GoogleAuth.signIn() on login.page.ts

app.component.ts

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

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

    GoogleAuth.init();

  }
}

login.page.ts

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

googleSignup() {

   GoogleAuth.signIn();

}

true fine 👍