This app because it doesn't comply with Google's OAuth 2.0 policy for keeping apps secure

Question

I'm trying to build a mobile app with react native but I'm getting this error while trying loggin in using Google Sign-In:

Access blocked: authorisation error

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy for keeping apps secure. You can let the app developer know that this app doesn't comply with one or more Google validation rules. Learn more about this error If you are a developer of online-quiz, see error details. Error 400: invalid_request why getting this error?

Here is my codes

import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { useEffect, useState } from 'react';
import Config from 'react-native-config';
import { Image, Text, TouchableOpacity, View } from 'react-native';

WebBrowser.maybeCompleteAuthSession();

const LoginScreen =()=> {
    const [accessToken, setAccessToken] = useState(null);
    const [user, setUser] = useState(null);
    const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
        webClientId: "my_web_id",
        androidClientId: "my_andorid_id",
        iosClientId: "my_ios_id"
    });

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

    useEffect(() => {
        if (accessToken) {
            fetchUserInfo();
        }
    }, [accessToken]);

    async function fetchUserInfo() {
        let response = await fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        });
        const userInfo = await response.json();
        setUser(userInfo);
    }

    const ShowUserInfo = () => {
        if (user) {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text style={{ fontSize: 35, fontWeight: 'bold' }}>Welcome</Text>
                    <Image source={{ uri: user.picture }} style={{ width: 100, height: 100, borderRadius: 50 }} />
                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{user.name}</Text>
                </View>
            );
        } else {
            return null;
        }
    };

    return (
        <View>
            <ShowUserInfo />
            {user === null && (
                <>
                    <Text style={{ fontSize: 35, fontWeight: 'bold' }}>Welcome</Text>
                    <TouchableOpacity disabled={!request} onPress={() => promptAsync()}>
                        <Text>Login</Text>
                    </TouchableOpacity>
                </>
            )}
        </View>
    );
}
export default LoginScreen;

I'm not sure about the Authorised JavaScript origins and Authorised redirect URIs to be used for creating google Client ID for Web application.

If any help, let me know.

I tried using different URIs like "http://localhost" but still no change.

Answer 1

You need to configure your application to run https.

Http is not secure for authentication