In this article we are going to integrate Google Sign -In with Firebase. To integrate it, we need to setup Google Credentials manager to get API keys so we can communicate with our Firebase app. If you want to see Facebook auth integration, please check this article.

1. First go to Google API Console at https://console.developers.google.com and login with your Google account. Now create New Project by clicking + icon. Enter you Project Name.

2. Then next step to add Credentials. Go to Credentials tab by left side menu and click on Create Credentials button and choose OAuth client ID option.

3. Create client ID by choosing Application Type. Here to enable Google auth in mobile app, we have to select Android application type.

4. Choose Android application type and give your application name. In the Package name field, enter your Android app’s package name. Package name is that name which is your app’s bundle id so for this you have to open your project‘s config.xml file, found in the root directory of your project. Take note of id below:

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;widget id="com.mychat.ionic" version="1.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"&amp;amp;amp;gt;;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

5. Also add SHA-1 signing-certificate fingerprint to restrict usage to your Android apposite generate SHA-1 signing-certificate use the following command :-

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
keytool -exportcert -alias androiddebugkey -keystore path-to-debug-or-production-keystore -list –v&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;

In this command you have to give your keystore path and keystore alias name. For example-

&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;keytool -exportcert -alias com.mychat.ionic -keystore D:\MyChat.keystore -list –v&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;

 

6.  Now enter the generated Certificate fingerprints SHA-1 in textbox and click Create button.

 

7.  This will generate your client Id which will be used in our app.

8.  Now you can also create credentials for web application type. To get web application client Id and client secret. This Id can be used in our code to get idToken of Google project.

Note: – This Web application Credentials setting is optional- On Android, this must be included to get an idToken. On iOS, it is not required.

Now Google API console setting is completed.

9. Here we used Google login with Firebase so we have to add some settings in Firebase also.

10.  Open Firebase console at https://console.firebase.google.com/ and go to “Authentication” page from left side bar menu and then go to Sign-in-method tab.

11.  Now Enable Google Sign-in providers and also enter you Google Web client ID which is web application client id and web application client secret and save the credentials.

Firebase settings are also completed.

12. Now open your project and install plugin cordova-plugin-googleplus by command window

&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;npm install --save @ionic-native/google-plus&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;

Note: – reversed client id is your android client id but you have to give this is reversed form. For example

1231273B1J2BHJH1HN.apps.googleusercontent.com

Reversed becomes:

com.googleusercontent.apps.1231273B1J2BHJH1HN

13.  Now for Google authentication on Google login button you can use the following code in your ts file :-

&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;import { GooglePlus } from '@ionic-native/google-plus';&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;&amp;amp;amp;amp;amp;nbsp;&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;constructor(private googlePlus: GooglePlus) { }&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;...&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;this.googlePlus.login({&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;'webClientId':XXXX.apps.googleusercontent.com' // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;}).then(res =&amp;amp;amp;gt;{&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;// to login Google with Firebase&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;const firecreds = firebase.auth.GoogleAuthProvider.credential(res.idToken);&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;firebase.auth().signInWithCredential(firecreds)&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;.then((user) =&amp;amp;amp;gt; {}).catch((error) =&amp;amp;amp;gt;{});&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;}).catch(err =&amp;amp;amp;gt; console.error(err));&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;

14.  So we have completed all steps to run Google authentication in app.

 

Google Authentication With Firebase

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top