Codificador autodidacta aquí. Espero estar explicando el tema adecuadamente.
Estoy tratando de crear alguna autenticación de usuario usando firebase. Sigo recibiendo un error que dice "Línea 18:16: 'getAuth' no está definido". Estoy confundido porque estaba siguiendo un tutorial. Intenté reordenar mis importaciones mientras leía en línea, ese podría ser el motivo del error. Por alguna razón, creo que mi problema está en el archivo de configuración y en cómo inicialicé todo. Soy nuevo en base de fuego. Cualquier solución potencial sería apreciada.
Aquí está mi configuración de firebase.js
import { initializeApp } from "firebase/app"; import { getFirestore } from 'firebase/firestore' import { getAuth } from "firebase/auth"; import "firebase/storage" const firebaseConfig = { apiKey: "process.env.REACT_APP_FIREBASE_KEY", authDomain: "uploadimg.firebaseapp.com", projectId: "uploadimgofficial", storageBucket: "uploadimg.appspot.com", messagingSenderId: "MESSENGER_ID", appId: "APP_ID", measurementId: "MESAUREMENT_ID" }; const app = initializeApp(firebaseConfig); export const auth = getAuth() // Init firestore const db = getFirestore() export { db }Y aquí es donde estoy tratando de configurar la página de inicio de sesión
import React from "react"; import "./Login.scss"; import { useState } from "react"; import { signInWithEmailAndPassword } from "firebase/auth"; import { auth } from "../../firebase"; const Login = () => { const [error, setError] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const handleLogin = (e) => { e.preventDefault(); }; const auth = getAuth(); // <------ THIS IS ERROR LINE signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; console.log(user) }) .catch((error) => { setError(true) }); return ( <div className="login"> <form onSubmit={handleLogin} className="login__form"> <input className="login__email" onChange={e => setNewEmail(e.target.value)} type="email" placeholder="email" /> <inputEl problema con su código es que ha importado la función getAuth incorrectamente.
Para solucionar esto, debe corregir el uso del nombre al llamar a la función.
Como ha importado getAuth como auth en la declaración de import en la parte superior de su archivo, debe usarlo como tal.
import { auth } from "../../firebase.js"; En este momento, está importando la variable auth , que se establece en el valor de retorno de getAuth , como se define a continuación en el archivo firebase.js .
// As you are calling the function with '()', you are getting the return value. export const auth = getAuth(); Para solucionar esto, simplemente cambie su llamada de función a auth . Además, cambie el nombre de la variable a algo que no sea auth para evitar colisiones de nombres y/o patrones de nombres confusos.
Además, a medida que obtiene y establece el valor de retorno de getAuth en auth , es posible que el valor de retorno no sea una función 1 . En ese caso, no puede llamar a auth con corchetes ( () ), ya que, por ejemplo, puede devolver un objeto.
// Change the variable name to what you want. const userAuth = auth; Para verificar si es una string / object / function /etc, puede usar typeof (para verificar/depurar; elimine esta línea una vez que haya terminado).
console.log(typeof auth); // Should return: 'string' | 'function' | 'object' | ...Según el tipo de devolución, puede cambiar su uso para que coincida.
En conclusión, para solucionar su problema, debe usar correctamente el nombre ( auth en lugar de getAuth ). Además, asegúrese de verificar el valor de retorno de getAuth y utilícelo apropiadamente.
1 Por favor, corríjame en los comentarios si estoy incorrecto; el valor de retorno es una function . En ese caso, puedo quitar esa parte. ¡Gracias por la aclaración!