How to Sign In with Google Using Capacitor

Google Sign-In is one of the most widely used authentication methods in mobile and web apps. It lets users sign in with their existing Google account in just a few taps, avoiding the need to create and remember yet another password. Whether you're building with Ionic or another framework, the Google Sign-In plugin provides a simple way to integrate Google Sign-In into your Capacitor app on Android, iOS, and web. This guide walks you through creating the required credentials, configuring the plugin for each platform, and implementing the sign-in flow.

Prerequisites

Before you begin, make sure you have the following:

• A Google account with access to the Google Cloud Console.
• A Capacitor app with the Google Sign-In plugin installed. To install the plugin, please refer to the Installation section in the plugin documentation.

Creating Google API Credentials

To use Google Sign-In, you need to create a Google Cloud project and set up OAuth client IDs for each platform you want to support.

Creating a Google Cloud Project

1. Go to the Google Cloud Console.
2. Click the project selector in the top navigation bar and select New Project.
3. Enter a project name (e.g. My Capacitor App) and click Create.
4. Make sure the newly created project is selected in the project selector.

Configuring the OAuth Consent Screen

Before creating client IDs, you need to configure the OAuth consent screen. This is the screen users see when they sign in with Google for the first time.

1. In the Google Cloud Console, navigate to APIs & Services > OAuth consent screen.
2. Select a User Type:
   • Internal: Only available if you have a Google Workspace account. Limits sign-in to users within your organization.
   • External: Allows any Google account to sign in. You need to add test users while the app is in testing mode.
3. Click Create and fill in the required fields:
   • App name: The name shown to users during sign-in.
   • User support email: An email address users can contact for support.
   • Developer contact information: Your email address for Google to contact you.
4. Under Scopes, click Add or Remove Scopes and add the following scopes:
   • openid
   • email
   • profile
5. If you selected External, add your Google account email under Test users so you can test the sign-in flow.
6. Click Save and Continue to finish.

Creating OAuth Client IDs

You need to create a separate OAuth client ID for each platform. All client IDs are created under APIs & Services > Credentials > Create Credentials > OAuth client ID.

Web Client ID

The web client ID is required for all platforms. On Android, it serves as the server client ID that the Credential Manager API uses to request an ID token. On iOS, it is used as the server client ID to request a server auth code.

