Authentifiez-vous avec Firebase à l'aide de comptes basés sur un mot de passe à l'aide de JavaScript

Vous pouvez utiliser Firebase Authentication pour permettre à vos utilisateurs de s'authentifier auprès de à l'aide de leurs adresses e-mail et mots de passe, et pour gérer de mots de passe.

Avant de commencer

  1. Ajoutez Firebase à votre projet JavaScript.
  2. Si vous n'avez pas encore associé votre application à votre projet Firebase, faites-le depuis la console Firebase.
  3. Activez la connexion par adresse e-mail/mot de passe :
    1. Dans la console Firebase, ouvrez la section Auth.
    2. Dans l'onglet Mode de connexion, activez la connexion Adresse e-mail/Mot de passe. , puis cliquez sur Save (Enregistrer).

Créer un compte basé sur un mot de passe

Pour créer un compte utilisateur avec un mot de passe, procédez comme suit sur la page de connexion de votre application :

  1. Lorsqu'un nouvel utilisateur s'inscrit à l'aide du formulaire d'inscription de votre application, effectuez les nouvelles étapes de validation de compte requises par votre application, par exemple pour vérifier que le mot de passe du nouveau compte a été saisi correctement et qu'il répond à vos exigences de complexité.
  2. Créez un compte en transmettant l'adresse e-mail et le mot de passe du nouvel utilisateur vers createUserWithEmailAndPassword:

    Web

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

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
    auth_signup_password.js

    Web

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    email.js
    Si le compte a été créé, l'utilisateur est connecté automatiquement. Consultez la section "Étapes suivantes" ci-dessous pour obtenir les informations sur l'utilisateur connecté.

    C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence sur l'authentification.

Se connecter à un compte avec une adresse e-mail et un mot de passe

La procédure de connexion d'un utilisateur avec un mot de passe est semblable à celle de création d'un compte. Sur la page de connexion de votre application, procédez comme suit :

  1. Lorsqu'un utilisateur se connecte à votre application, transmettez son adresse e-mail et mot de passe pour signInWithEmailAndPassword:

    Web

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

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_signin_password.js

    Web

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    email.js
    Consultez la section "Étapes suivantes" ci-dessous pour obtenir les informations sur l'utilisateur connecté.

    C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence sur l'authentification.

Recommandé : Activer la protection contre l'énumération d'adresses e-mail

Certaines méthodes Firebase Authentication qui utilisent des adresses e-mail comme paramètres génèrent des erreurs spécifiques si l'adresse e-mail n'est pas enregistrée alors qu'elle doit l'être (par exemple, lors de la connexion avec une adresse e-mail et un mot de passe) ou si elle est enregistrée alors qu'elle doit être inutilisée (par exemple, lors de la modification de l'adresse e-mail d'un utilisateur). Bien que cela puisse être utile pour suggérer des remèdes spécifiques aux utilisateurs, cela peut aussi être détourné par des personnes malveillantes afin de découvrir les adresses e-mail enregistrées par vos utilisateurs.

Pour atténuer ce risque, nous vous recommandons d'activer la protection contre l'énumération des adresses e-mail pour votre projet à l'aide de l'outil gcloud de Google Cloud. Notez que l'activation de cette fonctionnalité modifie le comportement de signalement des erreurs d'Firebase Authentication : assurez-vous que votre application ne s'appuie pas sur les erreurs plus spécifiques.

Étapes suivantes

Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associés aux identifiants, c'est-à-dire au nom d'utilisateur et au mot de passe, ou des informations sur le fournisseur d'authentification, c'est-à-dire l'utilisateur avec lequel il s'est connecté. Cette nouvelle est stocké dans votre projet Firebase et peut servir à identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la façon dont l'utilisateur 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 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