Ionic Firebase Tutorial – Google Login

This article, we’ll learn how to implement firebase google authentication using Ionic. Before we starting we need to create google reverse client id for adding a plugin. please refer https://codesundar.com/create-reverse-client-id-for-google-login/ for detailed instructions

Let’s create new project & Add required dependencies

ionic <span class="hljs-keyword">start</span> firebasegoogleauth blank
cd firebasegoogleauth

ionic cordova platform <span class="hljs-keyword">add</span> android
ionic cordova platform <span class="hljs-keyword">add</span> ios

ionic cordova <span class="hljs-keyword">plugin</span> <span class="hljs-keyword">add</span> cordova-<span class="hljs-keyword">plugin</span>-googleplus <span class="hljs-comment">--save --variable REVERSED_CLIENT_ID=myreversedclientid</span>
npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save @ionic-native/google-plus</span>

npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save firebase</span>

Working with app.component.ts & app.module.ts

After adding all plugins and packages, we need to initiate our firebase inside app.component.ts

firebase.initializeApp({
<span class="hljs-symbol">  apiKey:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  authDomain:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  databaseURL:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  projectId:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  storageBucket:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  messagingSenderId:</span> <span class="hljs-string">"xxx"</span>
});

We need to declare plugin inside app.module.ts

import { <span class="hljs-symbol">GooglePlus</span> } from <span class="hljs-string">'@ionic-native/google-plus'</span>;
.
.
.
.
providers: [
    <span class="hljs-symbol">StatusBar</span>,
    <span class="hljs-symbol">SplashScreen</span>,
    <span class="hljs-symbol">GooglePlus</span>,
    {provide: <span class="hljs-symbol">ErrorHandler</span>, useClass: <span class="hljs-symbol">IonicErrorHandler</span>}
  ]

Working with home.html

Let’s create a new button for login with google.when the user clicks that button, we need to take two decision.

if the app is running on a browser, we need to call this code for a signup purpose

<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.platform.<span class="hljs-keyword">is</span>(<span class="hljs-string">'core'</span>)) {
  firebase.auth().signInWithPopup(new firebase.auth. GoogleAuthProvider()).then(gpRes => {

    <span class="hljs-keyword">this</span>.displayToast(<span class="hljs-string">'Login Success'</span>)
    <span class="hljs-keyword">this</span>.userData = gpRes.additionalUserInfo.profile;

  }).<span class="hljs-keyword">catch</span>(err => <span class="hljs-keyword">this</span>.displayToast(err)); 
}

If the app is running on the device, we can log in with the cordova-google-plus plugin. Note: Here we need to use webclientid not reversed client id

<span class="hljs-keyword">else</span> {
  <span class="hljs-keyword">this</span>.googleplus.login({
    <span class="hljs-string">'webClientId'</span>: <span class="hljs-string">'YOUR CLIENT ID'</span>
  }).<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">(success)</span> =></span> {
    <span class="hljs-built_in">console</span>.log(success);
    let credential = firebase.auth.GoogleAuthProvider.credential(success[<span class="hljs-string">'idToken'</span>], <span class="hljs-literal">null</span>);
    firebase.auth().signInWithCredential(credential).<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">(data)</span> =></span> {
      <span class="hljs-built_in">console</span>.log(data);
    }).<span class="hljs-keyword">catch</span>(<span class="hljs-function"><span class="hljs-params">(err)</span> =></span> <span class="hljs-keyword">this</span>.displayToast(err));
  }, err => <span class="hljs-keyword">this</span>.displayToast(err));
}

Download latest source code