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);
});
};