Firebase Auth vs Manual Auth: A développeur & # s Journey

Développement d'une nouvelle plate-forme de commerce électronique, mélangeant des fonctionnalités StockX et eBay, a présenté une courbe d'apprentissage abrupte. Mon premier projet majeur, j'ai initialement visé une solution complètement construite sur mesure, y compris l'authentification. Cette décision a cependant souligné les avantages significatifs de l'authentification manuelle.

Authentification manuelle: la tentative initiale

Mon approche initiale impliquait un système d'authentification manuel, aux côtés de Firebase pour le stockage de données. Le processus était:

1. Inscription: Collectez les données utilisateur, générez un JWT (jeton Web JSON) et stockez les détails des utilisateurs dans Firebase.
2. Connexion: Vérifiez les informations d'identification à la base de données Firebase, authentifiez à l'aide du JWT et redirigez vers la page d'accueil.

Cette implémentation initiale, illustrée ci-dessous, semblait simple:

<code class="language-javascript">const submitFormData = async (path, data) => {
  // Store JWT token
  localStorage.setItem("token", responseData.data.token);

  console.log("Redirecting to home page");
  location.replace("/");
};

subBtn.addEventListener("click", () => {
  // Form validation
  if (!tac.checked) {
    showAlert("you must agree to our terms and conditions");
  } else {
    loader.style.display = "block";
    submitFormData("/signup", {
      name: name.value,
      email: email.value,
      password: password.value,
      number: number.value,
      tac: tac.checked,
      notification: notification.checked,
      seller: false
    });
  }
});</code>

le barrage routier

Le problème est survenu lors de la récupération des données utilisateur de Firebase. L'objet utilisateur a systématiquement renvoyé

. Les heures de débogage ont révélé les limites de mon approche manuelle. Firebase Auth a fourni une solution beaucoup plus élégante. null

La solution de l'authentification Firebase: une approche rationalisée

Le passage à Firebase Auth a radicalement simplifié le processus. L'implémentation révisée:

Inscription

<code class="language-javascript">const auth = getAuth();

createUserWithEmailAndPassword(auth, email.value, password.value)
  .then((userCredential) => {
    const user = userCredential.user;
    loader.style.display = "block";
    return submitFormData("/signup", {
      name: name.value,
      email: email.value,
      password: password.value,
      number: number.value,
      tac: tac.checked,
      notification: notification.checked,
      seller: false
    });
  })
  .catch((error) => {
    showAlert(error.message);
  });</code>

Connexion

<code class="language-javascript">signInWithEmailAndPassword(auth, email.value, password.value)
  .then((userCredential) => {
    const user = userCredential.user;
    loader.style.display = "block";
    return submitFormData("/login", {
      email: email.value,
      password: password.value
    });
  })
  .catch((error) => {
    showAlert(error.message);
  });</code>

Améliorations de clés:

1. Configuration simplifiée: gère les configurations de sécurité complexes. getAuth()
2. Gestion robuste des utilisateurs: et createUserWithEmailAndPassword() Gérer automatiquement la validation des e-mails, la sécurité des mots de passe, la création des utilisateurs et la gestion de session. signInWithEmailAndPassword()

leçons apprises

L'authentification du bâtiment à partir de zéro est une expérience d'apprentissage précieuse, mais Firebase Auth propose une alternative sécurisée, bien testée et économe en temps. Son intégration transparente avec Firestore et les fonctionnalités de sécurité intégrées sont inestimables pour les applications de production. Pour les logiciels prêts pour la production, tirer parti des solutions établies comme Firebase Auth est fortement recommandée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!