狐好きぷろぐらまー

狐好きプログラマーのブログです。

トップ > Supabase > 【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】
最終更新日

【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】

Supabase Flutter GitHub Dart

こんにちは。pregum_foxです。

早速本題からの人はこちら

雑談

もう直ぐ技術書典と技書博のイベントがあり、楽しみにしているpregum_foxです。

blog.techbookfest.org

gishohaku.dev

というわけで、今回はFlutter + Supabaseを用いたサンプルを作っていきたいと思います。

今回いきなりソーシャルログインですが、ログイン周りはとりあえずSupabaseで対応しているかつ自分の力量で実装できそうなものに絞って記事に残していきたいと思います。

現状のサンプルの作成状況は下記ページにまとめています。

他の認証サンプルを見たい場合はこちらから確認できます。

pregum-fox.hatenablog.jp

それでは目次です。

開発環境

項目 内容
OS Intel Mac
Flutter 3.3.10

検証環境

端末名 version
Google Pixel 3a Android 12
iPhone X iOS 16.6

Supabaseとは

公式サイトから引用します。 Supabase | The Open Source Firebase Alternative

Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

以下日本語に翻訳したものを記載します。

Supabase は、オープンソースの Firebase の代替品です。Postgres データベース、認証、インスタント API、エッジ関数、リアルタイム サブスクリプション、ストレージ、Vector 埋め込みを使用してプロジェクトを開始します。

上記に記載されているように、Firebaseの代替プロダクトのことで、以前Firebaseを開発で使用した私が個人的に感じるメリットとしては、以下の通りです。

  • RDB(postgrest)が使用可能
    • 未だFirebaseからはNoSQLのサービスしかなく、個人的にはNoSQLは手軽だが込み入ったことをすると途端に難易度が跳ね上がり苦手なイメージがついてしまったので、RDBが使用できるのは大きなメリットだと言えます。
  • Firebaseに存在するクラウドサービスに欲しい機能はほぼ揃っていると言える(2023/10/9現在)
    • まだガッツリ支えてはいないため、今後意見が変わるかもしれないですが、公式サイトを見た所、Firebaseにある機能で基本的な部分はSupabaseにも揃っていたので（storageやDB, Authentication, Function）アプリ開発する場合は、Supabaseにほぼお任せでも良さそうな気がしました。
      • ただ、FCMやCrashlyticsなどはないため、その辺りはFirebaseにお世話になる形になると思います。

下記チュートリアルを試すと、以下の項目のやり方が分かります。

  • Supabase上でのプロジェクトの作成
  • アプリでの接続方法
  • 認証方法
  • DBへの書き込み・読み込み

使用イメージを掴みたい方は、まずは一度試してみることをお勧めします。

supabase.com

本題

だいぶ話が脱線しましたが、では本題のFlutterとSupabase Authを用いてソーシャルログインの実装方法を記載していきたいと思います。

Supabaseプロジェクトの作成

最初にFirebaseと同じようにSupabaseのプロジェクトを作成します。

下記サイトから未サインインの方はサインアップ・サインインを行い、ダッシュボードからプロジェクトを作成します。

Dashboard | Supabase

プロジェクトの作成_1

Nameは今回はsign-in-by-github-sample とします。

Database Passwordは今回DBは使わないので、適当で大丈夫です。（設定しないとプロジェクトが作成できないので...）

RegionはTokyoにします。

設定できたら、右下の「Create new project」をクリックします。

プロジェクトの作成_2

API Keyの取得・設定

プロジェクトが作成できたので、プロジェクトのAPIを取得し、プログラムに設定していきます。

API Keyの取得

API Keyの記載場所は「Project Settings」＞「API」にあります。

API Keyの記入場所

遷移したらURLとanonを取得します。

API Keyの設定

それでは、先ほど取得したURLとanon をコードの中に入れていきます。

Flutterのプロジェクトを作成します。

github_login_by_supabase_sample_flutter という名前でプロジェクトを作成しました。

変更箇所が結構あるのでリポジトリのURLを貼っておきますので下記から落としてきてください。

github.com

落とした後、.envファイルの中身に記載しているSUPABASE_URL の値には URLを、 SUPABASE_ANONKEYの値には anon を先ほど取得したAPI Keyの文字列を設定してください。

