Muchas de las acciones a ejecutar sobre un proyecto web tienen que ver con la funcionalidad de los elementos. Sin embargo, también es importante que, más allá de funcionar, los elementos se comporten de manera que la interacción con el usuario sea lo más sencilla posible. En este post, te enseñaremos cómo ejecutar un login automático después de signup desde JavaScript para mejorar la experiencia de usuario de tus proyectos con acceso privado.
Ejecutar un login automático después de signup desde JavaScript
Cuando hablamos de ejecutar un login automático después de signup desde JavaScript nos referimos a determinar una lógica que evite que un nuevo usuario tenga que pasar por un formulario de login. Es decir, después de que el usuario crea su cuenta en nuestro formulario de registro, no queremos que tenga que iniciar sesión con las credenciales que acaba de crear.
Entonces, con el fin de mejorar la experiencia de usuario, haremos que un usuario recién creado inicie sesión automáticamente, lo que evitará la muestra de dos formularios. Por ello, a continuación te enseñaremos cómo ejecutar un login automático después de signup desde JavaScript.
¿Cómo ejecutar un login automático después de signup?
Para ejecutar un login automático después de signup, deberemos ejecutar una lógica condicional en el controlador que maneja el registro de usuario. Allí, llamaremos al método createUser que hemos declarado en nuestro post sobre crear usuario con JavaScript y sparREST.
Actualmente, nuestra creación de usuario se maneja de manera asíncrona con las siguientes líneas de código:
async createUser (username, passwordInput) {
try {
await signupService.createUser (username, passwordInput);
} catch (error) {
pubSub.publish (publish.TOPICS.SHOW_ERROR_NOTIFICATION, error);
}
}
}
A partir de las anteriores líneas de código, para ejecutar un login automático después de signup desde JavaScript definiremos la lógica bajo la sección try. Así, estaremos definiendo qué sucede cuando el registro de nuestro usuario sale bien.
Entonces, lo que haremos será llamar al método loginUser que crearemos a continuación. A este método le pasarás los mismos parámetros que recibe la función asíncrona createUser. Ten presente que nosotros hemos creado esta función dentro de una clase, por lo que llamaremos al método loginUser usando la palabra clave this.
this.loginUser (username, passwordInput);
La anterior línea de código se inserta justo después del await en la sección try. Sin embargo, el método loginUser que crearemos a continuación se ejecutará fuera de la función createUser.
A continuación te mostramos cómo declaramos la función loginUser inicialmente, sin definir su comportamiento todavía.
loginUser (username, passwordInput) {
}
¿Por qué le pasamos los parámetros de username y passwordInput a este nuevo método? Pues porque, como puedes leer en nuestro post sobre cómo usar sparREST, estos son los parámetros necesarios para el endpoint de auth/login. Al recibir estos parámetros, este endpoint nos devolverá un token JWT de autenticación.
Ahora, dentro de nuestro controlador no estamos ejecutando el método loginUser para llamar a la API de sparREST, simplemente lo estamos declarando. Esto lo haremos desde nuestro servicio de registro. Es decir, insertaremos las siguientes líneas de código, similares a las que hemos usado para crear el usuario:
async loginUser (username, password) {
const user = {
username,
password,
};
const response = await fetch (‘http://localhost:8000/auth/login”, {
method: “POST”,
body: JSON.stringify (user),
headers: {
“Content type”: “application/json”,
},
});
const data = await response.json ( );
if (!response.ok) {
throw new Error (data.message);
}
return data.accessToken;
}
Ahora que hemos hecho la llamada a nuestra API desde nuestro servicio, ya podemos determinar el comportamiento de loginUser desde nuestro controlador. Para ello, haremos algo similar a lo que hace la función createUser.
A continuación, te mostramos cómo queda la función final loginUser que nos permite ejecutar un login automático después de signup desde JavaScript. Ten presente que esto funciona porque antes hemos ejecutado la función desde el propio createUser justo después de que la creación de usuario es exitosa.
async loginUser (username, passwordInput) {
try {
const jwt = await signupService.loginUser (username, passwordInput);
} catch (error) {
pubSub.publish (pubSub.TOPICS_ERROR_NOTIFICATION, error);
}
}
Ahora que sabes cómo ejecutar un login automático después de signup desde JavaScript, puedes sentirte orgulloso, porque has aprendido a usar los fundamentos del desarrollo frontend. Sin embargo, ¡todavía queda mucho por aprender! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con diversos lenguajes y herramientas como JavaScript, HTML, CSS, JSX. ¡No te lo pierdas y solicita información ahora para empezar a cambiar tu vida!
