Firebase has made implementing Google OAuth seamless for web applications, but when it comes to native mobile apps developed using Ionic, developers face a few unique challenges. Unlike web apps that can utilize standard browser pop-ups for user authentication, native mobile apps require a more integrated approach. In this article, we’ll walk through the steps necessary to implement Google OAuth in Ionic applications usable on both iOS and Android devices, while also supporting Progressive Web Apps (PWAs).

Understanding the Basics of Google OAuth in Ionic

When developing mobile applications, especially with Ionic, we must take into account how to manage authentication. For Google login, it’s not just about creating a pop-up window; we need to incorporate specific Cordova plugins necessary for accessing native device features. This article focuses on building Google login from scratch, ensuring it works across various platforms: iOS, Android, and Progressive Web Apps.

Setting Up Your Ionic App

Starting from Scratch

We’ll begin with a new Ionic app setup. Follow these initial steps:

1. Create your Ionic application using the Ionic CLI.
2. Set a custom project ID that you’ll use to register your app on Firebase. Make sure your ID follows the format com.brandname.projectname.

Installing Dependencies

Next, we need to install Firebase and AngularFire into your project. To do that, you can run the following commands:

npm install firebase @angular/fire

This ensures our app interacts correctly with Firebase services.

Configuring Firebase for Your App

Registering iOS and Android Apps

In your Firebase console, add a new app for your project. Start with iOS by entering your project ID, follow the given steps, and you’re set for iOS. For Android, the process is slightly more involved:

1. Enter the same project ID as you used for iOS.
2. Generate a debug signing certificate using the command line, which is vital for local development and submit this certificate in your Firebase project.

Adding Cordova Plugins

To enable native Google login, you need to install the Ionic Native Google+ plugin along with the corresponding Cordova plugin. The Google+ plug-in will facilitate the authentication process for mobile devices. Don’t forget to configure the reversed client ID, which you can find in the Google service plist file in the Firebase console.

Writing the Code

Setting Up the Login Component

Your next step is to create a dedicated login component. Start by defining your imports to include AngularFire and Google+. Also, add your Firebase configuration settings in the appropriate area.

import { AngularFireAuth } from '@angular/fire/auth';
import { GooglePlus } from '@ionic-native/google-plus/ngx';  

In your login component, declare a user observable that you’ll use to manage user authentication state:

user$: Observable<User | null>;

Implementing Google Login Logic

You will need to handle user login differently depending on whether the app is running on a native device or a web app. Here’s how you can implement your login functionality:

1. Native Login: Check if you’re running on Cordova. If true, invoke the native Google login method.
2. Web Login: If not, use the standard pop-up login for web users.

Here’s a sample method for handling login:

async login() {
  try {
    if (this.platform.is('cordova')) {
      const res = await this.googlePlus.login({
        webClientId: 'YOUR_WEB_CLIENT_ID',
        offline: true,
      });
      const credential = firebase.auth.GoogleAuthProvider.credential(res.idToken);
      await this.afAuth.signInWithCredential(credential);
    } else {
      await this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    }
  } catch (error) {
    console.error("Error during login: ", error);
  }
}

Make sure to replace YOUR_WEB_CLIENT_ID with the actual web client ID obtained from the Google Cloud Platform console.

Creating the HTML Template

Your login component will require users to sign in and potentially sign out. Here’s an approach to implement the HTML side, utilizing Ionic’s components to enhance the user interface:

<ion-content>
  <div *ngIf="(user$ | async) as user">
    <p>Welcome, {{ user.displayName }}</p>
    <ion-button (click)="logout()">Logout</ion-button>
  </div>
  <div *ngIf="!(user$ | async)">
    <ion-button (click)="login()">Login with Google</ion-button>
  </div>
</ion-content>

Testing Your Application

Once your app is set up and the code has been implemented, it’s time for testing. You can test your Ionic app using Android Studio for Android devices or Xcode for iOS devices. Both environments should provide a smooth experience in executing the Google login flow.

Conclusion

Implementing Google login using Firebase in an Ionic app may seem daunting at first, but by following the structured approach outlined above, you can achieve a secure and seamless authentication process suitable for both iOS and Android platforms. Not only does this enhance user experience, but it also empowers your application with reliable authentication capabilities.

If you found this guide valuable, consider subscribing for more insights and resources on building powerful mobile applications. Dive deeper into Ionic app development today!