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 avec Firebase à l'aide de leur adresse e-mail et de leur mot de passe, et pour gérer les comptes basés sur un mot de passe de votre application.

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 Méthode de connexion, activez la méthode de connexion Adresse e-mail/Mot de passe, puis cliquez sur 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 à 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 nouveau 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 utilisateur 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 son mot de passe à 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.

Recommandation: Définir une règle de mot de passe

Vous pouvez renforcer la sécurité des comptes en appliquant des exigences de complexité des mots de passe.

Pour configurer une stratégie de mots de passe pour votre projet, ouvrez l'onglet Stratégie de mots de passe sur la page "Paramètres d'authentification" de la console Firebase:

Paramètres d'authentification

Les règles de mot de passe Firebase Authentication acceptent les exigences de mot de passe suivantes:

  • Minuscule requise

  • Majuscule requise

  • Caractère numérique requis

  • Caractère non alphanumérique requis

    Les caractères suivants répondent à la condition de caractère non alphanumérique : ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • Longueur minimale du mot de passe (entre 6 et 30 caractères, par défaut : 6)

  • Longueur maximale du mot de passe (4 096 caractères maximum)

Vous pouvez activer l'application des règles relatives aux mots de passe de deux manières:

  • Obligatoire: les tentatives d'inscription échouent tant que l'utilisateur n'indique pas un mot de passe conforme à vos règles.

  • Notifier: les utilisateurs sont autorisés à s'inscrire avec un mot de passe non conforme. Lorsque vous utilisez ce mode, vous devez vérifier si le mot de passe de l'utilisateur est conforme au règlement côté client et inviter l'utilisateur à modifier son mot de passe s'il ne l'est pas.

Les nouveaux utilisateurs doivent toujours choisir un mot de passe conforme à vos règles.

Si vous avez des utilisateurs actifs, nous vous recommandons de ne pas activer la mise à niveau forcée lors de la connexion, sauf si vous avez l'intention de bloquer l'accès aux utilisateurs dont les mots de passe ne respectent pas votre règle. Utilisez plutôt le mode notification, qui permet aux utilisateurs de se connecter avec leur mot de passe actuel et de les informer des exigences auxquelles leur mot de passe ne répond pas.

Valider un mot de passe sur le client

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

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 ne doit pas l'être (par exemple, lors de la modification de l'adresse e-mail d'un utilisateur). Bien que cela puisse être utile pour suggérer des solutions spécifiques aux utilisateurs, cela peut également être utilisé de manière abusive par des acteurs malveillants pour 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 création de rapports d'erreurs de Firebase Authentication. Assurez-vous que votre application ne dépend pas des erreurs plus spécifiques.

É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