SupabaseはGoogleが提供するFirebaseのAlternative(代替)として利用できるオープンソースのクラウドサービスです。オープンソースかどうか以外のFirebaseとSupabaseの大きな違いはデータベースです。FirebaseではNoSQLデータベースを利用していますがSupabaseではリレーショナルデータベースのPostgresデータベースを利用しています。2つのサービスには共通点もありFirebaseがデータベース以外にも認証機能やストレージ機能を持っているようにFirebaseのAlternativeということでSupabaseも認証機能やストレージ機能を持っています。

supabaseのトップページ
supabaseのトップページ

本文書ではVue3とReactを利用してSupabaseではどのようにテーブルを作成し作成したテーブルに挿入したデータをどのように取得するのかを確認します。また認証機能はデフォルトではどのように設定されておりユーザ登録はどのように行うのかなどsupabaseを利用するために必要となる基本的なことを中心に確認しています。

プラン

supabaseにはFree, Pro , Pay as you goの3つのプランがあります。動作確認のために利用するのでFreeプランを利用します。プランのよって利用できるデータベースの容量や帯域、認証のユーザ数などに制限があります。

サインインの設定

supabaseを利用するためにはサインインを行う必要があります。サインインを行う場合はGitHubのアカウントを利用して行います。 事前にGitHubのアカウントを取得しておく必要があります。

画面中央左にある”Start your project”ボタンをクリックします。

Start your projectボタンをクリック
Start your projectボタンをクリック

“Sign in with Github”ボタンが表示される画面に移動するのでボタンをクリックします。

Sign in with Githubボタンのクリック
Sign in with Githubボタンのクリック

GitHubアカウントによるSupabaseの認証画面が表示されるのでGitHubアカウントでサインインすることに問題がなければ”Authorize supabase”ボタンをクリックしてください。

GitHubアカウントとの連携
GitHubアカウントとの連携

GitHubのアカウントでのサインインが完了したら管理画面が表示されます。画面の中央には”New Project”ボタンがあります。

管理画面の表示
管理画面の表示

プロジェクトの作成

サインイン直後ではプロジェクトが存在しないのでプロジェクトの作成を行います。

プロジェクトの作成
プロジェクトの作成

プロジェクトの名前、データベースのパスワード、Regionの設定を行います。プロジェクトの名前はTestとしRegionには日本を選択することができるのでNortheast Asia(Tokyo)を設定します。入力が完了したら右下にある”Create new project”ボタンをクリックします。

プロジェクトの作成
プロジェクトの作成

“Create new project”ボタンを押すとプロジェクトの画面が表示されます。ボタンを押した直後はプロジェクト名(Test)の右側に”Setting up project”と表示されプロジェクトの作成に少し時間がかかります。

プロジェクト作成後の画面
プロジェクト作成後の画面

プロジェクトの作成が完了した画面には”Database”, “Auth”, “Storage”のメニューが表示されます。

プロジェクト作成後の画面
プロジェクト作成後の画面

データベースの作成

Database, Auth, Storageとメニューが並んでいますが作成したテーブルにアクセスして中身を表示させる方法が知りたいと思っている読者の方も多いかと思いますので最初にDatabaseの設定を行ってみましょう。Databaseのメニューの中にある”Table editor”をクリックします。

Table Editorボタンをクリック
Table editorボタンをクリック

デフォルトではテーブルは存在しないのでテーブルを新規で作成するため”Create a new table”ボタンをクリックします。

"New table"ボタンが表示
“Create a new table”ボタンが表示

“Create a new table”をクリックするとテーブルの名前を入力する画面が表示されます。既に列にはidとcreated_atが設定されていることがわかります。

テーブルの作成画面
テーブルの作成画面

名前にはtodosを入力し、Descriptionにはテーブルの説明を入力し列にはtaskを追加した列の型をTextに設定しています。Enable Row Level Securityのチェックボックスがありますが”Recommended”と表示されているのでチェックを入れておきます。Row Level Securityはテーブルの列に対してアクセス制限を行うことができる機能です。

テーブルの作成
テーブルの作成

“Save”ボタンをクリックしてテーブルの作成を行います。テーブル作成後に”Insert row”ボタンが表示されているようにTable editorでは GUIにより行の追加が行えることがわかります。

テーブルの作成完了
テーブルの作成完了

“insert row”ボタンをクリックしてOptional Fieldsのtaskにテキストを入力します。idは”Automatically generated as identify”と表示されているのでそのままにしておきます。created_atの時刻は自動で入力されます。

列を追加
列を追加

“Save”ボタンをクリックするとテーブルに行が追加されました。

行の追加
行の追加

フロントエンドからのアクセス

Vue3とReactを利用してアクセス方法を確認します。

