Authentifiez-vous auprès de Firebase à l'aide de comptes basés sur un mot de passe à l'aide de Javascript

Vous pouvez utiliser l'authentification Firebase pour permettre à vos utilisateurs de s'authentifier auprès de Firebase à l'aide de leurs adresses e-mail et de leurs mots de passe, et pour gérer les comptes basés sur des mots de passe de votre application.

Avant que tu commences

  1. Ajoutez Firebase à votre projet JavaScript .
  2. Si vous n'avez pas encore connecté votre application à votre projet Firebase, faites-le depuis la console Firebase .
  3. Activer la connexion par e-mail/mot de passe :
    1. Dans la console Firebase , ouvrez la section Auth .
    2. Dans l'onglet Méthode de connexion , activez la méthode de connexion par e-mail/mot de passe et cliquez sur Enregistrer .

Créer un compte avec mot de passe

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

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

    Web modular API

    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 namespaced API

    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 nouveau compte a été créé, l'utilisateur est automatiquement connecté. Jetez un œil à la section Étapes suivantes ci-dessous pour obtenir les détails de l’utilisateur connecté.

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

Connectez un utilisateur avec une adresse e-mail et un mot de passe

Les étapes de connexion d'un utilisateur avec un mot de passe sont similaires aux étapes de création d'un nouveau 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 son mot de passe à signInWithEmailAndPassword :

    Web modular API

    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 namespaced API

    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
    Jetez un œil à la section Étapes suivantes ci-dessous pour obtenir les détails de l’utilisateur connecté.

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

Recommandé : Activer la protection de l'énumération des e-mails

Certaines méthodes d'authentification Firebase qui prennent les 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 être enregistrée (par exemple, lors de la connexion avec une adresse e-mail et un mot de passe), ou enregistrée lorsqu'elle doit être inutilisée (par exemple, lors du changement d'adresse e-mail d'un utilisateur). Bien que cela puisse être utile pour suggérer des solutions spécifiques aux utilisateurs, des acteurs malveillants peuvent également en abuser pour découvrir les adresses e-mail enregistrées par vos utilisateurs.

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

Prochaines étapes

Après qu'un utilisateur se connecte pour la première fois, un nouveau compte utilisateur est créé et lié aux informations d'identification (c'est-à-dire le nom d'utilisateur et le mot de passe, le numéro de téléphone ou les informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Ce nouveau compte est stocké dans le cadre de votre projet Firebase et peut être utilisé pour identifier un utilisateur dans chaque application de votre projet, quelle que soit la manière dont l'utilisateur se connecte.

  • Dans vos applications, la méthode recommandée pour connaître le statut 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 . Voir 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 informations d'identification du fournisseur d'authentification à un compte utilisateur existant.

Pour déconnecter un utilisateur, appelez signOut :

Web modular API

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 namespaced API

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