0

Tengo un pequeño componente para crear una cuenta de usuario en firebase authenticator y además que se agregue un documento a la coleccion usuarios en firebase.

El código es el siguiente:

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';

firebase.initializeApp({
    apiKey: .....
});


//Class Auth React Hooks
function SignIn() {
    const [user, setUser] = useState(null);

    const handleInput = (e) => {
        setUser({
            ...user,
            [e.target.name]: e.target.value
        });
    };

    const signIn = () => {
        firebase.auth().createUserWithEmailAndPassword(`${user.email}`, `${user.password}`)
            .then((result) => {
                firebase.firestore().collection('users').add({
                    id: result.user.uid,
                    email: user.email,
                    password: user.password,
                    displayName: user.displayName,
                    birthday: user.birthday,
                    createdAt: new Date(),
                    updatedAt: new Date()
                })
                    .then((doc) => {
                        console.log(`Se ha creado el usuario ${doc.data()}`);
                    })
                    .catch((error) => {
                        console.log(error.code);
                    })
            })
            .catch((error) => {
                console.log(error.code, error.message);
            });
    };
    return (
        <div>
            <input type="email" placeholder="Correo electrónico" name="email" onChange={handleInput} required/>
            <input type="password" placeholder="Escoge una contraseña" name="password" onChange={handleInput} required/>
            <input type="date" placeholder="Fecha de nacimiento" name="birthday" onChange={handleInput} required/>
            <input type="text" placeholder="Nombre" name="displayName" onChange={handleInput} required/>
            <button onClick={signIn}>Crear una cuenta</button>
        </div>
    )
}


ReactDOM.render(
    <React.StrictMode>
        <SignIn />
    </React.StrictMode>,
    document.getElementById('auth')
);

El componente se renderiza sin problemas, además capturo los datos que se escriben en los input mediante el evento y react hooks. El problema es cuando se crea el usuario, toma los parametros como undefined. Es decir, cuando hago el llamado a user (el estado) y lo intento pasar en el metodo signInWithEmailAndPassword() de firebase, en la consola me dice que el correo no es valido. Cuando imprimo en console me da undefined.

He testeado el método manualmente, insertando los valores con constantes y funciona perfectamente, registra el usuario en Auth de Firebase y además, ingresa un documento a la coleccion users en Firestore.

Entoces el problema debe estar en el estado y la forma en que hago uso de ellos. La segunda línea despues de crear el usuario en Auth, es la encargada de agregar el documento con toda la información a Firestore, si lo agrega, debería retornar el DocumentData, es decir, el documento que se agregó pero, cuando lo imprimo en consola (console.log(doc.data())) igualmente me dice undefined.

const signIn = () => {
        firebase.auth().createUserWithEmailAndPassword(`${user.email}`, `${user.password}`)
            .then((result) => {
                firebase.firestore().collection('users').add({
                    id: result.user.uid,
                    email: user.email,
                    password: user.password,
                    displayName: user.displayName,
                    birthday: user.birthday,
                    createdAt: new Date(),
                    updatedAt: new Date()
                })
                    .then((doc) => {
                        console.log(`Se ha creado el usuario ${doc.data()}`);
                    })
                    .catch((error) => {
                        console.log(error.code);
                    })
            })
            .catch((error) => {
                console.log(error.code, error.message);
            });
    };
1
  • prueba inicializando el estado user con un simple objeto
    – Enzo
    Commented el 3 nov. 2020 a las 17:21

1 respuesta 1

0

Creo que el problema puede estar en handleInput y la forma como estas actualizando el user state, hechale un vistazo a este link https://reactjs.org/docs/hooks-reference.html#functional-updates

La solución seria algo así:


const handleInput = (e) => {
    setUser(prevUser => {
        return {...prevUser, [e.target.name]: e.target.value};
    });
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.