React Native Google Credential

Clerk

Authenticate Google ID tokens with Clerk.

Provider configuration

In Clerk, enable Google as a social connection:

Clerk Dashboard -> SSO connections -> Google

For production, configure the Google connection with your own OAuth Web client ID and secret. The Web client ID should match the webClientId you pass to this package.

Native Google sign-in with Clerk sessions

Clerk's direct Expo social auth flow typically uses a browser-based OAuth session and redirects back to your app.

The Clerk adapter gives your app a platform-native Google sign-in experience before creating the Clerk session:

  • Android can use the platform Credential Manager Google ID credential flow.
  • iOS can use native Google Sign-In.
  • Web can use Google Identity Services.

Users get a familiar Google account picker on each platform, while Clerk still handles the account, session, and user management layer.

Plug-and-play integration

Use createClerkGoogleAuth for the standard Clerk integration. Pass the Clerk instance directly:

Use this approach when:

  • You want native Google sign-in backed by Clerk sessions.
  • You use Clerk's standard Google One Tap authentication flow.
  • You want authentication and callback handling completed automatically.
  • You want the shortest integration with the Clerk client.
import { createClerkGoogleAuth } from '@pricava/react-native-google-credential/adapters/clerk';

const signInWithGoogle = createClerkGoogleAuth({
  clerk,
  webClientId,
  iosClientId,
  callbackOptions: {
    signInFallbackRedirectUrl: '/',
  },
});

await signInWithGoogle();

The adapter requests a Google ID token from the native or web credential flow, passes it to clerk.authenticateWithGoogleOneTap(), and completes the callback through clerk.handleGoogleOneTapCallback() when that method is available.

Expo example

import { useMemo } from 'react';
import { Button } from 'react-native';
import { useClerk } from '@clerk/clerk-expo';
import { createClerkGoogleAuth } from '@pricava/react-native-google-credential/adapters/clerk';

export function GoogleButton() {
  const clerk = useClerk();
  const signInWithGoogle = useMemo(
    () =>
      createClerkGoogleAuth({
        clerk,
        webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID!,
        iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID,
        callbackOptions: {
          signInFallbackRedirectUrl: '/',
        },
      }),
    [clerk],
  );

  return (
    <Button
      title="Continue with Google"
      onPress={() => signInWithGoogle()}
    />
  );
}

Custom integration

Use createClerkGoogleAuthAdapter when you need separate control over Clerk authentication and callback handling:

Use this approach when:

  • You need analytics or logging around Clerk authentication.
  • You want custom redirect or fallback behavior.
  • Your app handles Clerk's authentication result manually.
  • You need to wrap or replace part of the standard Clerk flow.
import { createClerkGoogleAuthAdapter } from '@pricava/react-native-google-credential/adapters/clerk';

const signInWithGoogle = createClerkGoogleAuthAdapter({
  credentialOptions: {
    webClientId,
    iosClientId,
  },
  authenticateWithGoogleOneTap: ({ token }) => {
    analytics.track('clerk_google_auth_started');

    return clerk.authenticateWithGoogleOneTap({ token });
  },
  handleGoogleOneTapCallback: (result, options) => {
    analytics.track('clerk_google_auth_completed');

    return clerk.handleGoogleOneTapCallback(result, options);
  },
  callbackOptions: {
    signInFallbackRedirectUrl: '/',
  },
});

await signInWithGoogle();

The callback handler is optional. Without it, the factory returns Clerk's authentication result so your application can complete the flow:

const authenticateWithGoogle = createClerkGoogleAuthAdapter({
  credentialOptions: {
    webClientId,
    iosClientId,
  },
  authenticateWithGoogleOneTap: ({ token }) =>
    clerk.authenticateWithGoogleOneTap({ token }),
});

const authenticationResult = await authenticateWithGoogle();

await completeCustomClerkFlow(authenticationResult);

Clerk also provides direct Expo social auth helpers for browser-based OAuth flows. These adapters are designed for apps that want native Google sign-in UX with Clerk as the authentication backend.

On this page