Skip to content
Open
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
30 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
5965e5f
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Jan 5, 2026
fde997d
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Jan 5, 2026
96e1ef9
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin Jan 6, 2026
8c6b8d6
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
alexisintech Jan 6, 2026
0c3e1c9
docs review
alexisintech Jan 8, 2026
4ae2cf7
update
alexisintech Jan 8, 2026
72403f0
update quiz about app configs
alexisintech Jan 8, 2026
9d51926
address tutorialhero suggestion
alexisintech Jan 8, 2026
15cd9d2
update description and content for Sign in with Google guide
chriscanin Jan 9, 2026
2005946
android updates
alexisintech Jan 12, 2026
675ca87
Update docs/guides/configure/auth-strategies/sign-in-with-google.expo…
alexisintech Jan 12, 2026
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
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',
},
})
```
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ This guide will teach you how to add native [Sign in with Apple](https://develop
<Steps>
## Add your Native Application

Add your iOS application to the [**Native Applications**](https://dashboard.clerk.com/last-active?path=native-applications) page in the Clerk Dashboard. You will need your iOS app's **App ID Prefix** (Team ID) and **Bundle ID**.
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**.

## Enable Apple as a social connection

1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
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 **Apple**.
1. Ensure that **Enable for sign-up and sign-in** is toggled on.
Expand Down
176 changes: 176 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,176 @@
---
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",
}
]}
/>

[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 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

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.

## 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** for your project.

### Create OAuth 2.0 Credentials

You'll need to create three sets of credentials:

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

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 **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**.
1. Copy and save the **Client ID** - you'll need this for `EXPO_PUBLIC_CLERK_GOOGLE_WEB_CLIENT_ID`.
1. Copy the **Client ID** and **Client Secret** and paste them into the respective fields in the Clerk Dashboard. Then select **Add connection** to complete the setup.

#### iOS 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 **iOS**.
1. Add your iOS **Bundle ID** (from your `app.json` or `app.config.ts`).
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`.

## 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}
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
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight suggestion that doesn't need to be taken. But, I was thinking we could also have this under <Tabs> with Android and iOS as options, like we did for the rest of the file. @alexisintech

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah i considered that too! 🧠 👯 was going to test android first, and see what in the entire doc was going to get updated (bc i'm still not sure if tabs is the right direction, but won't know until we test android)

</Steps>
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 Down Expand Up @@ -41,7 +41,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
4 changes: 4 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -1586,6 +1586,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