Simplificació del procés d'actualització del correu electrònic de l'usuari amb Magic Links a Next.js

Racionalització dels fluxos d'autenticació

Actualitzar les adreces de correu electrònic dels usuaris dins de les aplicacions web sovint pot ser un procés complicat, sobretot quan s'aprofiten els enllaços màgics per a l'autenticació. Aquest enfocament, tot i que és segur, de vegades pot restar valor a l'experiència de l'usuari en requerir diversos passos que semblen redundants o innecessaris. El repte es fa encara més pronunciat a les plataformes construïdes amb Next.js, on les adreces de correu electrònic formen part integral dels testimonis JWT utilitzats per a l'autenticació. A mesura que se'ls demana als usuaris que naveguin per una sèrie de correus electrònics de verificació per actualitzar les seves credencials, el procés pot semblar innecessàriament complicat.

Això planteja la pregunta: hi ha una manera més senzilla de facilitar les actualitzacions de correu electrònic sense bombardejar els usuaris amb un trio de correus electrònics per a la verificació i la re-autenticació? El focus es desplaça cap a millorar l'experiència de l'usuari, possiblement consolidant aquests passos o eliminant la necessitat d'accions repetitives. Tot i que Firebase ofereix API robustes per gestionar les actualitzacions de contrasenyes i altres tasques relacionades amb l'autenticació, les opcions per racionalitzar els enllaços d'inici de sessió, especialment per a les actualitzacions per correu electrònic, semblen limitades. La recerca d'un enfocament més fàcil d'utilitzar sense comprometre la seguretat és el centre d'aquesta discussió.

Agilitzar els fluxos d'actualització de correu electrònic a Firebase amb Magic Links

L'script de fons desenvolupat amb Node.js i el Firebase Admin SDK crea un marc sòlid per gestionar les actualitzacions de correu electrònic dels usuaris mitjançant enllaços màgics personalitzats, millorant significativament l'experiència de l'usuari minimitzant la necessitat de múltiples verificacions de correu electrònic. En el centre d'aquesta configuració, l'ordre admin.initializeApp() inicialitza l'aplicació Firebase, que és crucial per habilitar les operacions de fons amb els serveis de Firebase. La veritable màgia comença amb la funció admin.auth().createCustomToken(), que genera un testimoni personalitzat per a l'autenticació. Aquest testimoni personalitzat pot incloure reclamacions addicionals, com ara la nova adreça electrònica a la qual l'usuari vol actualitzar. En inserir aquesta nova adreça de correu electrònic com a reclamació dins del testimoni, creem un enllaç perfecte entre la sol·licitud d'actualització del correu electrònic i l'estat d'autenticació de l'usuari.

A la interfície, utilitzant Next.js, l'script aprofita les capacitats de l'SDK del costat del client de Firebase per processar l'enllaç màgic personalitzat. La funció firebase.initializeApp() torna a ser fonamental i prepara l'escenari per a totes les operacions de Firebase posteriors a l'aplicació client. Quan un usuari fa clic a l'enllaç màgic, el mètode firebase.auth().signInWithCustomToken() agafa el testimoni personalitzat de l'enllaç, inicia la sessió a l'usuari i obté immediatament la nova reclamació de correu electrònic del testimoni. Aquesta informació permet l'actualització instantània de l'adreça de correu electrònic de l'usuari mitjançant la funció user.updateEmail() sense requerir cap altra acció de l'usuari. Aquest procés simplificat no només millora la seguretat en verificar la intenció de l'usuari mitjançant el clic inicial, sinó que també millora significativament l'experiència de l'usuari reduint els passos necessaris per actualitzar una adreça de correu electrònic al 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]);
};

Millorar els fluxos d'autenticació amb Magic Links

Els enllaços màgics proporcionen un mètode simplificat i segur per a l'autenticació dels usuaris, especialment en aplicacions web modernes com les construïdes amb Next.js. Aprofitant els enllaços màgics, els desenvolupadors poden eliminar la necessitat que els usuaris recordin les contrasenyes, reduint així la fricció associada al procés d'inici de sessió. Aquest enfocament envia un enllaç únic i d'ús únic per correu electrònic als usuaris, que, quan es fa clic, autentica l'usuari directament. El repte, però, rau a actualitzar els correus electrònics dels usuaris sense requerir diversos passos d'autenticació, cosa que pot degradar l'experiència de l'usuari. La solució consisteix a crear un servei de backend que generi un testimoni personalitzat amb l'SDK d'administració de Firebase i una interfície que gestioni aquest testimoni de manera adequada.

L'script de fons utilitza Node.js i l'SDK d'administració de Firebase per crear un punt final que generi un testimoni personalitzat. Aquest testimoni inclou reclamacions, com ara la nova adreça de correu electrònic, i s'envia al correu electrònic actual de l'usuari. Un cop l'usuari fa clic a l'enllaç que conté el testimoni personalitzat, la interfície, construïda amb Next.js, captura aquest testimoni. Mitjançant l'autenticació de Firebase, l'script d'interfície inicia la sessió a l'usuari amb aquest testimoni personalitzat i actualitza l'adreça electrònica de l'usuari a Firebase en funció de la reclamació del testimoni. Aquest procés redueix els passos necessaris per a les actualitzacions de correu electrònic, millorant l'experiència general de l'usuari minimitzant la necessitat de múltiples verificacions i inicis de sessió.