Firebase এর হাতেখড়ি (পর্ব ২) – Email/Password দিয়ে Authentication

আগের পর্বে আমরা Firebase প্রজেক্ট তৈরি করে SDK যুক্ত করেছিলাম। এই পর্ব থেকে শুরু হচ্ছে Firebase-এর সবচেয়ে বেশি ব্যবহৃত ফিচার — Authentication। আজ শিখব Email আর Password দিয়ে কীভাবে ইউজার সাইন আপ, লগইন, লগআউট করবে, আর পাসওয়ার্ড রিসেট ও ইমেইল ভেরিফিকেশন কীভাবে কাজ করে।

প্রথমে Console-এ Authentication চালু করা

কোড লেখার আগে Firebase Console-এ একটা সেটিং অন করতে হবে:

1. Firebase Console-এ নিজের প্রজেক্টে যান
2. বাম পাশের মেনু থেকে Build → Authentication-এ যান
3. Get started চাপুন
4. Sign-in method ট্যাবে গিয়ে Email/Password-এ ক্লিক করে Enable করুন

Auth SDK ইম্পোর্ট করা

পর্ব ১-এর firebase.js-এর মতোই, এবার Authentication মডিউল ইম্পোর্ট করে একটা auth ইনস্ট্যান্স বানাতে হবে।

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

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "my-first-app.firebaseapp.com",
  projectId: "my-first-app",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Sign Up — নতুন ইউজার তৈরি

createUserWithEmailAndPassword ফাংশন দিয়ে নতুন অ্যাকাউন্ট তৈরি হয়। এটা একটা Promise রিটার্ন করে, তাই async/await দিয়ে হ্যান্ডেল করা সহজ।

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

async function signUp(email, password) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("অ্যাকাউন্ট তৈরি হয়েছে:", userCredential.user.uid);
  } catch (error) {
    // যেমন: auth/email-already-in-use, auth/weak-password
    console.error("এরর কোড:", error.code);
  }
}

Login — সাইন ইন করা

signInWithEmailAndPassword ফাংশন আগের রেজিস্টার করা ইউজারকে লগইন করাবে।

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

async function login(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("লগইন সফল:", userCredential.user.email);
  } catch (error) {
    // যেমন: auth/invalid-credential, auth/user-not-found
    console.error("এরর কোড:", error.code);
  }
}

Logout — সাইন আউট করা

import { signOut } from "firebase/auth";
import { auth } from "./firebase";

async function logout() {
  await signOut(auth);
  console.log("লগআউট হয়ে গেছে");
}

Password Reset — পাসওয়ার্ড ভুলে গেলে

sendPasswordResetEmail ইউজারের ইমেইলে একটা রিসেট লিংক পাঠায় — এই লিংকে ক্লিক করে ইউজার নিজেই নতুন পাসওয়ার্ড সেট করতে পারে।

import { sendPasswordResetEmail } from "firebase/auth";
import { auth } from "./firebase";

async function resetPassword(email) {
  try {
    await sendPasswordResetEmail(auth, email);
    console.log("রিসেট লিংক ইমেইলে পাঠানো হয়েছে");
  } catch (error) {
    console.error("এরর কোড:", error.code);
  }
}

Email Verification — ইমেইল যাচাই করা

সাইন আপের পরপরই ইউজারকে একটা ভেরিফিকেশন ইমেইল পাঠানো ভালো অভ্যাস — এতে বোঝা যায় ইমেইলটা আসলেই ইউজারের।

import { createUserWithEmailAndPassword, sendEmailVerification } from "firebase/auth";
import { auth } from "./firebase";

async function signUpWithVerification(email, password) {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  await sendEmailVerification(userCredential.user);
  console.log("ভেরিফিকেশন ইমেইল পাঠানো হয়েছে");
}

// পরে চেক করা যায় ইউজার ভেরিফাই করেছে কিনা
function checkVerified() {
  return auth.currentUser?.emailVerified; // true / false
}

লাইভ ডেমো — Auth Flow (সিমুলেটেড)

নিচের ডেমোতে আসল Firebase Console নেই, তাই ব্রাউজারের মেমোরিতে একটা "নকল" ইউজার লিস্ট দিয়ে পুরো ফ্লো (Sign Up → Login → Logout) সিমুলেট করা হয়েছে — লজিকটা হুবহু উপরের কোডের মতোই, শুধু আসল Firebase কল-এর বদলে লোকাল state ব্যবহার হয়েছে।

প্রথমে একটা ইমেইল-পাসওয়ার্ড দিয়ে Sign Up করো, তারপর একই তথ্য দিয়ে Login করে দেখো error handling কীভাবে কাজ করে।

গুরুত্বপূর্ণ Error কোডগুলো

• auth/email-already-in-use — এই ইমেইল দিয়ে আগেই অ্যাকাউন্ট আছে
• auth/weak-password — পাসওয়ার্ড ৬ অক্ষরের কম
• auth/invalid-credential — ভুল ইমেইল বা পাসওয়ার্ড
• auth/user-not-found — এই ইমেইলে কোনো অ্যাকাউন্ট নেই
• auth/too-many-requests — অনেকবার ভুল চেষ্টার পর সাময়িক ব্লক

পরের একটা পর্বে (Error Handling Patterns) আমরা এই কোডগুলো নিয়ে আরও বিস্তারিত কাজ করব — কীভাবে প্রতিটা কোডের জন্য ইউজার-ফ্রেন্ডলি বার্তা দেখাতে হয়।

নিজে চেষ্টা করো

Exercise:

1. নিজের Firebase প্রজেক্টে Email/Password Authentication চালু করো।
2. একটা সাধারণ HTML/JS পেজে সাইন আপ ফর্ম বানাও, createUserWithEmailAndPassword দিয়ে টেস্ট করো — Firebase Console-এর Authentication ট্যাবে নতুন ইউজার দেখা যাচ্ছে কিনা চেক করো।
3. ভুল পাসওয়ার্ড দিয়ে লগইন করে দেখো error.code-এ কী আসে, console.log করে যাচাই করো।
4. একটা "Forgot Password" বাটন বানাও যা sendPasswordResetEmail কল করে — নিজের ইমেইলে রিসেট লিংক আসে কিনা দেখো।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Google Sign-In ও Auth State Management — এক ক্লিকে Google দিয়ে লগইন, আর onAuthStateChanged দিয়ে কীভাবে পুরো অ্যাপ জুড়ে ইউজারের লগইন স্টেট ট্র্যাক করে পেজ প্রোটেক্ট করতে হয়।