Google Login on Android

Introduction

In this guide, you will learn how to setup Google Login with Capgo Social Login for Android. I assume that you have already read the general setup guide.

In this part, you will learn how to setup Google login in Android.

The Android SHA1 certificate is beyond painful and I wouldn’t wish it on anyone to have to set this up. The following steps assume the simplest scenario of an app that isn’t published to Google Play Store and that is only used by the local simulator, or development hardware device.

If you have deployed your app to Google Play Store, you MUST add an additional Android client ID that contains the SHA1 from Google Play console for production releases. You can find the SHA1 hash that Google Play uses to sign your release bundle under Test and release > Setup > App Signing.

Finally, it’s important to mention that if you mess up, the error will NOT be obvious. It may be very difficult to debug. If you struggle with the setup, please look at the Github issues.

Additionally, you may look at the troubleshooting section of the Google Login setup for Android for more information.

Create an Android client ID.
1. Click on the search bar
2. Search for credentials and click on the APIs and Services one (number 2 on the screenshot)
3. Click on the create credentials
4. Select OAuth client ID
5. Select the Android application type
6. Open Android Studio
7. At the very bottom of the navigator, find the Gradle Scripts
8. Find build.gradle for the module app
9. Copy the android.defaultConfig.applicationId. This will be your package name in the Google console
10. Now, open the terminal. Make sure that you are in the android folder of your app and run ./gradlew signInReport
1. Scroll to the top of this command. You should see the following. Copy the SHA1.
1. Now, go back to the Google Console. Enter your applicationId as the Package Name and your SHA1 in the certificate field and click create
Create a web client (this is required for Android)
1. Go to the Create credentials page in Google Console
2. Set application type to Web
3. Click Create
4. Copy the client ID, you’ll use this as the webClientId in your JS/TS code

Modify your MainActivity

Please open your app in Android Studio. You can run cap open android
Find MainActivity.java
1. Open the app folder
2. Find java
3. Find your MainActivity.java and click on it

Modify MainActivity.java. Please add the following code

import ee.forgr.capacitor.social.login.GoogleProvider;
import ee.forgr.capacitor.social.login.SocialLoginPlugin;
import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
import com.getcapacitor.PluginHandle;
import com.getcapacitor.Plugin;
import android.content.Intent;
import android.util.Log;
import com.getcapacitor.BridgeActivity;

// ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

      @Override
      public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
          PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
          if (pluginHandle == null) {
            Log.i("Google Activity Result", "SocialLogin login handle is null");
            return;
          }
          Plugin plugin = pluginHandle.getInstance();
          if (!(plugin instanceof SocialLoginPlugin)) {
            Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
            return;
          }
          ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
        }
      }

      // This function will never be called, leave it empty
      @Override
      public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

Save the file

Use Google Login in your application

First, import SocialLogin

import { SocialLogin } from '@capgo/capacitor-social-login';

Call initialize. This should be called only once.

// onMounted is Vue specific
// webClientId is the client ID you got in the web client creation step not the android client ID.
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
    }
  })
})

Call SocialLogin.login. Create a button and run the following code on click.

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))

Configure the emulator for testing
1. Go into Device manager and click the plus button
2. Create a virtual device
3. Select any device with a Play Store icon
  
  As you can see, the pixel 8 supports the Play Store services
4. Click next
5. Make sure that the OS image is of type Google Play. IT MUST be of type Google Play
6. Click next
7. Confirm your device. You can name your emulator as you prefer
8. Go into Device Manager and boot up your simulator
9. After the simulator boots up, go into its settings
10. Go into Google Play
1. Click Update and wait about 60 seconds
Test your application

If you did everything correctly, you should see the Google login flow working properly: