【Supabase】驚くほど簡単！Slack ログイン機能の実装 #Nuxt – Qiita

コピーしたコールバック URL を Slack アプリに設定します。

1. Slack のアプリ管理画面に戻ります
2. 左のサイドバーから OAuth & Permissions を選択します
3. Redirect URLs という項目までスクロールし、 Add New Redirect URL をクリックします
4. 先ほど Supabase からコピーしたコールバック URL を貼り付け、 Add をクリックします
5. 最後に Save URLs をクリックして保存します

次に、Supabase のプロジェクトに Slack アプリの認証情報を設定します

1. Supabase のダッシュボードに戻り、再度 Authentication -> Sign in / Providers -> Slack を開きます
2. Slack enabled のトグルをオンにします
3. 先ほど Slack アプリからコピーしておいた Client ID と Client Secret をそれぞれ入力します
4. 最後に Save ボタンをクリックして設定を保存します

Enabled と表示されていれば設定完了です。

最後に、作成したクライアントアプリ（今回は Nuxt3）に Slack でログインするためのコードを追加します。

私は、今回下記の Nuxt モジュールを使用しています。

まず、対象の Nuxt モジュールをプロジェクトに追加します。

npx nuxi@latest module add supabase

nuxt.config.ts のモジュールセクションに @nuxtjs/supabase を追加します。

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
})

.env に SUPABASE_URL と SUPABASE_KEY を追加します。

SUPABASE_URL=""
SUPABASE_KEY=""

次に、ログインとログアウトを実行するページやコンポーネントに、以下のコードを実装します。
signInWithOAuth メソッドを使用することで実現できます。

script setup lang="ts">
/** Supabase Client */
const client = useSupabaseClient()

// Slackでのログイン処理
const signInWithSlack = async () => {
  await client.auth.signInWithOAuth({
    provider: 'slack_oidc',
    options: {
      redirectTo: config.public.supabaseRedirectUrl,
    },
  })
}

// ログアウト処理
const signOut = async () => {
  await client.auth.signOut()
}
script>

template>
  

     @click="signInWithSlack">Slack でログイン
     @click="signOut">ログアウト
  
template>

ログイン処理である signInWithOAuth メソッドは、 Supabase の認証機能を通じて Slack の認証ページにユーザーをリダイレクトさせます。
具体的なフローとしては、

1. Slack での認証が成功すると、Slack は Supabase のコールバック URL に認可コードを付与してリダイレクトします
2. バックエンドは受け取った認可コードを使い、Slack からアクセストークンと ID トークンを取得してユーザーセッション（JWT）を取得します
3. その後、options の redirectTo で指定した URL にユーザーをリダイレクトします

これが、OAuth 2.0 の認可コードフローの基本的な流れとなります。

認証が成功すると、指定した redirectTo の URL にリダイレクトされ、ログイン状態となります。
ちなみに、この際、Slack アプリをインストールしたワークスペースに参加していないユーザーがログインしようとすると、Slack 側で認証エラーとなります。

また、ログアウト処理は signOut メソッドを呼び出すだけで実装できます。
これにより、Supabase がクライアント側で管理しているセッション情報（JWT）が破棄され、ユーザーはログアウト状態となります。

Supabase は、単なる認証サービスではありません。
PostgreSQL を中心として、オープンソースの Firebase 代替とも称される BaaS（Backend as a Service）プラットフォームでもあります。
今回は、おまけとして一部の機能である Database と Stroage について最後ご紹介できればと思います！

Database

-- `profiles`テーブルにRLSを有効化
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

-- 自分のレコードのみSELECTを許可するポリシー
CREATE POLICY "Users can view their own profile."
ON profiles FOR SELECT
USING (auth.uid() = id);

-- 自分のレコードのみUPDATEを許可するポリシー
CREATE POLICY "Users can update their own profile."
ON profiles FOR UPDATE
USING (auth.uid() = id);

/** Supabase Client */
const client = useSupabaseClient()

await useAsyncData(
  `user-upsert-${userId}`,
  async () => {
    await client.from('users').upsert(
      {
        uuid: userId,
        email: email,
        name: slackName,
        slack_member_id: memberId,
        slack_profile_image: profileImageUrl,
      },
      { onConflict: 'uuid' },
    )
  }
)

/** Supabase Client */
const client = useSupabaseClient()

const { data: memoryPhotos } = await useAsyncData(
  'user-memory-photos',
  async () => {
    const response = await client.storage
      .from('memory-image')
      .createSignedUrls(fileNames, 60 * 60)
    
    return response.data
  }
)