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
I have created, 3 credentials: one for web, one for android and one for ios.
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
Are you using the default debug.keystore? if yes try creating a new release keystore and adding the SHA1 to the dev console.