Comment vérifier l’email d’un utilisateur avec Flutter ?


Avatar de Pierre Courtois

Ajouter un système de vérification de l’adresse e-mail est un bon moyen d’éviter la création abusive de comptes sur votre application, de garantir la qualité de votre base de données et d’améliorer la sécurité. Dans ce guide, je vous explique comment mettre cela en place sur votre application Flutter.


Vérifier l'adresse email d'un utilisateur Flutter

Pourquoi implémenter la vérification par email ?

La vérification par email est une méthode courante pour s’assurer de l’identité des utilisateurs et protéger votre application. Parmi les avantages à mettre en place ce système, on trouve :

  1. L’authenticité des utilisateurs : Elle garantit que chaque utilisateur possède une adresse email valide, ce qui limite les inscriptions frauduleuses.
  2. Sécurité accrue : En vérifiant l’email, vous ajoutez une couche supplémentaire de protection contre les abus et les accès non autorisés.
  3. Communication fiable : Une adresse email vérifiée permet d’envoyer des notifications importantes, comme les réinitialisations de mot de passe ou les confirmations de commandes.
  4. Amélioration de l’engagement utilisateur : Les utilisateurs qui valident leur email sont généralement plus impliqués dans leur expérience avec votre application.

Comment mettre en place la vérification par email dans Flutter ?

La première étape pour vérifier votre utilisateur est d’avoir mis en place Firebase Auth pour votre application Flutter et logiquement, un système d’authentification par email.

Je considère donc ici que vous avez déjà réalisé cette étape, mais si ce n’est pas le cas, je vous invite à vous rendre sur mon guide pour mettre en place Firebase Auth pour Flutter.

Par chance, une fois toute cela mis en place, la suite est assez simple, puisque Flutter met directement à disposition une méthode permettant d’envoyer un email à un utilisateur qui s’est connecté.

import 'package:firebase_auth/firebase_auth.dart';

Future<void> registerAndSendVerification(String email, String password) async {
  final FirebaseAuth auth = FirebaseAuth.instance;

  try {
    UserCredential userCredential = await auth.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );

    User? user = userCredential.user;
    if (user != null && !user.emailVerified) {
      await user.sendEmailVerification();
      print("Email de vérification envoyé à ${user.email}");
    }
  } on FirebaseAuthException catch (e) {
    print("Erreur : ${e.message}");
  }
}

Dans le cas présenté ici, Firebase ne peut envoyer un email de confirmation, qu’à un utilisateur qui a été enregistré dans votre base de donnée et qui est authentifié. Il n’est pas possible d’envoyer un email à un utilisateur non authentifié, sans mettre en place un système beaucoup plus lourd.

Une fois l’email envoyé, il ne vous reste plus qu’à vérifier si l’utilisateur a confirmé son email et là encore, Flutter nous fournit une fonction pour cela :

Future<bool> checkEmailVerified() async {
  User? user = FirebaseAuth.instance.currentUser;

  if (user != null) {
    await user.reload();
    return user.emailVerified;
  }
  return false;
}

Après avoir confirmé que l’utilisateur a confirmé son email, vous pouvez ensuite le renvoyer vers l’écran de votre choix.

Pensez à ajouter cette logique à votre page de création de compte, mais aussi à votre page de connexion dans le cas où un utilisateur décide de revenir en arrière plutôt que de valider son compte tout de suite. Gardez également en tête que l’utilisateur est authentifié auprès de Firebase à ce moment-là, n’oubliez donc pas de le déconnecter.

Comment personnaliser l’email de vérification ?

Firebase propose un email de vérification par défaut, mais vous pouvez le personnaliser pour mieux refléter votre marque. De manière rapide, voici comment faire :

  1. Accéder à Firebase Console :
    • Rendez-vous dans Authentication > Modèles d’email.
    • Sélectionnez l’onglet Email de vérification.
  2. Personnaliser le contenu :
    • Ajoutez votre logo, changez le texte ou le design.
  3. Configurer un domaine personnalisé(optionnel) :
    • Ajoutez un domaine personnalisé pour améliorer la crédibilité des emails envoyés.

Conclusion

Enfin, terminons ce chapitre sur l’authentification en mettant en place un système pour permettre à vos utilisateurs de réinitialiser leur mot de passe s’ils l’ont perdu et veulent renforcer la sécurité de leur compte.

Avatar de Pierre Courtois