メインコンテンツまでスキップ

クイックスタート:Vue 3

イントロ

この例では、SupabaseとVue 3を使って、シンプルなユーザー管理アプリを(ゼロから)構築する手順を紹介します。内容は以下のとおりです。

  • Supabase Database:ユーザーデータを保存するためのPostgresデータベースです。
  • Supabase Auth:ユーザーはマジックリンクでサインインできます(パスワードは不要、メールのみ)。
  • Supabase Storage:ユーザーは写真をアップロードできます。
  • 行単位セキュリティー:データは保護されており、個人が自分のデータにしかアクセスできないようになっています。
  • インスタントAPI:データベースのテーブルを作成すると、APIが自動的に生成されます。

このガイドの最後には、ユーザーがログインして基本的なプロフィール情報を更新できるアプリが完成します。

Supabaseユーザー管理の例

GitHub

どこかで行き詰ったら、このリポジトリーを見てみましょう。

プロジェクトのセットアップ

ビルドを開始する前に、データベースとAPIをセットアップします。Supabaseで新しいプロジェクトを立ち上げ、データベース内に「スキーマ」を作成するだけです。

プロジェクトの作成

  1. app.supabase.comにアクセスします。
  2. 「New Project」をクリックします。
  3. プロジェクトの詳細を入力します。
  4. 新しいデータベースが起動するのを待ちます。

データベース・スキーマの設定

これからデータベース・スキーマを設定します。SQLエディターの「User Management Starter」クイック・スターターを使用するか、下記のSQLをコピー/ペーストして自分で実行できます。

1. 「SQL」セクションに移動します。
2. 「User Management Starter」をクリックします。
3. 「Run」をクリックします。

APIキーを取得

データベースのテーブルをいくつか作成したので、自動生成されたAPIを使ってデータを挿入する準備ができました。API設定からURLとanonキーを取得する必要があります。

1. 「Settings」セクションに移動します。
2. サイドバーの「API」をリックします。
3. そのページでAPI URLを探します。
4. 「anon」と「service_role」キーを探します。

アプリの構築

それでは早速、Vue 3アプリを一から作ってみましょう。

Vue 3アプリの初期化

ViteのVue 3テンプレートを使って、supabase-vue-3というアプリを初期化します。

# npm 6.x
npm init @vitejs/app supabase-vue-3 --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app supabase-vue-3 -- --template vue

cd supabase-vue-3

そして、唯一追加する必要がある依存関係のsupbase-jsをインストールしましょう。

npm install @supabase/supabase-js

最後に、環境変数を.envに保存します。 必要なのは、APIのURLと、先ほどコピーしたanonキーだけです。

.env
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

APIの認証情報が得られたので、次はSupabaseクライアントを初期化するヘルパーファイルを作成しましょう。 これらの変数はブラウザー上で公開されますが、データベースでは行単位のセキュリティが有効になっているので、全く問題ありません。

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

また、オプションとして、CSSファイルのsrc/index.cssを更新して、アプリの外観を整えます。 こちらにあるファイルを参照してください。

src/main.js
import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

ログイン・コンポーネントの設定

ログインとサインアップを管理するVueコンポーネントを設定しましょう。マジック・リンクを使用することで、ユーザーはパスワードを使わずにメールでサインインできます。

/src/components/Auth.vue
<template>
<form class="row flex flex-center" @submit.prevent="handleLogin">
<div class="col-6 form-widget">
<h1 class="header">Supabase + Vue 3</h1>
<p class="description">Sign in via magic link with your email below</p>
<div>
<input
class="inputField"
type="email"
placeholder="Your email"
v-model="email"
/>
</div>
<div>
<input
type="submit"
class="button block"
:value="loading ? 'Loading' : 'Send magic link'"
:disabled="loading"
/>
</div>
</div>
</form>
</template>

<script>
import { ref } from "vue"
import { supabase } from "../supabase"

export default {
setup() {
const loading = ref(false)
const email = ref("")

const handleLogin = async () => {
try {
loading.value = true
const { error } = await supabase.auth.signIn({ email: email.value })
if (error) throw error
alert("Check your email for the login link!")
} catch (error) {
alert(error.error_description || error.message)
} finally {
loading.value = false
}
}

return {
loading,
email,
handleLogin,
}
},
}
</script>

ユーザー・ストア

他の場所にあるユーザー情報へアクセスするため、リアクティブ・ストアを使用します。store.jsという新しいファイルを作成し、Vue 3のリアクティブ機能を利用します。

src/store.js
import { reactive } from "vue"

export const store = reactive({
user: {},
})

アカウント・ページ

ユーザーがサイン・インした後、プロフィールの詳細を編集したり、アカウントを管理できるようにします。 そのための新しいコンポーネント、Profile.vueを作りましょう。

src/components/Profile.vue
<template>
<form class="form-widget" @submit.prevent="updateProfile">
<div>
<label for="email">Email</label>
<input id="email" type="text" :value="store.user.email" disabled />
</div>
<div>
<label for="username">Name</label>
<input id="username" type="text" v-model="username" />
</div>
<div>
<label for="website">Website</label>
<input id="website" type="website" v-model="website" />
</div>

<div>
<input
type="submit"
class="button block primary"
:value="loading ? 'Loading ...' : 'Update'"
:disabled="loading"
/>
</div>

