Ionic 4 | Ionic Google Login with Firebase without fail.

ionic4

At the end of this tutorial, you will be able to use google plus plugin in your ionic 4 application. We will use google plus Cordova plugin and firebase to use this feature in our app.

Installation

Install the Cordova plugin to your ionic 4 application
Step 1 – ionic Cordova plugin add Cordova-plugin-google plus
Step 2- npm install @ionic-native/google-plus

After installing the plugin to your ionic 4 apps, you should create a firebase account, and create an application. In the authentication, section enables Google sign in for your application.

Once enabled it will let you download the google-service.jsonconfiguration file, you’ll store this file in your project’s root, right next to the package.json file.

There are two certificates you’ll need, one for production and one for development, in this tutorial we’ll get the development certificate sign-in, and in the end, I’ll show you where to get the production one.

$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Enter the password and you will get the SHA 1 Key, please use this key in firebase. Else you will get the Error 10 while debugging.
For the production environment, you must generate the key and use the sha1 key in your firebase application to enable google sign in.

Download the google-services.json and put this file to the root folder of your application. Now its time to write some code.

Import GooglePlus module to app.module.ts
import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

 constructor(
    private GooglePlus: GooglePlus,
  ) {}

//For login 
 this.GooglePlus.login({})
      .then((res:any) => {
You will get the response.
      })
      .catch((err) => console.error(err));
//For logout  
this.GooglePlus
          .trySilentLogin({
            offline: false,
          })
          .then((res: any) => {
            console.log(res);
            this.google.logout().then(
              (res: any) => {
                console.log(res);
              },
              (err) => console.log(err)
            );
          });

Thank Note

First of all thank you for giving me your time and attention, if you’re experiencing any issues please comment.

Leave a Reply

Your email address will not be published. Required fields are marked *