supabaseでLogin with Google

supabaseはドキュメントが揃っているので基本的にここに書かれている。
このスクラップは日本語化 + 画像を増やしたもの。

https://supabase.com/docs/guides/auth/auth-google

GCPでプロジェクトを作成する

https://cloud.google.com/

APIとサービス > OAuth 同意画面 へアクセス

User Typeを外部にし作成

アプリ情報を一通り埋めて、保存して次へ

supabaseのSettings > API から URLを取得する。
https://xxx.supabase.co

後部に/auth/v1/callbackをつけて保存しておく。

https://xxx.supabase.co/auth/v1/callback

GCPに戻り、認証情報 > 認証情報を作成 > OAuthクライアントIDを選択

アプリケーションの種類から適切なものを選ぶ
ウェブ アプリケーション

下に入力する項目が増えるので、アプリケーションの名前を入れる

承認済みのリダイレクトURIからURIを追加を押す。
表示されるInputへさっき取得したURLを追加する。

「OAuth クライアントを作成しました」が表示される

クライアントIDとクライアントシークレットが表示されるので保存しておく

supabaseに戻り、Authenticationページに飛ぶ。

Settingsを開き、External OAuth Providers から Google Enabledにする。

先程取得したクライアントIDとクライアントシークレットを入力する。

SupabaseUIだと簡単にログイン周りのUIを作れるのでおすすめ。

$ npm install @supabase/ui

providersへ['google']を追加する。

      <Auth.UserContextProvider supabaseClient={supabase}>
        <Container supabaseClient={supabase}>
          <Auth supabaseClient={supabase}  providers={['google']}/>
        </Container>
      </Auth.UserContextProvider>

Sign up with Googleが表示され、無事にSignUp/SignInできるようになる。