Firebase Auth & Realtime Database Apps · Leçon

Mettre en œuvre l’authentification par e-mail et mot de passe

Mettez en œuvre l’inscription et la connexion des utilisateurs à l’aide d’identifiants e-mail et mot de passe avec Firebase Authentication

Leçon 1 sur 411 étapes

Mettre en œuvre l’authentification par e-mail et mot de passe est une leçon Firebase Auth & Realtime Database Apps gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Firebase Auth & Realtime Database Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Firebase Auth & Realtime Database Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Email/Password Auth Intro

Welcome to implementing user authentication with Firebase! In this lesson, we'll focus on the most common method: Email and Password.

It's straightforward and widely understood by users.
Firebase handles the secure storage of user credentials.
You'll learn to register new users and sign in existing ones.

Enable Email/Password Provider

Before writing code, you need to enable Email/Password authentication in your Firebase project.

Go to the Firebase console:

Navigate to Authentication.
Click on the Sign-in method tab.
Enable the Email/Password provider.

This tells Firebase to accept these credentials.

Registering New Users

To let new users create an account, you'll use a Firebase Authentication method. This method takes an email and a password, then securely creates a new user record in your Firebase project.

It's crucial to gather the user's email and a strong password from your app's UI.

User Registration Code

Here's how you register a new user using the Firebase SDK. We'll use JavaScript syntax, common for web and mobile apps.

createUserWithEmailAndPassword() is the key function.

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

const auth = getAuth();

function registerUser(email, password) {
  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed up successfully
      const user = userCredential.user;
      console.log("User registered:", user.email);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error("Registration error:", errorCode, errorMessage);
    });
}

Signing In Existing Users

Once a user has registered, they can sign in using the same email and password. This process verifies their credentials against the stored records in Firebase.

If the credentials match, Firebase provides a user object, indicating a successful login.

User Login Code

To sign in an existing user, you use signInWithEmailAndPassword(). It works similarly to registration, taking an email and password.

This function also returns a Promise, allowing you to handle success or failure.

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

const auth = getAuth();

function loginUser(email, password) {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in successfully
      const user = userCredential.user;
      console.log("User logged in:", user.email);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error("Login error:", errorCode, errorMessage);
    });
}

Accessing Current User Data

After a user successfully registers or logs in, you can access their information via the currentUser object. This object holds details like their unique ID (UID) and email.

It's vital for personalizing app content.

import { getAuth } from "firebase/auth";

const auth = getAuth();

function displayUserInfo() {
  const user = auth.currentUser;

  if (user) {
    // User is signed in
    console.log("User UID:", user.uid);
    console.log("User Email:", user.email);
    // You can also get user.displayName, user.photoURL, etc.
  } else {
    // No user is signed in
    console.log("No user currently logged in.");
  }
}

Logging Users Out

Providing a way for users to sign out is essential for security and user experience. Firebase Auth makes this simple with the signOut() method.

Calling signOut() clears the user's session.

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

const auth = getAuth();

function logoutUser() {
  signOut(auth).then(() => {
    // Sign-out successful.
    console.log("User signed out successfully!");
  }).catch((error) => {
    // An error happened.
    console.error("Sign out error:", error);
  });
}

Basic Error Handling

When dealing with authentication, errors are common (e.g., wrong password, email already in use). Firebase provides specific error codes and messages.

Always include .catch() blocks to gracefully handle these issues and provide feedback to your users.

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

const auth = getAuth();

// Example with error handling
signInWithEmailAndPassword(auth, "wrong@example.com", "badpassword")
  .then((userCredential) => {
    console.log("Login successful!");
  })
  .catch((error) => {
    const errorCode = error.code; // e.g., 'auth/user-not-found'
    const errorMessage = error.message; // e.g., 'There is no user record...'
    console.error("Auth failed:", errorCode, errorMessage);
    // Display user-friendly message based on errorCode
  });

Check Your Knowledge

Which Firebase Authentication method is used to create a new user account with an email and password?

Réponds-y dans la leçon interactive

Recap: Email/Password Auth

Great job! You've learned the fundamentals of Email/Password authentication with Firebase.

You enable the provider in the Firebase console.
createUserWithEmailAndPassword() registers new users.
signInWithEmailAndPassword() logs in existing users.
currentUser gives you access to user data.
signOut() logs users out.
Always implement error handling for a robust app.

Next, we'll explore managing user sessions and states!

Gratuit pour commencer

Apprends Firebase Auth & Realtime Database Apps avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 11
Leçons: 44

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Mettre en œuvre l’authentification par e-mail et mot de passe » est-elle gratuite ?

Oui — le texte complet de « Mettre en œuvre l’authentification par e-mail et mot de passe » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Firebase Auth & Realtime Database Apps, passe à CoddyKit PRO. Le cours Firebase Auth & Realtime Database Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mettre en œuvre l’authentification par e-mail et mot de passe » ?

Mettez en œuvre l’inscription et la connexion des utilisateurs à l’aide d’identifiants e-mail et mot de passe avec Firebase Authentication Tu pratiques Firebase Auth & Realtime Database Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Firebase Auth & Realtime Database Apps ?

Aucune expérience préalable n'est requise. Firebase Auth & Realtime Database Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Mettre en œuvre l’authentification par e-mail et mot de passe » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Firebase Auth & Realtime Database Apps ?

Oui. Chaque leçon Firebase Auth & Realtime Database Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Mettre en œuvre l’authentification par e-mail et mot de passe
Gérer les sessions et les états des utilisateurs
Gérer les erreurs d’authentification
Réinitialisation du mot de passe et vérification de l’adresse e-mail

← Retour à Firebase Auth & Realtime Database Apps