Implement Google login in Ionic 5 apps using Firebase

Published in

Enappd

13 min readAug 11, 2020

Implement Google login in Ionic 5 apps using Firebase

In this post, you will learn about ionic firebase authentication and how to implement a Google authentication in Ionic 5 apps using Firebase 🔥.

We’ll cook a sample app 👨‍🍳 , where users can login using their Google account. After login, users can see their basic profile information on the home page, and sessions are saved in Firebase.

Social logins — What and why

You might also choose to use your Google Account to sign in to other sites or apps. It’s helpful to use social sign-in with Ionic for your users who would rather not create and remember another username/password combination. Instead, you can allow users to sign in with accounts they already own.

You don’t need to

Store hashed passwords to compare
Handle sending a signup email, and
Reset passwords.

The user’s chosen provider will handle all of this for you. So we will be adding authentication to Ionic 5 Apps with Firebase in this article.

Google login

There are several reasons why you should start Integrating Google Sign-In into Your Android App and also consider integrating Google Sign-In into your web app

Ease of use — When a new user uses your app, only two buttons clicks are required to log in using Google. In another scenario, the user will have to type in an email/password and log in. It is so easy to authenticate Using Google Sign-In on Android.
No “forgot password” — When your app uses Google login, the user does not have to worry about forgetting the password for your app’s login.
No “verify email” — If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Google login will always have a valid email/phone number associated.
Single solution — Google login can allow your users to use single login credentials across multiple devices. For android phones, Google login comes as default, since you log into, may apps using same Google account
Google integration — If your app uses Google authentication, you can use Google APIs inside your app as well. This can include fetching user tweets etc.
Trust — Nowadays, people generally trust social logins over custom email logins. Social logins follow standard privacy protocols and are more reliable for information sharing. So you can also use Google as login in your web app with OAuth2.

After discussing Social login its time to implement it in your apps.

Ionic Authentication

The ionic framework has been around for around 5 years and has been very popular among developers for its ease of usage over Swift / Java. Also in Ionic 5, you get to keep single source code for both Android and iOS app.

What more can a developer ask for!

Ionic 5 is the latest version (at the time of writing this post) of Ionic and is much more reliable and robust than previous versions.

There are several ways of Authentication in Ionic 5 apps

Social logins — Google, Facebook, Instagram logins etc
Create your own back-end — You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over user authentication. But this method is the most time taking one as well.
Back-end as a Service (BaaS) — These platforms provide you with a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms.
Firebase is the most popular among these for mobile apps, which we’ll explore in the next section.

Firebase

Firebase is a Backend-as-a-Service (BaaS) platform. It started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and a variety of functionalities available on it.

A lot of quick integrations are available with Firebase. Some of these are listed below:

Real-time database
Email Authentication
Social logins
In-app messages
Push notifications
Analytics
Crashlytics
Remote config

Firebase is quickly growing to become the most popular mobile app back-end platform.

Firebase Authentication Options

Firebase not only provides ready-made email authentication but also provides authentication using a variety of social logins. You can see the authentication options available with Firebase.

Authentication options available in Firebase

We will use Firebase to store user profile information once the Google login is done. This is the preferred method, as it is reliable for both apps and PWA. Let us now move to how to integrate Google login into an Ionic app with firebase.

Steps for Ionic Google Authentication using Firebase

We will follow these step-by-step instructions to create our Ionic 5 app with Google authentication.

Step 1: Setting up a latest Ionic CLI

Step 2: Creating an Ionic 5 app

Step 3: Google Developer Console — Create your app

Step 4: Add your Platforms to Google

Step 5: Get a key on Google Cloud Platform

Step 6: Enable Google Sign-In in Firebase project

Step 7: Install the Cordova Google Plugin to connect your app with Firebase

Step 8: Authenticate Users using Google

Step 9: Store the Google auth IdToken and AccessToken in Firebase

Step 10: Use Firebase to auto-login the user

