Sign in with Google

Enable Google as a social connection

1. In the Clerk Dashboard, navigate to the SSO connections⁠ page.
2. Select Add connection and select For all users.
3. Select Google from the provider list.
4. Ensure that both Enable for sign-up and sign-in and Use custom credentials are toggled on.
5. Save the Authorized Redirect URI somewhere secure. Keep this page open.

Configure Google Cloud Console

Before you can use Sign in with Google 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⁠.
2. Select an existing project or create a new one⁠. You'll be redirected to your project's Dashboard page.
3. Enable the Google+ API⁠ for your project.

Create OAuth 2.0 Credentials

You'll need to create two sets of OAuth 2.0 credentials: one for your native platform and one for the web client. Even if you are building a native app, you still need to create the web client for Clerk's token verification.

If you're building for both iOS and Android, ensure that you create all three sets of credentials (iOS, Android, and web).

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

1. Navigate back to the Clerk Dashboard where the configuration page should still be open. Paste the Client ID and Client Secret values that you saved into the respective fields.
2. Select Save.

Add your native application to Clerk

Configure environment variables

Add the Google OAuth client IDs to your .env file. You'll have saved these values in the previous steps.

Set up native Sign in with Google (iOS only)

This step is for iOS only and is optional. Currently, Sign in with Google will open a web browser to initiate the flow. If you'd rather have the app handle the flow natively and not open a web browser, follow this step.

Configure the Clerk Expo plugin

The @clerk/expo config plugin configures the URL scheme needed for Google's authentication callback. Add the plugin to your app.json or app.config.ts, depending on your app's configuration:

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).
2. The config.extra field in your app config.

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

Build your authentication flow

1. The useSignInWithGoogle() hook requires expo-crypto for generating secure nonces during the authentication flow.

   npx expo install expo-crypto

2. The following example demonstrates how to use the useSignInWithGoogle() hook to manage the Google authentication flow. Because the useSignInWithGoogle() hook automatically manages the transfer flow⁠ between sign-up and sign-in, you can use this component for both your sign-up and sign-in pages.

   import { useSignInWithGoogle } from '@clerk/expo/google'
   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('Sign in with Google 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',
     },
   })

   Expand code

3. Then, add the <GoogleSignInButton /> component to your sign-in or sign-up page.

Create a native build

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