Vue3からのアクセス

Vue3を利用してsupabaseに作成したテーブルにアクセスする方法を確認します。Vue3を利用するためにnpm init vueコマンドを利用してプロジェクトの作成を行います。npm init vueコマンドで作成されるプロジェクトはViteを利用しています。インストール中にプロジェクトで利用する機能を選択することができますがここではVue Routerのみインストールを行います。


 % npm init vue@latest
Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3_supabase
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/mac/Desktop/vue3_supabase...

Done. Now run:

  cd vue3_supabase
  npm install
  npm run dev

作成されるプロジェクトフォルダに移動してnpm installコマンドを実行します。


 % cd vue3_supabase
 % npm install

supabaseを利用するためにsupabase-jsライブラリのインストールを行います。


 % npm install @supabase/supabase-js

インストールが完了したら.envファイルをプロジェクトフォルダの直下に作成して環境変数の設定を行います。

環境変数にはURLとキーの設定を行います。APIのキーについては左側のサイドメニューにあるSettingからAPIをクリックすることで確認することができます。

APIキーの確認
APIキーの確認

anonにあるキーをコピーして.envファイルのVITE_SUPABASE_ANON_KEYに設定しURLをVITE_SUPABASE_URLに設定します。


VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

srcフォルダ直下にsupabase.jsファイルを作成して以下の初期設定を記述します。.envファイルに記述した環境変数はViteではimport.meta.env.環境変数名でアクセスすることができます。


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)

supabaseからデータ取得

App.vueファイルにgetTasks関数を追加してsupabaseからデータが取得できるか確認を行います。


<script setup>
import { supabase } from './supabase';

const getTasks = async () => {
  let {
    data: todos,
    error,
    status,
  } = await supabase.from('todos').select('task');

  console.log(todos);
  console.log(error);
  console.log(status);
};

getTasks();
</script>

<template>
  <div>
    <h1>Vue3でsupabase</h1>
  </div>
</template>

突然supabaseのfromメソッドが出てきましたがselectなどのSQL文の書き方については左側のメニューのAPIからTables and Viewsにあるテーブル名をクリックすると右側にselect文やinsert文などの記述方法を確認することができます。

selectのSQL文の確認
selectのSQL文の確認

npm run devコマンドを実行して動作確認を行います。もしVITE_SUPABASE_ANON_KEYのキーに誤りがある場合には”Invalid authentication credentials”のメッセージが戻されます。

デベロッパーツールのコンソールを見ると戻されるデータにエラーがなくステータスが200になっていますがデータは入っていません。初めて動作確認をするとどうしたらいいのかわからない人もいるかと思いますが原因はテーブル作成時にチェックを入れたRow Level Securityです。Row Level Securityは有効になっているため現在の状態でデータを取得するためにはEnableからDisableにする必要があります。

テーブル作成時にRow Level Securityにチェックを入れていない場合はコンソールに取得したデータが表示されます。

Disableにするためには左側のAuthenticationをクリックしてPoliesを選択します。todsのテーブル名の横に”RLS enabled”が表示されていることが確認できます。

Poliesの確認
Poliesの確認

データを取得するために”Disable RLS”ボタンをクリックしてください。Disableの処理が反映されると”RLS diabled”になることが確認できます。

RLSをdisabledに
RLSをdisabledに

変更後ブラウザを確認するとコンソールを確認すると0: {task: ‘ブログを書く’}を確認することができます。

Table Editorを利用してもさらにデータを追加してコンソールではなくブラウザ上に表示させてみましょう。取得したデータをreactiveなデータtasksに保存するためref関数を利用します。selectの引数には列名ではなく”*”を設定することですべての列を取得することができます。


<script setup>
import { ref } from 'vue';
import { supabase } from './supabase';

const tasks = ref([]);

const getTasks = async () => {
  let { data: todos, error, status } = await supabase.from('todos').select('*');

  tasks.value = todos;
};

getTasks();
</script>

<template>
  <div>
    <h1>Vue3でsupabase</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.task }}</li>
    </ul>
  </div>
</template>

ブラウザ上には2件のtaskが表示されます。supabaseのテーブルに保存されているデータの取得方法を理解することができました。

supabaseに保存されたデータをブラウザに表示
supabaseに保存されたデータをブラウザに表示

Reactからのアクセス

Reactを利用してsupabaseに作成したテーブルにアクセスする方法を確認します。npx create-react-appコマンドを利用してReactのプロジェクトの作成を行います。プロジェクト名にreact-supabaseを設定していますが任意の名前をつけてくだい。


 % npx create-react-app react-supabase

作成されるプロジェクトフォルダに移動します。


 % cd react-supabase

supabaseを利用するためにsupabase-jsライブラリのインストールを行います。


 % npm install @supabase/supabase-js

