在上篇文章中我們實際安裝並且使用了supabase-js連接我們的supabase資料庫，並且已經測試成功。
本篇文章就來導覽一下supabase-js的文件，還有在頁面裡面示範會員管理系統的登入和登出，以及在客戶端的操作。嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。
supabase-js文件
在每個supabase專案裡面都有一份快速上手的文件，而且這份文件是自動生成出來的文件，這個意思是說只要這個專案裡面資料庫的表格有任何新增，這份文件就有對應的文件可以查詢，如果對於API有更多選項想要查詢的話可以另外在官網的地方查詢詳細文件。
快速上手文件
快速上手文件的位置就在每個supabase專案裡面，一樣進入專案後台以後，進入API Docs的頁籤。
在這裡就有寫基本supabase-js的安裝和初始化的方式，這些方式在上篇文章中都有提到所以先跳過，在下面User Management的頁面裡面就有寫所有關於會員管理系統的內容。
會員管理系統的說明文件
在Tables and Views的頁面裡面就是對應supabase的資料庫表格和欄位，裡面有寫基本的查詢表格內容該如何撰寫、插入資料與刪除資料，或是直接在查詢的時候過濾資料也有詳細介紹，有需要的時候記得來這個頁面裡面查看一下。
完整文件
- 完整文件位置: supabase-js文件
這個supabase-js套件本身已經包含所有REST API，只需要按照使用情境調用符合的功能即可；除了最一開始的初始化和安裝，套件還分成4大部分，DATABASE(DB操作)、AUTH(會員管理)、REALTIME(實時更新)、STORAGE(儲存庫操作)等區塊，這些區塊都可以在文件的左方直接找到，或是直接在搜尋欄位內直接搜尋。
當然如果有需要安裝與初始化可以參考我的上篇文章。
AUTH(會員管理)實作
會員管理就是註冊登入登出等功能串接，馬上先去文件裡面查查有關的內容。
會員說明文件中有關註冊會員與登入會員的部分
註冊實作
預計在註冊的頁面裡面使用上面的signup這個函式，點擊註冊的時候把email和密碼送出。
在前端頁面中嘗試會員登入
上方圖是我的註冊畫面，在頁面裡面就使用兩個變數分別紀錄用戶輸入的email和密碼，點擊註冊按鈕的時候就把email和密碼帶入doSignUp裡面，用一個loading記錄是否正在等待，等待註冊結束以後把loading狀態取消，程式碼大概是長得像下面這樣。
const loading = ref(false)
const doSignUp = async ({ email, password }) => {
loading.value = true
const { data, error } = await supabase.auth.signUp({
email: email,
password: password
})
loading.value = false
}
登入實作
登入大概跟註冊長得90%相似，頁面如上圖所示，一樣會準備兩個變數記錄用戶輸入的email和密碼，loading變數記錄是否正在等待，點擊登入按鈕執行doLogin，程式碼大概長得跟下方一樣。
const loading = ref(false)
const doLogin = async ({ email, password }) => {
loading.value = true
const { data, error } = await supabase.auth.signInWithPassword({
email: email,
password: password
})
loading.value = false
}
session介紹
用戶成功登入或註冊成功以後，supabase-js就會自動幫我們把登入狀態session處理好了，在session有效的期間發送的request都有夾帶用來辨別身份的資訊在headers裡面，完全不用自己動手處理用戶登入狀態等問題。
當然如果要記錄用戶的識別ID可以從剛剛註冊和登入成功的返回資訊裡面找到，或是使用supabase.auth.getUser()或supabase.auth.getSession()重新取得用戶資訊。
登出實作
登出和註冊和登入一樣都有專屬的函式可以調用，這個登出就是把儲存在用戶端的session給註銷掉。
登出在我的畫面上是放在Header上面，有登入的狀態才會顯示登出兩字，點擊會執行登出。
而這段程式碼也更簡短一點，需要注意的是如果本身在APP有紀錄用戶ID和email的地方也要一起清除，大概長得像下面這樣。
const logout = async () => {
const { error } = await supabase.auth.signOut()
store.id = ''
store.email = ''
}
維持登入狀態
在用戶已登入的狀態下，用戶再度開啟APP頁面或是用戶重新整理頁面，正常前端需要把儲存的登入狀態session拿出來檢查，用來復原用戶的登入狀態，而這件事情supabase-js也已經幫我們做好了，只需要調用用戶狀態變更事件就可以接收到用戶的登入狀態session，範例程式碼如下方。
<script setup>
import { useUserStore } from './stores/user'
import supabase from './supabase'
import { onMounted } from 'vue'
const store = useUserStore()
onMounted(async () => {
supabase.auth.onAuthStateChange((_, session) => {
if (session === null) return
store.id = session.user.id
store.email = session.user.email
})
})
</script>
第一個參數是事件名稱，有多個相對應的事件可以處理，建議直接參考onauthstatechange文件，第二個參數則是重要的登入狀態session，當然如果原本用戶就沒有登入的話會是null，拿到session後就可以決定要讓用戶重回登入還是去別的地方。
總結
supabase-js的函式庫中，註冊、登入和登出都相當簡短易讀，而且把常用的功能都準備好給開發者直接調用，這樣在開發APP的時候就免於撰寫常用的登入登出邏輯，以及減少人為的疏失，讓開發者能更專注於APP全新功能上。