Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

Ionic Google Login Tutorial

(Ionic login with google plus) explains about implementing google plus login using cordova-plugin-google-plus plugin with ionic native. Create Client Reversed Client Id: https://codesundar.com/tutorials/create-reverse-client-id-for-google-login/

Create a New Project & Change working directory

ionic start gplogin blank
cd gplogin

Add your platform

ionic cordova platform add android
npm install --save @ionic-native/googleplus

Add plugin

ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.877300201036-6lp9u547lbqcsk7hk3qn4tt35iopqh5u


ionic cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.877300201036-6lp9u547lbqcsk7hk3qn4tt35iopqh5u

working with home.html

<ion-content padding>
    <div *ngIf="isUserLoggedIn" style="text-align:center">
        <img src="{{userInfo.imageUrl}}">
            <button ion-button clear (click)="logout()">Logout</button>
<ion-footer *ngIf="!isUserLoggedIn">
    <button ion-button block (click)="loginWithGP()">Login with Google+</button>

Explanation: In the above code, we have created div content for displaying users information and footer for login if a user is not logged in

working with home.ts

    }).catch( err => console.log(err));
    this.gp.logout().then( ()=>{

Explanation: In the above code we have created an object for google plus module. Using that, we’re calling both login and logout operations.