こんにちは。pregum_foxです。
今回はFlutterでEmail + password（確認メールありver）のサンプルを作成します。
前回はEmail + password（確認メールなしver）のログインサンプルを作成しました。
今回は下記のEmail + password（確認メールありver）のサンプルを作成します。
現状のサンプルの作成状況は下記ページにまとめています。
他の認証サンプルを見たい場合はこちらから確認できます。
それでは目次です。
開発環境
| 項目 | 内容 |
|---|---|
| OS | M1 Mac |
| Flutter | 3.13.17 |
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.13.7, on macOS 14.0 23A344 darwin-arm64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.0) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.3) [✓] VS Code (version 1.83.1) [✓] Connected device (3 available) [✓] Network resources • No issues found!
検証端末
| 端末名 | version |
|---|---|
| Google Pixel 3a | Android 12 |
| iPhone X | iOS 16.6 |
Supabaseプロジェクトの作成
下記記事の「Supabaseプロジェクトの作成」の段落に記載されている手順に沿ってSupabaseプロジェクトを作成します。
【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】 - 狐好きぷろぐらまー
API Keyの取得・設定
API Keyの取得
下記記事の「API Keyの取得」の段落に記載されている手順に沿ってURL と anon を取得します。
【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】 - 狐好きぷろぐらまー
API Keyの設定
まずは、下記リポジトリをクローンしてください。
その後、.envファイルを下記画像のように書き換えてください。
.envファイルの書き方がよくわからない、面倒な方はmain.dart ファイルの18行目のSupabase.initializeメソッドの引数に直接入れてもらっても大丈夫です。
起動コマンドはREADME.mdにも記載している通り、flutter run --dart-define=ENVIRONMENT=development を実行することで、.envファイルを読み込んで起動します。
Emailプロバイダの設定
Supabaseのプロジェクト作成時からEmail認証はデフォルトで有効になっております。
実際に上記の項目が有効になっていることを確認致します。
Supabaseのプロジェクトを開き、「Authentication」＞ 「Providers」＞「Email」をクリックします。
「Enable Email provider」と「Confirm email」の項目が有効であることを確認します。
有効になっていなければ、有効に変更後「Save」ボタンをクリックし保存します。
これで、メールの確認ありverでサインアップ・サインインが可能になりました。
完成
確認メールなしverより短くなりましたが、クラウドサービス上でのEmail + password（確認メールありver）の設定は以上となります。
（応用）ローカルにメールサーバーをたてて、検証する
ただ、これでは自分が保持しているメールアドレスのみでの確認しかできず、メールアドレスを複数用いた機能の開発などはデータの準備に時間がかかる為、ローカルにメールサーバをたてて検証できるようにします。
Supabaseには、ローカルで起動できるDockerイメージとそれを操作するSupabase CLIを提供してくれているので、そちらを使用します。
詳細は下記URLにSupabase CLIの詳細な説明が記載されています。
Supabase CLIのインストール
まずはSupabase CLIを入れる必要があるので下記コマンドで入れます。
brew install supabase/tap/supabase
Mac以外の方は下記URLのREADME.mdに記載しているのでそちらを参照してください。
ローカル用Supabase プロジェクトの初期化
では、クローンしたリポジトリのディレクトリ直下のディレクトリでターミナルで下記コマンドを実行し、ローカルのsupabaseを初期化します。
すでにクラウド上にプロジェクトを作成していても、このコマンドでは反映はされないので大丈夫です。（反映用のコマンドは別に存在します。）
途中で聞かれる質問は分からない方はEnterでOKです。
supabase init
Finished supabase init. と表示されると、リポジトリのディレクトリ直下にsupabaseという名前のディレクトリが作成されます。
その中のconfig.tomlに認証プロバイダやDB等のローカルのsupabaseの設定情報が入っています。
では起動ができるか確認します。
Supabaseの立ち上げ
下記コマンドを実行し、Supabaseのローカル環境を立ち上げます。
supabase start
もし上記でservice not healthy: [supabase_edge_runtime_authentication_sample_with_supabase_flutter]
Try rerunning the command with --debug to troubleshoot the error. と表示された方は、 下記のオプションをつけたverのコマンドを実行してみてください。
私の場合は下記コマンドでうまく行きました。
supabase start --ignore-health-check
またはdockerが立ち上がっていない時もエラーが出ますので、その時はDockerを起動してから再度コマンドを実行してください。
起動に成功すると、下記画像のように、urlといくつかのkeyが発行されます。
Studio URLをブラウザで開いて、Supabaseのローカルのダッシュボードが表示されれば起動に成功しています。
上記のURLとKeyは、起動している間は下記コマンドで確認可能です。
supabase status
ローカルサーバを止めたい場合は、下記コマンドを叩くことで止めることができます。
supabase stop
ローカルサーバのEmailプロバイダの設定（確認メール有効化）
ローカル環境のSupabaseはデフォルトでは実は確認メールなしverなので、Confirm Emailの設定を有効にしていきます。
ではsupabase/config.tomlファイルを開きます。
config.tomlファイルの90行目にあるenable_confirmations = falseの項目をenable_confirmations = trueに変更します。
では一度設定を更新するため、supabase stop && supabase start でコンテナを再起動します。
また、一度ローカルサーバを建てるとAPI Keyなどは固定されるようなので、ローカルサーバ用のURLとAPI Key.env.local ファイルに入れておくことをお勧めします。
Inbucket上でサインアップメールの確認
それでは送信したメールをローカルで確認します。
ローカルでメールを受信するには、Inbucketというツールを使用します。
こちらはsupabaseのDockerイメージ内に同梱されていて、コンテナを立ち上げるとInbucketも同時に立ち上がるので、こちらでInbucketの起動の為に設定をする必要はありません。
Inbucketのページの開き方は、Inbucket URL: ~~の項目のURLをブラウザに入力し遷移すると開きます。
軽くInbucketの説明をした所で、アプリの起動から順に確認手順を記載します。
まずはアプリのURLとAPI Keyをローカルサーバ用に置き換えて、アプリを起動します。
私の場合は.env.localファイルに設定し、flutter run で.env.localを指定してアプリを起動するようにしました。
またAndroid端末で検証している方は、下記記事を参考にlocalhostのportをAndroidからアクセスできるように設定してください。
アプリからEmailのサインアップボタンをクリックし、Inbucketのページの「Monitor」をクリックすると、メールが届いているかと思います。
また、この状態ではsupabaseのStudioを開くと、emailは表示されていますが、認証ができていないという文言が出ていることが確認できます。
アプリもこの状態ではサインインができないことが確認できます。
対象のメールをクリックすると、詳細ページへ遷移しメール本文が確認できます。
その中から、'Confirm your email address' というクリックできそうなリンクがあるので、そのリンクをクリックします。
すると、callback先がlocalhostなのでアクセスできませんという旨の画面が表示されるのですが、authはこれで認証が通っていることが確認できます。
この状態でアプリでサインインを行うと、無事ログインできました。
これでローカルサーバを使用した認証テストは完了です。
お疲れ様でした。
まとめ
- 確認メールありverと確認メールなしverの違いはEmailプロバイダの設定の違いのみ（ソースコードは変更なし）
- ローカルで確認したい場合は、Dockerコンテナを起動して、ローカルのメールサーバにて確認が可能
雑感
巷のサービスは大体メール認証しないとログインできないことが多いので、プロバイダ設定だけで設定できるのは良いなと思いました。
また、この手のテストし難い問題はDockerコンテナを立てることで改善できるので開発者に優しいサービスだと思います。
たて方の手順もそこまで詰まる箇所はないかなと思います。
ここまで読んでいただきありがとうございました。
