クイックスタート：Vue 3

イントロ

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

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

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

GitHub

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

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

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

プロジェクトの作成

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

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

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

UI

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

SQL

-- パブリックで「profiles」テーブルを作成
create table profiles (
  id uuid references auth.users not null,
  updated_at timestamp with time zone,
  username text unique,
  avatar_url text,
  website text,

  primary key (id),
  unique(username),
  constraint username_length check (char_length(username) >= 3)
);

alter table profiles enable row level security;

create policy "Public profiles are viewable by everyone."
  on profiles for select
  using ( true );

create policy "Users can insert their own profile."
  on profiles for insert
  with check ( auth.uid() = id );

create policy "Users can update own profile."
  on profiles for update
  using ( auth.uid() = id );

-- リアルタイムをセットアップ
begin;
  drop publication if exists supabase_realtime;
  create publication supabase_realtime;
commit;
alter publication supabase_realtime add table profiles;

-- ストレージをセットアップ
insert into storage.buckets (id, name)
values ('avatars', 'avatars');

create policy "Avatar images are publicly accessible."
  on storage.objects for select
  using ( bucket_id = 'avatars' );

create policy "Anyone can upload an avatar."
  on storage.objects for insert
  with check ( bucket_id = 'avatars' );

APIキーを取得

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

UI

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

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

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

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>

次のステップ

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

• 何か疑問がありましたら、こちらで質問してください
• サインイン：app.supabase.com