Recordar login es una acción fundamental en cualquier aplicación web con perfiles privados. Esta acción es una forma de hacer que los usuarios de tu aplicación no tengan que iniciar sesión cada vez que hacen un refresh de la página web. Este tipo de prácticas benefician la experiencia de usuario y le dan más fluidez a tu aplicación. Por ello, en este post, te enseñaremos cómo recordar login en React para que lo implementes en tus aplicaciones.
¿Qué es recordar login en React?
En nuestro post sobre guardar login en React te hemos hablado de cómo puedes guardar el token de acceso a tu aplicación dentro del local Storage para acceder a él incluso cuando el usuario haya cerrado su pestaña de navegación. Ahora, para hacer que la aplicación reconozca que el usuario ya ha iniciado sesión la última vez que estuvo en la aplicación, debemos lograr que lea la clave de local Storage y vea este token que hemos guardado. A este proceso le llamamos recordar login en React. A continuación, te enseñamos exactamente cómo ejecutar este proceso en tu aplicación.
¿Cómo recordar login en React?
Para recordar login en React, debemos escribir código en el archivo por el que comienza la lectura de nuestra aplicación. Como ya sabrás, cada vez que hacemos refresh o abrimos nuestra aplicación de nuevo, el servidor se descarga un HTML con un archivo bundle.js en donde se encuentra nuestro código. Con él, el servidor comienza a leer nuestra aplicación desde el archivo index.js.
Entonces, para recordar login en React, deberemos hacer que el servidor lea nuestro local storage y acceda a la clave de autenticación que hemos definido allí. Para ello, insertaremos la siguiente línea de código en nuestro archivo index.js:
const accessToken = storage.get (‘auth’)
Con la línea de código anterior, hemos definido que, si existe la clave auth dentro de nuestro local storage, obtendremos una variable accessToken. Ahora, queremos usar este accessToken, cuando exista, para definir que la aplicación comience con el estado isLogged (true). Y cuando el accessToken no esté presente, queremos que la aplicación arranque con isLogged (false). Recuerda que, como hemos definido en nuestro post sobre controlar estado login en React, el estado isLogged define si se ha dado o no el inicio de sesión.
Para hacer este último paso, debemos ir al archivo donde está renderizada nuestra aplicación. Este archivo, que se llama App.js si has creado tu aplicación con create-react-app, es hijo de index.js. Por ello, deberemos establecer una comunicación entre el padre index y el hijo App. Como puedes leer en nuestro post sobre comunicar padres a hijos en React, la única manera de hacer esto es mediante las props.
Entonces, podemos pasarle una prop al componente App que defina si hay o no token y, por ende, si está o no loggeado. Recuerda que puedes pasar estas props con el nombre que quieras; nosotros hemos elegido isInitiallyLogged. Ahora, usaremos esta prop para inicializar el estado isLogged. Esto quiere decir que el valor del estado dependerá del valor de la prop isInitiallyLogged.
No olvides definir esta prop en tu componente padre. Sin este paso, la prop no tendrá ningún valor ni ejecutará ninguna acción. Al definir la prop dentro del componente padre, también puedes definir la lógica bajo la que funciona. Nosotros hemos escrito las siguientes líneas de código dentro del index.js, que quiere decir que isInitiallyLogged solo será verdadero cuando exista un accessToken, variable definida anteriormente.
ReactDOM.render (
<React.StrictMode>
<App is inInitiallyLogged = {!!accessToken} />
</React.StrictMode/>,
document.getElementById (‘root’),
);
Ahora, hemos completado el proceso de recordar la sesión de nuestro usuario. Esto quiere decir que el usuario puede hacer un refresh o incluso cerrar la pestaña y, aun sí, sabremos que ha iniciado sesión recientemente. Para ello, hemos guardado el token en nuestro local storage, luego lo hemos llamado desde nuestro index para comprobar su existencia y finalmente, hemos definido una lógica según la que el estado isLogged cambia acorde al prop isInitiallyLogged.
¿Qué sigue?
Ahora que sabes cómo recordar login en React, ¡es el momento de usar este conocimiento para programar tus propios proyectos! Si todavía no sabes muy bien cómo hacer esto, no te preocupes, KeepCoding te acompaña en el proceso. El Desarrollo Web Full Stack Bootcamp es un programa de formación intensiva en el que aprenderás a desarrollar todo tipo de proyectos de programación para la web, usando lenguajes como JavaScript, JSX, CSS y HTML. Si quieres cambiar tu vida en pocos meses y acceder a un sector de alta demanda, ¡inscríbete ahora y consíguelo!
