Authentifiez-vous avec Firebase à l'aide d'Email Link en JavaScript

Vous pouvez utiliser Firebase Authentication pour connecter un utilisateur en lui envoyant un e-mail contenant un lien sur lequel il peut cliquer pour se connecter. Au cours de ce processus, l'adresse e-mail de l'utilisateur est également validée.

Se connecter par e-mail présente de nombreux avantages:

  • Inscription et connexion fluides
  • Risque réduit de réutilisation de mots de passe dans les applications, ce qui peut compromettre la sécurité même des mots de passe bien sélectionnés.
  • Capacité à authentifier un utilisateur tout en vérifiant qu'il est le propriétaire légitime d'une adresse e-mail.
  • Pour se connecter, un utilisateur n'a besoin que d'un compte de messagerie accessible. Il n'est pas nécessaire d'être propriétaire d'un numéro de téléphone ou d'un compte de réseau social.
  • Un utilisateur peut se connecter de manière sécurisée sans avoir à fournir (ni à mémoriser) de mot de passe, ce qui peut être pénible sur un appareil mobile.
  • Un utilisateur existant qui se connectait auparavant avec un identifiant d'adresse e-mail (mot de passe ou fédération) peut passer à la connexion avec l'adresse e-mail uniquement. Par exemple, un utilisateur qui a oublié son mot de passe peut toujours se connecter sans avoir à le réinitialiser.

Avant de commencer

Si vous ne l'avez pas déjà fait, copiez l'extrait d'initialisation de la console Firebase dans votre projet, comme décrit dans la section Ajouter Firebase à votre projet JavaScript.

Pour permettre aux utilisateurs de se connecter à l'aide d'un lien e-mail, vous devez d'abord activer le fournisseur de messagerie et la méthode de connexion par lien e-mail pour votre projet Firebase:

  1. Dans la console Firebase, ouvrez la section Authentification.
  2. Dans l'onglet Mode de connexion, activez le fournisseur Adresse e-mail/Mot de passe. Notez que la connexion par e-mail/mot de passe doit être activée pour pouvoir utiliser la connexion par lien d'e-mail.
  3. Dans la même section, activez la méthode de connexion Lien envoyé par e-mail (connexion sans mot de passe).
  4. Cliquez sur Enregistrer.

Pour lancer le flux d'authentification, présentez à l'utilisateur une interface qui l'invite à indiquer son adresse e-mail, puis appelez sendSignInLinkToEmail pour demander à Firebase d'envoyer le lien d'authentification à l'adresse e-mail de l'utilisateur.

  1. Créez l'objet ActionCodeSettings, qui fournit à Firebase des instructions sur la création du lien vers l'adresse e-mail. Attribuez aux champs suivants les valeurs correspondantes :

    • url: lien profond à intégrer et état supplémentaire à transmettre. Le domaine du lien doit être ajouté à la liste des domaines autorisés de la console Firebase. Pour y accéder, accédez à l'onglet "Mode de connexion" (Authentification -> Paramètres).
    • android et ios: aide Firebase Authentication à déterminer s'il doit créer un lien Web uniquement ou un lien mobile ouvert sur un appareil Android ou Apple.
    • handleCodeInApp: défini sur "true". L'opération de connexion doit toujours être effectuée dans l'application, contrairement aux autres actions par e-mail hors bande (réinitialisation du mot de passe et validation de l'adresse e-mail). En effet, à la fin du flux, l'utilisateur doit être connecté et son état d'authentification doit persister dans l'application.
    • linkDomain: lorsque des domaines de lien Hosting personnalisés sont définis pour un projet, spécifiez celui à utiliser lorsque le lien doit être ouvert par une application mobile spécifiée. Sinon, le domaine par défaut est automatiquement sélectionné (par exemple, PROJECT_ID.firebaseapp.com).

    • dynamicLinkDomain: obsolète. Ne spécifiez pas ce paramètre.

      Web

      const actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};
      auth_email_link_actioncode_settings.js

      Web

      var actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};
      email-link-auth.js

    Pour en savoir plus sur ActionCodeSettings, consultez la section Transmettre l'état dans les actions par e-mail.

  2. Demandez à l'utilisateur de vous fournir son adresse e-mail.

  3. Envoyez le lien d'authentification à l'adresse e-mail de l'utilisateur et enregistrez-la au cas où l'utilisateur termine la connexion par e-mail sur le même appareil.

    Web

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

const auth = getAuth();
sendSignInLinkToEmail(auth, email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });
    auth_email_link_send.js

    Web

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
    email-link-auth.js

Problèmes de sécurité

Pour éviter qu'un lien de connexion ne soit utilisé pour se connecter en tant qu'utilisateur non autorisé ou sur un appareil non autorisé, Firebase Authentication exige que l'adresse e-mail de l'utilisateur soit fournie lors du parcours de connexion. Pour que la connexion aboutisse, cette adresse e-mail doit correspondre à celle à laquelle le lien de connexion a été envoyé à l'origine.

Vous pouvez simplifier ce flux pour les utilisateurs qui ouvrent le lien de connexion sur le même appareil qu'ils ont utilisé pour le demander en stockant leur adresse e-mail localement (par exemple, à l'aide de localStorage ou de cookies) lorsque vous envoyez l'e-mail de connexion. Utilisez ensuite cette adresse pour finaliser le parcours. Ne transmettez pas l'adresse e-mail de l'utilisateur dans les paramètres d'URL de redirection et ne la réutilisez pas, car cela pourrait permettre des injections de session.

