Search code examples
react-nativegoogle-signinstrapireact-google-login

How to properly setup Google Login in react native (no expo) android with Strapi as back-end?


While trying to implement google login in my react native app (am not using expo) I am facing an issue and I am struggling to understand how to properly set up the whole thing with Google cloud OAuth 2.0 clients.

I have two OAuth clients setup, an Android and a Web application. I made sure that the SHA-1 fingerprint for the Android client is correct.

From my understanding (from various tutorials and sources), i have to use the web application id in my react native project using the @react-native-google-signin/google-signin package and then after retrieving some token send in to my Strapi back-end and using the android client id to verify it and execute the rest of the login logic.

The android popup for choosing an account appears properly as shown in the screenshot bellow, but i get the following error: Google Sign-In Error [com.google.android.gms.common.api.ApiException: DEVELOPER_ERROR]

google login popup

I have tried to either use the android client key instead but i still get the same error. The code is the following:

import { GoogleSignin } from '@react-native-google-signin/google-signin';

    GoogleSignin.configure({
        webClientId: '**REDACTED**.apps.googleusercontent.com',
        offlineAccess: true,
    });

    const signInWithGoogle = async () => {
     
        try {
            await GoogleSignin.hasPlayServices(); //executes normally
           
            const userInfo = await GoogleSignin.signIn(); //here is where the error happens
            
            // @ts-ignore
            const { idToken } = userInfo;
            
            const response = await axios.post(`${STRAPI_URL}auth/google`, {
                idToken,
            });
            
            console.log('User signed in', response.data);
            ToastAndroid.show('Google login success', ToastAndroid.SHORT);
            
        } catch (error) {
            console.log(error);
            console.error('Google Sign-In Error', error);
        }
    };

where REDACTED is either the web client id or the android id (i tried them both).

My android manifest:

android manifest

and also my build.gradle includes this in the dependencies:

implementation 'com.google.android.gms:play-services-auth:21.2.0'

My Strapi logic has nothing to do with it since the error occurs at const userInfo = await GoogleSignin.signIn(); //here is where the error happens, am happy to include it if requested but i believe is not necessary.

I will also include two screenshots with both the google cloud console clients. Please note that i did not add any URIs in the Authorized redirect URIs list, the urls that are listed there are for an other application that uses the same client id. So perhaps that is what i am missing.

android OAuth client

web application OAuth client


Solution

  • I have figured out the issue. I have to make sure that the 'Authorized redirect URIs' list is empty in the Web Application OAuth 2 client.