I was developing an React Native App which integrate Firebase as Authentication System of the App.
The App compile fine, but when I try to invoke the GoogleSignIn method, the App says the message on the AndroidToast: "Se ha producido un error. Intentelo más tarde'+ error", where Error says: InvalidUserName.
The code of my login Screen was the following:
import React, {useContext, useEffect, useState} from 'react';import { Text, View, TextInput, Platform, KeyboardAvoidingView, Keyboard, Alert, TouchableOpacity,} from 'react-native';import {Background} from '../components/Background';import {WhiteLogo} from '../components/WhiteLogo';import {loginStyles} from '../theme/loginTheme';import {useForm} from '../hooks/useForm';import {StackScreenProps} from '@react-navigation/stack';import {AuthContext} from '../context/AuthContext';import {signInUser} from '../api/AuthApi';import {GoogleSignin, GoogleSigninButton} from 'react-native-google-signin';import {auth, Providers} from '../config/firebase';import {FirebaseUser} from '../interfaces/appInterfaces';import {ProtectedScreen} from './ProtectedScreen';import {ToastAndroid} from 'react-native';interface Props extends StackScreenProps<any, any> {}export const LoginScreen = ({navigation, route}: Props) => { const {signIn, errorMessage, removeError} = useContext(AuthContext); const {Firebase} = require('../config/firebase'); const {email, password, onChange} = useForm({ email: '', password: '', }); const auth = Firebase.auth; const [authenticated, setAuthenticated] = useState(false); GoogleSignin.configure({ scopes: ['https://www.googleapis.com/auth/drive.readonly'], webClientId: Providers.google.PROVIDER_ID, offlineAccess: true, forceConsentPrompt: true, accountName: Providers.google.PROVIDER_ID, }); //TODO: A lo mejor hay que usar un useEffect useEffect(() => { auth().onAuthStateChanged((user: FirebaseUser) => { if (user) { setAuthenticated(true); return () => <ProtectedScreen />; } }); ToastAndroid.show('Do not authenticated, redirenting...', ToastAndroid.LONG, ); //return <LoginScreen navigation={navigation} route={route} />; }, [authenticated]); useEffect(() => { if (errorMessage.length === 0) return; Alert.alert('Login incorrecto', errorMessage, [ { text: 'Ok', onPress: removeError, }, ]); }, [errorMessage]); const onLogin = () => { console.log({email, password}); Keyboard.dismiss(); signIn({correo: email, password}); }; async function onGoogleButtonPress() { const {idToken} = await GoogleSignin.signIn(); const googleCredential = auth.GoogleAuthProvider.credential(idToken); return auth.signInWithCredential(googleCredential); } return (<> {/* Background */}<Background /><KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}><View style={loginStyles.formContainer}> {/* Keyboard avoid view */}<WhiteLogo /><Text style={loginStyles.title}>Login</Text><Text style={loginStyles.label}>Email:</Text><TextInput placeholder="Ingrese su email:" placeholderTextColor="rgba(255,255,255,0.4)" keyboardType="email-address" underlineColorAndroid="white" style={[ loginStyles.inputField, Platform.OS === 'ios'&& loginStyles.inputFieldIOS, ]} selectionColor="white" onChangeText={value => onChange(value, 'email')} value={email} onSubmitEditing={onLogin} autoCapitalize="none" autoCorrect={false} /><Text style={loginStyles.label}>Contraseña:</Text><TextInput placeholder="******" placeholderTextColor="rgba(255,255,255,0.4)" underlineColorAndroid="white" secureTextEntry style={[ loginStyles.inputField, Platform.OS === 'ios'&& loginStyles.inputFieldIOS, ]} selectionColor="white" onChangeText={value => onChange(value, 'password')} value={password} onSubmitEditing={onLogin} autoCapitalize="none" autoCorrect={false} /> {/* Boton login */}<View style={loginStyles.buttonContainer}><TouchableOpacity activeOpacity={0.8} style={loginStyles.button} onPress={() => signInUser}><Text style={loginStyles.buttonText}>Login</Text></TouchableOpacity></View> {/* Crear una nueva cuenta */}<View style={loginStyles.newUserContainer}><TouchableOpacity activeOpacity={0.8} onPress={() => navigation.replace('RegisterScreen')}><Text style={loginStyles.buttonText}>Nueva cuenta </Text></TouchableOpacity></View><View style={loginStyles.googleButtonConteiner}><GoogleSigninButton style={loginStyles.googleButton} size={GoogleSigninButton.Size.Wide} color={GoogleSigninButton.Color.Dark} onPress={() => onGoogleButtonPress() .then(() => navigation.navigate('ProtectedScreen')) .catch(error => ToastAndroid.show('Se ha producido un error. Intentelo más tarde'+ error, ToastAndroid.LONG, ), ) } /></View></View></KeyboardAvoidingView></> );};And the code of my firebase.tsx was the following:
import firebase from 'react-native-firebase';import 'firebase/auth';import 'firebase/firestore';import {FIREBASE_CONFIG} from '../config/config';import { Firestore } from 'firebase/firestore';export const Firebase = firebase.initializeApp(FIREBASE_CONFIG, 'FirebaseApp');export const Providers = { google: firebase.auth.GoogleAuthProvider,}export const db = Firestoreexport const auth = firebase.auth();export default Firebase;import React, {useContext, useEffect, useState} from 'react';import { Text, View, TextInput, Platform, KeyboardAvoidingView, Keyboard, Alert, TouchableOpacity,} from 'react-native';import {Background} from '../components/Background';import {WhiteLogo} from '../components/WhiteLogo';import {loginStyles} from '../theme/loginTheme';import {useForm} from '../hooks/useForm';import {StackScreenProps} from '@react-navigation/stack';import {AuthContext} from '../context/AuthContext';import {signInUser} from '../api/AuthApi';import {GoogleSignin, GoogleSigninButton} from 'react-native-google-signin';import {auth, Providers} from '../config/firebase';import {FirebaseUser} from '../interfaces/appInterfaces';import {ProtectedScreen} from './ProtectedScreen';import {ToastAndroid} from 'react-native';interface Props extends StackScreenProps<any, any> {}export const LoginScreen = ({navigation, route}: Props) => { const {signIn, errorMessage, removeError} = useContext(AuthContext); const {Firebase} = require('../config/firebase'); const {email, password, onChange} = useForm({ email: '', password: '', }); const auth = Firebase.auth; const [authenticated, setAuthenticated] = useState(false); GoogleSignin.configure({ scopes: ['https://www.googleapis.com/auth/drive.readonly'], webClientId: Providers.google.PROVIDER_ID, offlineAccess: true, forceConsentPrompt: true, accountName: Providers.google.PROVIDER_ID, }); //TODO: A lo mejor hay que usar un useEffect useEffect(() => { auth().onAuthStateChanged((user: FirebaseUser) => { if (user) { setAuthenticated(true); return () => <ProtectedScreen />; } }); ToastAndroid.show('Do not authenticated, redirenting...', ToastAndroid.LONG, ); //return <LoginScreen navigation={navigation} route={route} />; }, [authenticated]); useEffect(() => { if (errorMessage.length === 0) return; Alert.alert('Login incorrecto', errorMessage, [ { text: 'Ok', onPress: removeError, }, ]); }, [errorMessage]); const onLogin = () => { console.log({email, password}); Keyboard.dismiss(); signIn({correo: email, password}); }; async function onGoogleButtonPress() { const {idToken} = await GoogleSignin.signIn(); const googleCredential = auth.GoogleAuthProvider.credential(idToken); return auth.signInWithCredential(googleCredential); } return (<> {/* Background */}<Background /><KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}><View style={loginStyles.formContainer}> {/* Keyboard avoid view */}<WhiteLogo /><Text style={loginStyles.title}>Login</Text><Text style={loginStyles.label}>Email:</Text><TextInput placeholder="Ingrese su email:" placeholderTextColor="rgba(255,255,255,0.4)" keyboardType="email-address" underlineColorAndroid="white" style={[ loginStyles.inputField, Platform.OS === 'ios'&& loginStyles.inputFieldIOS, ]} selectionColor="white" onChangeText={value => onChange(value, 'email')} value={email} onSubmitEditing={onLogin} autoCapitalize="none" autoCorrect={false} /><Text style={loginStyles.label}>Contraseña:</Text><TextInput placeholder="******" placeholderTextColor="rgba(255,255,255,0.4)" underlineColorAndroid="white" secureTextEntry style={[ loginStyles.inputField, Platform.OS === 'ios'&& loginStyles.inputFieldIOS, ]} selectionColor="white" onChangeText={value => onChange(value, 'password')} value={password} onSubmitEditing={onLogin} autoCapitalize="none" autoCorrect={false} /> {/* Boton login */}<View style={loginStyles.buttonContainer}><TouchableOpacity activeOpacity={0.8} style={loginStyles.button} onPress={() => signInUser}><Text style={loginStyles.buttonText}>Login</Text></TouchableOpacity></View> {/* Crear una nueva cuenta */}<View style={loginStyles.newUserContainer}><TouchableOpacity activeOpacity={0.8} onPress={() => navigation.replace('RegisterScreen')}><Text style={loginStyles.buttonText}>Nueva cuenta </Text></TouchableOpacity></View><View style={loginStyles.googleButtonConteiner}><GoogleSigninButton style={loginStyles.googleButton} size={GoogleSigninButton.Size.Wide} color={GoogleSigninButton.Color.Dark} onPress={() => onGoogleButtonPress() .then(() => navigation.navigate('ProtectedScreen')) .catch(error => ToastAndroid.show('Se ha producido un error. Intentelo más tarde'+ error, ToastAndroid.LONG, ), ) } /></View></View></KeyboardAvoidingView></> );};I hope you can guess where the error could be, and if like this take thank in advance!