Overview

This guide walks you through the complete setup of Google Sign-In for your iOS, Android, and web applications using the Median Social Login Plugin.

Prerequisites

• A Google Cloud Project (create one if you don’t already have one)
• Your App identifiers - for the setup below we will use:
  • iOS Bundle ID: co.median.ios.soclogin
  • Android Package Name: co.median.android.soclogin

Create or Select a Google Cloud Project

ℹ️

Already have a Google Cloud Project?

If you already have an existing Google Cloud Project for your website please skip this step and use your existing Google Cloud Project. You can skip to the next step to create your iOS, Android and Web OAuth Clients.

Log into your Google Cloud Account. Under the "New Project" page, name your project by entering a name in the field indicated. For example, see "MySocialLoginApp" in red box below.

Once your project is created you will need to configure the "OAuth consent screen". You can find the settings under APIs & Services > OAuth Consent screen as shown in the example below.

In the consent screen you will need to populate the App Information, Audience and provide Contact Information for your app. The following screens guide you through this process for our sample app.

Once you populated for form you will need to acknowledge the Google API Services: User Data Policy and click "Create" to finish the setup. This process will create your OAuth configuration and you should land on the following page which allows us to create the different OAuth clients as a next step.

You can dive right into the first account by clicking "Create OAuth client".

Create OAuth Clients

iOS OAuth Client

You can create your iOS OAuth client by providing the following information in the setup form:

• Application Type: iOS
• Name: Please provide a descriptive Name of your iOS App
• Bundle ID: Please provide the Bundle ID of your iOS app. For our example we will use co.median.ios.soclogin as mentioned in the overview section.

Please note the iOS OAuth Client ID once it has been created as we will use it in the next step.

iOS URL Scheme

For the Plugin Configuration you will need to create the iOS URL scheme from your iOS OAuth Client ID. The URL Scheme will be the reversed client ID. Follow the example below to create your own:

• Client ID:
  843254985318-c1q9b8809pul43h3q5u1q5t6ki0l10en.apps.googleusercontent.com
• URL Scheme:
  com.googleusercontent.apps.843254985318-c1q9b8809pul43h3q5u1q5t6ki0l10en

Android OAuth Client

ℹ️

Firebase Console Users

If you use Firebase Console, make sure to configure the Support Email in Firebase Console > Settings > General > Public Settings > Support Email

You can create your Android OAuth client(s) by providing the following information in the setup form:

• Application Type: Android
• Name: Please provide a descriptive Name of your Android App
• Package Name: Please provide the package name of your Android app. For our example we will use co.median.android.soclogin as mentioned in the overview section.
• SHA-1 certificate fingerprint : Please provide your SHA-1 certificate fingerprint. If you are using Median to sign your Android app you can find your Android Release Certificate SHA-1 Fingerprint as shown in the picture below. If you are using Google Play App Signing it is available from the Google Play Console on the Release > Setup > App Integrity page.

Android OAuth Client for local debugging (optional)

If you are compiling your debug/release application from multiple machines you will need to create a separate OAuth client ID and provide the SHA-1 Certificate fingerprint of each local machine.

Local SHA-1 certificate fingerprint

When creating a second OAuth Client for local debugging you will not be able to reuse the same keystore you use for your production application. Instead you need to create one OAuth client for each development machine using the local SHA-1 certificate fingerprint.

You can obtain the fingerprint using the following command: keytool -keystore <path-to-debug-or-production-keystore> -list -v

You will need to enter the password for the android debug keystore. The default password for the keystore is "android".

After obtaining the SHA-1 fingerprint you can follow the steps above to create a new OAuth client. For the Package Name, if you are building a debug variant in the Android Studio, by default the app build.gradle uses a .debug as an applicationIdSuffix so you will need to append .debug at the end of your package name.

For example co.median.android.soclogin.debug. We also recommend using a descriptive Name for each machine to manage your development team.

Web OAuth Client