.envファイルの更新

それ以外にも色々手を加えていますが、具体的な差分はコミットログを参照してください。

github.com

続いてRedirect URLsの設定に進みます。

Redirect URLsの設定

API Keyの設定ができましたら次はredirect URLの設定をします。 このURLはサインアップ後、ブラウザからユーザーをアプリに戻すために必要なURLです。

Supabaseプロジェクトの「Authentication」＞「URL Configuration」を開きます。 その後、「Add URL」をクリック

Redirect URLsの設定1

するとダイアログが表示されるので、io.supabase.flutterquickstart://login-callback/ を設定し、「Add URL」をクリックします。

Redirect URLsの設定2

ダイアログが閉じ、「Redirect URLs」の欄に追加されていればOKです。

設定後の画面

GitHubのOAuth Appの設定

Supabaseプロジェクトの Reference ID の取得

Oauth AppのAuthorization callback URLを設定する為にSupabaseプロジェクトのReference IDが必要なので、取得します。

Reference IDの記載場所は「Project Settings」＞「General」です。

Reference IDの取得

コピーしたら、そのままGitHubのOAuth Appの作成に移ります。

OAuth Appの作成

GitHub ログインを行うにはログイン用のGitHubのOAuth Appを設定する必要があります。

下記を開いて、右上の「New OAuth App」ボタンをクリックします。

https://github.com/settings/developers

OAuth Appの作成

すると、作成画面へ遷移するので、下記項目の設定を行います。

  • Application name
    • OAuth Appの名前。なんでも良いのでここではsign in with github supabaseとしました。
  • Homepage URL
    • このURLはアプリでは関係ないので、適当にhttp://localhost:3000などで良いです。
  • Authorization callback URL
    • この値が重要。このURLを間違えるとディープリンクが動作せずアプリへ戻れないので要注意 👀
    • この値は決まっており、https://<SupabaseプロジェクトのReference ID>.supabase.co/auth/v1/callback という値を設定します。
      • 例）SupabaseプロジェクトのReference IDがhogehogepiyopiyoの場合は、https://hogehogepiyopiyo.supabase.co/auth/v1/callback となります。
      • 上記のURLは下記docsに記載されているcallback urlをそのまま引用しています。 supabase.com

OAuth Appの作成2

「Register Application」をクリックすると、Client IDとClient secretsの表示が出ますので、そのままClient IDとClient secretsをメモしておいてください。

Client secretsは「Generate a new client secret」ボタンをクリックすることで生成されます。

生成後、メモする前に別の画面へ遷移すると見れなくなるので注意してください。

OAuth Appの作成3

Supabase AuthのGitHubプロバイダの有効化

対象のSupabaseプロジェクトのAuthenticationのGitHubプロバイダを有効化します。

まずはSupabaseプロジェクトを開き「Authentication」＞「Providers」へ遷移します。

その後GitHubの項目を開き、先ほど取得したClient ID、Client Secretを設定後、「save」をクリックします。

Supabase AuthのGitHubプロバイダの有効化

「GitHub」のタイルの右端のステータスがDisable から Enabledになっていれば設定が完了です。

完成

ここまで行けば、あとは実際に起動して挙動を確認しましょう。

検証動画

下記コマンドにて、検証しました。

fvm flutter run

実際にログインからサインアウトまでの動画を添付します。

Android

iOSは後日確認予定

まとめ

Flutter + Supabaseでのソーシャルログイン(GitHub)の大まかな手順としては、以下のようになります。

  1. Supabaseプロジェクトの作成
  2. API Keyの取得・設定
  3. Redirect URLsの設定
  4. GitHubのOAuth Appの設定
  5. Supabase AuthのGitHubプロバイダの有効化

難所は、deep linkのURLの設定の部分かなと思います。

所感

Supabaseを使って実際にソーシャルログインができるようになったので、他の方法でのログインのサンプルも実装して、直ぐ引っ張って来れるようにできれば、開発初期に時間がかかりがちなログイン周りの処理の工数を抑えることができるので、どんどん書き溜めていきます。

また今回iOS版は XCodeのダウンロードが面倒 時間がなくて検証ができていないので、来週届く新しいMacで新しいログインの記事を書くときについでに確認予定です。

ここまで読んでいただきありがとうございます。

参考URL