In Lesson 12 of our Full Stack React E-Commerce series, we tackle one of the most important features of a real-world app: **Cloud Persistence and Security.**
Today, you will learn how to take your Redux Toolkit cart items and sync them automatically with **Firebase Firestore**. This ensures that if a user logs in from a different device, their shopping cart is waiting for them. We also dive deep into **Protected Routes** using React Router to ensure only logged-in users can reach the checkout page.
**What you will master in this video:**
* **Firebase Firestore:** Saving and retrieving complex cart objects.
* **Protected Routes:** Building a wrapper component to secure private pages.
* **Persistence Logic:** Managing the user’s session even when they refresh or go offline.
* **Redux-Auth Sync:** Keeping your Redux store perfectly in sync with Firebase Authentication.
### 📍 Timestamp
These chapters are designed to keep viewers engaged and help them navigate to specific technical solutions.
**00:00** – Lesson Introduction: Transitioning from Local State to Cloud Persistence
**00:16** – The Security Problem: Why the Checkout Page must be Protected
**01:10** – Firestore Architecture: Structuring User Profiles for the Database
**02:32** – Redux Setup: Integrating Firestore Storage Logic into the Store
**04:06** – Handling App States: Implementing `setLoading` for Database Requests
**05:56** – Core Logic: Syncing Redux Cart Items with Firestore in Real-time
**08:20** – Auth State Listeners: Detecting User Login/Logout to Clear Data
**11:15** – Code Refactoring: Making the Logic Reusable for the Profile Page
**14:32** – Database Persistence: Ensuring Data Remains Available Offline
**15:05** – Security Logic: Validating Passwords and Authentication tokens
**17:05** – Building the `ProtectedRoute` Component: The “Gatekeeper” Logic
**18:56** – Route Integration: Wrapping the Checkout Page in Security
**19:45** – Live Technical Demo: Registering a New User & Verifying Data in Firestore
**21:00** – Summary & Next Steps: Preparing for Lesson 13
—
**Join the Community:**
Subscribe to **Beshilo Coding Academy** for more Amharic-language coding tutorials!