登入功能幾乎是每個網站必備的核心，但你真的了解它是怎麼運作的嗎？

哈囉！ 我是正在經歷 "畢業即失業" 的求職者🤣，目前正朝著競爭激烈的前端工程師之路邁進。但對於前端，現在的我還算是個剛出新手村、對於往後的探險有各種英勇幻想的冒險者而已🫣。

回到正題，為什麼我會選擇 登入 作為這次挑戰的主題呢🤔？
其實在幾個月前，我曾做過一個小專案 — 登入/註冊頁，裡面實作了表單驗證與一些基本功能。雖然能跑，但很快就意識到這樣的功能其實遠遠不夠，登入不僅是填表單而已，更重要的是背後的 帳戶安全性，這也是我這次想花 30 天好好探索的原因。

一個好的登入系統背後，應要同時兼顧 安全性、使用者體驗(UX) 與 可靠性

1. 🛡️安全性
這是登入功能最最最關鍵的核心⚠️，想像你的帳號就像保險箱，如果鎖不住，可就麻煩大了。這也是我在鐵人賽主要投入的地方。

• 密碼安全：密碼要夠複雜，而且存起來要加密，不能明碼放在資料庫
• 資料傳輸加密：資料在傳遞時應要保密，就像把信件放進信封袋裡，安全送達
• 防範攻擊：要防止有人用機器暴力猜密碼，也要避免資料被亂改或注入惡意程式
• 兩步驗證：給密碼再多加一層鎖，例如簡訊驗證或 Email 驗證，多一層安全防護

2. 🗣️使用者體驗
即使功能再怎麼安全，如果登入流程像迷宮，使用者也會抓狂🤬。

• 簡單直覺：輸入欄位、錯誤訊息清楚明白，還能有「記住我」或自動登入，省麻煩
• 社群登入：像 Google、Meta 等第三方登入，一鍵搞定，比自己填一堆欄位還方便

3. 🦾可靠性
登入要穩，不能今天能登入、明天就壞掉🤡。

• 穩定登入：後端要可靠，避免無故登入失敗
• 金鑰管理：使用金鑰管理登入狀態，並控制有效期限，別讓用戶一直被踢出或無法登入
• 錯誤處理：出錯要提醒用戶，但別把敏感資訊給顯示出來

透過這次鐵人賽，我不僅能夠複習並整理自己所學到的知識，也能藉機挑戰新技能，最後還能將成果作為面試作品展示。
如果過程中也能幫助到正在學習的你，那就更是一舉多得了！

那麼接下來的30天
我會使用 React + TypeScript 搭配 Firebase 來打造一個完整的登入系統。
以下是我的挑戰路線圖🧭：

• 登入/註冊：製作表單驗證與社群登入，建立基本安全防護
• 登入安全強化：處理 Token 與登入狀態，建立具有保護的內頁
• 帳號安全強化：帳號信箱驗證、忘記密碼與 2FA 等功能
• 測試 & 部署：單元與整合測試，自動化 CI/CD

這是我第一次參賽，本人也還在學習中，如果有錯誤還請多多指教與鞭策！
我們明天見😊！