Open11

supabaseでLogin with Google

t0m0120t0m0120

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

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

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

t0m0120t0m0120

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

t0m0120t0m0120

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

t0m0120t0m0120

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

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

t0m0120t0m0120

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

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

t0m0120t0m0120

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

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

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

t0m0120t0m0120

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できるようになる。