Mise à jour d'un email avec Firebase Auth

La réalisation de cette tâche n’a pas été facile.

Pour être honnête, Google n’a pas documenté très clairement l’API Firebase Authentification. Cependant, grâce à Stackoverflow (comme toujours !), j’ai réussi à résoudre ce problème et à mettre à jour l’adresse e-mail d’un utilisateur authentifié existant (méthode e-mail et mot de passe).

Introduction

Bien que l’API fournisse toujours une méthode updateEmail, elle ne met pas à jour une adresse e-mail non vérifiée. Vous devez donc effectuer un processus en deux étapes :

• L’utilisateur demande à modifier son adresse électronique.
• L’utilisateur confirme la modification de l’adresse électronique.

Comment créer un compte de messagerie à des fins de test ?

Pour tester cela, vous avez besoin d’un compte e-mail.

Pour les tests uniquement, je recommande Yopmail. Il vous permet de créer des adresses e-mail jetables en quelques secondes.

Il suffit d’aller sur leur site web et d’utiliser le générateur d’adresses e-mail aléatoires.

Vous avez ainsi la garantie que personne n’utilisera la même adresse électronique que vous.

Le code et le flux métier

Envoyer la demande de modification de l’adresse électronique

Le flux métier peut différer d’une application à l’autre, c’est pourquoi je vais seulement partager le code qui appelle l’API Firebase Authentification :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/**
 * Ceci instancie l'application firebaseApp
 * @see https://github.com/JeremieLitzler/vueschool-course/blob/forum-vite/src/services/fireBaseConnector.ts
 */
import { firebaseApp } from "@/services/fireBaseConnector";

import { getAuth, verifyBeforeUpdateEmail } from "firebase/auth";

const auth = getAuth(firebaseApp);

/**
 * Envoyer à Firebase une requête pour obtenir un lien verifyAndUpdateEmail pour un utilisateur.
 *
 * Le `continueUrl` contient le lien vers la route /account/edit
 * à partir de laquelle la demande est faite.
 *
 * Les paramètres de la chaîne de requête sont utilisés pour avoir une expérience utilisateur fluide et guidée :
 * - `verifiedEmail` : utilisé sur la page de connexion (/account/edit qui nécessite une authentification) et la page /account/edit
 * une fois réauthentifié.
 * - `showReconnectMessage` : utilisé sur la page de connexion pour afficher un message clair sur l'adresse email à utiliser pour se connecter.
 * - `oobCode` : non utilisé mais pourrait l'être pour sécuriser la requête si le code a été sauvegardé dans le document firestore correspondant à l'utilisateur mis à jour.
 *
 * Le try&catch est nécessaire pour afficher un formulaire de connexion sur /account/edit si Firebase demande une réauthentification.
 *
 * N'oubliez pas d'ajouter la variable d'environnement VITE_BASE_URL dans votre CD.
 *
 * @param newEmail Le nouvel email à définir pour l'utilisateur authentifié
 * @returns Le résultat de la requête : succès (booléen) et l'erreur Firebase (s'il y en a une).
 */
const secureUpdateEmail = async (newEmail: string) => {
  const oobCode = uniqueIdHelper().newUniqueId;
  const continueUrl = `${import.meta.env.VITE_BASE_URL}/account/edit?${
    AppQueryStringParam.verifiedEmail
  }=${newEmail}&${AppQueryStringParam.oobCode}=${oobCode}&${
    AppQueryStringParam.showReconnectMessage
  }=true`;
  console.log("secureUpdateEmail>continueUrl", continueUrl);

  return verifyBeforeUpdateEmail(auth.currentUser!, newEmail, {
    url: `${continueUrl}`,
    handleCodeInApp: true,
  })
    .then(() => {
      return { success: true, errorMessage: null };
    })
    .catch((error) => {
      return { success: false, errorMessage: error };
    });
};

Confirmer la modification de l’adresse e-mail

Une fois que l’utilisateur a demandé la vérification, Firebase envoie un e-mail à la nouvelle adresse e-mail.

Lorsque l’utilisateur clique sur le lien, il est dirigé vers une page Firebase. Une fois que Firebase a terminé la vérification et la mise à jour, l’utilisateur peut cliquer sur Continue. C’est là que le continueUrl est utilisé.

Dans l’application de démonstration ci-dessous, le continueUrl personnalisé permet de guider l’utilisateur à travers les étapes de la mise à jour.

Bien que Firebase met à jour l’adresse e-mail dans la base de données des utilisateurs, vous devrez probablement mettre à jour le document Firestore dans lequel vous stockez les autres informations de l’utilisateur.

Application de démonstration

Vous pouvez visiter le site web du projet que j’ai construit en participant à la Masterclass de Vueschool.io (version 1).

Pour le tester, vous aurez besoin de :

• Créer un compte avec une adresse e-mail Yopmail.
• Aller sur Voir profil dans le coin supérieur droit en cliquant sur le menu utilisateur.
• Cliquez sur Modifier le profil et modifiez l’adresse e-mail dans le formulaire.

Pour les étapes suivantes, je vous laisse suivre le déroulement des actions.

Vous devrez ouvrir la boîte aux lettres Yopmail en utilisant l’adresse e-mail fournie dans la demande de mise à jour. Là, vous pourrez ouvrir l’e-mail de vérification.

Le code complet est disponible [sur GitHub] (https://github.com/JeremieLitzler/vueschool-course/tree/forum-vite).

J’espère que vous avez apprécié cet article. Si vous avez des questions, comme toujours, contactez-moi et je verrai si je peux vous aider.

Crédit : photo d’entête par Mathyas Kurmann sur Unsplash.