Error: 400 Invalid request. Expo Auth Session error using google signin

Question

I used Google Sign in on my react native app using Expo Auth Session. I created the app using Expo and I am using react context API to serve the login state to the entire application. However, on deploying Expo Auth Session, having followed the docs to the letter, it returns the "400 invalid request error" saying, "You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy for keeping apps secure.

I ensured that I had created the OAuth profile and keys successfully, and that my implementation is correct using other people's example, as well as the Expo Auth Session docs. Below are my codes.

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import useAuth, { AuthProvider } from './hooks/useAuth';
import HomeScreen from './screens/HomeScreen';
import ChatScreen from './screens/ChatScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

export default function App() {
  const { user } = useAuth();

  return (

    <NavigationContainer>
      <AuthProvider>
        <Stack.Navigator>
          {
            user ? (
              <>
                <Stack.Screen name='HomeScreen' component={HomeScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen name='ChatScreen' component={ChatScreen}
                  options={{ headerShown: false }}
                />
              </>
            ) : (
              <Stack.Screen name='LoginScreen' component={LoginScreen}
                options={{ headerShown: false }}
              />
            )
          }
        </Stack.Navigator>
      </AuthProvider>
    </NavigationContainer>
  );
}

// useAuth.js

import { createContext, useContext, useState } from 'react';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';

import { android_ClientId, ios_ClientId, web_ClientId } from '@env';

WebBrowser.maybeCompleteAuthSession();

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
    const [userInfo, setUserInfo] = useState(null);

    const [request, response, promptAsync] = Google.useAuthRequest({
        androidClientId: android_ClientId,
        iosClientId: ios_ClientId,
        webClientId: web_ClientId,
    });

    const signInWithGoogle = async () => {
        await promptAsync();
        if (response?.type === "success") {
            await getUserInfo(response.authentication.accessToken);
        }
    }

    const getUserInfo = async (token) => {
        if (!token) return;
        try {
            const response = await fetch(
                "https://googleapis.com/userinfo/v2/me",
                {
                    headers: {
                        Authorization: `Bearer ${token}`
                    }
                }
            );

            const user = await response.json();
            setUserInfo(user);
        } catch (error) {
            console.log(error)
        }
    }


    return (
        <AuthContext.Provider value={{
            user: userInfo,
            signInWithGoogle
        }}>
            {children}
        </AuthContext.Provider >
    )
}

export default function useAuth() {
    return useContext(AuthContext);
}

// app.json

{
  "expo": {
    "name": "tinder-clone",
    "slug": "tinder-clone",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true, 
      "bundleIdentifier": "host.exp.exponent"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "host.exp.exponent"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "91d50885-6b72-459f-b363-e268a2b3715c"
      }
    },
    "scheme": ["exp", "https", "tinder-clone"]
  }
}

// package.json

{
  "name": "tinder-clone",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "author": {
    "name": "Daniel Ohinoyi Isah",
    "email": "[email protected]"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-config": "^0.17.3",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "expo": "~50.0.2",
    "expo-auth-session": "~5.4.0",
    "expo-crypto": "~12.8.0",
    "expo-status-bar": "~1.11.1",
    "expo-web-browser": "~12.8.2",
    "firebase": "^10.7.2",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.73.2",
    "react-native-dotenv": "^3.4.9",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "3.3.2"
  },
  "private": true
}