Gérer les utilisateurs dans Firebase

Créer un compte utilisateur

Vous disposez des options suivantes pour créer un nouvel utilisateur :

• Depuis votre application : créez un nouvel utilisateur dans votre projet Firebase en appelant la méthode createUserWithEmailAndPassword ou en connectant un utilisateur pour la première fois à l'aide d'un fournisseur d'identité fédéré, tel que Google Sign-In ou la connexion avec Facebook.

• Dans la console Firebase : créez un compte utilisateur authentifié par mot de passe dans l'onglet Sécurité > Authentification > Utilisateurs.

Obtenir l'utilisateur actuellement connecté

La méthode recommandée pour obtenir l'utilisateur actuel consiste à définir un observateur sur l'objet Auth :

Web

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

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

En utilisant un observateur, vous vous assurez que l'objet Auth n'est pas dans un état intermédiaire, tel que l'initialisation, lorsque vous obtenez l'utilisateur actuel. Lorsque vous utilisez signInWithRedirect, l'observateur onAuthStateChanged attend que getRedirectResult soit résolu avant de se déclencher.

Vous pouvez également obtenir l'utilisateur actuellement connecté à l'aide de la propriété currentUser. Si aucun utilisateur n'est connecté, currentUser est nul :

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user) {
  // User is signed in, see docs for a list of available properties
  // https://firebase.google.com/docs/reference/js/auth.user
  // ...
} else {
  // No user is signed in.
}
auth_current_user.js

Web

const user = firebase.auth().currentUser;

if (user) {
  // User is signed in, see docs for a list of available properties
  // https://firebase.google.com/docs/reference/js/v8/firebase.User
  // ...
} else {
  // No user is signed in.
}
index.js

Remarque : currentUser peut également être nul, car l'objet d'authentification n'a pas terminé son initialisation. Si vous utilisez un observateur pour suivre l'état de connexion de l'utilisateur, vous n'avez pas besoin de gérer ce cas.

Obtenir le profil d'un utilisateur

Pour obtenir les informations de profil d'un utilisateur, utilisez les propriétés d'une instance de User. Exemple :

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;
if (user !== null) {
  // The user object has basic properties such as display name, email, etc.
  const displayName = user.displayName;
  const email = user.email;
  const photoURL = user.photoURL;
  const emailVerified = user.emailVerified;

  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getToken() instead.
  const uid = user.uid;
}
auth_get_user_profile.js

Web

const user = firebase.auth().currentUser;
if (user !== null) {
  // The user object has basic properties such as display name, email, etc.
  const displayName = user.displayName;
  const email = user.email;
  const photoURL = user.photoURL;
  const emailVerified = user.emailVerified;

  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getIdToken() instead.
  const uid = user.uid;
}
manage.js

Important : Soyez prudent lorsque vous définissez (et affichez ultérieurement) des valeurs d'interface utilisateur potentiellement visibles par l'utilisateur, telles que displayName et photoURL. L'API ne filtre pas les valeurs pour éviter les attaques potentielles de type XSS.

Obtenir les informations de profil spécifiques au fournisseur d'un utilisateur

Pour obtenir les informations de profil récupérées auprès des fournisseurs de connexion associés à un utilisateur, utilisez la propriété providerData. Exemple :

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user !== null) {
  user.providerData.forEach((profile) => {
    console.log("Sign-in provider: " + profile.providerId);
    console.log("  Provider-specific UID: " + profile.uid);
    console.log("  Name: " + profile.displayName);
    console.log("  Email: " + profile.email);
    console.log("  Photo URL: " + profile.photoURL);
  });
}
auth_get_user_profile_provider.js

Web

const user = firebase.auth().currentUser;

if (user !== null) {
  user.providerData.forEach((profile) => {
    console.log("Sign-in provider: " + profile.providerId);
    console.log("  Provider-specific UID: " + profile.uid);
    console.log("  Name: " + profile.displayName);
    console.log("  Email: " + profile.email);
    console.log("  Photo URL: " + profile.photoURL);
  });
}
manage.js

Mettre à jour le profil d'un utilisateur

Vous pouvez mettre à jour les informations de profil de base d'un utilisateur (son nom à afficher et l'URL de sa photo de profil) à l'aide de la méthode updateProfile. Exemple :

Web

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
auth_update_user_profile.js

Web

const user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Jane Q. User",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Update successful
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});  
manage.js

Définir l'adresse e-mail d'un utilisateur

Vous pouvez définir l'adresse e-mail d'un utilisateur à l'aide de la méthode updateEmail. Exemple :

Web

