androidreact-nativegoogle-signin

React Native Google Sign In Developer Error


I have been trying to implement React Native Google Sign In for few days, but to no avail.

Here are the things, i have done

  1. Creating Oauth Credential in GCP

I have created, 3 credentials: one for web, one for android and one for ios. enter image description here

Here is Web Configuraion enter image description here

Here is Android Configuration enter image description here

Here is IOS Configuration enter image description here

  1. React Native Code

       // src/screens/LoginScreen.js
     import React, { useState } from "react";
     import {
     View,
     Text,
    TextInput,
    TouchableOpacity,
    Image,
    } from "react-native";
    import {
    GoogleSignin,
    statusCodes,
    } from '@react-native-google-signin/google-signin';
    import styles from "../styles/LoginScreenStyles";
    import Icon from "react-native-vector-icons/MaterialIcons";
    import GooglePng from "../../assets/google.png";
    import { ANDROID_SSO, API, IOS_SSO, WEB_SSO } from "../utils/constants";
    import axios from "axios";
    import SpinnerOverlay from "../components/SpinnerOverlay";
    
    const LoginScreen = ({ navigation }) => {
    const [loading, setLoading] = useState(false);
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [user, setUser] = useState("");
    const [error, setError] = useState("");
    const usernameRegex = /^[a-zA-Z0-9._-]{3,20}$/;
    const passwordRegex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/;
    
    const handleNativeLogin = async () => {
    try {
    setLoading(true);
    const userName = user;
    const userPassword = password;
    
    const response = await axios.post(API.LOGIN, {
     username: userName,
     password: userPassword,
     sso: false,
    });
    
    const { validUser, isVerified, email } = response.data.data;
    
    if (validUser) {
     if (isVerified) {
       navigation.navigate("Home");
     } else {
       navigation.navigate("RegistrationVerification", { email });
       await axios.post(API.SEND_OTP, { email });
     }
     setUser("");
     setPassword("");
     } else {
     setError("Invalid Username or Password");
     }
     } catch (err) {
     setError(err.response?.data?.message?.message || "An error occurred.");
     } finally {
     setLoading(false);
     setShowPassword(false);
     }
     };
    
     GoogleSignin.configure({
     webClientId: 'web_client_id.apps.googleusercontent.com',
     offlineAccess: true
    
     });
    
     **const handleGoogleLogin = async () => {
    try {
     setLoading(true);
     // Ensure Play Services are available (Android only)
     await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true});
       // Start Google Sign-In process
       const userInfo = await GoogleSignin.signIn();
       // Example backend response handling
       const response = await axios.post(API.LOGIN, {
       username: userInfo.user.email,
       sso: true,
       });
       if (response.data.success) {
        navigation.navigate("Home");
       } else {
       setError("Error Logging In via Google");
       }
       } catch (err) {
       if (err.code === statusCodes.SIGN_IN_CANCELLED) {
       setError("Sign-in cancelled.");
       } else if (err.code === statusCodes.IN_PROGRESS) {
       setError("Sign-in already in progress.");
       } else if (err.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
       setError("Google Play Services not available.");
       } else {
       setError("An unknown error occurred.");
       console.error(err);
       }
       } finally {
       setLoading(false);
       }
       };**
    
       return (
       <View style={styles.container}>
       {loading && <SpinnerOverlay />}
       <Text style={styles.title}>Welcome Back!</Text>
       <TextInput
       style={styles.input}
       placeholder="Email/Username"
       keyboardType="email-address"
       value={user}
       onChangeText={setUser}
       />
      <View style={styles.passwordContainer}>
      <TextInput
       style={styles.passwordInput}
       placeholder="Password"
       secureTextEntry={!showPassword}
       value={password}
       onChangeText={setPassword}
      />
      <TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
       <Icon
         name={showPassword ? "visibility" : "visibility-off"}
         size={24}
         color="gray"
       />
      </TouchableOpacity>
      </View>
      <TouchableOpacity>
      <Text
       style={styles.forgotPasswordText}
       onPress={() => navigation.navigate("ForgotPassword")}
      >
       Forgot Password?
      </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.loginButton} onPress={handleNativeLogin}>
      <Text style={styles.loginButtonText}>Login</Text>
      </TouchableOpacity>
      {error ? <Text style={styles.errorText}>{error}</Text> : null}
      <Text style={styles.orText}>or</Text>
    
      {/* Google Login */}
      <TouchableOpacity
      style={styles.socialButton}
      onPress={handleGoogleLogin}
      >
      <Image source={GooglePng} style={styles.socialIcon} />
      <Text style={styles.socialButtonText}>Login with Google</Text>
      </TouchableOpacity>
    
      <TouchableOpacity
      onPress={() => {
       navigation.navigate("SignUp", { sso: false });
       setUser("");
       setPassword("");
       setShowPassword(false);
       setError("");
       }}
       >
       <Text style={styles.signupText}>Don't have an account? Sign up</Text>
       </TouchableOpacity>
       </View>
       );
       };
    
       export default LoginScreen;
    

3.Now i am connected to my samsung phone via usb for developing purpose, but whenever i click on google sign in i get prompted with popup to select email out of all available ones on my mobile, but once i select an email, i get error

com.google.android.gms.common.api.apiexception developer_error

To debug, i have tested the web client id on a react app run on port 3000, and it works fine on react app.

How to solve this issue? Let me know, if anybody needs anything else to get more context


Solution

  • Are you using the default debug.keystore? if yes try creating a new release keystore and adding the SHA1 to the dev console.