Premiers pas avec Firebase Authentication sur les sites Web

Vous pouvez utiliser Firebase Authentication pour permettre aux utilisateurs de se connecter à votre application à l'aide d'une ou plusieurs méthodes de connexion, y compris la connexion par adresse e-mail et mot de passe, et les fournisseurs d'identité fédérés tels que Se connecter avec Google et Se connecter avec Facebook. Ce tutoriel vous explique comment commencer à utiliser Firebase Authentication en ajoutant une connexion par adresse e-mail et mot de passe à votre application.

Ajouter et initialiser le SDK Authentication

  1. Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase.

  2. Ajoutez le SDK JS Firebase Authentication et initialisez Firebase Authentication :

Web 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Facultatif) Prototyper et tester avec Firebase Local Emulator Suite

Avant de parler de la façon dont votre application authentifie les utilisateurs, présentons un ensemble d'outils que vous pouvez utiliser pour prototyper et tester la fonctionnalité Authentication : Firebase Local Emulator Suite. Si vous hésitez entre différentes techniques et différents fournisseurs d'authentification, si vous testez différents modèles de données avec des données publiques et privées à l'aide de Authentication et Firebase Security Rules, ou si vous prototypez des conceptions d'UI de connexion, il peut être judicieux de pouvoir travailler en local sans déployer de services en direct.

Un émulateur Authentication fait partie de la Local Emulator Suite, qui permet à votre application d'interagir avec le contenu et la configuration de la base de données émulée, ainsi qu'éventuellement avec les ressources de votre projet émulé (fonctions, autres bases de données et règles de sécurité).

L'utilisation de l'émulateur Authentication ne nécessite que quelques étapes :

  1. Ajoutez une ligne de code à la configuration de test de votre application pour vous connecter à l'émulateur.
  2. À partir de la racine du répertoire de votre projet local, exécutez firebase emulators:start.
  3. Utilisez l'interface utilisateur Local Emulator Suite pour le prototypage interactif ou l'API REST de l'émulateur Authentication pour les tests non interactifs.

Un guide détaillé est disponible sur la page Connecter votre application à l'émulateur Authentication. Pour en savoir plus, consultez la présentation de Local Emulator Suite.

Voyons maintenant comment authentifier les utilisateurs.

Inscrire de nouveaux utilisateurs

Créez un formulaire qui permet aux nouveaux utilisateurs de s'inscrire à votre application à l'aide de leur adresse e-mail et d'un mot de passe. Lorsqu'un utilisateur remplit le formulaire, validez l'adresse e-mail et le mot de passe qu'il a fournis, puis transmettez-les à la méthode 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

Connecter des utilisateurs existants

Créez un formulaire permettant aux utilisateurs existants de se connecter avec leur adresse e-mail et leur mot de passe. Lorsqu'un utilisateur remplit le formulaire, appelez la méthode 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

Définir un observateur de l'état d'authentification et obtenir les données utilisateur

Pour chacune des pages de votre application qui ont besoin d'informations sur l'utilisateur connecté, associez un observateur à l'objet d'authentification global. Cet observateur est appelé chaque fois que l'état de connexion de l'utilisateur change.

Associez l'observateur à l'aide de la méthode onAuthStateChanged. Lorsqu'un utilisateur se connecte, vous pouvez obtenir des informations le concernant dans l'observateur.

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

Étapes suivantes

Découvrez comment ajouter la compatibilité pour d'autres fournisseurs d'identité et les comptes invités anonymes :