Firebase Auth & Realtime Database Apps · درس

تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور

نفّذ وظائف تسجيل المستخدمين ودخولهم باستخدام بيانات اعتماد البريد الإلكتروني وكلمة المرور مع Firebase Authentication

الدرس 1 من 411 خطوة

تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور درس مجاني في Firebase Auth & Realtime Database Apps على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Firebase Auth & Realtime Database Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Firebase Auth & Realtime Database Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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?

أجب عليها في الدرس التفاعلي

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!

البدء مجانًا

تعلم Firebase Auth & Realtime Database Apps مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 11
الدروس: 44

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور» مجاني؟

نعم — نص درس «تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Firebase Auth & Realtime Database Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Firebase Auth & Realtime Database Apps 4 دروس في المجموع.

ماذا ستتعلم في «تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور»؟

نفّذ وظائف تسجيل المستخدمين ودخولهم باستخدام بيانات اعتماد البريد الإلكتروني وكلمة المرور مع Firebase Authentication تتمرن على Firebase Auth & Realtime Database Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Firebase Auth & Realtime Database Apps؟

لا تُشترط خبرة سابقة. Firebase Auth & Realtime Database Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Firebase Auth & Realtime Database Apps هذا؟

نعم. كل درس في Firebase Auth & Realtime Database Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

تنفيذ المصادقة بالبريد الإلكتروني/كلمة المرور
إدارة جلسات المستخدمين وحالاتهم
معالجة أخطاء المصادقة
إعادة تعيين كلمة المرور والتحقق من البريد الإلكتروني

← العودة إلى Firebase Auth & Realtime Database Apps