Simplificando el proceso de actualización del correo electrónico del usuario con Magic Links en Next.js

Optimización de los flujos de autenticación

Actualizar las direcciones de correo electrónico de los usuarios dentro de las aplicaciones web a menudo puede ser un proceso engorroso, especialmente cuando se aprovechan enlaces mágicos para la autenticación. Este enfoque, si bien es seguro, a veces puede restar valor a la experiencia del usuario al requerir múltiples pasos que parecen redundantes o innecesarios. El desafío se vuelve aún más pronunciado en las plataformas creadas con Next.js, donde las direcciones de correo electrónico forman una parte integral de los tokens JWT utilizados para la autenticación. A medida que se solicita a los usuarios que naveguen a través de una serie de correos electrónicos de verificación para actualizar sus credenciales, el proceso puede parecer innecesariamente complicado.

Esto plantea la pregunta: ¿Existe una manera más sencilla de facilitar las actualizaciones por correo electrónico sin bombardear a los usuarios con un trío de correos electrónicos para verificación y reautenticación? El enfoque cambia hacia mejorar la experiencia del usuario posiblemente consolidando estos pasos o eliminando la necesidad de acciones repetitivas. Si bien Firebase proporciona API sólidas para manejar actualizaciones de contraseñas y otras tareas relacionadas con la autenticación, las opciones para optimizar los enlaces de inicio de sesión, especialmente para las actualizaciones por correo electrónico, parecen limitadas. La búsqueda de un enfoque más fácil de usar sin comprometer la seguridad está en el centro de esta discusión.

Optimización de los flujos de actualización de correo electrónico en Firebase con Magic Links

El script backend desarrollado con Node.js y Firebase Admin SDK crea un marco sólido para administrar las actualizaciones de correo electrónico de los usuarios a través de enlaces mágicos personalizados, lo que mejora significativamente la experiencia del usuario al minimizar la necesidad de múltiples verificaciones de correo electrónico. En el centro de esta configuración, el comando admin.initializeApp() inicializa la aplicación Firebase, lo cual es crucial para permitir operaciones de backend con los servicios de Firebase. La verdadera magia comienza con la función admin.auth().createCustomToken(), que genera un token personalizado para la autenticación. Este token personalizado puede incluir reclamos adicionales, como la nueva dirección de correo electrónico a la que el usuario desea actualizar. Al incorporar esta nueva dirección de correo electrónico como reclamo dentro del token, creamos un vínculo transparente entre la solicitud de actualización por correo electrónico y el estado de autenticación del usuario.

En la interfaz, utilizando Next.js, el script aprovecha las capacidades del SDK del lado del cliente de Firebase para procesar el enlace mágico personalizado. La función firebase.initializeApp() vuelve a ser fundamental y prepara el escenario para todas las operaciones posteriores de Firebase dentro de la aplicación cliente. Cuando un usuario hace clic en el enlace mágico, el método firebase.auth().signInWithCustomToken() toma el token personalizado del enlace, inicia la sesión del usuario e inmediatamente recupera el nuevo reclamo de correo electrónico del token. Esta información permite la actualización instantánea de la dirección de correo electrónico del usuario utilizando la función user.updateEmail() sin requerir ninguna acción adicional por parte del usuario. Este proceso simplificado no sólo mejora la seguridad al verificar la intención del usuario mediante el clic inicial, sino que también mejora significativamente la experiencia del usuario al reducir los pasos necesarios para actualizar una dirección de correo electrónico en el sistema.

const admin = require('firebase-admin');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
// Initialize Firebase Admin SDK
admin.initializeApp({ ... });
// Endpoint to create a custom magic link
app.post('/create-custom-magic-link', async (req, res) => {
  const { currentEmail, newEmail, uid } = req.body;
  try {
    // Generate a custom token with claims
    const customToken = await admin.auth().createCustomToken(uid, { newEmail });
    res.json({ customToken });
  } catch (error) {
    res.status(500).send(error.message);
  }
});
app.listen(3000, () => console.log('Server started on port 3000'));

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import firebase from 'firebase/app';
import 'firebase/auth';
// Configure Firebase (the config object should already be set up)
if (!firebase.apps.length) {
  firebase.initializeApp({ ... });
}
const useCustomMagicLink = () => {
  const router = useRouter();
  useEffect(() => {
    if (router.query.customToken) {
      firebase.auth().signInWithCustomToken(router.query.customToken)
        .then((userCredential) => {
          // Update the user's email here using the claim
          const newEmail = userCredential.user.claims.newEmail;
          userCredential.user.updateEmail(newEmail).then(() => {
            // Email updated successfully
          }).catch((error) => {
            // Handle error
          });
        }).catch((error) => {
          // Handle error
        });
    }
  }, [router]);
};

Mejora de los flujos de autenticación con Magic Links

Los enlaces mágicos proporcionan un método optimizado y seguro para la autenticación de usuarios, especialmente en aplicaciones web modernas como las creadas con Next.js. Al aprovechar los enlaces mágicos, los desarrolladores pueden eliminar la necesidad de que los usuarios recuerden contraseñas, reduciendo así la fricción asociada con el proceso de inicio de sesión. Este enfoque envía un enlace único y de un solo uso por correo electrónico a los usuarios que, al hacer clic, autentica al usuario directamente. Sin embargo, el desafío radica en actualizar los correos electrónicos de los usuarios sin requerir múltiples pasos de autenticación, lo que puede degradar la experiencia del usuario. La solución implica crear un servicio de backend que genere un token personalizado con Firebase Admin SDK y una interfaz que maneje este token de manera adecuada.

El script de backend utiliza Node.js y Firebase Admin SDK para crear un punto final que genera un token personalizado. Este token incluye reclamos, como la nueva dirección de correo electrónico, y se envía al correo electrónico actual del usuario. Una vez que el usuario hace clic en el enlace que contiene el token personalizado, la interfaz, creada con Next.js, captura este token. Al utilizar Firebase Authentication, el script de interfaz inicia sesión en el usuario con este token personalizado y actualiza la dirección de correo electrónico del usuario en Firebase según el reclamo en el token. Este proceso reduce los pasos necesarios para las actualizaciones por correo electrónico, mejorando la experiencia general del usuario al minimizar la necesidad de múltiples verificaciones e inicios de sesión.