Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
748f973
Add guides for native Sign in with Google in Expo and document useSig…
chriscanin Nov 11, 2025
6a23771
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Nov 13, 2025
29ab82d
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Nov 14, 2025
9db3d01
Update Sign in with Google guide and add useSignInWithGoogle reference
chriscanin Nov 14, 2025
dabc038
docs review
SarahSoutoul Nov 20, 2025
d7c9f14
Fix build
SarahSoutoul Nov 20, 2025
4e88cb3
Fix wrong method
SarahSoutoul Nov 20, 2025
ec79f81
Update Sign in with Google guide to reflect correct environment varia…
chriscanin Nov 26, 2025
ea90706
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Nov 26, 2025
bc036c5
Refactor code blocks in Sign in with Google guide for consistency in …
chriscanin Nov 26, 2025
5be3692
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Nov 26, 2025
c94235d
docs review pt 2 after changes
SarahSoutoul Nov 26, 2025
0eb9922
linting
SarahSoutoul Nov 26, 2025
298d8b3
L was missing from "Learn"
chriscanin Nov 26, 2025
170ace2
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Dec 1, 2025
e2a0ddb
Update Google Sign-In setup instructions for OAuth client ID creation
chriscanin Dec 1, 2025
0168ba5
docs review pt2
SarahSoutoul Dec 5, 2025
cee03d3
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
SarahSoutoul Dec 5, 2025
4d5c426
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
SarahSoutoul Dec 5, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
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. In the **Choose provider** dropdown, select **Google**.
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 modal and page open.
93 changes: 93 additions & 0 deletions docs/_partials/expo/use-sign-in-with-google-example.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
The following example demonstrates how to use the [`useSignInWithGoogle()`](/docs/reference/expo/use-sign-in-with-google) hook to manage the Google authentication flow. Because the `useSignInWithGoogle()` hook automatically manages the [transfer flow](!transfer-flow) between sign-up and sign-in, you can use this component for both your sign-up and sign-in pages.

```tsx {{ filename: 'components/GoogleSignInButton.tsx', collapsible: true }}
import { useSignInWithGoogle } from '@clerk/clerk-expo'
import { useRouter } from 'expo-router'
import { Alert, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'

interface GoogleSignInButtonProps {
onSignInComplete?: () => void
showDivider?: boolean
}

export function GoogleSignInButton({
onSignInComplete,
showDivider = true,
}: GoogleSignInButtonProps) {
const { startGoogleAuthenticationFlow } = useSignInWithGoogle()
const router = useRouter()

// Only render on iOS and Android
if (Platform.OS !== 'ios' && Platform.OS !== 'android') {
return null
}

const handleGoogleSignIn = async () => {
try {
const { createdSessionId, setActive } = await startGoogleAuthenticationFlow()

if (createdSessionId && setActive) {
await setActive({ session: createdSessionId })

if (onSignInComplete) {
onSignInComplete()
} else {
router.replace('/')
}
}
} catch (err: any) {
if (err.code === 'SIGN_IN_CANCELLED' || err.code === '-5') {
return
}

Alert.alert('Error', err.message || 'An error occurred during Google Sign-In')
console.error('Google Sign-In error:', JSON.stringify(err, null, 2))
}
}

return (
<>
<TouchableOpacity style={styles.googleButton} onPress={handleGoogleSignIn}>
<Text style={styles.googleButtonText}>Sign in with Google</Text>
</TouchableOpacity>

{showDivider && (
<View style={styles.divider}>
<View style={styles.dividerLine} />
<Text style={styles.dividerText}>OR</Text>
<View style={styles.dividerLine} />
</View>
)}
</>
)
}

const styles = StyleSheet.create({
googleButton: {
backgroundColor: '#4285F4',
padding: 15,
borderRadius: 8,
alignItems: 'center',
marginBottom: 10,
},
googleButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
divider: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 20,
},
dividerLine: {
flex: 1,
height: 1,
backgroundColor: '#ccc',
},
dividerText: {
marginHorizontal: 10,
color: '#666',
},
})
```
178 changes: 178 additions & 0 deletions docs/guides/configure/auth-strategies/sign-in-with-google.expo.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
---
title: Sign in with Google
description: Learn how to use Clerk to natively Sign in with Google in your Expo app.
sdk: expo
---

<TutorialHero
beforeYouStart={[
{
title: "A Clerk application is required.",
link: "/docs/getting-started/quickstart/setup-clerk",
icon: "clerk",
},
{
title: "A Google Developer account is required.",
link: "https://console.developers.google.com/",
icon: "user-circle",
},
{
title: "Follow the Expo quickstart",
link: "/docs/expo/getting-started/quickstart",
icon: "expo",
},
]}
/>

