0

Estoy realizando una barra de navegación, la cual tiene una foto del usuario y su nombre, estos datos los obtiene de firebase auth, cuando cargo la pagina por primera vez me trae la información de forma correcta, pero al refrescarla me trae que los datos del usuario son null

import React, { useEffect, useState } from 'react'
import { getAuth } from "firebase/auth";

export default function Sidenav() {

    const [photoURL, setPhotoURL] = useState('');
    const [displayName, setDisplayName] = useState('');

    useEffect(() => {
        getUserData()
    }, []);

    function getUserData() {
        const auth = getAuth();
        const user = auth.currentUser;

        setPhotoURL(user.photoURL !== null ? user.photoURL : "");
        setDisplayName(user.displayName !== null ? user.displayName : "");
    };

    return ()
}
2
  • Tal vez sea porque la comunicación con firebase es asíncrona. ¿Te funciona si haces la función asíncrona y usas el await para que espere a tener los datos de "user" antes de utilizarlos después? async function getUserData() { const user = await getAuth().currentUser; ...
    – HydraG
    Commented el 8 jun. 2022 a las 20:36
  • Intente de esta forma, sin embargo no funciona y me arroja una alerta informando que no es necesario utilizar un async await, lo solucionen de la siguiente forma, cuando me logueo recibo una respuesta con los parámetros del usuario y esos parámetros los guardo en un local storage y luego los llamo donde los necesite, en este caso en mi componente de nabvar.
    – Don-Mandi
    Commented el 9 jun. 2022 a las 21:20

1 respuesta 1

0

Lo solucione de la siguiente forma, el realizar un logueo exitoso recibo un result que contiene un user, antes de pasar a mi home guardo los parámetros: photoUrl, displayName y email en local storage para luego usarlos en el componente que los requiera, y al momento de cerrar sesión hago un localStorage clear, ahora no se si esta sea la mejor practica y si sea seguro.

    const LoginWhitGoogle = (e) => {
        e.preventDefault();
        const auth = getAuth();
        const provider = new GoogleAuthProvider();
        const cookies = new Cookies();
        auth.languageCode = 'Es';

        signInWithPopup(auth, provider)
            .then((result) => {
                console.log(result)
                const email = result.user.email;
                const photoURL = result.user.photoURL;
                const displayName = result.user.displayName;
                if (email.split('@')[1] !== "midominio.com.co") {
                    Swal.fire({
                        title: 'Acceso denegado',
                        text: 'Lo sentimos, el correo que has ingresado no se encuentra autorizado',
                        icon: 'error',
                        allowEscapeKey: false,
                        allowOutsideClick: false,
                        confirmButtonColor: '#40CFFF',
                        confirmButtonText: 'CONTINUAR'
                    }).then(() => {
                        signOut(auth)
                            .then(() => {
                                window.location.href = '/';
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    })
                } else {
                    cookies.set("_S", result.accessToken, {
                        path: "/",
                        expires: new Date(Date.now() + 60 * 30 * 1000),
                    });
                    localStorage.setItem('photoURL', photoURL);
                    localStorage.setItem('displayName', displayName);
                    localStorage.setItem('email', email);
                    window.location.href = '/';
                };
            })
            .catch((error) => {
                console.log(error);
            });
    };
3
  • 1
    No se las preferencias de otros, pero para eso yo usaría el hook useContext de react para guardar datos que puedas recuperar en el componente que prefieras siempre que estén en un componente superior. Lo que se hace es crear el contexto en el componente principal (App.js) y luego recuperar los datos en cualquier componente
    – Suso
    Commented el 9 jun. 2022 a las 21:48
  • No se si este usando mal el hook use context, pero cuando lo uso cada que refresco la pagina se pierden los valores que tenga guardados ahí, por ese motivo use el local Storage. :´)
    – Don-Mandi
    Commented el 10 jun. 2022 a las 22:15
  • 1
    Pero la gracia de usar una aplicación react es que no se refresque la página
    – Suso
    Commented el 10 jun. 2022 a las 22:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.