ローカル環境でSupabaseのSlackログイン機能を実装する方法

はじめに

SupabaseでSlackログイン機能を実装する際、ローカル開発環境で直面する最大の問題は一つです。それは、Slack側が指定するredirect_urlがhttpsでなければならないという点です。この記事では、この問題を解決するための実践的なアプローチを紹介します。

問題の背景

Supabaseにはconfig.tomlでapi.tlsをenabledにする方法がありますが、この方法を試したところ、メールログインなど他の認証方法でエラーが発生するという問題がありました。また、この方法では適切な証明書が設定できないため、ブラウザで常に警告が表示されてしまいます。

より良い解決策として、本記事ではlocal-ssl-proxyというnpmパッケージを使用する方法を紹介します。このツールを使えば、起動時に--certオプションで証明書を指定でき、証明書生成にはmkcertを使用します。

実装手順

以下の5つのステップでSupabaseのローカル環境でSlackログインを実装します：

mkcertのインストール
証明書の作成
supabase/config.tomlの修正
Slackアプリ側でのredirect_urlの設定
local-ssl-proxyの起動

それでは、各ステップを詳しく見ていきましょう。

1. mkcertのインストール

Homebrewを使って簡単にmkcertをインストールできます：

1

brew install mkcert

Homebrew以外の環境では、mkcertの公式リポジトリを参照してください。

2. 証明書の作成

証明書管理を簡単にするため、npm scriptに定義しておくと便利です。.certディレクトリに証明書を作成するように以下のようにpackage.jsonのscriptsに追加します：

1
2
3
4
5


{
  "scripts": {
    "cert:generate": "mkdir -p .cert && mkcert -install && mkcert -key-file .cert/localhost-key.pem -cert-file .cert/localhost.pem localhost 127.0.0.1 ::1"
  }
}

このスクリプトを実行すると、必要な証明書が生成されます：

1

pnpm run cert:generate

3. supabase/config.tomlの修正

Supabaseの認証設定では、特にOAuth連携の設定で注意が必要な箇所があります。config.tomlファイルに以下のように[auth.external.slack_oidc]セクションを追加または修正します：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


[auth.external.slack_oidc]
enabled = true
client_id = "env(SUPABASE_AUTH_SLACK_CLIENT_ID)"
# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
secret = "env(SUPABASE_AUTH_SLACK_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = "https://localhost:54325/auth/v1/callback"
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""
# If enabled, the nonce check will be skipped. Required for local sign in with Slack auth.
skip_nonce_check = true

ここで注目すべき点は以下の通りです：

redirect_uriにはhttps://localhost:54325/auth/v1/callbackを指定します（54325はプロキシのポート番号）
skip_nonce_checkをtrueに設定することで、ローカル環境でのSlack認証を可能にします
認証情報（client_idとsecret）は環境変数から読み込むようにしています

4. Slack側でのredirect_urlの設定

Slack APIのダッシュボードで新しいアプリを作成するか、既存のアプリを編集します：

Slack APIにアクセス
アプリの「OAuth & Permissions」セクションに移動
「Redirect URLs」にhttps://localhost:54325/auth/v1/callbackを追加
変更を保存

この設定により、Slackの認証フローが完了した後、ユーザーを正しくローカル環境のSupabaseアプリにリダイレクトできるようになります。

5. local-ssl-proxyの起動

最後に、local-ssl-proxyを使ってhttpからhttpsへのプロキシを設定します：

1

pnpm dlx local-ssl-proxy --source 54325 --target 54321 --cert .cert/localhost.pem --key .cert/localhost-key.pem

このコマンドの説明：

--source 54325: httpsで受け付けるポート番号
--target 54321: Supabaseのローカルサーバーが動いているポート番号
--certと--key: 先ほど生成した証明書のパス

動作確認

上記の設定が完了したら、ブラウザでhttps://localhost:54325にアクセスすると、SSL接続が確立された状態でSupabaseのローカル環境にアクセスできます。ログイン画面でSlackログインを選択すると、Slackの認証画面にリダイレクトされ、認証後は正しくアプリケーションに戻ってくるはずです。

トラブルシューティング

証明書の警告が表示される場合: mkcertの-installオプションが正しく実行されているか確認してください。
Slackログインが失敗する場合: Slack APIダッシュボードでリダイレクトURLが正確に設定されているか、またconfig.tomlのclient_idとsecretが正しく環境変数に設定されているか確認してください。
その他のログイン方法が機能しない場合: 他の認証方法も同じプロキシを通すように設定を調整する必要があるかもしれません。

まとめ

この記事では、Supabaseのローカル開発環境でSlackログイン機能を実装する方法を紹介しました。local-ssl-proxyとmkcertを組み合わせることで、セキュアなhttps接続を簡単に設定でき、Slackの認証要件を満たすことができます。この方法は他のOAuth認証（Google、GitHub、Azureなど）にも応用できるので、ぜひ試してみてください。

開発環境と本番環境の一貫性を保つことは重要ですが、ローカル環境での開発を快適に行うためのこうした工夫も、開発効率を上げるために欠かせません。