How to deal with Access blocked: This app's request is invalid (trying to sign in to Google using expo)

Question

I'm trying to write a code to sign in to Google.There is a button which when you click on it is supposed to get you to the page where you sign in to your Google account but when I click on it, It gives me this error: How to deal with Access blocked: This app's request is invalid You can't sign in because this app sent an invalid request. You can try again later,or contact the developer about this issue.

The weird thing is that when I give webcliendId and run expo start, it works well for expo go app. but the problem happens when I comment the webclientId and build an APK and after testing the apk I get that error. I don't really know what should I do, it's been weeks that I'm just trying to write a google sign in with expo for android. I've tried many packages but didn't get the proper result.

This is my code:

import { useState,useEffect} from 'react';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import {WebApplicationClientId,WebApplicationClientSecret,androidClientId,IOSclientId} from '@env';


WebBrowser.maybeCompleteAuthSession();


export default function App() {
    const [accessToken, setAccessToken] = useState(null);
    const [userInfo, setUserInfo] = useState(null);


    const [request, response,promptAsync] = Google.useIdTokenAuthRequest({
    //clientId:WebApplicationClientId, 
    androidClientId:androidClientId,
    //iosClientId:IOSclientId
   });


  useEffect(() => { 
    if(response?.type === 'success'){ 
      setAccessToken(response.authentication.accessToken);
      accessToken && getUserInfo();
    }
  },[response, accessToken])


  async function getUserInfo(){
    let result = await fetch("https://www.googleapis.com/userinfo/v2/me",{
      headers: {Authorization: `Bearer ${accessToken}` }
    });
    const userInfo = await result.json();
    setUserInfo(userInfo);
  }





  return (
    <View style={styles.container}> 
      <Text> {WebApplicationClientId} </Text>
      {userInfo && 
        <View> 
          <Text>Name: {userInfo.name}</Text>
          <Text>Email: {userInfo.email} </Text>
        </View>
     }
      {userInfo === null && 
        <View> 
          <Button
            onPress={()=> {
              promptAsync();
            }}
            disabled={!request}
            title='Sign in to Google'
          /> 
        </View>
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

For Expo go you can use web client credential. For apk you need another Android client id. For ios also another one. All these are written in Expo's doc online.
You can add credentials at google cloud console.