---
title: Add "Sign in with Google" to your Flutter app
description: Learn how to add native Sign in with Google to your Clerk Flutter app on iOS and Android.
---

<Info>
  **Before you start:**

  - [A Clerk application is required.](https://clerk.com/docs/getting-started/quickstart/setup-clerk)
  - [A Google Developer account is required.](https://console.developers.google.com/)
  - [Follow the Flutter quickstart.](/getting-started/quickstart)
</Info>

This guide explains how to add native Sign in with Google to your Flutter app using Clerk. The native approach uses Google's platform SDK to obtain an ID token directly, which is then passed to Clerk for authentication.

<Warning>
  On **Android**, Google [does not allow sign-in via in-app browsers](https://developers.googleblog.com/en/modernizing-oauth-interactions-in-native-apps-for-better-usability-and-security). The native ID token approach described in this guide is required for Android. On iOS, the in-app WebView OAuth flow (via `ssoSignIn`) is also supported.
</Warning>

To make the setup process easier, it's recommended to keep two browser tabs open — one for the [Clerk Dashboard](https://dashboard.clerk.com/~/user-authentication/sso-connections) and one for the [Google Cloud Console](https://console.cloud.google.com/).

<Steps>
<Step title="Enable Google as a social connection">

1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/~/user-authentication/sso-connections) page.
1. Select **Add connection** and select **For all users**.
1. Select **Google** from the provider list.
1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on.
1. Save the **Authorized Redirect URI** somewhere secure. Keep this page open.
</Step>

<Step title="Create Google OAuth credentials">

You need three OAuth clients in Google Cloud Console: one for Android, one for iOS, and one Web client. Clerk uses the Web client for server-side token verification — **the Web client is required even for native apps**.

1. Navigate to the [Google Cloud Console](https://console.cloud.google.com/).
1. Select an existing project or [create a new one](https://console.cloud.google.com/projectcreate).
1. In the top-left, select the menu icon (**≡**) and select **APIs & Services**, then **Credentials**.

### Create the Android client

1. Next to **Credentials**, select **Create Credentials**, then **OAuth client ID**.
1. For **Application type**, select **Android**.
1. Complete the required fields:
   - **Package name**: Your app's package name (e.g. `com.example.myapp`), found in `android/app/build.gradle`.
   - **SHA-1 certificate fingerprint**: Run the following command, replacing the path with your debug or production keystore:
     ```sh title="Terminal"
     keytool -keystore path-to-debug-or-production-keystore -list -v
     ```
     <Warning>
       By default, the debug keystore is at `~/.android/debug.keystore`. The keystore password is `android`. You may need to install [OpenJDK](https://openjdk.org/) to run `keytool`.
     </Warning>
1. Select **Create**.

### Create the iOS client

1. Select **Create Credentials**, then **OAuth client ID**.
1. For **Application type**, select **iOS**.
1. Enter your **Bundle ID** (e.g. `com.example.myapp`), found in your Xcode project settings.
1. Select **Create**.

### Create the Web client

1. Select **Create Credentials**, then **OAuth client ID**.
1. For **Application type**, select **Web application**.
1. Under **Authorized redirect URIs**, paste the **Authorized Redirect URI** you saved from the Clerk Dashboard.
1. Select **Create**. A modal opens with your **Client ID** and **Client Secret** — save these securely.
</Step>

<Step title="Set the Client ID and Secret in the Clerk Dashboard">

1. Navigate back to the Clerk Dashboard where the configuration page should still be open. Paste the **Client ID** and **Client Secret** values that you saved into the respective fields.
1. Select **Save**.

<Info>If the page is no longer open, navigate to the [**SSO connections**](https://dashboard.clerk.com/~/user-authentication/sso-connections) page in the Clerk Dashboard. Select the connection. Under **Use custom credentials**, paste the values into their respective fields.</Info>
</Step>

<Step title="Install dependencies">

Add the `google_sign_in` and `uuid` packages to your `pubspec.yaml`:

```sh title="Terminal"
flutter pub add google_sign_in uuid
```
</Step>

<Step title="Configure your platforms">

### Android

No additional `AndroidManifest.xml` changes are required for the `google_sign_in` package beyond the `INTERNET` permission already present in the quickstart.

### iOS

The `google_sign_in` package requires a URL scheme for the OAuth callback. Add the following to your `ios/Runner/Info.plist`, replacing the value with the reversed form of your **iOS Client ID** from Google Cloud Console:

```xml
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- Your reversed iOS client ID, e.g. com.googleusercontent.apps.YOUR_IOS_CLIENT_ID -->
      <string>com.googleusercontent.apps.YOUR_IOS_CLIENT_ID</string>
    </array>
  </dict>
</array>
```
</Step>

<Step title="Implement Sign in with Google">

### Use Clerk's pre-built UI (iOS only)

On iOS, if you're using `ClerkAuthentication`, the **Sign in with Google** button is rendered automatically once Google is enabled in the Clerk Dashboard. This uses the in-app WebView OAuth flow and does not require the `google_sign_in` package.

```dart
ClerkAuthentication()
```

### Use a custom flow (iOS and Android)

For custom UI, or for Android where the in-app browser is not permitted, use `google_sign_in` to obtain an ID token natively and pass it to Clerk.

<Warning>
  The `serverClientId` must be the **Web client ID** from Google Cloud Console, not the Android or iOS client ID. Clerk requires this to verify the token server-side.
</Warning>

```dart
import 'package:clerk_auth/clerk_auth.dart' as clerk;
import 'package:clerk_flutter/clerk_flutter.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:uuid/uuid.dart';

Future<void> signInWithGoogle(BuildContext context) async {
  final authState = ClerkAuth.of(context);

  // Reset the Clerk client before initializing Google Sign-In
  await authState.resetClient();

  final google = GoogleSignIn.instance;
  await google.initialize(
    // Use your Web client ID from Google Cloud Console
    serverClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    nonce: const Uuid().v4(),
  );

  final account = await google.authenticate(
    scopeHint: const ['openid', 'email', 'profile'],
  );

  final token = account.authentication.idToken;
  if (token == null) return;

  // Pass the ID token to Clerk
  await authState.idTokenSignIn(
    provider: clerk.IdTokenProvider.google,
    token: token,
  );

  // If this is a new user, a sign-up object may be returned with missing fields
  if (authState.signUp case clerk.SignUp signUp
      when signUp.missingFields.isNotEmpty) {
    final nameParts = account.displayName?.split(' ') ?? [];
    await authState.attemptSignUp(
      firstName: signUp.missing(clerk.Field.firstName)
          ? nameParts.firstOrNull
          : null,
      lastName: signUp.missing(clerk.Field.lastName)
          ? (nameParts.length > 1 ? nameParts.last : null)
          : null,
    );
  }
}
```

<Info>
  If your Clerk instance has [legal acceptance](https://clerk.com/docs/guides/secure/legal-compliance) enabled, `signUp.missingFields` will also contain `clerk.Field.legalAccepted` and `attemptSignUp` will fail unless you pass `legalAccepted: true`. Collect consent from the user first (for example, a checkbox agreeing to your Terms of Service), then pass it conditionally: `legalAccepted: signUp.missing(clerk.Field.legalAccepted) ? true : null`.
</Info>

To conditionally show the native Google Sign-In button only when the strategy is available in your Clerk environment:

```dart
if (authState.env.config.firstFactors.contains(clerk.Strategy.oauthTokenGoogle))
  ElevatedButton(
    onPressed: () => signInWithGoogle(context),
    child: const Text('Sign in with Google'),
  ),
```
</Step>
</Steps>

## Troubleshooting

### `PlatformException: sign_in_failed` on Android

Ensure the SHA-1 fingerprint registered in Google Cloud Console matches the keystore you are using to sign your build. Debug and release builds use different keystores with different fingerprints — both may need to be registered during development.

### Token verification fails

Verify that the `serverClientId` passed to `GoogleSignIn.instance.initialize()` is the **Web client ID**, not the Android or iOS client ID. Clerk uses the Web client for server-side verification.