今天要介紹的 Supabase Auth，就是為了解決傳統的身份驗證系統需要處理密碼加密、安全性考量等複雜問題。完整的身份驗證解決方案，還能與 Supabase 的其他服務整合，能專注於前端開發，而不必擔心後端的安全性問題。

Supabase Auth 是什麼？

Supabase Auth 是一個完整的身份驗證和授權服務，基於 JWT（JSON Web Tokens）技術，提供用戶註冊、登入等功能。它支援多種身份驗證方式，包括電子郵件、社交登入、手機號碼等，並與 PostgreSQL 的行級安全性（Row Level Security, RLS）整合。

簡單來說

1. 身份驗證：就像一個嚴格的保全，會檢查每個想要進入的人是否有合法身份（帳號密碼、社交帳號等）。

2. 權限控制：就像不同的房間需要不同等級的通行證，確保每個用戶只能存取他們有權限的資料。

3. 多元登入：就像現代大樓支援門禁卡、指紋、人臉識別等多種方式，讓用戶可以選擇最方便的登入方式。

魔力波長：每個人身上散發出的獨特能量特徵或信號，用於識別個體實力與身分。

需要理解的核心概念

用戶（Users）

用戶是 Supabase Auth 系統中的基本實體，每個用戶都有唯一的 UUID 識別碼。用戶可以透過多種方式進行身份驗證，包括電子郵件、社交登入等。
就像每個人都有一張身份證，用戶就是系統中每個人的「數位身份證」，記錄著他們的基本資訊和登入方式。

身份（Identities）

身份代表用戶的不同登入方式，一個用戶可以擁有多個身份。例如，同一個用戶可以同時擁有電子郵件身份和 Google 社交登入身份。
就像一個人可以有多張不同的會員卡（信用卡、圖書館卡、健身房卡），每張卡都能證明你的身份，但用途不同。

連線/會話（Sessions）

會話代表用戶的登入狀態，包含存取權杖（access token）和刷新權杖（refresh token）。會話有時效性，過期後需要重新驗證或使用刷新權杖更新。
就像進入遊樂園時拿到的手環，在有效時間內可以自由進出各個設施，時間到了就需要重新購票或延長使用時間。

JWT 權杖/令牌

JSON Web Token 是一種安全的資訊傳遞標準，Supabase Auth 使用 JWT 來儲存用戶身份資訊和權限。JWT 包含用戶 ID、角色、過期時間等資訊。
就像一張加密的「數位通行證」，裡面記錄著你的身份、權限和有效期限，系統可以快速驗證而不需要每次都查詢資料庫。

如何使用 Supabase Auth

基本設定

初始化 Supabase 客戶端：

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

用戶註冊

// 使用電子郵件註冊
async function signUp() {
  const { data, error } = await supabase.auth.signUp({
    email: 'user@example.com',
    password: 'your-password',
    options: {
      data: {
        first_name: 'John',
        last_name: 'Doe',
      }
    }
  })
  
  if (error) {
    console.error('註冊失敗:', error.message)
  } else {
    // 用戶需要確認電子郵件才能完成註冊
    console.log('註冊成功:', data)
  }
}

用戶登入

// 使用電子郵件登入
async function signIn() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: 'user@example.com',
    password: 'your-password'
  })
  
  if (error) {
    console.error('登入失敗:', error.message)
  } else {
    // data.user 包含用戶資訊
    // data.session 包含會話資訊
    console.log('登入成功:', data)
  }
}

社交登入

只要簡單幾行程式碼，就能實現社交登入功能。
支援的社交登入提供者包括：google, github, facebook, apple, twitter, discord 等。

// 使用 Google 登入
async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: 'http://localhost:3000/auth/callback'
    }
  })
  
  if (error) {
    console.error('Google 登入失敗:', error.message)
  }
}

獲取當前用戶

// 獲取當前登入的用戶
async function getCurrentUser() {
  const { data: { user } } = await supabase.auth.getUser()
  
  if (user) {
    console.log('當前用戶:', user)
  } else {
    console.log('用戶未登入')
  }
}

// 監聽身份驗證狀態變化
supabase.auth.onAuthStateChange((event, session) => {
  console.log('身份驗證事件:', event, session)
  
  if (event === 'SIGNED_IN') {
    console.log('用戶已登入')
  } else if (event === 'SIGNED_OUT') {
    console.log('用戶已登出')
  }
})

用戶登出

// 登出當前用戶
async function signOut() {
  const { error } = await supabase.auth.signOut()
  
  if (error) {
    console.error('登出失敗:', error.message)
  } else {
    console.log('登出成功')
  }
}

密碼重設

// 發送密碼重設郵件
async function resetPassword() {
  const { error } = await supabase.auth.resetPasswordForEmail(
    'user@example.com',
    {
      redirectTo: 'http://localhost:3000/reset-password',
    }
  )
  
  if (error) {
    console.error('發送重設郵件失敗:', error.message)
  } else {
    console.log('重設郵件已發送')
  }
}

// 更新密碼（在重設頁面中使用）
async function updatePassword() {
  const { error } = await supabase.auth.updateUser({
    password: 'new-password'
  })
  
  if (error) {
    console.error('密碼更新失敗:', error.message)
  } else {
    console.log('密碼更新成功')
  }
}

小結

透過與 Supabase 生態系統的緊密整合，特別是與資料庫 RLS 的配合，可以輕鬆建立既安全又高效的全端應用程式。

... to be continued

有任何想討論歡迎留言，或需要指正的地方請鞭大力一點，歡迎訂閱、按讚加分享，分享給想要提升開發效率的朋友～