Une fois la connexion terminée, tout mécanisme de connexion précédent non validé sera supprimé de l'utilisateur et toutes les sessions existantes seront invalidées. Par exemple, si quelqu'un a déjà créé un compte non validé avec la même adresse e-mail et le même mot de passe, le mot de passe de l'utilisateur sera supprimé pour empêcher l'usurpateur qui a revendiqué la propriété et créé ce compte non validé de se connecter à nouveau avec l'adresse e-mail et le mot de passe non validés.

Assurez-vous également d'utiliser une URL HTTPS en production pour éviter que votre lien ne soit potentiellement intercepté par des serveurs intermédiaires.

Finaliser la connexion sur une page Web

Le format du lien profond vers l'e-mail est le même que celui utilisé pour les actions par e-mail hors bande (validation de l'adresse e-mail, réinitialisation du mot de passe et révocation de la modification de l'adresse e-mail). Firebase Auth simplifie cette vérification en fournissant l'API isSignInWithEmailLink pour vérifier si un lien est un lien de connexion avec une adresse e-mail.

Pour finaliser la connexion sur la page de destination, appelez signInWithEmailLink avec l'adresse e-mail de l'utilisateur et le lien d'e-mail réel contenant le code à usage unique.

Web

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user by importing getAdditionalUserInfo
      // and calling it with result:
      // getAdditionalUserInfo(result)
      // You can access the user's profile via:
      // getAdditionalUserInfo(result)?.profile
      // You can check if the user is new or existing:
      // getAdditionalUserInfo(result)?.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email_link_complete.js

Web

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email-link-auth.js

Se connecter dans une application mobile

Firebase Authentication utilise Firebase Hosting pour envoyer le lien par e-mail à un appareil mobile. Pour que la connexion soit effectuée via une application mobile, l'application doit être configurée pour détecter le lien d'application entrant, analyser le lien profond sous-jacent, puis effectuer la connexion comme c'est le cas avec le flux Web.

Pour en savoir plus sur la gestion de la connexion avec un lien d'e-mail dans une application Android, consultez le guide Android.

Pour en savoir plus sur la gestion de la connexion avec un lien e-mail dans une application Apple, consultez le guide des plates-formes Apple.

Vous pouvez également associer cette méthode d'authentification à un utilisateur existant. Par exemple, un utilisateur qui s'est précédemment authentifié auprès d'un autre fournisseur (par exemple, avec un numéro de téléphone) peut ajouter cette méthode de connexion à son compte existant.

La différence se situe dans la seconde moitié de l'opération:

Web

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_link.js

Web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

Vous pouvez également l'utiliser pour réauthentifier un utilisateur de lien par e-mail avant d'exécuter une opération sensible.

Web

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_reauth.js

Web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

Toutefois, comme le flux peut se terminer sur un autre appareil où l'utilisateur d'origine n'était pas connecté, il est possible qu'il ne soit pas terminé. Dans ce cas, un message d'erreur peut s'afficher pour forcer l'utilisateur à ouvrir le lien sur le même appareil. Un certain état peut être transmis dans le lien pour fournir des informations sur le type d'opération et l'UID de l'utilisateur.

Si vous avez créé votre projet le 15 septembre 2023 ou après, la protection contre l'énumération des adresses e-mail est activée par défaut. Cette fonctionnalité améliore la sécurité des comptes utilisateur de votre projet, mais elle désactive la méthode fetchSignInMethodsForEmail(), que nous recommandions auparavant pour implémenter des flux d'abord par identifiant.

Bien que vous puissiez désactiver la protection contre l'énumération d'adresses e-mail pour votre projet, nous vous déconseillons de le faire.

Pour en savoir plus, consultez la documentation sur la protection contre l'énumération d'adresses e-mail.

Modèle d'e-mail par défaut pour la connexion par lien

Le modèle d'e-mail par défaut inclut un code temporel dans l'objet et le corps de l'e-mail afin que les e-mails suivants ne soient pas regroupés dans un seul fil de discussion, et que le lien ne soit pas masqué.

Ce modèle s'applique aux langues suivantes:

Code Langue
ar Arabe
zh-CN Chinois (simplifié)
zh-TW Chinois (traditionnel)
nl Néerlandais
en Anglais
en-GB Anglais (Royaume-Uni)
fr Français
de Allemand
id Indonésien
pour les recevoir. Italien
ja Japonais
ko Coréen
pl Polonais
pt-BR Portugais (Brésil)
pt-PT Portugais (Portugal)
ru Russe
es Espagnol
es-419 Espagnol (Amérique latine)
th Thaï

Étapes suivantes

Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associé aux identifiants (nom d'utilisateur et mot de passe, numéro de téléphone ou informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Ce nouveau compte est stocké dans votre projet Firebase et peut être utilisé pour identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la manière dont il se connecte.

  • Dans vos applications, la méthode recommandée pour connaître l'état d'authentification de votre utilisateur consiste à définir un observateur sur l'objet Auth. Vous pouvez ensuite obtenir les informations de profil de base de l'utilisateur à partir de l'objet User. Consultez la section Gérer les utilisateurs.

  • Dans vos règles de sécurité Firebase Realtime Database et Cloud Storage, vous pouvez obtenir l'ID utilisateur unique de l'utilisateur connecté à partir de la variable auth et l'utiliser pour contrôler les données auxquelles un utilisateur peut accéder.

Vous pouvez autoriser les utilisateurs à se connecter à votre application à l'aide de plusieurs fournisseurs d'authentification en associant les identifiants du fournisseur d'authentification à un compte utilisateur existant.

Pour déconnecter un utilisateur, appelez signOut:

Web

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js