If you want to add a social sign-in to your Ionic app, adding Capacitor Google sign-in is easy to do after some initial setup.
Along with the new, Google sign in is one of the most popular social authentication providers.
For this tutorial, the only thing you will need is a Firebase project, so make one now or use one of your other projects.
Setting up the Capacitor Google Sign app
We need one more plugin from the Capacitor community for the Google Sign, so for now, set up a blank project and add the plugin like this:
We also have to set up the native apps, so you should set the right bundle ID for your app right away. You can add it to the CLI command when making a project, or you can just set it right now in your capacitor.config.json:
Of course, you should choose a different bundle ID than mine. It's the one you'll use when you publish your app for iOS and Android.
After the first build, you can now add the native platforms:
Now comes the setting for the google sign in...…
Getting ready for Firebase Google Sign In
As we've already said, we need our Firebase project now. First, open the Firebase project settings, click Add app, and then choose Android.
Make sure you use the bundle ID that is already in your capacitor.config.json.
We also need a SHA-1 signing certificate, which is what you usually use to sign your APK for the Play Store at the end. But we need it now in order to connect our app to Google services.
First, you can get the fingerprint of your debug key, which is created 99% of the time automatically at ~/.android/debug.keystore on your computer.
To find out this key output, run:
The default password for this key should be "android." For me, hitting "enter" was also enough.
If you have problems on a Mac because Java is not installed, go to the Oracle downloads page and install the latest JDK.
Copy the value after SHA1 from the output of your keytool command and paste it into the Firebase wizard to register our app.
This is your debug SHA1. When you sign your final APK to go live, you'll also need to add this fingerprint for the release key to your Android app inside Firebase, but there's a simple "Add Fingerprint" button.
Now you can download the google-services.json file and put it in your Ionic project's android/app folder. To make the value available to our Android app, we also need to add an entry for the server_client_id to the android/app/src/main/res/values/strings.xml file:
Now all you have to do is switch out the fake key with your real one. But where is your real key?
The key is already in your google-services.json file, but there are other keys as well, and if you take the wrong key, you'll get an error when you try to sign in.
The best way to find the right key is to go to the Google APIs console, where a project was already made for your Firebase project.
Now, you need to copy the Client ID from the Web client row in the OAuth 2.0 Client IDs section. There's a copy symbol right after the ID, so just use that.
This is now your client ID, so copy and paste it into the Android strings file we just opened and set it as your server_client_id. We'll need it again soon, too.
Inside the Google APIs console, there is also a warning about the OAuth consent screen, which you should fill out now or you will get in trouble later. It's basically a setting for the consent screen that your users will see when they use the Capacitor Google sign in.
I always had trouble setting up the OAuth consent screen, and my changes were never saved, and going through the wizard didn't really help. In the end, what really fixed the problem.
Inside your Firebase project, go to the Authentication menu, click on the Sign-in method tab, and turn on Google sign in. After clicking "safe," this fixed all the problems with the OAuth consent screen.
Google Sign In Preparation – Android Capacitor
We're not done yet, but we need to tell Android about the Capacitor plugin we installed. So, we need to open android/app/src/main/java/com/projectName/capalogin/MainActivity.java, which is where the native Android app starts, and add two lines to import and use our plugin:
Since the client ID might still be in our clipboard, we can quickly add it to another file to test Google Sign In on the web as well.
Open src/index.html and add the following line to the head tag of your page, replacing "client ID" with your client ID:
Also, we need the value in capacitor.config.json to set up the plugin correctly, so open it and add the whole plugins block to your configuration file:
Sure, use your real ID again. Don't be my dummy.
Capacitor Implementation Google Sign In
Now, things are very easy because there is only one line of code to use the plugin. Open home/home.page.ts and make the change to:
import { Component } from '@angular/core';
import '@codetrix-studio/capacitor-google-auth';
import { Plugins } from '@capacitor/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: [ 'home.page.scss' ],
})
export class HomePage {
userInfo = null;
constructor() { }
async googleSignup() {
const googleUser = await Plugins.GoogleAuth.signIn(null) as any;
console.log('my user: ', googleUser);
this.userInfo = googleUser;
}
}
After the sign-in, we don't really do anything with the information, but you can easily connect this to the general Firebase authentication to create a new user.
Let's add a button, now. Just go back to home/home.page.html and change it to:
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Ionic/Angular GoogleLogim
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button (click)="googleSignup()">Sign in</ion-button>
<ion-card>
<ion-card-content>
{{ userInfo | json }}
</ion-card-content>
</ion-card>
</ion-content>
Now you can use the sign-in in your browser (if you have problems, clear your cache) and on your iOS and Android apps.
Conclusion
Setting up Capacitor Google Sign In is mostly a problem with the configuration, which can easily cause testing to fail if it isn't done right. But if you follow the steps exactly as shown above, your app now has a powerful social authentication feature.