This guide will teach you how to add native [Sign in with Google](https://support.google.com/accounts/answer/12849458?hl=en) to your Clerk Expo application. This is different from Google OAuth - if you want to use Google OAuth, see the [dedicated guide](/docs/guides/configure/auth-strategies/social-connections/google).

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 your [Google Cloud Console](https://console.cloud.google.com/).

<Steps>
## Enable Google as a social connection

<Include src="_partials/authentication/social-connections/enable-google-social-connection.mdx" />

## Configure Google Cloud Console

Before you can use Google Sign-In in your app, you need to create OAuth 2.0 credentials in the Google Cloud Console.

### Create a Google Cloud Project

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). You'll be redirected to your project's **Dashboard** page.
1. Enable the [**Google+ API**](https://console.cloud.google.com/apis/library/plus.googleapis.com?project=expo-testing-480017) for your project.

### Create OAuth 2.0 Credentials

You'll need to create **three sets of credentials**:

#### iOS Client ID

1. Navigate to **APIs & Services**. Then, select **Credentials**.
1. Next to **Credentials**, select **Create Credentials**. Then, select **OAuth client ID**. You might need to [configure your OAuth consent screen](https://support.google.com/cloud/answer/6158849#userconsent). Otherwise, you'll be redirected to the **Create OAuth client ID** page.
1. For the **Application type**, select **iOS**.
1. Add your iOS **Bundle ID**.
1. Select **Create**. A modal will open with your **Client ID**.
1. Copy ans save the **Client ID** - you'll need this for `EXPO_PUBLIC_CLERK_GOOGLE_IOS_CLIENT_ID`.

#### Android Client ID

1. In the same project, create another client. Next to **Credentials**, select **Create Credentials**. Then, select **OAuth client ID**.
1. For the **Application type**, select **Android**.
1. Complete the required fields:
- **Package name**: Your package name is in your `app.json` or `app.config.ts`.
- **SHA-1 certificate fingerprint**: To get your SHA-1, run the following command in your terminal:

```sh {{ filename: 'terminal' }}
$ keytool -keystore path-to-debug-or-production-keystore -list -v
```

> [!NOTE]
> Replace `path-to-debug-or-production-keystore` with the path to your debug or production keystore. By default, the debug keystore is located in `~/.android/debug.keystore`. It may ask for a keystore password, which is `android`. **Please note that Java is required to run the `keytool` command.**
1. Select **Create**. A modal will open with your **Client ID**.
1. Copy and save the **Client ID** - you'll need this for `EXPO_PUBLIC_CLERK_GOOGLE_ANDROID_CLIENT_ID`.

#### Web Client ID (for token verification)

1. In the same project, create another client. Next to **Credentials**, select **Create Credentials**. Then, select **OAuth client ID**.
1. For the **Application type**, select **Web application**.
1. Add a name (e.g., "Web client for token verification").
1. Under **Authorized redirect URIs**, select **Add URI** and paste the **Authorized Redirect URI** you saved from the Clerk Dashboard.
1. Select **Create**. A modal will open with your **Client ID** and **Client Secret**. Save these values somewhere secure. You'll need these for the following steps.

## Set the Client ID and Client Secret in the Clerk Dashboard (from your web client)

<Include src="_partials/authentication/social-connections/set-client-id-secret" />

## Add your iOS application to Clerk

Add your iOS application to the [**Native Applications**](https://dashboard.clerk.com/~/native-applications) page in the Clerk Dashboard. You will need your iOS app's **App ID Prefix** (Team ID) and **Bundle ID**.

## Add your Android application to Clerk

Add your Android application to the [**Native Applications**](https://dashboard.clerk.com/~/native-applications) page in the Clerk Dashboard. You will need your Android app's **package name**.

## Configure environment variables

Add the Google OAuth client IDs to your `.env` file:

```bash {{ filename: '.env' }}
EXPO_PUBLIC_CLERK_GOOGLE_WEB_CLIENT_ID=your-web-client-id.apps.googleusercontent.com
EXPO_PUBLIC_CLERK_GOOGLE_IOS_CLIENT_ID=your-ios-client-id.apps.googleusercontent.com
EXPO_PUBLIC_CLERK_GOOGLE_ANDROID_CLIENT_ID=your-android-client-id.apps.googleusercontent.com

# iOS only: URL scheme for Google Sign-In callback
# Format: com.googleusercontent.apps.{IOS_CLIENT_ID_PREFIX}
# IOS_CLIENT_ID_PREFIX is the part of your iOS Client ID before ".apps.googleusercontent.com"
EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME=com.googleusercontent.apps.your-ios-client-id
```

## Configure the Clerk Expo plugin (iOS only)

> [!NOTE]
> The `@clerk/clerk-expo` config plugin is **optional** and only required if you're using native Google Sign-In on iOS. It configures the URL scheme needed for Google's authentication callback. Android does not require this configuration.

Add the `@clerk/clerk-expo` plugin to your `app.json` or `app.config.ts`:

<CodeBlockTabs options={["app.json", "app.config.ts"]}>
```json {{ filename: 'app.json' }}
{
"expo": {
"plugins": ["@clerk/clerk-expo"],
"extra": {
"EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME": "com.googleusercontent.apps.your-ios-client-id"
}
}
}
```

```ts {{ filename: 'app.config.ts' }}
export default {
expo: {
plugins: ['@clerk/clerk-expo'],
extra: {
EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME: process.env.EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME,
},
},
}
```
</CodeBlockTabs>

The plugin resolves the `EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME` value from either of the following:

1. An environment variable (recommended for EAS builds, configured in `eas.json`).
1. The `config.extra` field in your app config.

For EAS builds, add the environment variable to your build profile in `eas.json`:

```json {{ filename: 'eas.json' }}
{
"build": {
"development": {
"env": {
"EXPO_PUBLIC_CLERK_GOOGLE_IOS_URL_SCHEME": "com.googleusercontent.apps.your-ios-client-id"
}
}
}
}
```

## Build your authentication flow

<Include src="_partials/expo/use-sign-in-with-google-example" />

## Create a native build

Create a native build with EAS Build or a local prebuild, since Google Authentication is not supported in Expo Go.

```bash {{ filename: 'terminal' }}
# Using EAS Build
eas build --platform ios
eas build --platform android

# Or using local prebuild
npx expo prebuild && npx expo run:ios --device
npx expo prebuild && npx expo run:android --device
```
</Steps>
21 changes: 10 additions & 11 deletions docs/guides/configure/auth-strategies/sign-in-with-google.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Sign in with Google
description: Learn how to configure Sign in with Google for your Clerk-powered Android app.
description: Learn how to use Clerk to natively Sign in with Google in your Android app.
sdk: android
---

Expand All @@ -15,24 +15,23 @@ sdk: android
title: "A Google Developer account is required.",
link: "https://console.developers.google.com/",
icon: "user-circle",
}
},
{
title: "Follow the Android quickstart",
link: "/docs/android/getting-started/quickstart",
icon: "android",
},
]}
/>

[Sign in with Google](https://support.google.com/accounts/answer/12849458?hl=en) helps you easily and securely sign in to third-party apps or services with your Google Account, without having to enter a username and password repeatedly across different services.

This guide will teach you how to add native Sign in with Google to your Clerk apps on Android platforms. This is different from Google OAuth - if you want to use Google OAuth, see the [dedicated guide](/docs/guides/configure/auth-strategies/social-connections/google).
This guide will teach you how to add native [Sign in with Google](https://support.google.com/accounts/answer/12849458?hl=en) to your Clerk apps on Android platforms. This is different from Google OAuth - if you want to use Google OAuth, see the [dedicated guide](/docs/guides/configure/auth-strategies/social-connections/google).

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 your [Google Cloud Console](https://console.cloud.google.com/).

<Steps>
## 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. In the **Choose provider** dropdown, select **Google**.
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 modal and page open.
<Include src="_partials/authentication/social-connections/enable-google-social-connection.mdx" />

## Create the Google Developer Android client

Expand All @@ -41,7 +40,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open
1. In the top-left, select the menu icon (**≡**) and select **APIs & Services**. Then, select **Credentials**.
1. Next to **Credentials**, select **Create Credentials**. Then, select **OAuth client ID.** You might need to [configure your OAuth consent screen](https://support.google.com/cloud/answer/6158849#userconsent). Otherwise, you'll be redirected to the **Create OAuth client ID** page.
1. For the **Application type**, select **Android**.
1. Complete the required fields.
1. Complete the required fields:
- **Package name**: Your package name is in your `build.gradle` file, formatted as `com.example.myclerkapp`.
- **SHA-1 certificate fingerprint**: To get your SHA-1, run the following command in your terminal:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ Enabling OAuth with [Google](https://developers.google.com/identity/protocols/oa
> [!WARNING]
> Google OAuth 2.0 **does not** allow apps to use WebViews for authentication. See the dedicated [Google blog post](https://developers.googleblog.com/en/modernizing-oauth-interactions-in-native-apps-for-better-usability-and-security) for more information. If your app requires users to sign in via in-app browsers, follow the setup instructions in the [Google Help guide](https://support.google.com/faqs/answer/12284343).

<If sdk={["expo", "android"]}>
> [!IMPORTANT]
> This guide explains how to configure Sign in with Google for web-based flows. To configure Sign in with Google on native applications (such as Android or Expo apps), see the [dedicated guide](/docs/guides/configure/auth-strategies/sign-in-with-google).
</If>

## Configure for your development instance

For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs—no other configuration is needed.
Expand All @@ -41,11 +46,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open
<Steps>
### 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. In the **Choose provider** dropdown, select **Google**.
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 modal and page open.
<Include src="_partials/authentication/social-connections/enable-google-social-connection.mdx" />

### Create a Google Developer project

Expand Down
4 changes: 4 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -1659,6 +1659,10 @@
"title": "`useSignInWithApple()`",
"href": "/docs/reference/expo/use-sign-in-with-apple"
},
{
"title": "`useSignInWithGoogle()`",
"href": "/docs/reference/expo/use-sign-in-with-google"
},
{
"title": "`useSSO()`",
"href": "/docs/reference/expo/use-sso"
Expand Down
Loading