Capacitor Google Sign-In Plugin

Unofficial Capacitor plugin to sign-in with Google.[^1]

Features

The Capacitor Google Sign-In plugin is one of the most complete Google authentication solutions for Capacitor apps. Here are some of the key features:

• 🖥️ Cross-platform: Supports Android, iOS, and Web.
• 🔐 Authentication: Sign in users with their Google account and receive an ID token (JWT).
• 🔑 Authorization: Optionally request OAuth scopes to get an access token and server auth code.
• 👤 User Profile: Retrieve the user's email, display name, profile picture, and more.
• 🛡️ Nonce Support: Prevent replay attacks with a custom nonce on Android and Web.
• 🪶 Lightweight: Just a single dependency and zero unnecessary bloat.
• 🚨 Error Codes: Provides detailed error codes for better error handling.
• 🤝 Compatibility: Compatible with the Apple Sign-In and OAuth plugins.
• 📦 CocoaPods & SPM: Supports CocoaPods and Swift Package Manager for iOS.
• 🔁 Up-to-date: Always supports the latest Capacitor version.

Missing a feature? Just open an issue and we'll take a look!

Use Cases

The Google Sign-In plugin is typically used wherever users should sign in with their existing Google account, for example:

• Social login: Let users sign in to your app with their Google account instead of creating a new password.
• Backend authentication: Send the ID token (JWT) to your backend to verify the user's identity.
• Google API access: Request OAuth scopes to receive an access token for accessing Google APIs on behalf of the user.
• Server-side API access: Exchange the server auth code on your backend for access and refresh tokens.
• Profile pre-filling: Use the user's email, display name, and profile picture to pre-fill their profile in your app.

Compatibility

| Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 0.1.x | >=8.x.x | Active support |

Guides

• How to Sign In with Google using Capacitor

Installation

You can use our AI-Assisted Setup to install the plugin. Add the Capawesome Skills to your AI tool using the following command:

npx skills add capawesome-team/skills --skill capacitor-plugins

