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

Autenticacion de usuarios.PNG

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