Unable to implement “Sign in with Google in React native Expo”

I have been trying to implement google sign in expo go and I have followed almost all the tutorials on youtube and configured it correctly but everytime I click on the button if using androidClientId, i am redirected to the pop-up which show error: "Access blocked Error 400: redirect_uri_mismatch" something like that but If I use clientId instead of androidClientId, it redirects to the pop-up where I can select an account and upon selecting account I get to the page which shows error such as "Something went wrong trying to finish signing in. Please close this screen to go back to the app" and upon clicking close button and getting back to the app in "Expo Go", i get response type as dismiss.

import React, { useState, useEffect } from 'react';
import { View, Text, Pressable } from 'react-native';
import { useNavigation } from 'expo-router';
import { NavigationProp } from '@/lib/types';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import AsyncStorage from '@react-native-async-storage/async-storage';

WebBrowser.maybeCompleteAuthSession();

const Index = () => {
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [userInfo, setUserInfo] = useState<any>(null);
  const navigation = useNavigation<NavigationProp>();

  const webClientId = '';
  const androidId = '';

  const [request, response, promptAsync] = Google.useAuthRequest({
    clientId: webClientId,
    // androidClientId: androidId,
    scopes: ['profile', 'email'],
    redirectUri: 'https://auth.expo.io/@username/Frontend',
  });

  useEffect(() => {
    handleSignInWithGoogle();
  }, [response]);

  const handleSignInWithGoogle = async () => {
    if (response?.type === 'success') {
      const { accessToken } = response.authentication || {};
      await getUserInfo(accessToken ?? '');
    } else if (response?.type === 'error') {
      console.error('Error during Google sign-in:', response.error);
    } else {
      console.warn('User dismissed the sign-in dialog or unknown response type');
    }
  };

  const getUserInfo = async (token: any) => {
    if (!token) return;

    try {
      const res = await fetch('https://www.googleapis.com/userinfo/v2/me', {
        headers: { Authorization: `Bearer ${token}` },
      });
      const user = await res.json();
      await AsyncStorage.setItem('@user', JSON.stringify(user));
      setUserInfo(user);
    } catch (error) {
      console.error('Failed to fetch user info:', error);
    }
  };

  return (
    <View>
      <Text>{JSON.stringify(userInfo)}</Text>
      <Pressable onPress={() => promptAsync()}>
        <Text>Login with Google</Text>
      </Pressable>
    </View>
  );
};

export default Index;

Any help will be appreciated!

Note: I have set the androidClientId and webClientId only empty while pasting here not in my origional code.

You need to sign in to view this answers

Related Post