Step 11: Test your app on Android

Step 1: Setting up a latest Ionic CLI

Make sure the latest version of the Ionic CLI is installed.

Jump to Step 1.1 of Installation if you don’t have ionic installed in your system. Otherwise, you will be able to check the installed version by running the command ionic --version

(At the time of writing the blog, my node version is 12.13.1)

Step 1.1: Installation

The Ionic CLI can be installed globally with npm:

$ npm install -g @ionic/cli

And you are good to go. Check your environment information using

$ ionic info

This will display your runtime environment, something like the following (Android SDK tools and XCode will require separate installations)

You will also need the latest browser for the development environment.

To create production builds in Android and iOS, it would require Android Studio and XCode respectively.

Step 2: Creating an Ionic 5 app

We’ll create an app using the below command:

$ ionic start google-login tabs

At this point, we only need to know that this command creates a tab layout app with the following structure.

Step 3: Google Developer Console — Create your app

Let’s start this step by setting up everything we’re going to need from Google to get our app working.

We can divide it into three steps:

Step 2.1: Generate a Keystore

Step 2.2: Create a Google Cloud Project

Step 2.3: Create an OAuth key

Step 2.1: Generate a Keystore

Prerequisites before generating the key — A package name which will help you to connect the app with the project.

Open your config.xml and make sure that your package name is what you want it to be for Android or iOS app. This is set to io.ionic.starter by default. Change that to whatever you like, and that will be your bundle ID.

For android:

With Android Studio setup, your system gets a default debug.keystore . You can use it for test purpose, but always create a new keystore for each new app if you’re going to production.

After confirming that the build tools are installed, the Keystore should be available to us for getting the SHA-1 value we need for the Android Build part of the process. The Keystore is used to hold the signing keys you use for the apps you build.

Run the following command at the terminal

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

Next, you’ll need to add some information about your key including a password and a Keystore will be created.

You can learn more about this command at the link given below

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

For Windows Users:

Get SHA-1 using the following command: Copy the following command to your terminal.

Generate SHA-1 key Command

For other Users:

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

Caution : Do not forget to replace your_user_name with your user name.

Step 2.2: Create a Google Cloud Project

Lets create a new project which will be used to generate the credentials for our app. We need to create both iOS and Android apps in the Google Developers Console

If you do not have any projects in your Google Cloud Console then you might see a different screen with a button to CREATE A NEW PROJECT.

If you see a similar screen as given above , click on the top bar over the drop button and click on NEW PROJECT button to create and you’ll see the following window:

Provide a name and a location for your project to create a project . Here, we’ll choose the location to be No Organization.

Step 2.3: Create an OAuth key

For the first time, you will need to complete the credentials creation process as follows:

Go to API credentials tab in Google Console
Click on Create Credentials

Choose OAuth Client ID

And then select your application type in the next step.

Step 4: Add your Platforms to Google

For Web Application

Which is also reflected in your OAuth2.0 client Ids

Now, click on Edit button in front of highlighted Web Client ID as shown below.

For Android

Select the application type as Android,
Provide a name, Package name and add the SHA-1 from your Keystore that was created earlier.

Caution : Make sure you don’t leave it with the default value, as it might conflict later on with other similar apps if you make your way to App stores.

Highlight again the following fields:

Name: Give your app name.
Package name: which we use in config.xml file of the ionic app.
SHA-1 key — the one we created earlier. To get this use the command:

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

Important: The keystores are different for debug and release versions. For testing purpose the debug.keystore (default) works good. But when you are going for production, make sure you repeat these steps with your release keystore. Otherwise you’ll face login errors.

The above command will print the SHA1 in your terminal. Copy it and paste in Signing-certificate fingerprint field.

After that, you’ll see a dialog with a client ID. Copy this client ID to your notepad, as it is to be used in the next step.

For iOS
In your Firebase console, create an iOS app

Create iOS App

