Quasar 2 & Firebase Cloud Firestore (with Vue 3 & Pinia)

Create a Firebase project to store, display, and manage user entries with authentication and secure database rules, guiding you from signing in to the Firebase console to naming your project.

Add a loading screen by delaying entries load, hiding the no entries widget until data arrives, and displaying a centered quasar spinner while Firestore data loads.

Add entry action creates a new entry with id and default paid flag, writes it to the Firestore entries collection with setDoc, and updates the list via on snapshot listener.

Develop user authentication by creating an empty auth layout, an auth page with email and password, and a /auth route to register or log in for managing user entries.

Create a reactive credentials object to store email and password, bind them to the form inputs, and connect view model references in the imports, ensuring fields reset after hookup.

Learn to manage auth changes by redirecting users through the auth store, using the use router composable to push to entries on login and replace to auth on logout.

Restructure the Firestore database to support multiple users by adding a root users collection with documents keyed by each user’s ID, and a sub collection entries for that user.

Learn to secure a Firestore database by implementing Firebase security rules that restrict reads and writes to each authenticated user's notes, preventing cross-user access.

Add Firebase security rules to restrict access to users/{userId} by comparing request.auth.uid to the path userId, ensuring users can only read or write their own data.