Inicializar Firebase(CDN)
<script src="<https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js>"></script>
<script src="<https://www.gstatic.com/firebasejs/7.18.0/firebase-auth.js>"></script>
var firebaseConfig = {
apiKey:
authDomain:
databaseURL
projectId:
storageBucket:
messagingSenderId
appId:
};
firebase.initializeApp(firebaseConfig);
Login
Función que permite el inicio de sesión
// ---------------------------------FUNCION PARA EL INICIO DE SESION-------------------
const handleLogin = () => {
clearErrors(); // Borrar los errores
fire
.auth() //Autenticacion de usuarios
.signInWithEmailAndPassword(email, password) // Solo se puede iniciar sesion con correo y contraseña
.catch((err) => { //Detectar errores
switch (err.code) {
case "auth/invalid-email": // Correo invalido
case "auth/user-disabled": // Usuario desabilitado
case "auth/user-not-found": // No se encuentra el usuario
setEmailError(err.message); // Estado de mensaje de error para el correo electronico.
break;
case "auth/wrong-password": // Contraseña incorrecta
setPasswordError(err.message); // Estado de mensaje de error para la contraseña
break;
}
});
};
Función que permite el cierre de sesión y verificación de usuarios existentes
//------------------------FUNCION QUE PERMITE EL CIERRE DE SESION--------------------
const handleLogout = () => {
fire.auth().signOut();
};
//-----------FUNCION QUE PERMITE LA VERIFICACION DE USUARIOS EXISTENTES--------------
const authListener = () => { // Verificacion de que el usuario existe
fire.auth().onAuthStateChanged((user) => {
if (user) {
clearInputs(); // Borar las entradas
setUser(user);
}
else {
setUser("");
}
});
};
useEffect(() => { //Esta función se ejecuta por defecto cuando el componente se renderiza por primera vez, y después cada vez que el componente se actualice.
authListener();
}, [])
Fragmento de reacción
return (
<div className="App">
{user ?(
<Hero
handleLogout={handleLogout}
/>
) : (
<Login
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
handleLogin={handleLogin}
handleSignup={handleSignup}
hasAccount={hasAccount}
setHasAccount={setHasAccount}
emailError={emailError}
PasswordError={PasswordError}
/>
)}
</div>
);

Crud
Funcionalidad agregar, editar e imprimir pacientes
/* Metodo para insertar y editar pacientes en firebase */
export const insertarPaciente = (id, nombre, sintomatologia, dosis, laboratorio)=>{
if(id!=="" && nombre!=="" && sintomatologia!=="" && dosis!=="" && laboratorio!==""){
fire.database().ref("Pacientes/"+id).set({
id: id,
nombre: nombre,
sintomatologia: sintomatologia,
dosis: dosis,
laboratorio: laboratorio
});
}else{
alert("Ingrese la informacion completa por favor");
}
}
/* busca en la base de datos el registro con el id indicado y actualiza la lstPacientes */
const imprimirBusqueda = (valor) =>{
var prueba=fire.database().ref("Pacientes/"+valor);
const busq=[];
prueba.on('value', (snapshot)=>{
if(snapshot.val()===null){
alert("El valor de busqueda no se encuentra");
}else{
busq.push(snapshot.val());
}
});
setLstPacientes(busq);
}
/* toma de la base de datos la informacion de cada paciente y la guarda en la variable lstPacientes */
const imprimirPacientes = () =>{
var prueba=fire.database().ref("Pacientes");
prueba.on('value', (snapshot)=>{
snapshot.forEach(function(childSnapshot){
temp.push(childSnapshot.val());
});
});
setLstPacientes(temp);
}
Documentación Extra Firebase
https://firebase.google.com/docs/auth/admin?hl=es-419