react-native-google-signin/google-signin

Google Sign-In not working on Android

mohdabbas opened this issue · 8 comments

mohdabbas commented

I'm encountering an issue with Google Sign-In in my React Native project. Recently, the Google Sign-In functionality has stopped working on Android devices. Previously, it was functioning correctly, but now when users attempt to sign in with Google, a popup appears to select the Google account, but nothing happens after selecting an account. It's worth noting that Google Sign-In continues to work as expected on iOS devices.

Below, I've provided the relevant code snippet from the GoogleLogin.js file along with the project details. Any assistance in resolving this issue would be greatly appreciated.

// GoogleLogin.js
import { StyleSheet, Text, View, Image, TouchableOpacity, ActivityIndicator, Platform } from "react-native";
import React from "react";
import { COLORS } from "../../theme";
import {
  GoogleSignin,
  statusCodes,
} from '@react-native-google-signin/google-signin';
import { setAccessToken } from "../../store/slices/generalSlice";
import { useDispatch } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import axios from "axios";
import { API_URL } from "../../config/constants";
import { useLoginUserMutation, useSignUpUserMutation } from "../../store/api/api";
import { useToast } from "react-native-toast-notifications";

export default function GoogleLogin() {
  const toast = useToast();

  const [gSignIn, setGSignIn] = React.useState()
  const dispatch = useDispatch()
  const navigation = useNavigation()

  const [signUpUser, { isLoading }] = useSignUpUserMutation()
  const [loginUser, { isLoading: loginLoading }] = useLoginUserMutation();

   const handleLogin = async (body) => {
    try {
      const res = await loginUser(body)
      if (res?.error) {
        toast.show("Identifiants de connexion invalides", {
          type: "warning",
          placement: "bottom",
          duration: 4000,
          offset: 30,
          animationType: "slide-in",
        });
      }
      if (res.data?.access_token) {
        dispatch(setAccessToken(res.data?.access_token))
        navigation.popToTop()
      }
    } catch (e) {
      // Handle error
    }
  };

  const handleSignUp = async (body, loginSeq) => {
    try {
      const res = await signUpUser(body)
      if (res?.error) {
        // Handle error
      }
      // Handle success cases
    } catch (e) {
      // Handle error
    }
  }

  const checkSocialUser = async (props) => {
    const response = await axios.get(`${API_URL}verifySocialUserId`, { params: props })
    return response.data
  }

  const SignIn = async () => {
    try {
      GoogleSignin.configure({
        webClientId: "xxx.apps.googleusercontent.com",
        androidClientId: "xxx-xxx.apps.googleusercontent.com",
        iosClientId: "xxx-xxx.apps.googleusercontent.com"
      })
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      setGSignIn(userInfo);
      if (userInfo.user) {
        const isGoogleUser = await checkSocialUser({ google_user_id: userInfo.user.id })
        if (isGoogleUser && !isGoogleUser.status) {
          handleSignUp({ email: userInfo.user.email, first_name: userInfo.user.givenName, last_name: userInfo.user.familyName, password: userInfo.user.familyName+userInfo.user.id, google_user_id: userInfo.user.id, register_medium: 'google' }, ()=>handleLogin({ email: userInfo.user.email, password: userInfo.user.familyName+userInfo.user.id }))
        } else if (isGoogleUser.status) {
          handleLogin({ email: userInfo.user.email, password: userInfo.user.familyName+userInfo.user.id })
        } else {
          alert("Some error occurred");
        }
      }
    } catch (error) {
      // Handle error
    }
  };

  return (
    <View>
      {(isLoading || loginLoading) ? <ActivityIndicator size={"large"} color={COLORS.primary}/> : <TouchableOpacity style={styles.socialLogin} onPress={() => { SignIn() }}>
        <Image
          source={require("../../assets/icons/google-logo.png")}
          style={styles.socialicon}
        />
        <Text style={styles.socialTxt}>Connecter avec Google</Text>
      </TouchableOpacity>}
    </View>
  );
}

const styles = StyleSheet.create({
  ...
});

Expected Behavior
I expected Google Sign-In to work smoothly on both Android and iOS devices.

Actual Behavior
Google Sign-In is not working on Android devices. When users click "Sign in with Google", a popup appears to select the Google account, but nothing happens after selecting an account.

Environment
react-native version: 0.72.6
@react-native-google-signin/google-signin version: 11.0.1
Expo version: ~49.0.6

Please let me know if you need any further information. Thank you!

krisbaum74 commented

i have exactly the same issue, but its intermittent. I feel more sane now that i see im not the only one.

mohdabbas commented

Users are facing the issue, but there is no solution available! Strange!

dbenader commented

@mohdabbas completely unrelated, but how is it that you're able to pass androidClientId to GoogleSignIn.configure?

the docs show that that property is not available, and I get an error when I try to include it

  • 👍1
RobledoFootbao commented

Same here. iOS working and Android stopped.

vonovak commented

Hello and thanks for reporting,
if this is an intermittent issue, I don't think there's much I can do about it, so I'm going to close this, but feel free to discuss further.

As for androidClientId - that option is simply ignored by the module.

Thank you 🙂

mohdabbas commented

We were not expecting this answer!