インストールが完了したら.envファイルをプロジェクトフォルダの直下に作成して環境変数の設定を行います。

環境変数にはURLとキーの設定を行います。APIのキーについては左側のサイドメニューにあるSettingからAPIをクリックすることで確認することができます。

APIキーの確認
APIキーの確認

anonにあるキーをコピーして.envファイルのREACT_APP_SUPABASE_ANON_KEYに設定しURLをREACT_APP_SUPABASE_URLに設定します。

srcフォルダ直下にsupabaseClinet.jsファイルを作成して以下の初期設定を記述します。.envファイルに記述した環境変数はprocess.env環境変数名でアクセスすることができます。

supabaseからのデータの取得

App.jsファイルでimportしたuseEffect Hookの中にgetTasks関数を追加してsupabaseからデータが取得できるか確認を行います。


import { useEffect } from 'react';
import { supabase } from './supabaseClient';

function App() {
  useEffect(() => {
    const getTasks = async () => {
      let {
        data: todos,
        error,
        status,
      } = await supabase.from('todos').select('task');

      console.log(todos);
      console.log(error);
      console.log(status);
    };
    getTasks();
  }, []);
  return (
    <div>
      <h1>Reactでsupabase</h1>
    </div>
  );
}

export default App;

突然supabaseのfromメソッドが出てきましたがselectなどのSQL文の書き方については左側のメニューのAPIからTables and Viewsにあるテーブル名をクリックすると右側にselect文やinsert文などの記述方法を確認することができます。

selectのSQL文の確認
selectのSQL文の確認

npm startコマンドを実行して動作確認を行います。もしREACT_APP_SUPABASE_ANON_KEYのキーに誤りがある場合には”Invalid authentication credentials”のメッセージが戻されます。

デベロッパーツールのコンソールを見ると戻されるデータにエラーがなくステータスが200になっていますがデータは入っていません。初めて動作確認をするとどうしたらいいのかわからない人もいるかと思いますが原因はテーブル作成時にチェックを入れたRow Level Securityです。Row Level Securityが有効になっているため現在の状態でデータを取得するためにはEnableからDisableにする必要があります。

テーブル作成時にRow Level Securityにチェックを入れていない場合はコンソールに取得したデータが表示されます。

Disableにするためには左側のAuthenticationをクリックしてPoliesを選択します。todsのテーブル名の横に”RLS enabled”が表示されていることが確認できます。

Poliesの確認
Poliesの確認

データを取得するために”Disable RLS”ボタンをクリックしてください。Disableの処理が反映されると”RLS diabled”になることが確認できます。

RLSをdisabledに
RLSをdisabledに

変更後コンソールを確認すると0: {task: ‘ブログを書く’}を確認することができます。

Table Editorを利用してもさらにデータを追加してブラウザ上に表示させてみましょう。取得したデータを保存するためにuseState Hookを利用します。selectの引数には列名ではなく”*”を設定することですべての列を取得することができます。


import { useState, useEffect } from 'react';
import { supabase } from './supabaseClient';

function App() {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    const getTasks = async () => {
      let {
        data: todos,
        error,
        status,
      } = await supabase.from('todos').select('*');
      setTasks(todos);
    };
    getTasks();
  }, []);
  return (
    <div>
      <h1>Reactでsupabase</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.task}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

ブラウザ上には2件のtaskが表示されます。supabaseのテーブルに保存されているデータの取得方法を理解することができました。

supabaseに保存されたデータをブラウザに表示
supabaseに保存されたデータをブラウザに表示

RLSについて

テーブルを作成する際に設定したRow Level Securityをdisabledにすることでデータを取得することができました。

Row Level Securityはsupabaseの機能ではなくPostgresの機能です。Row Level Securityという名前の通りRow(行)レベルのセキュリティに関する設定でアクセス制御を行うことができます。

Row Level Securityをenabledにしてデータを取得できるようにするためにはPolicyの設定が必要となります。AuthenticationのPoliciesから”RLS enabled”になっていることを確認してください。もしなっていない場合にはenabledにしてください。

RLSの設定の画面をよく見ると”New Policy”ボタンやNo policies created yetのメッセージを確認することができます。メッセージからPolicyが何も設定されていないことがわかります。

RLSの設定画面
RLSの設定画面

新しくPolicyを追加するため”New Policy”ボタンをクリックします。Get started quicklyとFor full customizationの2つから選択することができますがGet started quicklyを選択します。

Policyの追加画面
Policyの追加画面

Policyのテンプレートが表示されるのでEnable read access to everyoneを利用するために画面に右下に表示される”Use this template”ボタンをクリックします。

policy templateを選択する
policy templateを選択する

