第六章：實戰 Supabase 會員登入與註冊介面

現在我們懂了 React 的 State (狀態管理) 與 Effect (副作用)，我們要來實作一個真實商業專案中必備的功能：「會員登入介面」。

在傳統的軟體開發時代，如果老闆叫你做一個登入系統，前端工程師會面有難色，後端工程師會直接崩潰。因為要自己從頭寫密碼加密 (Hash)、設定加鹽 (Salt)、防範 SQL Injection、處理 JWT Token 發放、寄送驗證信、還要搞定 Cookie 與 Session... 這一整套做下來，不僅需要一個月的時間，而且極度容易出漏洞被駭客入侵。

但在 Vibe Coding 的時代，我們不重複造輪子。我們將完全依賴 Supabase Auth 提供的強大功能！

🛡️ 什麼是 Supabase Auth？身分驗證即服務

Supabase 不只是一個關聯式資料庫 (PostgreSQL)，它還內建了一套企業級的 Authentication (身分驗證) 系統。這是一種「身分驗證即服務 (Auth-as-a-Service)」的概念。

它的運作原理極度簡單：

你的前端網頁 (React) 把使用者輸入的 Email 和密碼「丟」給 Supabase API。
Supabase 的伺服器在遠端幫你處理所有的加密、驗證與比對。
Supabase 回傳給你一個結果：「登入成功 (並附上通行證 Token)」或「密碼錯誤」。

你不需要寫任何後端的加密邏輯，所有的資安防護 (包含防暴力破解) 它都幫你搞定了！

🎨 實戰演練：用 AI 生成登入與註冊表單

我們需要一個表單讓使用者輸入信箱和密碼。這裡我們會運用上一章學到的 useState 來管理四個狀態：email (信箱)、password (密碼)、loading (是否正在讀取)、以及 error (錯誤訊息)。

🔥【Vibe Prompt 實戰咒語】 我正在開發 React + Supabase 專案 (使用 @supabase/supabase-js)。請幫我建立一個 AuthForm.tsx 的元件，作為會員的登入與註冊頁面。

需求如下：

介面設計：包含兩個輸入框 (Email, 密碼) 與兩個按鈕 (登入, 註冊)。請用 Tailwind CSS 設計出有質感、帶有毛玻璃效果 (backdrop-blur) 的卡片置中樣式。

狀態管理：使用 useState 來精準管理 email, password, loading, 和 error。

核心邏輯：請寫好 handleLogin 和 handleSignUp 的非同步 (async/await) 函數。

登入請呼叫：supabase.auth.signInWithPassword({ email, password })

註冊請呼叫：supabase.auth.signUp({ email, password })

防呆機制：當 loading 為 true 時，兩個按鈕都要變成文字 "處理中..."，並且加上 disabled 屬性不可重複點擊，以防使用者狂按發出重複請求。

錯誤處理：如果 error 發生，請用一個醒目的紅色警示框顯示在表單上方。如果成功，請用 alert 或 Toast 提示。

請加上詳盡的中文註解，特別是在呼叫 Supabase API 的地方。

AI 生成的程式碼會非常完整。你會看到類似這樣的 Supabase 呼叫邏輯：

// 登入邏輯範例
const handleLogin = async (e: React.FormEvent) => {
  e.preventDefault(); // 阻擋表單的預設重新整理行為
  setLoading(true);
  setError(""); // 每次點擊前先清空先前的錯誤
  
  // 呼叫 Supabase 的魔法 API
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    setError(error.message); // 如果失敗，把錯誤訊息存起來顯示在畫面上
  } else {
    alert("歡迎回來！登入成功！");
    // TODO: 登入成功後跳轉到儀表板頁面
  }
  setLoading(false); // 記得解除鎖定按鈕
};

這段程式碼直接具備了商業級應用的水準，不僅處理了主邏輯，連 UX (防呆與錯誤提示) 都照顧到了。

📧 關於 Email 確認信 (Email Confirmation) 的坑

當你興高采烈地測試「註冊 (SignUp)」功能時，你可能會發現一件奇怪的事：畫面顯示註冊成功了，但在 Supabase 後台看，使用者的狀態卻是 Waiting for verification，而且使用者也無法登入！

這是因為 Supabase 預設開啟了最高安全級別的機制：它會寄送一封「確認信」到使用者的信箱，使用者必須去收信並點擊信中的連結，才能真正啟用帳號。

如果在開發測試階段，你覺得每次都要去收信太麻煩，你可以進到 Supabase 控制台暫時關閉它：

進入 Supabase 控制台 > 左側選單的 Authentication > Providers。
展開 Email 設定。
找到 Confirm email，將其切換為關閉 (Off)。
點擊 Save 儲存設定。

(⚠️ 商業警告：當你的網站準備正式上線營運時，請務必把這個選項打開，否則會有一堆人用假信箱來註冊塞爆你的資料庫！)

⚠️ [常見地雷區] 忘記載入 Supabase Client

另一個新手常見的紅字錯誤是：TypeError: Cannot read properties of undefined (reading 'auth')。這代表你的 React 元件根本不認識 supabase 這個變數是誰。

在 AI 產出的元件最上方，你必須確保正確引入了 Supabase Client 初始化檔案。如果你沒有這個檔案，你可以請 AI 幫你寫一個 src/lib/supabase.ts，裡面通常長這樣：

import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
export const supabase = createClient(supabaseUrl, supabaseKey)

然後在你的 AuthForm.tsx 中 import { supabase } from '@/lib/supabase' 才能正常使用。

💼 [商業應用場景] 會員牆 (Paywall) 與資料權限隔離

有了登入介面，你的網站就擁有了一把「鎖」。這把鎖是所有網路變現模式的基礎。

商業應用 1：實作訂閱制內容牆 (Paywall) 你可以設定一個路由 (例如 /dashboard/premium-content)。當網頁載入時，先用 supabase.auth.getUser() 檢查這個人是否登入。如果沒有，直接把它踢回登入頁面 (router.push('/login'))。如果登入了，再去檢查他是否有繳費。這就是 Netflix 或知識付費平台的核心邏輯。

商業應用 2：B2B 企業級資料隔離 (Row Level Security) 有了 Supabase Auth，你可以開啟強大的 RLS (Row Level Security) 政策。例如開發一套進銷存系統給多家不同公司使用，你可以設定「A 公司的員工登入，API 撈資料時就『絕對只會』回傳 A 公司的訂單」。即便駭客想要透過 API 偷撈 B 公司的資料，也會在資料庫底層被 Supabase Auth 直接攔截！這種高等級的資安防護，能讓你在接企業級 B2B 專案時，大聲向客戶保證資料絕對安全，將專案報價提高 30% 以上。

下一章，我們將帶你進入後端開發的核心：如何設定與保護那些絕對不能見光的環境變數 (Environment Variables)。