Serverless Security: Implementing Firebase Authentication on Static Sites

কোনো ডেডিকেটেড নোড বা পিএইচপি ব্যাকএন্ড সার্ভার ও ডাটাবেজ মেইনটেইন করার বাজেট না থাকলে GitHub Pages বা Vercel-এর মতো ফ্রি প্ল্যাটফর্মে স্ট্যাটিক সাইট হোস্ট করা সবচেয়ে বুদ্ধিমানের কাজ। কিন্তু চ্যালেঞ্জটা তৈরি হয় যখন এই স্ট্যাটিক সাইটেই ইউজার রেজিস্ট্রেশন বা সিকিউরড লগইন ড্যাশবোর্ডের প্রয়োজন পড়ে।

কোনো সার্ভার খরচ ছাড়াই ফ্রিতে ক্লায়েন্ট-সাইড মেকানিজম সুরক্ষিত করার সর্বোত্তম উত্তর হলো **Firebase Authentication**। গুগলের এই ক্লাউড ম্যানেজড সার্ভিসটি সরাসরি আধুনিক ইএস মডিউলস (ES Modules) আর্কিটেকচার ব্যবহার করে পিওর জাভাস্ক্রিপ্ট দিয়েই ক্লায়েন্ট সেশন হ্যান্ডেল করতে পারে।

১. ইনিশিয়ালাইজেশন: Firebase v10+ SDK কনফিগারেশন

আপনার ড্যাশবোর্ড বা লগইন এইচটিএমএল ফাইলের একদম নিচে জাভাস্ক্রিপ্ট মডিউল হিসেবে এপিআই ইনিশিয়েট করুন। কাস্টম বাকেট ও ক্রেডেনশিয়াল ফায়ারবেস কনসোল থেকে সংগ্রহ করুন:

<script type="module">
  // অফিশিয়াল ফায়ারবেস ক্লাউড এসডিকে ইমপোর্ট করা
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
  import { getAuth, signInWithEmailAndPassword, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";

  // আপনার ফায়ারবেস প্রজেক্ট কনফিগারেশন অবজেক্ট
  const firebaseConfig = {
    apiKey: "AIzaSyAsYourActualApiKeyHere",
    authDomain: "ahyan-creations-auth.firebaseapp.com",
    projectId: "ahyan-creations-auth",
    storageBucket: "ahyan-creations-auth.appspot.com",
    appId: "1:99999999:web:abcdef123456"
  };

  // অ্যাপ এবং অথ মেকানিজম বুট করা
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
</script>

ধাপ ২: পিওর জেএস সিকিউরড লগইন ফাংশন

স্ট্যাটিক ফর্ম সাবমিশনের সময় ডিফল্ট রিলোড ইভেন্ট আটকে ফায়ারবেস প্রমিজ হ্যান্ডলারের মাধ্যমে ইউজার ভেরিফিকেশন করার জন্য মডিউল স্ক্রিপ্টের ভেতর নিচের ফাংশনটি ডিফাইন করুন:

// লগইন ইভেন্ট হ্যান্ডলার
window.handleStaticLogin = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    console.log("Success! Authenticated Token UID:", user.uid);
    // সফল হলে ইউজারকে ড্যাশবোর্ডে রিডাইরেক্ট করা
    window.location.href = "dashboard.html";
  } catch (error) {
    alert("Authentication Failed: " + error.message);
  }
};

// অ্যাক্টিভ সেশন ট্র্যাকার লিসেনার
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("User session active: ", user.email);
  } else {
    console.log("No active token found inside local storage.");
  }
});