鐵人檔案
現在每個網站幾乎都需要登入系統，但你對登入的運作了解多少呢？
在這 30 天，我們將一起使用 React 與 TypeScript 從零打造完整的登入系統，逐步學會表單驗證、狀態管理、社群登入與 Token 流程。
如果你也想挑戰自己，跟我一起踏上這段 30 天的學習旅程吧！
在上一篇，我們已經完成了 Vitest 的初始化，並撰寫了第一個單元測試。但光有測試檔還不夠，我們也要透過覆蓋率來檢視測試是否完整，避免有些功能被遺漏沒檢查到。...
在前幾篇，我們已經有了「 房門與門鎖 」的表單驗證，也做好「 屋況驗收 」。但如果門鎖只是裝飾，任何人都能翻窗進來，那這棟房子還是非常危險。這時候，就需要 Fi...
JWT 是什麼？JWT（JSON Web Token）是一種 基於 JSON 的安全傳遞憑證，常用於： 使用者登入後的身份驗證 API 存取授權 在分散式...
我們在專案中已經導入 Firebase Auth，但很多人做到一半會突然冒出幾個問號： Firebase 有 JWT 嗎？ Access Token、ID T...
在做前端登入系統時，你可能會想：「我不是已經用 Firebase Login 登入了嗎？為什麼還要搞一個後端驗證？」別急，這篇文章用最輕鬆的方式帶你理解，還會附...
後端準備好了（不論你用的是 Express + Firebase Admin，還是用 MSW 模擬），接下來的重點就是： 前端要怎麼把 Firebase 拿到...
把 Token 丟去 /auth/verify 只是「確認他是不是合法使用者」，但接下來還有兩件事要處理： 把驗證結果存起來（避免每次重新整理都重發 API）...
當我們拿到 Firebase 的 idToken 後，下一個問題就是 ——「要放哪裡？」前端有三個常見選擇： 儲存方式 優點 缺點 適用情境 Lo...
在正式環境，我們不再用 localStorage，改由後端回傳 Cookie Token 由 瀏覽器自動附帶，JS 完全碰不到，安全性提升一個等級。 Co...
在前面幾節，我們已經完成： Token 驗證（Express / Firebase Functions / MSW） Token 儲存（LocalStorag...
