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.

La connexion par e-mail présente de nombreux avantages :

• Inscription et connexion simples
• Réduction du risque de réutilisation de mots de passe dans plusieurs applications, ce qui peut compromettre la sécurité, même avec des mots de passe bien choisis
• Possibilité d'authentifier un utilisateur tout en vérifiant qu'il est le propriétaire légitime d'une adresse e-mail
• Un utilisateur n'a besoin que d'un compte de messagerie accessible pour se connecter. Il n'est pas nécessaire de posséder un numéro de téléphone ni 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 fastidieux sur un appareil mobile.
• Un utilisateur existant qui s'est déjà connecté avec un identifiant d'e-mail (mot de passe ou fédéré) peut être mis à niveau pour se connecter uniquement avec l'e-mail. Par exemple, un utilisateur qui a oublié son mot de passe peut toujours se connecter sans avoir à le réinitialiser.

Avant de commencer

Si ce n'est pas déjà fait, copiez l'extrait d'initialisation de la Firebase console dans votre projet, comme décrit dans Ajouter Firebase à votre projet JavaScript.

Activer la connexion par lien d'e-mail pour votre projet Firebase

Pour connecter des utilisateurs par lien d'e-mail, vous devez d'abord activer le fournisseur d'e-mail et la méthode de connexion par lien d'e-mail pour votre projet Firebase :

1. Dans la console Firebase, accédez à Sécurité > Authentification.

2. Dans l'onglet Mode de connexion, activez la méthode de connexion Adresse e-mail/Mot de passe. Notez que la connexion par adresse e-mail/mot de passe doit être activée pour utiliser la connexion par lien d'e-mail.

3. Dans la même section, activez le fournisseur de connexion Lien envoyé par e-mail (connexion sans mot de passe).

4. Cliquez sur Enregistrer.

Envoyer un lien d'authentification à l'adresse e-mail de l'utilisateur

Pour lancer le flux d'authentification, présentez à l'utilisateur une interface l'invitant à fournir 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 façon de créer le lien d'e-mail. Renseignez les champs ci-dessous comme suit :

   • url : lien profond à intégrer et tout état supplémentaire à transmettre. Si ce n'est pas déjà fait, ajoutez votre domaine à la liste des domaines autorisés :

     1. Dans la console Firebase, accédez à l'onglet Sécurité > Authentification > Paramètres.

     2. Dans la section Domaines autorisés, cliquez sur Ajouter un domaine, puis ajoutez votre domaine.

   • android et ios : aident Firebase Authentication à déterminer s'il doit créer un lien Web uniquement ou un lien mobile qui s'ouvre 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 à d'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 être conservé dans l'application.
   • linkDomain : lorsque des domaines de liens 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).Hosting

   • 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'
       },
       // The domain must be configured in Firebase Hosting and owned by the project.
       linkDomain: 'custom-domain.com'
     };
     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 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 effectue 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

Finaliser la connexion avec le lien d'e-mail

Problèmes de sécurité

Pour éviter qu'un lien de connexion ne soit utilisé pour se connecter en tant qu'utilisateur non prévu ou sur un appareil non prévu, Firebase Auth exige que l'adresse e-mail de l'utilisateur soit fournie lors de la finalisation du flux 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 que celui sur lequel ils ont demandé le lien, 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 flux. Ne transmettez pas l'adresse e-mail de l'utilisateur dans les paramètres de l'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 non validé précédent sera supprimé de l'utilisateur et toutes les sessions existantes seront invalidées. Par exemple, si une personne 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 du lien d'e-mail est le même que le format utilisé pour les actions par e-mail hors bande (validation de l'adresse e-mail, réinitialisation du mot de passe et révocation du changement d'adresse e-mail). Firebase Auth simplifie cette vérification en fournissant l'API isSignInWithEmailLink pour vérifier si un lien est une connexion par lien d'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.

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

// 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

Finaliser la connexion dans une application mobile

Firebase Authentication utilise Firebase Hosting pour envoyer le lien d'e-mail à un appareil mobile. Pour finaliser la connexion 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 finaliser la connexion comme elle le fait via le flux Web.

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

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

Association/réauthentification avec un lien d'e-mail

Vous pouvez également associer cette méthode d'authentification à un utilisateur existant. Par exemple, un utilisateur qui s'est déjà authentifié auprès d'un autre fournisseur, tel qu'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 :

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

// 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

Cette méthode peut également être utilisée pour réauthentifier un utilisateur de lien d'e-mail avant d'exécuter une opération sensible.

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

// 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 sur lequel l'utilisateur d'origine n'était pas connecté, il est possible qu'il ne soit pas finalisé. Dans ce cas, un message d'erreur peut s'afficher pour forcer l'utilisateur à ouvrir le lien sur le même appareil. Un état peut être transmis dans le lien pour fournir des informations sur le type d'opération et l'UID de l'utilisateur.

Obsolète : différencier l'adresse e-mail/mot de passe du lien d'e-mail

Si vous avez créé votre projet le 15 septembre 2023 ou après, la protection contre l'énumération d'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 avec l'identifiant.

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

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, ce qui masquerait le lien.

Ce modèle s'applique aux langues suivantes :

É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 chaque application de votre projet, quelle que soit la méthode de connexion utilisée.

• 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 base du profil de l'utilisateur à partir de l'objet User. Consultez Gérer les utilisateurs.

• Dans les règles de sécurité de votre Firebase Realtime Database et Cloud Storage Security Rules, 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 :

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

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

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