Adding Google Sign In to your Ionic (3,4,5) app

6 min readFeb 20, 2020

Developing authetication systems to our applications is a very recurring task, specially if your app generate some type of personalized information. Like a ToDo app, where task data is unique information to each user in the app.

In many applications like the one mentioned above, the user needs to make a prior registration, so yes, they have an account, but today we live practically on the internet, many people have accounts on social networks, so why not take advantage of a registration that has already been done? Yes, this is a very nice way to have authentication in your app, without the user having to fill out an extensive registration form (again).

In this post, we will learn how to authenticate our users using Google. Users with a Google account will be able to use the information they already have in their GMail accounts to log into our app.

Step 1: Our app

For the purposes of this post we’ll create a very simple app using the command:

ionic start signin-google blank --type=angular

The above command is basic on the Ionic and details about it will be omitted here. For now, we only need to know that this command create a simple app with the following structure.

In the home.page.html file we’ll add a simple button with a click evento that calls a method named googleSignIn() and a interpolation to show data from user, and in home.page.ts file we’ll add this method (whitout content for now) and a property for user data.

Our files will be somone like:

So far there is nothing special about our app. Just a simple button tha calls a method that is empty and a property that will receive the data from user.

Well, we’ll start to change it. So let’s to the next step.

Step 2: Get a key on Google Cloud Platform

This step is the key to this tutorial and this is not a joke, it is just a coincidence.

We can divide it into three substeps. Are they:

Step 2.1: Generate a keystore

First of all create a key for your app. If you already hava a production app is very likely that you already have one. The command to generate is the follow:

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Once you run this command you’ll need to add some information about your key includind a password. After that a keystore will be created.

If you want more informations about this command and the params in it check this link

https://docs.oracle.com/javase/6/docs/technotes/tools/windows/keytool.html

Step 2.2: Create a Google Cloud Project

Access the Google Cloud console at https://console.cloud.google.com/ ans create a new project.

If you have no projects in your Google Cloud Console you’ll see a little bit different page. Someone with a button to CREATE A NEW PROJECT.

If you see a window like mine, you can click on the appbar over the drop button and click on NEW PROJECT button to create and you’ll see someone like:

To create a project give a name and a location. For this tutorial we’ll keep the Location value with No Organization.

Step 2.3: Create a OAuth key (the key what we want)

Once you created the project go to APIs & Services and go to Credentials. After click on CREATE CREDENTIALS and select OAuth client ID.

Select the application type as Android, give a name and add the SHA-1 from your keystore that was created earlier. To get this use the command:

keytool -keystore my-release-key.keystore -list -v

This command will print the SHA1 in your terminal copy and paste it on Signing-certificate fingerprint field.

Finally, add your package name, that you can get on config.xml file. In the image you can see our example:

After that you’ll see a dialog with a client ID. Copy and keep safe, we’ll use on next step so here we go.

Step 3: Adding the cordova plugin and the npm package

Now we have the needed informations so let’s back to our Ionic App to add the plugin.

To add the Cordova plugin run this command

ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=io.github.codesilva.loginapp --variable WEB_APPLICATION_CLIENT_ID=375229477893-860p1dmovp917ec0ckhereaisjrv4veo.apps.googleusercontent.com

This command will install the cordova-plugin-googleplus. Note the two variables. The first one is the package of your app, the same that you added to create the OAuth client ID.

The seconde is the WEB_APPLICATION_CLIENT_ID that you got after created athe OAuth client ID.

Once you have added the plugin run the follow command to instal the package to use the login.

npm install --save @ionic-native/google-plus

Wow! That was so tiring. But don’t stop now, we’ll enter the best part of this tutorial. Let’s code our signIn method.

Step 4: Writing the googleSignIn method

In the first step we created the googleSignIn with no content. Now is the moment so let’s implement this method.

Remember to add the plugin to your providers on your module. See how:

Now in your home.page.ts inject the GooglePlus and inside of googleSignIn method make a call for login(). Your code will be someone like:

That’all, our app is done! The last thing to do is test.

Step 5: Testing

To test this app you’ll need to run in a real device. You can do it generatin a APK (or Android App Bundle) ou using the command ionic cordova run android . Here we’ll use the first method.

So, run the below commando to generate you APK.

ionic cordova build android --prod --release

NOTE: You will need to compile with the--release flag because you will need to assign your application with the keystore file created in substep 2.1.

After, assin your app with the command:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore path-to-your-app.apk alias_name

With jarsigner you will sign your app. In this command change path-to-your-app.apk by the path to your app (it was not a joke, again).

Now you’re ready to test your app.

Summary

As you saw write this code was simple but gave to us the powerful of a third-party authentication.

Of course, this app only retrieve informations about the user. But from here you can already implement both signup and signin in your application.

See the full example at https://github.com/geeksilva97/ionic-google-signin

References

Question at StackOverflow: https://stackoverflow.com/questions/55293520/error-10-in-ionic-native-google-plus-login
Question at Ionic Forum: https://forum.ionicframework.com/t/problem-installing-google-plus-plugin/129353
Ionic Docs: https://ionicframework.com/docs/native/google-plus
Plugin Docs: https://github.com/EddyVerbruggen/cordova-plugin-googleplus