<div>
<button class="button block" @click="signOut" :disabled="loading">
Sign Out
</button>
</div>
</form>
</template>

<script>
import { supabase } from "../supabase"
import { store } from "../store"
import { onMounted, ref } from "vue"

export default {
setup() {
const loading = ref(true)
const username = ref("")
const website = ref("")
const avatar_url = ref("")

async function getProfile() {
try {
loading.value = true
store.user = supabase.auth.user()

let { data, error, status } = await supabase
.from("profiles")
.select(`username, website, avatar_url`)
.eq("id", store.user.id)
.single()

if (error && status !== 406) throw error

if (data) {
username.value = data.username
website.value = data.website
avatar_url.value = data.avatar_url
}
} catch (error) {
alert(error.message)
} finally {
loading.value = false
}
}

async function updateProfile() {
try {
loading.value = true
store.user = supabase.auth.user()

const updates = {
id: store.user.id,
username: username.value,
website: website.value,
avatar_url: avatar_url.value,
updated_at: new Date(),
}

let { error } = await supabase.from("profiles").upsert(updates, {
returning: "minimal", // Don't return the value after inserting
})

if (error) throw error
} catch (error) {
alert(error.message)
} finally {
loading.value = false
}
}

async function signOut() {
try {
loading.value = true
let { error } = await supabase.auth.signOut()
if (error) throw error
} catch (error) {
alert(error.message)
} finally {
loading.value = false
}
}

onMounted(() => {
getProfile()
})

return {
store,
loading,
username,
website,
avatar_url,

updateProfile,
signOut,
}
},
}
</script>

ローンチ

すべてのコンポーネントがそろったところで、App.vueを更新しましょう。

src/App.vue
<template>
<div class="container" style="padding: 50px 0 100px 0">
<Profile v-if="store.user" />
<Auth v-else />
</div>
</template>

<script>
import { store } from "./store"
import { supabase } from "./supabase"
import Auth from "./components/Auth.vue"
import Profile from "./components/Profile.vue"

export default {
components: {
Auth,
Profile,
},

setup() {
store.user = supabase.auth.user()
supabase.auth.onAuthStateChange((_, session) => {
store.user = session.user
})

return {
store,
}
},
}
</script>

更新が完了したら、ターミナル・ウィンドウでこれを実行します。

npm run dev

そして、ブラウザーでlocalhost:3000を開くと、完成したアプリを見ることができます。

Supabase Vue 3

おまけ:プロフィール写真

Supabaseのプロジェクトには、写真や動画などの大容量ファイルを管理するためのストレージが用意されています。

アップロード・ウィジェットの作成

ユーザーがプロフィール写真をアップロードできるように、ユーザーのアバターを作成しましょう。まず、新しいコンポーネントを作成します。

src/components/Avatar.vue
<template>
<div>
<img
v-if="src"
:src="src"
alt="Avatar"
class="avatar image"
:style="{ height: size, width: size }"
/>
<div
v-else
class="avatar no-image"
:style="{ height: size, width: size }"
/>

<div :style="{ width: size }">
<label class="button primary block" for="single">
{{ uploading ? "Uploading ..." : "Upload" }}
</label>
<input
style="visibility: hidden; position: absolute"
type="file"
id="single"
accept="image/*"
@change="uploadAvatar"
:disabled="uploading"
/>
</div>
</div>
</template>

<script>
import { ref, toRefs, watch } from "vue"
import { supabase } from "../supabase"

export default {
props: {
path: String,
},
emits: ["upload", "update:path"],
setup(prop, { emit }) {
const { path } = toRefs(prop)
const size = ref("10em")
const uploading = ref(false)
const src = ref("")
const files = ref()

const downloadImage = async () => {
try {
const { data, error } = await supabase.storage
.from("avatars")
.download(path.value)
if (error) throw error
src.value = URL.createObjectURL(data)
} catch (error) {
console.error("Error downloading image: ", error.message)
}
}

const uploadAvatar = async (evt) => {
files.value = evt.target.files
try {
uploading.value = true
if (!files.value || files.value.length === 0) {
throw new Error("You must select an image to upload.")
}

const file = files.value[0]
const fileExt = file.name.split(".").pop()
const fileName = `${Math.random()}.${fileExt}`
const filePath = `${fileName}`

let { error: uploadError } = await supabase.storage
.from("avatars")
.upload(filePath, file)

if (uploadError) throw uploadError
emit("update:path", filePath)
emit("upload")
} catch (error) {
alert(error.message)
} finally {
uploading.value = false
}
}

watch(path, () => {
if (path.value) downloadImage()
})

return {
size,
uploading,
src,
files,

uploadAvatar,
}
},
}
</script>

新しいウィジェットの追加

そして、このウィジェットをアカウント・ページに追加します。

src/Profile.vue
<template>
<form class="form-widget" @submit.prevent="updateProfile">
<!-- Add to body -->
<Avatar v-model:path="avatar_url" @upload="updateProfile" />

<!-- Other form elements -->
</form>
</template>

<script>
// Import the new component
import Avatar from './Avatar.vue'

//
components: {
Avatar,
}
</script>

次のステップ

この段階で、完全に機能するアプリケーションが完成しました。