Estoy creando una nueva cuenta en Signup.tsx y redirigiéndome al tablero después del éxito, de esta manera
try { await auth.createUserWithEmailAndPassword( emailRef.current!.value, passwordRef.current!.value, ); const user = firebase.auth().currentUser; await user?.updateProfile({ displayName: nameRef.current?.value }) navigate('/dashboard') } catch (error) { console.error(error); } }Y Google Auth se administra de esta manera, googleAuth.tsx
import { auth, provider } from "../../../firebaseSetup"; import { NavigateFunction, useNavigate } from "react-router-dom" const GoogleAuth = async(navigate: NavigateFunction) => { auth.signInWithPopup(provider).then(() => { if (auth.currentUser?.metadata?.creationTime !== auth.currentUser?.metadata?.lastSignInTime) { navigate('/dashboard'); } else{ navigate('/welcome') } }).catch((error) => { console.log(error.message) }) } export default GoogleAuthY en la barra de navegación de mi tablero, estoy mostrando el nombre para mostrar y la foto de perfil del usuario actual si inició sesión a través de Google de esta manera sidebar.tsx
import { auth } from "../../firebaseSetup"; export default sidebar(){ const pic = auth.currentUser?.photoURL return( <Text>{auth.currentUser?.displayName}</Text> <Avatar size={'sm'} src={pic}/> ) }Todo esto funciona perfectamente bien cuando los usuarios se registran/registran por primera vez, es decir, cuando son redirigidos desde la página de inicio, pero si el usuario actualiza o cambia a otra ruta, tanto el texto como el avatar quedan en blanco. Intenté imprimir usando
console.log(auth.currentUser?.displayName) Devuelve el nombre correcto la primera vez, pero al actualizar imprime undefined . Busqué y pensé que necesitaba usar useState y useEffect para administrar los usuarios actuales, lo probé y fallé. ¿Alguien puede decirme cómo retengo el nombre de los usuarios incluso al actualizar?
Ese es el comportamiento esperado. Si bien Firebase restaura automáticamente las credenciales del usuario cuando la página/aplicación se vuelve a cargar, esto requiere que llame al servidor (ao para verificar si la cuenta se ha deshabilitado) y esa es una llamada asíncrona.
Para recibir una notificación cuando se haya restaurado el estado de autenticación, debe usar un detector de estado de autenticación como se muestra en el primer ejemplo en la documentación sobre cómo obtener el usuario actual :
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });Una vez que se llama a esta devolución de llamada por primera vez, el estado de autenticación se ha restaurado o no se ha podido restaurar, por lo que es el momento perfecto para navegar a la pantalla correspondiente de su aplicación.