Login အခြေအနေ စစ်ဆေးခြင်း

Login အခြေအနေ စစ်ဆေးခြင်း

Auth state listener က app ထဲမှာ user login ဝင်ထားလား၊ logout ဖြစ်သွားလား၊ page refresh ပြီးနောက် user ရှိနေသေးလားဆိုတာကို သိအောင်လုပ်ပေးပါတယ်။ Navbar မှာ Login button ပြမလား၊ Dashboard ပြမလားဆိုတာ ဒီ state ပေါ်မူတည်ပါတယ်။

Code Example

import { getAuth, onAuthStateChanged } from 'firebase/auth';

const auth = getAuth();

const unsubscribe = onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('User is logged in:', user.uid);
  } else {
    console.log('No user. Show login page.');
  }
});

// Single-page app တွင် component မလိုတော့သောအခါ unsubscribe() ခေါ်နိုင်သည်။

ဘာကိုသတိထားရမလဲ?

onAuthStateChanged က app စဖွင့်တဲ့အချိန်မှာလည်းတစ်ခါ run ပါတယ်။ ဒါကြောင့် loading state ထားပြီး user ရှိ/မရှိသိမှ page ကိုပြတာက UX ပိုကောင်းပါတယ်။

Common mistake

React/Vue component ထဲမှာ listener ထပ်ခါထပ်ခါတင်ပြီး cleanup မလုပ်ရင် memory leak သို့မဟုတ် duplicate console log ဖြစ်နိုင်ပါတယ်။ Component unmount ဖြစ်တဲ့အခါ unsubscribe လုပ်ပါ။