For iOS setup, you need to supply the bundle ID. This is the value in config.xml , same as package name.

Step 6: Enable Google Sign-In in Firebase project

Now that everything is set up on Google side, we need to go into our Firebase console and enable Google authentication for our app.

‌To enable Google, you’ll need to go to your Firebase Console and locate the app you’re using (or create a new Firebase project)

Once you’re inside the app’s dashboard, you’re going to go into Authentication > Sign-In Method > Google and click the Enable toggle.

And save your web client Id and Secret in your Firebase app.

Note: Client ID and Secret is it the same key we got from Google cloud

or Firebase.

Step 7: Install the Cordova Google Plugin to connect your app with Firebase

Let us install the Cordova plugin for Firebase Authentication

Open your terminal and run the following command

$ ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid

Caution: You’ll need to replace the values in REVERSED_CLIENT_ID with your specific credentials which will be in your Google Developers Dashboard.

Run this command‌ to install Google package from Ionic Native

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

We also need to install @angular/fire npm module and Firebase, which actually connects the Firebase functionality to the Ionic app. To install the module, run

$ npm install firebase @angular/fire --save

Include environment ,AngularFireModule and AngularFireAuthModulein app.module.ts

Import environment and AngularFire modules in app.module.ts

Notice that Firebase is initialized in your app with

AngularFireModule.initializeApp(environment.firebaseConfig)

where environment.config is the Firebase config you picked from Firebase project.

Connect you app with Firebase

Details of this step can be found in our blog How to connect Firebase with Ionic 5 App

To connect you app to Firebase, you first need a Firebase project. From the project you will pick up you Firebase config parameters and include them in an environment file at the root of your Ionic project. The environment file will look like the following.

Firebase config params in environment file

You can create two different environment files for development and production environments.

Step 8: Authenticate Users using Google

The first thing we need to do is to get the Authorization idToken and AccessToken from Google. To do that, we need to import Google plugin from Ionic Native and ask our user to log in. The import and login functions will be as follows.

tab1.page.html for Google login

tab1.page.ts for Google login

This function will give you Google idToken and AccessToken and from this tokens we will login user to Firebase app.

Step 9: Store the Google auth IdToken and AccessToken in Firebase

In previous step, the authentication is done via Google app on your phone. Once logged in, you will receive a idToken and accessToken in response. This info will be used to connect to Firebase in the success of Google login.

So, in short we have logged in via Google, and created a Firebase user using the Google idToken and accessToken . From now on, Firebase can handle your login / logout in the app. After we store the token in Firebase, we will toggle the condition using the isGoogleLogin.

Get user profile info

In Profile page, we will get the profile information of the user using Firebase Auth Module again.

tab1.page.ts — Getting user profile and Logout function

Logout function

Since Firebase is now handling the login/logout, the logout function in tab1.page.ts page will look like following.

Step 10: Use Firebase to auto-login the user

We have already covered the following:

Login with Cordova Google plugin
Pass Google idToken, accessToken to Firebase
Fetch user profile info via Google plugin
Logout using Firebase

Let us see ionic Google login with firebase now. Now, if the user leaves the app without logout then we want the app to auto-login the user next time when he starts the app. For this, we will use Firebase’s onAuthStateChanged function at the start of the app. If there is a valid user logged in, it will return the user’s information. Our tab1.page.ts file will look like following.

This completes our Firebase Authentication

Step 11: Test your app on Android

To test this app you’ll need to run it on a real device. You can do it by generating an APK using the command ionic cordova run android

So, run the below commando to generate you APK.

$ ionic cordova build android

Conclusion

In this post you learnt how to implement Google login in your Ionic 5 app and the process of integrating Google Sign-In in Android App. We demonstrated ionic Google authentication using firebase and also learnt how to auto-login your user using info stored in Firebase. The Firebase integration done for Authentication, can be used for various purposes like Database CRUD operations, push notifications, analytics etc.