SupabaseとGoogle認証を実現するための下準備について備忘録も兼ねて紹介します。
具体的にはGoogleでクライアントIDとクライアントシークレットを取得してSupabaseに設定するための手順を記載します。また、「承認済みのリダイレクトURI」には何を入力するのかという点についても触れています。
クライアントIDとクライアントシークレットの取得とSupabaseへの設定
Google Cloudのコンソール画面にアクセスし認証画面を選択します。
以下のように黄色のウォーニングが出る場合は「同意画面を構成」をクリックして必要事項を入力して同意画面を作成します。
上記作業が完了したら「認証情報を作成」から「OAthクライアントID」を選択します。
アプリケーションの種類は「ウェブアプリケーション」、名前は任意の名前を入力します。
承認済みのJavaScript生成元には、アプリのURL、具体的には「http://localhost:3000」と本番環境のURLである「https://・・・.vercel.app」を入力します。私の場合は本番環境としてはvercelを使用しました。
承認済みのリダイレクトURI
「承認済みのリダイレクトURI」はSupabaseのプロジェクトのdashboardを確認します。「Authentication」→「CONFIGURATION」の「Sign In / Providers」→「Auth Providers」のGoogleを選択します。
そうすると、以下のように「Callback URL (for OAuth)」が表示されますのでこれをコピーして先ほどの「承認済みのリダイレクトURI」にペーストして、Google Cloudで認証情報の作成を完了します。
クライアントIDとクライアントシークレットの設定
作成後以下のようにクライアントIDとクライアントシークレットが表示れますのでこれを控えておきます。JSONをダウンロードしておいても良いかもしれません。
クライアントIDとクライアントシークレットをSupabaseの方にコピペします。
以上で「Save」をしてGoogle認証を実装するための下準備が完了です。
参考