Exercise — Auth and Firestore Basics

Take a moment to think about this

This lesson is about redoing, by typing it out yourself rather than copying from memory, what you learned earlier in the tutorial's Authentication and Firestore chapters. The focus is on writing separate signup/login/logout functions and making sure the UI updates every time the auth state changes. It also gives you practice with the full cycle of adding, reading, updating, and deleting a Firestore document. You're not writing new code here — you're just putting concepts you've already learned back into practice.

Practice Tasks

Task 1 — In a new (or existing) Firebase project, write a signup form using Email/Password auth. Task 2 — Once a user is logged in, show their email in the navbar, and make sure clicking the Logout button signs them out and sends them back to the login page. Task 3 — For the logged-in user, create a notes collection in Firestore and add a new note document. Task 4 — Read that document in realtime with onSnapshot, update its title field, and finally delete the document.

• Have you got all three of the signup/login/logout functions working?
• Does onAuthStateChanged visibly update the UI when the login state changes?
• Have you run through the full add, update, delete cycle on a Firestore document?

Code Sample

// Task skeleton — ကိုယ်တိုင်ဖြည့်စွက်ရန်
import { auth, db } from "./firebase-config";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import {
  collection,
  addDoc,
  doc,
  updateDoc,
  deleteDoc,
  onSnapshot,
} from "firebase/firestore";

// Task 1: Signup
async function signup(email, password) {
  // TODO: createUserWithEmailAndPassword သုံးပါ
}

// Task 2: Login state watch
onAuthStateChanged(auth, (user) => {
  // TODO: user ရှိ/မရှိ အလိုက် UI update လုပ်ပါ
});

// Task 3: Note document add
async function addNote(uid, title) {
  // TODO: notes collection ထဲ addDoc
}

// Task 4: Update + Delete
async function updateNoteTitle(noteId, newTitle) {
  // TODO: updateDoc သုံးပါ
}
async function removeNote(noteId) {
  // TODO: deleteDoc သုံးပါ
}

Signup/login/logout should work smoothly, and you should be able to add, update, and delete a document in the notes collection without hitting any errors.