Simplifier le processus de mise à jour des e-mails des utilisateurs avec Magic Links dans Next.js

Rationalisation des flux d'authentification

La mise à jour des adresses e-mail des utilisateurs dans les applications Web peut souvent s'avérer un processus fastidieux, en particulier lorsque l'on exploite des liens magiques pour l'authentification. Cette approche, bien que sécurisée, peut parfois nuire à l'expérience utilisateur en nécessitant plusieurs étapes qui semblent redondantes ou inutiles. Le défi devient encore plus prononcé sur les plateformes construites avec Next.js, où les adresses e-mail font partie intégrante des jetons JWT utilisés pour l'authentification. Étant donné que les utilisateurs sont invités à parcourir une série d’e-mails de vérification pour mettre à jour leurs informations d’identification, le processus peut sembler inutilement compliqué.

Cela soulève la question suivante : existe-t-il un moyen plus simple de faciliter les mises à jour par courrier électronique sans bombarder les utilisateurs avec un trio de courriers électroniques à des fins de vérification et de réauthentification ? L'accent est désormais mis sur l'amélioration de l'expérience utilisateur en consolidant éventuellement ces étapes ou en éliminant le besoin d'actions répétitives. Bien que Firebase fournisse des API robustes pour gérer les mises à jour de mots de passe et d'autres tâches liées à l'authentification, les options permettant de rationaliser les liens de connexion, en particulier pour les mises à jour par courrier électronique, semblent limitées. La recherche d’une approche plus conviviale sans compromettre la sécurité est au cœur de cette discussion.

Rationaliser les flux de mise à jour des e-mails dans Firebase avec Magic Links

Le script backend développé avec Node.js et le SDK Firebase Admin crée un cadre robuste pour gérer les mises à jour des e-mails des utilisateurs via des liens magiques personnalisés, améliorant considérablement l'expérience utilisateur en minimisant le besoin de plusieurs vérifications des e-mails. Au cœur de cette configuration, la commande admin.initializeApp() initialise l'application Firebase, ce qui est crucial pour activer les opérations backend avec les services Firebase. La vraie magie commence avec la fonction admin.auth().createCustomToken(), qui génère un jeton personnalisé pour l'authentification. Ce jeton personnalisé peut inclure des revendications supplémentaires, telles que la nouvelle adresse e-mail vers laquelle l'utilisateur souhaite effectuer la mise à jour. En intégrant cette nouvelle adresse e-mail en tant que revendication dans le jeton, nous créons un lien transparent entre la demande de mise à jour par e-mail et l'état d'authentification de l'utilisateur.

Sur le frontend, à l'aide de Next.js, le script capitalise sur les capacités du SDK côté client de Firebase pour traiter le lien magique personnalisé. La fonction firebase.initializeApp() est à nouveau essentielle, ouvrant la voie à toutes les opérations Firebase ultérieures au sein de l'application client. Lorsqu'un utilisateur clique sur le lien magique, la méthode firebase.auth().signInWithCustomToken() récupère le jeton personnalisé du lien, connecte l'utilisateur et récupère immédiatement la nouvelle réclamation d'e-mail à partir du jeton. Ces informations permettent la mise à jour instantanée de l'adresse e-mail de l'utilisateur à l'aide de la fonction user.updateEmail() sans nécessiter aucune autre action de l'utilisateur. Ce processus rationalisé améliore non seulement la sécurité en vérifiant l'intention de l'utilisateur lors du clic initial, mais améliore également considérablement l'expérience utilisateur en réduisant les étapes nécessaires pour mettre à jour une adresse e-mail dans le système.

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]);
};

Améliorer les flux d'authentification avec Magic Links

Les liens magiques fournissent une méthode simplifiée et sécurisée d'authentification des utilisateurs, en particulier dans les applications Web modernes comme celles créées avec Next.js. En tirant parti des liens magiques, les développeurs peuvent éliminer le besoin pour les utilisateurs de mémoriser leurs mots de passe, réduisant ainsi les frictions associées au processus de connexion. Cette approche envoie un lien unique à usage unique par courrier électronique aux utilisateurs, qui, une fois cliqué, authentifie directement l'utilisateur. Le défi réside cependant dans la mise à jour des emails des utilisateurs sans nécessiter plusieurs étapes d’authentification, ce qui peut dégrader l’expérience utilisateur. La solution consiste à créer un service backend qui génère un jeton personnalisé avec le SDK Firebase Admin et un frontend qui gère ce jeton de manière appropriée.

Le script backend utilise Node.js et le SDK d'administration Firebase pour créer un point de terminaison qui génère un jeton personnalisé. Ce jeton inclut les revendications, telles que la nouvelle adresse e-mail, et est envoyé à l'adresse e-mail actuelle de l'utilisateur. Une fois que l'utilisateur clique sur le lien contenant le jeton personnalisé, le frontend, construit avec Next.js, capture ce jeton. À l'aide de l'authentification Firebase, le script frontal connecte l'utilisateur avec ce jeton personnalisé et met à jour l'adresse e-mail de l'utilisateur dans Firebase en fonction de la revendication contenue dans le jeton. Ce processus réduit les étapes requises pour les mises à jour par courrier électronique, améliorant ainsi l'expérience utilisateur globale en minimisant le besoin de vérifications et de connexions multiples.