--- title: How to Sign In with Google Using Capacitor description: Learn how to implement Google Sign-In in your Capacitor app using the Google Sign-In plugin on Android, iOS, and Web. date: created: 2026-02-16 updated: 2026-07-14 authors: - robingenz categories: - Capacitor - Guides - SDKs links: - Capacitor Google Sign-In: sdks/capacitor/google-sign-in.md faq: true --- # 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 [Capacitor Google Sign-In plugin](../../sdks/capacitor/google-sign-in.md) 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.
Build and deploy your Capacitor app with Capawesome Cloud
## Prerequisites Before you begin, make sure you have the following: - A **Google account** with access to the [Google Cloud Console](https://console.cloud.google.com/){:target="_blank"}. - A **Capacitor app** with the [Capacitor Google Sign-In plugin](../../sdks/capacitor/google-sign-in.md) installed. To install the plugin, please refer to the [Installation](../../sdks/capacitor/google-sign-in.md#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](https://console.cloud.google.com/){:target="_blank"}. 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: ```bash ./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: ```xml GIDClientID YOUR_IOS_CLIENT_ID ``` Then add the reversed client ID as a URL scheme. This allows Google to redirect back to your app after authentication: ```xml CFBundleURLTypes CFBundleURLSchemes com.googleusercontent.apps.YOUR_IOS_CLIENT_ID ``` 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(...)`](../../sdks/capacitor/google-sign-in.md#initialize). Pass the **web client ID** you created earlier as the `clientId`: ```typescript import { GoogleSignIn } from '@capawesome/capacitor-google-sign-in'; const initialize = async () => { await GoogleSignIn.initialize({ clientId: 'YOUR_WEB_CLIENT_ID', }); }; ``` ### Signing In Use the [`signIn(...)`](../../sdks/capacitor/google-sign-in.md#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: ```typescript 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](#bonus-verifying-the-id-token-on-the-backend) below). ### Handling the Redirect Callback (Web) On the web, the [`signIn(...)`](../../sdks/capacitor/google-sign-in.md#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()`](../../sdks/capacitor/google-sign-in.md#handleredirectcallback) on page load to complete the sign-in flow and retrieve the result: ```typescript 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(...)`](../../sdks/capacitor/google-sign-in.md#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: ```typescript 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()`](../../sdks/capacitor/google-sign-in.md#signout) method to sign out the current user: ```typescript 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(...)`](../../sdks/capacitor/google-sign-in.md#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](https://github.com/googleapis/google-auth-library-nodejs){:target="_blank"} for Node.js: ```typescript 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. ## FAQ ### Which platforms does the Capacitor Google Sign-In plugin support? The plugin supports Android, iOS, and the web from a single API. On Android and iOS, the sign-in flow is handled natively and [`signIn(...)`](../../sdks/capacitor/google-sign-in.md#signin) returns the result directly. On the web, `signIn(...)` redirects to Google's authorization page, and you complete the flow by calling [`handleRedirectCallback()`](../../sdks/capacitor/google-sign-in.md#handleredirectcallback) on page load. ### Why do I need a web client ID for Android and iOS? The web client ID doubles as the *server* client ID. On Android, the Credential Manager API uses it to request an ID token; on iOS, it is used to request a server auth code. You still create separate Android and iOS client IDs so Google can verify your app's package name or bundle ID and its signing certificate. ### Do I need a backend to use Google Sign-In? Not to sign users in — the plugin returns an ID token directly on the device. You should, however, verify that ID token on your backend before trusting it, as shown in [Bonus: Verifying the ID Token on the Backend](#bonus-verifying-the-id-token-on-the-backend). A backend is also required if you want to exchange the `serverAuthCode` for long-lived access and refresh tokens. ### How do I access other Google APIs after sign-in? Request the OAuth scopes you need during [`initialize(...)`](../../sdks/capacitor/google-sign-in.md#initialize). The sign-in result then includes an `accessToken` for calling Google APIs and, on Android and iOS, a `serverAuthCode` your backend can exchange for long-lived tokens. See [Requesting Additional Scopes](#requesting-additional-scopes) for details. ### Can I offer other sign-in methods alongside Google? Yes. The [Capacitor Facebook Sign-In plugin](../../sdks/capacitor/facebook-sign-in.md) adds Facebook authentication — including Limited Login and access token retrieval — on Android, iOS, and web, and the [Capacitor Apple Sign-In plugin](../../sdks/capacitor/apple-sign-in.md) covers Sign in with Apple. For any other identity provider, the [Capacitor OAuth plugin](../../sdks/capacitor/oauth.md) implements the standard Authorization Code flow with PKCE. If you're already using a Firebase project for other services (Firestore, Cloud Storage), the [Capacitor Firebase Authentication guide](./capacitor-firebase-authentication-guide.md) covers Google, Apple, and several other providers behind one Firebase-integrated API instead. ## Related Posts - [Alternative to the Ionic Auth Connect Plugin](./alternative-to-ionic-auth-connect-plugin.md) - [Announcing the Capacitor OAuth Plugin](./announcing-the-capacitor-oauth-plugin.md) - [How to Sign In with Apple Using Capacitor](./how-to-sign-in-with-apple-using-capacitor.md) - [How to Sign In with Auth0 Using Capacitor](./how-to-sign-in-with-auth0-using-capacitor.md) ## Conclusion You now have Google Sign-In working across Android, iOS, and web with the [Capacitor Google Sign-In plugin](../../sdks/capacitor/google-sign-in.md) — from setting up OAuth credentials in the Google Cloud Console and configuring each platform to implementing the sign-in flow and verifying ID tokens on your backend. The plugin handles the platform-specific complexity so you can focus on building your app. Explore the complete [API Reference](../../sdks/capacitor/google-sign-in.md#api) to see every method and option. If you have any questions or feedback, join the [Capawesome Discord server](https://discord.gg/VCXxSVjefW){:target="_blank"} or subscribe to the [Capawesome newsletter](https://capawesome.io/newsletter/){:target="_blank"} to stay up to date. [Subscribe to the Capawesome Newsletter](https://capawesome.io/newsletter/){ .md-button .md-button--primary }