Zenn
👻

Supabaseの認証機能とStorageの使い方

2022/09/02に公開
supabase
tech

Supabaseとは

オープンソースのBaas（Bacyehd As A service）です。
公式サイトで「Firebase Alternative」と謳われており、Authentication、Database、Storage、FunctionsなどFirebaseと同じような機能を備えています。
FirebaseはNoSQLなデータベースであるのに対して、SupabaseではRDBを使える点が大きな違いです。

認証

EメールまたはOAuthを使用してサインインできます。

サインイン

auth.signInメソッドを使います。
パラメーターにemailのみ渡すとマジックリンクを送れます。

const { user, session, error } = await supabase.auth.signIn({
  email: 'example@email.com',
})

emailとpasswordを使う場合

const { error } = await supabase.auth.signIn({
  email: 'example@email.com',
  password: 'example-password',
})

サードパーティのプロバイダーを使う場合
providerパラメーターに使いたいプロバイダーを指定します。

const { user, session, error } = await supabase.auth.signIn({
  // provider can be 'github', 'google', 'gitlab', and more
  provider: 'github',
})

github、google、gitlab以外にも多くのプロバイダーを使えます。
対応しているサードパーティのプロバイダーはこちらを参考
https://supabase.com/docs/guides/auth#providers

ログイン後にリダイレクトするページを指定したい場合はredirectToを使う

const { user, session, error } = await supabase.auth.signIn(
  {
    provider: 'github',
  },
  {
    redirectTo: 'https://example.com/welcome',
  }
)

詳しい使い方はこちらを参考
https://supabase.com/docs/reference/javascript/auth-signin

ログアウト

auth.signOutメソッドを使います。

const { error } = await supabase.auth.signOut()

Storage

Storageには画像、GIF、ビデオなどあらゆる種類のメディアファイルを保存することができます。
Bucket/Folder（なくても良い）/Fileの構成になります。

Bucket: fileやfolderを入れるコンテナー。セキュリティルールとアクセスルールを設定できます。

アップロード

storage.from.upload()メソッドを使います。
e.g. profilesバケットにlogoファイルをアップロードする

const avatarFile = event.target.files[0]
const { data, error } = await supabase.storage
  .from('profile')
  .upload('public/logo.png', avatarFile, {
    cacheControl: '3600',
    upsert: false,
  })

ダウンロード

StorageのfileのURLを取得する方法は
Bucketがプライベートかパブリックかによって異なります。

Bucketがプライベートの場合

storage.from.download()メソッドを使います。
fileをダウンロードしてからURLを作成します。

e.g. private-bucket　バケットからlogoファイルをダウンロードする

const { data, error } = await supabase.storage
  .from('private-bucket')
  .download('logo.png')

if (data === null) return

const url = URL.createObjectURL(data)

Bucketがパブリックの場合

storage.from.getPublicUrl()メソッドを使います。
e.g. public-bucketバケットからlogoファイルのURLを取得する

const { publicURL, error } = supabase.storage
  .from('public-bucket')
  .getPublicUrl('logo.png')

おわりに

Supabaseを使うと実装が面倒な認証や画像アップロードが、簡単に実装できてとても便利でした。
ドキュメントが豊富にあるので興味のある方は一度ご覧ください

https://supabase.com/docs

Discussion