1. Go to Google Cloud Credentials
2. Create an OAuth client with:
   1. Application type: Web
   2. Optional: Add Authorized JavaScript Origins and Redirect URIs if using Server-Side Redirects. Leave blank if using JavaScript Callbacks.

For our example app I configured the Authorized JavaScript origins and Authorized redirect URIs to use the URLs of our developer demos available in our Developer Portal.

Save the Web Client ID for use in your plugin configuration.

Google Cloud Configuration Validation

Your Google Cloud dashboard should now list:

• iOS Client ID
• Android Client ID(s)
• Web Client ID

The dashboard also provides easy access to the OAuth Client IDs if you missed noting them in the previous steps.

🏁

Google Cloud Configuration Complete

With the creation of the Web Client your Google Cloud Configuration is complete. Please ensure that you have obtained the following three parameters which will be used in your plugin configuration:

• iOS Client ID
• iOS URL Scheme
• Web Client ID

Median Plugin Configuration

Based on your target platform(s) please add the following credentials to your plugin configuration:

• iOS Client ID
• iOS URL Scheme
• Web Client ID

🏁

Setup Complete

Once the plugin configuration is updated please ensure that you save the changes and rebuilt your app.

Frequently Asked Questions

My Android app does not display the prompt to select the account. What can I do to resolve this issue?

If your Google Sign-In button is not launching the overlay to select your google account it typically manifests as a No credentials available issue in the debug console. The full stack trace typically shows as follows:

I/CredManProvService( 8276): GetCredentialResponse error returned from framework
E/a       ( 8276): signIn: 
E/a       ( 8276): H.p: No credentials available
E/a       ( 8276): 	at G.M.c(SourceFile:33)
E/a       ( 8276): 	at G.M$e.a(SourceFile:17)
E/a       ( 8276): 	at G.M$e.onError(SourceFile:5)
E/a       ( 8276): 	at android.credentials.CredentialManager$GetCredentialTransport.lambda$onError$2(CredentialManager.java:694)
E/a       ( 8276): 	at android.credentials.CredentialManager$GetCredentialTransport.$r8$lambda$nlbYav9mLBoE6Yh1vFKCvITF3ks(Unknown Source:0)
E/a       ( 8276): 	at android.credentials.CredentialManager$GetCredentialTransport$$ExternalSyntheticLambda2.run(Unknown Source:6)
E/a       ( 8276): 	at G.i.execute(SourceFile:1)
E/a       ( 8276): 	at android.credentials.CredentialManager$GetCredentialTransport.onError(CredentialManager.java:693)
E/a       ( 8276): 	at android.credentials.IGetCredentialCallback$Stub.onTransact(IGetCredentialCallback.java:123)
E/a       ( 8276): 	at android.os.Binder.execTransactInternal(Binder.java:1344)
E/a       ( 8276): 	at android.os.Binder.execTransact(Binder.java:1275)

To resolve the issue please follow the three troubleshooting steps below to confirm your Cloud Project Configuration, Google User account and Android Device Simulator settings.

1. The most common case of this issue is a misconfiguration on the Android OAuth client. Please confirm the SHA-1 your are using for your Android OAuth client and/or set up a second Android OAuth client for local testing using your debug SHA-1 value.
2. If you have confirmed your OAuth client configuration please, confirm the user configuration on your test device.
   1. Log into a Google Account on the test or simulator device you are using
   2. Ensure that the logged-in user allows Google Sign-In prompts. This configuration can be reviewed in your Google Account Settings.
3. If you observe the issue occasionally in your simulators only, it could be that you are using a simulator with an API level below 35. Please update the API level of your simulators in Android Studio.

How to find your Android package name and iOS Bundle ID?

For applications in development, the required parameters can be found in the App Identifiers section of the App Studio.

For live or published apps, use the deviceInfo() JavaScript bridge command to retrieve the corresponding value, which is stored under the appId key.