“Use this template”を選択するとPolicy名の設定やどのSQLの処理に適用するかも設定することができます。そのままの設定で画面右下に表示されている”Review”ボタンをクリックします。

Policyの各種設定
Policyの各種設定

次の画面ではcreate policyによるSQL文を確認することができます。”Save Policy”ボタンをクリックするとPolicyが設定されます。

Reviewで実際に適用されるSQLを確認
Reviewで実際に適用されるSQLを確認

作成したPolicyがRLSの画面に表示されます。

作成したPolicyの表示
作成したPolicyの表示

すべてのユーザがアクセスできるPolicyを設定したのでRLS enabledの状態でもVue/Reactどちらでもデータを取得してブラウザ上にTaskの一覧が表示されます。

認証機能

Supabaseは認証機能を持っているのでどのように利用することができるの確認していきます。

左側のメニューからAuthentificationを選択すると登録するユーザの一覧を確認することができます。デフォルトではユーザは存在しないので”No users in your project yet”というメッセージを確認することができます。

authentificationの画面
authentificationの画面

現在の認証の設定を確認するために左側にあるConfigurationの”Settings”をクリックします。Site URLやJWT(JSON WEB TOKEN)の有効期間やパスワードの最小の長さなどの設定を確認することができます。

認証の設定画面
認証の設定画面

さらにスクロールするとメールアドレスによる認証の詳細を設定することができます。デフォルトでは有効になっており”Double confirm email changes”ではパスワード変更を行う場合に新旧のメールアドレスを確認するかや”Enable email confirmations”ではサインインする前にメールアドレスの確認をするかなど設定を行うことができます。

メールアドレスの認証設定画面
メールアドレスの認証設定画面

さらにスクロールするとOauthによる認証に利用できるサービスの一覧を確認することができます。デフォルトではすべてのサービスがDisableに設定されています。

Oauthを利用できるサービスの一覧
Oauthを利用できるサービスの一覧

ユーザの登録

デフォルトの認証設定のままsupabaseのライブラリが持つauth.signUpメソッドを利用してユーザの登録ができるか確認します。通常は入力フォームが必要ですが動作確認のため直接メールアドレスとパスワードを設定しています。ユーザの登録を行うためにuserテーブルを作成する必要はありません。

Vueの場合はApp.vueファイルにsignInUser関数を追加して実行します。signUpの引数のオブジェクトにはemailとpasswordプロパティを設定します。ここではemilにjohn@gmail.comを設定していますがメールが受信できるメールアドレスを指定してください。


const signUpUser = async () => {
  const { user, session, error } = await supabase.auth.signUp({
    email: 'john@gmail.com,
    password: 'password',
  });
  console.log(user);
  console.log(session);
  console.log(error);
};
signUpUser();

Reactの場合はApp.jsファイルのuseEffect Hookの中にsignUpUser関数を追加して実行します。signUpの引数のオブジェクトにはemailとpasswordプロパティを設定します。ここではemilにjohn@gmail.comを設定していますがメールが受信できるメールアドレスを指定してください。


const signUpUser = async () => {
  const { user, session, error } = await supabase.auth.signUp({
    email: 'john@gmail.com,
    password: 'password',
  });
  console.log(user);
  console.log(session);
  console.log(error);
};

signUpUser();

ブラウザでlocalhost:3000にアクセスするとsignInUser関数が実行されAuthentificationのユーザ一覧には登録したユーザのEmailアドレスとUserのUIDを確認することができます。ブラウザを広げないと見えませんがその他にProvider、Created, Last Sign Inなどの列があります。

登録したユーザの確認
登録したユーザの確認

ユーザ登録と同時にConfigurationのSettingsの”Enable email confirmations”を設定しているので以下のメールの内容で送信されます。

Confirmationメールの内容
Confirmationメールの内容

送信されるメールの内容はAuthentificationのTemplatesで確認することができます。

テンプレートの確認
テンプレートの確認

画面に表示されているSMS Message, Confirmation Signup以外にスクロールするとReset Password, Magic Link, Change email address, Invite userのテンプレートがあります。

User一覧のLast Sign In列には”Waiting for verification..と表示されます。

Confirm your mailのリンクをクリックするSettingに設定されていたSite URLにリダイレクトされUser一覧のLast Sign In列に時刻が設定されます。またSignInが行われるとブラウザのローカルストレージにsupabase.auth.tokenのキーを持つTokenが保存されます。

Confirm your mailのリンクをクリックしていない状態でsignInを行おうとするとエラーメッセージとステータス{message: ‘Email not confirmed’, status: 400}が戻されます。

supabseにユーザを登録する方法を理解することができました。別記事でsupabaseが持つauth.signUpメソッド以外のメソッドを利用して認証方法を確認していく予定です。