🔐 React Native + Firebase Authentication (Email ও Password Login – TypeScript, File Based)

এই অধ্যায়ে আমরা শিখবো কিভাবে React Native (TypeScript) অ্যাপে Firebase Authentication ব্যবহার করে Email ও Password ভিত্তিক Login ও Register সিস্টেম তৈরি করা যায়।

📌 Firebase Authentication কী?

Firebase Authentication হলো Google-এর একটি শক্তিশালী অথেনটিকেশন সার্ভিস, যার মাধ্যমে খুব সহজে ও নিরাপদভাবে ইউজার Login / Register সিস্টেম তৈরি করা যায়।

• Email & Password Login
• Google / Facebook Login
• OTP / Phone Authentication
• Secure Token Management

📁 Project Folder Structure (File Based – TypeScript)

src/
 ├── firebase/
 │    └── firebaseConfig.ts
 ├── screens/
 │    ├── LoginScreen.tsx
 │    ├── RegisterScreen.tsx
 │    └── HomeScreen.tsx
 ├── navigation/
 │    └── AuthNavigator.tsx
 └── App.tsx
  

🔧 Firebase Setup (Configuration)

Firebase Console থেকে একটি প্রোজেক্ট তৈরি করে Email/Password Authentication Enable করতে হবে।

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

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
};

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

📝 Register Screen (Email & Password)

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

const handleRegister = async () => {
  try {
    await createUserWithEmailAndPassword(
      auth,
      email,
      password
    );
    alert("Registration Successful");
  } catch (error: any) {
    alert(error.message);
  }
};
  

👉 এখানে ইউজার Email ও Password দিয়ে নতুন একাউন্ট তৈরি করতে পারে। Firebase স্বয়ংক্রিয়ভাবে ইউজারকে Authentication সিস্টেমে যুক্ত করে।

🔑 Login Screen (Email & Password)

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

const handleLogin = async () => {
  try {
    await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    alert("Login Successful");
  } catch (error: any) {
    alert("Invalid Email or Password");
  }
};
  

👉 সঠিক Email ও Password দিলে ইউজার সফলভাবে Login হবে, ভুল হলে Error Message দেখাবে।

🧭 Login Successful হলে Output কী হবে?

🏠 Home Screen Example

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

const handleLogout = async () => {
  await signOut(auth);
};
  

⚡ Authentication Flow (Simple Explanation)

1. User Email ও Password দেয়
2. Firebase Credential Verify করে
3. Valid হলে Token Generate হয়
4. User Logged In State এ থাকে
5. Logout করলে Token Destroy হয়

🎉 এখন আপনি React Native + Firebase Authentication ব্যবহার করে Real App তৈরি করতে প্রস্তুত!