Integrate Google Sign-In into Ionic 3 using Firebase.

Gagan Sandhu
Aug 31, 2018 · 4 min read

In this quick tutorial we are just going to walk through the process of setting up the google authentication in our ionic app using firebase. I assume you already have an ionic app setup and you are here because you just to integrate google authentication into your application.

Prerequisites

To follow along with the tutorial, you will need these things first.

  1. Firebase account: We need to register our app into Firebase console.

Yeah that’s it.

Steps

  1. Setup & Configure Firebase.
  2. Install required plugins in your app.
  3. Write some code.

Step 1: Setup & Configure Firebase

We will be using two different methods for google sign-in. Native for mobile apps and regular redirect style for web clients.

To integrate native sign-in method, you need to link your app with your firebase account.

It’s simple, Just follow these steps:

First create a project here: http://console.firebase.google.com

After that you will see this screen,

Add your app in the project one by one for iOS and android.

Then go to Deploy ->Authentication and enable sign-in with google.

You need to save some configuration from the firebase too.

Click on the Web Setup button and copy the configuration object. Save this information somewhere, we will need it later.

Important: You need to whitelist your app’s signing certificate in your firebase app.

You will find this option in your app settings.

Just need one more configuration before we continue.

Go to https://console.cloud.google.com and then APIs and Services -> Credentials.

Copy Client ID for Web Client from the OAuth 2.0 table.

Save this Client ID, we will need it later.

Step 2: Install required Libraries

Run this command in your project root.

Install Firebase library

$ npm install firebase angularfire2 --save

Install Google Plus native plugin

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
$ npm install --save @ionic-native/google-plus

Note: You need to pass REVERSED_CLIENT_ID only if you are targeting iOS.

Step 3: Writing some code

I am going to create a separate component for google login.

$ ionic generate component google-login

Save Firebase config into your project

Create a new file auth.firebase.config.ts inside your src directory.

export const AUTH_FIREBASE_CONFIG = {
apiKey: "XXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXX",
projectId: "XXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXX"
};
export const AUTH_FIREBASE_WEB_CLIENT_ID = "XXXXXXXXXXXXXXX.apps.googleusercontent.com";

Remember, we saved all this information in previous step.

Import Firebase modules into your app.module.ts

imports: [
...
AngularFireModule.initializeApp(AUTH_FIREBASE_CONFIG),
AngularFireAuthModule,
AngularFireDatabaseModule,
...
]

Add google plus service to provides array

providers: [
...
GooglePlus,
...
]

File: components/google-login/google-login.html

<button *ngIf="!isLoggedIn" ion-button block (click)="signIn()" (tap)="signIn()"><ion-icon name="logo-google"></ion-icon> &nbsp; LOGIN WITH GOOGLE</button>
<button *ngIf="isLoggedIn" ion-button color="danger" margin-top="10dp" (click)="signOut()" (tap)="signOut()">Signout</button>

File: components/google-login/google-login.ts

import {Component, Input} from '@angular/core';
import {Platform} from "ionic-angular";
import * as firebase from "firebase";
import {GooglePlus} from "@ionic-native/google-plus";
import {AngularFireAuth} from "angularfire2/auth";
import {AUTH_FIREBASE_WEB_CLIENT_ID} from "../../auth.firebase.config";

@Component({
selector: 'google-login',
templateUrl: 'google-login.html'
})
export class GoogleLoginComponent {
@Input() isLoggedIn = false;
constructor(private platform: Platform,
private afAuth: AngularFireAuth,
private googleNative: GooglePlus) {
}

signIn() {
if (this.platform.is('cordova')) {
this.nativeSignIn();
} else {
this.webSignIn();
}
}

async nativeSignIn() {
try {
const credentials = await this.googleNative.login({
'webClientId': AUTH_FIREBASE_WEB_CLIENT_ID
});
await this.afAuth.auth.signInWithCredential(
firebase.auth.GoogleAuthProvider.credential(credentials.idToken)
);
} catch (e) {
console.log(e);
}
}

async webSignIn() {
try {
await this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
} catch(e) {
console.log(e)
}
}

signOut() {
this.afAuth.auth.signOut();
if (this.platform.is('android')) {
this.googleNative.logout();
}
}
}

Now you must want to know whenever the user signin/signout successfully. You can use AngularFireAuth authState observable to notify you every time this happens.

Use this code in any component to check for user’s auth status.

this.afAuth.authState.subscribe((res) => {
if (res) {
// user logged in, store your user in some variable
this.user = res;
}
});

You will have to important AngularFireAuth in the constructor for this to work.

That’s it, try it out.

Need more help, write in the comments section.

Gagan Sandhu

Written by

Web developer by profession. Develop mobile apps for fun. Curious for Machine learning.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade