-
Notifications
You must be signed in to change notification settings - Fork 906
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
Open
chriscanin
wants to merge
19
commits into
main
Choose a base branch
from
chris/mobile-289-expo-google-universal-sign-in
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
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 6a23771
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin 29ab82d
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin 9db3d01
Update Sign in with Google guide and add useSignInWithGoogle reference
chriscanin dabc038
docs review
SarahSoutoul d7c9f14
Fix build
SarahSoutoul 4e88cb3
Fix wrong method
SarahSoutoul ec79f81
Update Sign in with Google guide to reflect correct environment varia…
chriscanin ea90706
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin bc036c5
Refactor code blocks in Sign in with Google guide for consistency in …
chriscanin 5be3692
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin c94235d
docs review pt 2 after changes
SarahSoutoul 0eb9922
linting
SarahSoutoul 298d8b3
L was missing from "Learn"
chriscanin 170ace2
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
chriscanin e2a0ddb
Update Google Sign-In setup instructions for OAuth client ID creation
chriscanin 0168ba5
docs review pt2
SarahSoutoul cee03d3
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
SarahSoutoul 4d5c426
Merge branch 'main' into chris/mobile-289-expo-google-universal-sign-in
SarahSoutoul File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
..._partials/authentication/social-connections/enable-google-social-connection.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
178
docs/guides/configure/auth-strategies/sign-in-with-google.expo.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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**. | ||
|
|
||
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.
Show resolved
Hide resolved
|
||
| # 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> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.