import { getAuth, updateEmail } from "firebase/auth";
const auth = getAuth();
updateEmail(auth.currentUser, "[e-mail]").then(() => {
  // Email updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
auth_update_user_email.js

Web

const user = firebase.auth().currentUser;

user.updateEmail("[e-mail]").then(() => {
  // Update successful
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
manage.js

Important : Pour définir l'adresse e-mail d'un utilisateur, celui-ci doit s'être connecté récemment. Consultez Réauthentifier un utilisateur.

Envoyer un e-mail de validation à un utilisateur

Vous pouvez envoyer un e-mail de validation d'adresse à un utilisateur à l'aide de la méthode sendEmailVerification. Exemple :

Web

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

const auth = getAuth();
sendEmailVerification(auth.currentUser)
  .then(() => {
    // Email verification sent!
    // ...
  });
auth_send_email_verification.js

Web

firebase.auth().currentUser.sendEmailVerification()
  .then(() => {
    // Email verification sent!
    // ...
  });
email.js

Vous pouvez personnaliser le modèle d'e-mail utilisé dans l' onglet Sécurité > Authentification > Modèles de la console Firebase. Consultez Modèles d'e-mails dans le centre d'aide Firebase.

Il est également possible de transmettre l'état via une URL d'action pour rediriger l'utilisateur vers l'application lors de l'envoi d'un e-mail de validation.

Vous pouvez également localiser l'e-mail de validation en mettant à jour le code de langue sur l'instance Auth avant d'envoyer l'e-mail. Exemple :

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

Définir le mot de passe d'un utilisateur

Vous pouvez définir le mot de passe d'un utilisateur à l'aide de la méthode updatePassword. Exemple :

Web

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

const auth = getAuth();

const user = auth.currentUser;
const newPassword = getASecureRandomPassword();

updatePassword(user, newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_update_password.js

Web

const user = firebase.auth().currentUser;
const newPassword = getASecureRandomPassword();

user.updatePassword(newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});
manage.js

Important : Pour définir le mot de passe d'un utilisateur, celui-ci doit s'être connecté récemment. Consultez Réauthentifier un utilisateur.

Envoyer un e-mail de réinitialisation du mot de passe

Vous pouvez envoyer un e-mail de réinitialisation du mot de passe à un utilisateur à l'aide de la méthode sendPasswordResetEmail. Exemple :

Web

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

const auth = getAuth();
sendPasswordResetEmail(auth, email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_send_password_reset.js

Web

firebase.auth().sendPasswordResetEmail(email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Vous pouvez personnaliser le modèle d'e-mail utilisé dans l' onglet Sécurité > Authentification > Modèles de la console Firebase. Consultez Modèles d'e-mails dans le centre d'aide Firebase.

Il est également possible de transmettre l'état via une URL d'action pour rediriger l'utilisateur vers l'application lors de l'envoi d'un e-mail de réinitialisation du mot de passe.

Vous pouvez également localiser l'e-mail de réinitialisation du mot de passe en mettant à jour le code de langue sur l'instance Auth avant d'envoyer l'e-mail. Exemple :

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

Vous pouvez également envoyer des e-mails de réinitialisation du mot de passe depuis la console Firebase.

Supprimer un compte utilisateur

Vous pouvez supprimer un compte utilisateur à l'aide de la méthode delete. Exemple :

Web

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

const auth = getAuth();
const user = auth.currentUser;

deleteUser(user).then(() => {
  // User deleted.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_delete_user.js

Web

const user = firebase.auth().currentUser;

user.delete().then(() => {
  // User deleted.
}).catch((error) => {
  // An error ocurred
  // ...
});
manage.js

Important : Pour supprimer un compte utilisateur, celui-ci doit s'être connecté récemment. Consultez Réauthentifier un utilisateur.

Vous pouvez également supprimer des utilisateurs dans la console Firebase, dans l'onglet Sécurité > Authentification > Utilisateurs.

Réauthentifier un utilisateur

Certaines actions sensibles en termes de sécurité, telles que la suppression d'un compte, la définition d'une adresse e-mail principale, et la modification d'un mot de passe—nécessitent que l'utilisateur se soit connecté récemment. Si vous effectuez l'une de ces actions et que l'utilisateur s'est connecté il y a trop longtemps, l'action échoue et génère une erreur. Dans ce cas, réauthentifiez l'utilisateur en obtenant de nouveaux identifiants de connexion et en les transmettant à reauthenticateWithCredential. Exemple :

Web

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

const auth = getAuth();
const user = auth.currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

reauthenticateWithCredential(user, credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_reauth_with_credential.js

Web

const user = firebase.auth().currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

user.reauthenticateWithCredential(credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error occurred
  // ...
});
manage.js

Importer des comptes utilisateur

Vous pouvez importer des comptes utilisateur à partir d'un fichier dans votre projet Firebase à l'aide de la commande auth:import de la CLI Firebase. Exemple :

firebase auth:import users.json --hash-algo=scrypt --rounds=8 --mem-cost=14