-
Notifications
You must be signed in to change notification settings - Fork 962
Add guides for native Sign in with Google in Expo and document useSig… #2786
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 16 commits
748f973
6a23771
29ab82d
9db3d01
dabc038
d7c9f14
4e88cb3
ec79f81
ea90706
bc036c5
5be3692
c94235d
0eb9922
298d8b3
170ace2
e2a0ddb
0168ba5
cee03d3
4d5c426
5965e5f
fde997d
96e1ef9
8c6b8d6
0c3e1c9
4ae2cf7
72403f0
9d51926
15cd9d2
2005946
675ca87
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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 |
|---|---|---|
| @@ -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. | ||
SarahSoutoul marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ### 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`. | ||
chriscanin marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 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. | ||
SarahSoutoul marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| #### 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**. | ||
SarahSoutoul marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
SarahSoutoul marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ## 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} | ||
SarahSoutoul marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 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> | ||
Uh oh!
There was an error while loading. Please reload this page.