1. Select Web application as the application type.
2. Enter a name (e.g. Web Client).
3. Under Authorized JavaScript origins, add the origins where your web app is hosted (e.g. http://localhost:3000 for local development).
4. Under Authorized redirect URIs, add the redirect URIs for your web app (e.g. http://localhost:3000).
5. Click Create and copy the Client ID. You will need this later.

Android Client ID

1. Select Android as the application type.
2. Enter a name (e.g. Android Client).
3. Enter the Package name of your Android app. You can find this in your android/app/build.gradle file as the applicationId (e.g. com.example.app).

4. Enter the SHA-1 certificate fingerprint. To get the SHA-1 fingerprint for your debug keystore, run the following command in your project's android directory:

   ./gradlew signingReport
   

   Look for the SHA1 value under the debug variant.

   Warning

   For production, you also need to add the SHA-1 fingerprint of your release signing key. If you use Google Play App Signing, you can find the upload key fingerprint in the Google Play Console under Setup > App signing.

5. Click Create.

iOS Client ID

1. Select iOS as the application type.
2. Enter a name (e.g. iOS Client).
3. Enter the Bundle ID of your iOS app. You can find this in Xcode under your target's General tab (e.g. com.example.app).
4. Click Create and copy the Client ID. You will need this later.

Configuring the Plugin

Android

No additional configuration is required on Android beyond installing the plugin. The plugin uses the AndroidX Credential Manager API and Google Play Services under the hood.

iOS

On iOS, you need to add your iOS client ID and a URL scheme to the ios/App/App/Info.plist file.

Add the GIDClientID key with your iOS client ID:

<key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID</string>

Then add the reversed client ID as a URL scheme. This allows Google to redirect back to your app after authentication:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.YOUR_IOS_CLIENT_ID</string>
    </array>
  </dict>
</array>

Replace YOUR_IOS_CLIENT_ID with your actual iOS client ID from the Google Cloud Console. The URL scheme is the reversed form of the client ID (e.g. if your client ID is 123456789-abc.apps.googleusercontent.com, the URL scheme is com.googleusercontent.apps.123456789-abc).

Implementing the Sign-In Flow

Initializing the Plugin

Before calling any other method, you need to initialize the plugin using initialize(...). Pass the web client ID you created earlier as the clientId:

import { GoogleSignIn } from '@capawesome/capacitor-google-sign-in';

const initialize = async () => {
  await GoogleSignIn.initialize({
    clientId: 'YOUR_WEB_CLIENT_ID',
  });
};

Signing In

Use the signIn(...) method to start the Google Sign-In flow. The method returns a SignInResult object containing the user's profile information and an ID token:

import { GoogleSignIn } from '@capawesome/capacitor-google-sign-in';

const signIn = async () => {
  const result = await GoogleSignIn.signIn();
  console.log('ID token:', result.idToken);
  console.log('User ID:', result.userId);
  console.log('Email:', result.email);
  console.log('Display name:', result.displayName);
  console.log('Image URL:', result.imageUrl);
};

The idToken is a JWT that you can send to your backend to verify the user's identity (see Bonus: Verifying the ID Token on the Backend below).

Handling the Redirect Callback (Web)

On the web, the signIn(...) method redirects the user to Google's authorization page. After the user authenticates, Google redirects them back to your app. You need to call handleRedirectCallback() on page load to complete the sign-in flow and retrieve the result:

import { GoogleSignIn } from '@capawesome/capacitor-google-sign-in';
import { Capacitor } from '@capacitor/core';

const handleRedirectCallback = async () => {
  // Only handle the redirect callback on the web platform
  if (Capacitor.getPlatform() !== 'web') {
    return;
  }
  // This will return null if there is no redirect result to handle
  const result = await GoogleSignIn.handleRedirectCallback();
  console.log('ID token:', result.idToken);
  console.log('User ID:', result.userId);
  console.log('Email:', result.email);
};

Call this method when your app loads after a redirect. On Android and iOS, the sign-in flow is handled natively and signIn(...) returns the result directly, so this method is only needed on the web.

Requesting Additional Scopes

By default, the plugin only performs authentication and returns an ID token. If you need to access Google APIs on behalf of the user, you can request additional OAuth scopes by passing them during initialization:

import { GoogleSignIn } from '@capawesome/capacitor-google-sign-in';

const initialize = async () => {
  await GoogleSignIn.initialize({
    clientId: 'YOUR_WEB_CLIENT_ID',
    scopes: ['https://www.googleapis.com/auth/userinfo.profile'],
  });
};

const signIn = async () => {
  const result = await GoogleSignIn.signIn();
  console.log('Access token:', result.accessToken);
  console.log('Server auth code:', result.serverAuthCode);
};

When scopes are configured, the sign-in result includes an accessToken for making API calls and a serverAuthCode (Android and iOS only) that your backend can exchange for long-lived access and refresh tokens.

Signing Out

Use the signOut() method to sign out the current user:

import { GoogleSignIn } from '@capawesome/capacitor-google-sign-in';

const signOut = async () => {
  await GoogleSignIn.signOut();
};

Bonus: Verifying the ID Token on the Backend

The idToken returned by signIn(...) is a JSON Web Token (JWT) signed by Google. While you can decode it on the client to read the user's profile claims, you should always verify it on your backend before trusting the information. This ensures the token was actually issued by Google and hasn't been tampered with.

To verify the token, send it to your backend and validate it against Google's public keys. Here's an example using the google-auth-library for Node.js:

import { OAuth2Client } from 'google-auth-library';

const client = new OAuth2Client('YOUR_WEB_CLIENT_ID');

const verifyIdToken = async (idToken: string) => {
  const ticket = await client.verifyIdToken({
    idToken,
    audience: 'YOUR_WEB_CLIENT_ID',
  });
  const payload = ticket.getPayload();
  console.log('User ID:', payload?.sub);
  console.log('Email:', payload?.email);
  console.log('Name:', payload?.name);
};

The audience parameter should match the client ID that was used to obtain the token. If your app uses different client IDs for different platforms, you can pass all of them as an array.

Conclusion

In this guide, we covered how to set up Google Sign-In in a Capacitor app using the Google Sign-In plugin. From creating OAuth credentials in the Google Cloud Console and configuring platform-specific settings to implementing the sign-in flow and verifying tokens on the backend, the plugin handles the complexity across Android, iOS, and web so you can focus on building your app.

Explore the complete API Reference to see all available methods and options. Have suggestions or questions? Create an issue in our GitHub repository.

Stay connected with us on X and subscribe to our newsletter for the latest updates.