Then use the following prompt:

 Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-google-sign-in` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

npm install @capawesome/capacitor-google-sign-in
npx cap sync

On all platforms, your brand must be verified for your app name to be shown on the Sign in with Google consent screen.

Android

Create an Android OAuth client in the Google Cloud Console in the same project as your web client:

• Package name: the application ID of your app (e.g. com.example.app), as defined in android/app/build.gradle.
• SHA-1 certificate fingerprint: the fingerprint of the certificate that signs the app.

Attention: The Android client ID is never passed to the plugin, because initialize(...) always receives the web client ID. The Android client must still exist and match the app, otherwise the sign-in flow fails.

Which SHA-1 fingerprint to use depends on how the app is signed:

• Local debug builds: the fingerprint of the debug keystore. Print it with keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android.
• Builds distributed via Google Play: the fingerprint of the app signing key, not the upload key. Find it in the Google Play Console under Test and release › Setup › App signing.

Add an OAuth client for every fingerprint you want to support. A missing fingerprint is the most common cause of a failing sign-in flow.

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

• $androidxCredentialsVersion version of androidx.credentials:credentials (default: 1.5.0)
• $googleIdVersion version of com.google.android.libraries.identity.googleid:googleid (default: 1.1.1)
• $playServicesAuthVersion version of com.google.android.gms:play-services-auth (default: 21.5.0)

iOS

Add the GIDClientID key to the ios/App/App/Info.plist file with your iOS client ID from the Google Cloud Console:

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

You also need to add the URL scheme for your iOS client ID to the ios/App/App/Info.plist file:

<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 the reversed client ID from the Google Cloud Console (e.g. com.googleusercontent.apps.123456789-abc).

Configuration

No configuration required for this plugin.

Usage

The following examples show how to initialize the plugin, sign in and sign out a user, and complete the sign-in flow on the Web.

Initialize the plugin

Call initialize(...) once before all other methods. The clientId must be a web client ID from the Google Cloud Console on all platforms, even on Android and iOS. Optionally provide scopes to also request authorization, which enables the access token and server auth code in the sign-in result:

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

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

Sign in a user

Start the Google Sign-In flow and retrieve the ID token (JWT) and the user's profile. Note that on Web, this redirects to the Google OAuth authorization page and the promise never resolves:

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

const signIn = async () => {
  try {
    const result = await GoogleSignIn.signIn();
    console.log(result.idToken);
    console.log(result.userId);
    console.log(result.email);
    console.log(result.displayName);
    console.log(result.accessToken);
    console.log(result.serverAuthCode);
  } catch (error) {
    if (error.code === ErrorCode.SignInCanceled) {
      console.log('The user canceled the sign-in flow.');
    } else if (error.code === ErrorCode.NoCredentialAvailable) {
      console.log('No Google account is available on this device.');
    } else if (error.code === ErrorCode.ProviderConfigurationError) {
      console.log('Google Play services is not available or not up to date.');
    } else {
      console.log('Another error occurred:', error);
    }
  }
};

Complete the sign-in flow on the Web

On Web, the app is redirected back to the redirectUrl after the user signs in. Call handleRedirectCallback() there to exchange the authorization code for tokens and complete the sign-in flow. Only available on Web:

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

const handleRedirectCallback = async () => {
  if (Capacitor.getPlatform() !== 'web') {
    return;
  }
  const result = await GoogleSignIn.handleRedirectCallback();
  console.log(result.idToken);
  console.log(result.userId);
  console.log(result.email);
  console.log(result.displayName);
  console.log(result.accessToken);
  console.log(result.serverAuthCode);
};

Sign out a user

Sign out the current user:

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

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

API

• handleRedirectCallback()
• initialize(...)
• signIn(...)
• signOut()
• Interfaces

handleRedirectCallback()

handleRedirectCallback() => Promise<SignInResult>

Handle the redirect callback from the OAuth provider.

This method must be called when the app is redirected back from the OAuth provider. It exchanges the authorization code for tokens and returns the sign-in result.

Only available on Web.

Returns: Promise<SignInResult>

Since: 0.1.0

initialize(...)

initialize(options: InitializeOptions) => Promise<void>

Initialize the Google Sign-In plugin.

This method must be called once before all other methods.

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | InitializeOptions |

Since: 0.1.0

signIn(...)

signIn(options?: SignInOptions | undefined) => Promise<SignInResult>

Start the Google Sign-In flow.

On Web, this redirects to the Google OAuth authorization page. The promise will never resolve on Web. After the user signs in, the app will be redirected back to the redirectUrl. Use handleRedirectCallback() to complete the sign-in flow.

| Param | Type | | ------------- | ------------------------------------------------------- | | options | SignInOptions |

Returns: Promise<SignInResult>

Since: 0.1.0

signOut()

signOut() => Promise<void>

Sign out the current user.

On Android, this clears the credential state. On iOS, this signs out from the Google Sign-In SDK. On Web, this is a no-op.

Since: 0.1.0

Interfaces

SignInResult

| Prop | Type | Description | Since | | -------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | idToken | string | The ID token (JWT) returned by Google. This token can be sent to your backend for verification. | 0.1.0 | | userId | string | The unique identifier of the user's Google Account. | 0.1.0 | | email | string | null | The user's email address. | 0.1.0 | | displayName | string | null | The user's display name (full name). | 0.1.0 | | givenName | string | null | The user's given name (first name). | 0.1.0 | | familyName | string | null | The user's family name (last name). | 0.1.0 | | imageUrl | string | null | The URL of the user's profile picture. | 0.1.0 | | accessToken | string | null | The access token for accessing Google APIs. Only available when scopes are configured in initialize(). | 0.1.0 | | serverAuthCode | string | null | The server auth code that can be exchanged on your backend for access and refresh tokens. Only available on Android and iOS when scopes are configured in initialize(). | 0.1.0 |

InitializeOptions

| Prop | Type | Description | Since | | ----------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | clientId | string | The web client ID from Google Cloud Console. On Android, this is passed as the server client ID to the Credential Manager API and the AuthorizationClient API. On iOS, this is used as the server client ID for the Google Sign-In SDK. On Web, this is used to initialize the Google Sign-In JavaScript API. Attention: This must be a web client ID on all platforms, even on Android and iOS. | 0.1.0 | | redirectUrl | string | The URL to redirect to after the OAuth flow. Only available on Web. | 0.1.0 | | scopes | string[] | The OAuth scopes to request. If provided, the plugin will request authorization in addition to authentication. This enables accessToken and serverAuthCode in the sign-in result. | 0.1.0 |

SignInOptions

| Prop | Type | Description | Since | | ----------- | ------------------- | --------------------------------------------------------------------- | ----- | | nonce | string | A nonce to prevent replay attacks. Only available on Android and Web. | 0.1.0 |

Security

This plugin handles the OAuth flow and returns tokens to your app. To keep your integration secure, be aware of the following:

• Server-side token verification is required. The idToken (JWT) is not verified client-side. Your backend must verify the JWT signature using Google's public keys before trusting any claims (e.g. userId, email). Never use client-side token data for authorization decisions without server-side verification.
• Exchange serverAuthCode on your backend. If you use scopes, send the serverAuthCode to your backend and exchange it there for access and refresh tokens. Never exchange it client-side, as this would expose your client secret.

FAQ

What's the difference between this plugin and other Google Sign-In plugins?

This plugin is purpose-built for Google Sign-In and focuses on providing a clean and modern API with the latest platform features. Here are some of the key differences:

• Cross-platform: Supports Android, iOS, and Web.
• Lightweight: No unnecessary dependencies. Just Google Sign-In, nothing else.
• No deprecated APIs: Uses the latest platform APIs (Credential Manager on Android, Google Sign-In SDK on iOS).
• Authentication + Authorization: Supports both authentication (ID tokens) and authorization (access tokens, server auth codes) in a single flow.
• Error codes: Provides typed error codes for proper error handling.
• Redirect flow on Web: Uses a redirect-based OAuth flow instead of popups, resulting in a more reliable and user-friendly experience.

Why do I need a web client ID on Android and iOS?

The clientId option must be a web client ID from the Google Cloud Console on all platforms. On Android, it is passed as the server client ID to the Credential Manager API and the AuthorizationClient API. On iOS, it is used as the server client ID for the Google Sign-In SDK. On iOS, you additionally configure your iOS client ID via the GIDClientID key in the Info.plist file, see the Installation section.

Why does the signIn promise never resolve on the Web?

On Web, the plugin uses a redirect-based OAuth flow. The signIn(...) method redirects to the Google OAuth authorization page, so the promise never resolves. After the user signs in, the app is redirected back to the redirectUrl and you must call handleRedirectCallback() to complete the sign-in flow, see the usage example above.

How do I get an access token for Google APIs?

Configure the scopes option in the initialize(...) method. The plugin then requests authorization in addition to authentication, which enables the accessToken and serverAuthCode properties in the sign-in result. If you need access and refresh tokens on your backend, exchange the serverAuthCode there, never client-side, as described in the Security section.

Why does the sign-in flow fail on Android right after picking an account?

If the account picker opens but the flow fails as soon as an account is picked, the app is most likely missing a matching Android OAuth client. Look for one of the following entries in the logcat output:

Auth.Api.Credentials: colz: [8] Unknown error [status=UNREGISTERED_ON_API_CONSOLE].
Auth.Api.Credentials: colz: [16] Account reauth failed.

Google Play services reports this as a cancellation, so the plugin rejects the call with the SIGN_IN_CANCELED error code and Account reauth failed as the error message. Make sure that an Android OAuth client exists for the package name and the SHA-1 fingerprint of the certificate that signs the app, as described in the Installation section. Builds distributed via Google Play must use the fingerprint of the app signing key, not the upload key.

Related Plugins

• Apple Sign-In: Sign in users with their Apple account.
• Facebook Sign-In: Sign in users with their Facebook account.
• OAuth: Communicate with any OAuth 2.0 and OpenID Connect provider.
• Passkeys: Create and authenticate with passkeys based on the WebAuthn standard.

Newsletter

Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our Capawesome Newsletter.

Changelog

See CHANGELOG.md.

License

See LICENSE.

[^1]: This project is not affiliated with, endorsed by, sponsored by, or approved by Google Inc. or any of their affiliates or subsidiaries.