Supabase的JavaScript Client Library串接實作

supabase-js優點

專案開始前準備

取得supabase金鑰

• Project URL
• Public anon token

service token

開啟supabase專案開發

套件使用

套件安裝

npm install @supabase/supabase-js

設定環境變數

VITE_SUPABASE_URL=<SUPABASE_URL>
VITE_SUPABASE_ANON_KEY=<SUPABASE_ANON_KEY>

初始化套件

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

export default supabase

測試是否成功

在前幾篇文章中測試新增使用者的時候使用magic link做登入時是沒設定密碼的，所以我有預先去後台發送重設密碼的email做設定，如遇到困難可以重新建立一個使用者使用email和密碼登入即可。

使用者登入

const login = async ({ email, password }) => {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password
  })
  console.log(data)
}

總結

• Supabase Javascript Client — Introduction

有興趣的內容

• Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
• 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！