Ionic 2 – Google Auth with Firebase

Hi Friends,

Hope you are all well. This post is a response to a lot of our friends asking me to do a video on Google Authentication with firebase and so here we go.

Let’s begin.

The code for this post is available here.

Scaffold out an application using the Ionic cli.

Then follow the instructions here to get a client ID from the Google Developers portal.

(Alternatively you could watch the video where I have shown the process).

The client ID that you receive will look something like this.

xxxxxxx.apps.googleusercontent.com

Reverse it and make it look like this

com.googleusercontent.apps.xxxxxxxx.

Now use this client Id and install the google plus native plugin in your app using the below command.

Use your reversedclientid in the REVERSED_CLIENT_ID variable.

We will need a SHA-1 string to avoid a 12501 error. To do that generate one using the below command.

Copy the SHA1 string. Now open up firebase and create a new app. Then click on Add an android app, you will see a screen like this.

pic1

Get the package name from your config.xml and add it here. Then paste the SHA-1 string here as well and click on register app. That’s it.

Install firebase and angularfire2 as shown below.

Create a new page called login with the below command.

Open up app.module.ts and modify it as shown below.

Open up login.html and simply place a button between the <ion-content> tags.

Now open up login.ts and add the below code.

Let’s break this down.

We are passing the webClientId variable while we are logging in to get the idToken in the response.

We then take this idToken and then use it to create a firebase credential in this line.

Once this credential is created we then use it to sign in into our app. If the login is successful then we get redirected to the Home Page. That’s it.

Don’t forget to do a slight tweaking in your app.component.ts file so that our app always takes us to the Login Page as shown below.

Now run the app. If everything goes fine, you will see that we could successfully login into the app using google credentials and also notice the user account in your users tab under Authentication in your firebase account.

Please watch the video as I feel I have explained it a bit more clearly in the video.

Hope this helped you guys. If you found it helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

 

 

Liked it? Take a second to support admin on Patreon!
  • Stanley Masaku

    Thanks great work worked flawlessly

  • Yudha Praditya

    hi Raj, this good tutorial, but why i still get error 10, both, on my own code and yours code from github, can you explain that, and i will apreciate if you can help me fix this..

    thanks in advance..

    • Mihai Balaban

      hello, did you find any slution?

      • Yudha Praditya

        nope man…
        its still confuse on me..
        at last i disable the feature of my apps..