Me desconecto cada vez que actualizo, aquí está el código que estoy usando. nada especial, solo renderizado condicional simple en React.
¿Qué está causando esto?
Intenté usar la persistencia establecida pero eso está dando errores.
export default function GAuth(){ const [currentUser, setCurrentUser] = useState(null); let auth = getAuth(); let GoogleProvider = new GoogleAuthProvider() function handleSubmit(event) { event.preventDefault(); signInWithPopup(auth, GoogleProvider) .then((response) => {setCurrentUser(response.user)}) .catch((err) => {alert(err.message)}) } function authChecker(){ if(currentUser){ console.log("User is logged in") return <FullApp/> }else{ console.log("User is not logged in") return (<div className="auth-page"> <form className="signup-form" onSubmit={handleSubmit}> <h1>You have No Notes, Sign In to create one</h1> <input className="first-note" type="submit" value={"Sign in with google"} /> </form> </div>) } } //returning objects to the DOM return ( <div> {authChecker()} </div> ) }
Firebase conserva automáticamente las credenciales de usuario y las restaura en la mayoría de los entornos basados en navegador. Pero restaurarlos requiere que haga una llamada al servidor (por ejemplo, para verificar si la cuenta se ha deshabilitado), y cuando su código verifica el currentUser
, la llamada aún no se ha completado.
Es por eso que debe usar un oyente de estado de autenticación para recibir una notificación cuando cambie el estado de autenticación, como se muestra en el primer fragmento de la documentación sobre cómo obtener el usuario actual:
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User const uid = user.uid; // ... } else { // User is signed out // ... } });
Con esto, Firebase llamará automáticamente a su controlador cuando haya terminado de restaurar las credenciales de usuario, y luego podrá actualizar la interfaz de usuario para reflejar ese estado.