Quản lý Profile Dropdown với Firebase Auth: Đăng xuất, hết hạn phiên, localStorage (Vanilla JS)

🎥 VIDEO 14: MENU TÀI KHOẢN DÙNG CHUNG – FIREBASE AUTH, LOCALSTORAGE & ĐĂNG XUẤT AN TOÀN 🔥
Trong video này, bạn sẽ xây dựng profile dropdown dùng chung cho nhiều trang, tích hợp Firebase Auth để hiển thị trạng thái đăng nhập, đăng xuất an toàn và tự động hết hạn phiên bằng localStorage. Giải pháp thuần JavaScript (Vanilla JS), dễ tái sử dụng cho mọi dự án. 👤🔐

✨ NỘI DUNG CHÍNH
✅ Đọc và xác thực user_session từ localStorage, kiểm tra expiry.
✅ Render menu tài khoản động (Email, Lịch sử đơn hàng, Ví) khi đã đăng nhập.
✅ Thêm nút Đăng xuất gọi signOut(auth), xoá session và điều hướng về Trang chủ.
✅ Xử lý hết hạn phiên: tự xoá session khi quá hạn để tăng bảo mật.
✅ Tổ chức file /src/js/main.js dạng shared script dùng cho nhiều trang. 🧩⚙️

⏱️ MỐC THỜI GIAN (CHAPTERS)

0:00 Giới thiệu & Tóm tắt video trước 👋
1:47 Giới thiệu nội dung: Đăng xuất & Quản lý Profile Dropdown 🧭
2:44 Bắt đầu code: Tạo file main.js 📄
3:07 Import authentication & hướng dẫn tìm tài liệu signOut 📚
7:54 Lấy userSession từ localStorage 🗂️
8:49 Xử lý logic hiển thị Dropdown (DOMContentLoaded) 💡
11:14 UI khi chưa đăng nhập (Render “Đăng nhập/Đăng ký”) 🧑‍🚀
12:27 Kiểm tra phiên đăng nhập còn hạn hay không ⏳
13:26 Xử lý khi phiên đã hết hạn (Xóa session) ❌
14:29 UI khi đã đăng nhập (Render Email, Lịch sử, Ví) 📜
17:32 Thêm nút “Đăng xuất” (Logout Button) vào dropdown 🔘
21:29 Bắt sự kiện click để đăng xuất 🖱️
23:00 Gọi signOut(auth), xoá session & reload trang 🔁
26:15 Kiểm tra lại chức năng Đăng nhập & Đăng xuất 🧪
27:14 Tổng kết video 🚀

🎯 PHÙ HỢP VỚI

Website tích hợp Firebase Authentication (Email/Password, Provider…).

Dự án cần menu người dùng đồng nhất, dễ bảo trì, tối ưu SEO & UX.

🔥 Hãy Like & Subscribe để không bỏ lỡ video tiếp theo! Có thắc mắc, bình luận bên dưới mình sẽ hỗ trợ nhé! 🙌

📌 TÀI NGUYÊN THAM KHẢO

Firebase Auth: https://firebase.google.com/docs/auth

📌 LIÊN HỆ & KẾT NỐI

Email: jasonnguyen.tech@gmail.com

Đăng ký kênh: https://www.youtube.com/@TechNewLife?sub_confirmation=1

#Firebase #FirebaseAuth #Authentication #JavaScript #VanillaJS #localStorage #UserSession #SessionExpiry #SignOut #ProfileDropdown #DynamicMenu #Frontend #WebDevelopment #UX #BestPractices #CoffeeExpress #OrderHistory #Wallet #SharedScript

Видео Quản lý Profile Dropdown với Firebase Auth: Đăng xuất, hết hạn phiên, localStorage (Vanilla JS) канала TechNewLife