【Supabase】Flutter + Supabase AuthでEmail + password（確認メールなしver）のサインアップ・サインイン処理のサンプルを作った【Flutter】

こんにちは。pregum_foxです。今回はFlutterでEmail + password（確認メールなしver）のサンプルを作成します。

前回はGitHubのログインサンプルを作成しました。

pregum-fox.hatenablog.jp

今回は下記のEmail + password（確認メールなしver）のサンプルを作成します。

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

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

pregum-fox.hatenablog.jp

それでは目次です。

開発環境
検証端末
Supabaseプロジェクトの作成
API Keyの取得
API Keyの設定
Emailのプロバイダの設定
要点の説明
完成
まとめ
雑感
参考URL

開発環境

項目	内容
OS	M1 Mac
Flutter	3.13.17

fvm flutter doctor

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

検証端末

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

Supabaseプロジェクトの作成

下記記事の「Supabaseプロジェクトの作成」の段落に記載されている手順に沿ってSupabaseプロジェクトを作成します。

【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】 - 狐好きぷろぐらまー

API Keyの取得

下記記事の「API Keyの取得」の段落に記載されている手順に沿ってURL と anon を取得します。

【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】 - 狐好きぷろぐらまー

API Keyの設定

まずは、下記リポジトリをクローンしてください。

github.com

その後、.envファイルを下記画像のように書き換えてください。

.envファイルの書き方がよくわからない、面倒な方はmain.dart ファイルの18行目のSupabase.initializeメソッドの引数に直接入れてもらっても大丈夫です。

Emailのプロバイダの設定

Supabaseのプロジェクト作成時からEmail認証はデフォルトで有効になっております。ですが、このままだとメール本文内のURLをクリックしないと、サインインができない為、メールを確認しなくてもサインインできるように設定していきます。

Supabaseのプロジェクトを開き、「Authentication」＞「Providers」＞「Email」をクリックします。

「Confirm email」の項目が有効になっていると思いますので、無効に設定後、「Save」ボタンをクリックし保存します。

これで、メールの確認なしでログインが可能になりました。

要点の説明

今回リポジトリ内でサインイン・サインアップについて使用する処理について軽く説明します。

// login_page.dart 105行目付近
// : 

  Future<void> _signUpEmail() async {
    await _signInFlow(() async {
      final auth = await supabase.auth.signUp(
        email: _emailController.text,
        password: _passwordController.text,
        data: {'user_name': _userNameController.text},
      );
      debugPrint('auth: $auth');
    });
  }

  Future<void> _signInEmail() async {
    await _signInFlow(() async {
      final auth = await supabase.auth.signInWithPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      debugPrint('auth: $auth');
    });
  }

supabase変数は初期化されたクライアントが代入されています。 final supabase = Supabase.instance.client;

上記の処理でsupabaseのサインインとサインアップ下記メソッドで行っております。（今回使用していない引数は除外しております。）

サインイン: supabase.auth.signInWithPassword({String? email, required String password,}) メソッド
サインアップ: supabase.auth.signUp({ String? email, required String password, Map<String, dynamic>? data, }) メソッド

サインアップのdataの引数にはuser_nameなどを入れることでユーザーのメタデータを入れておくことができます。

今回はユーザー名を登録するために使用しております。

ログインができた場合、_LoginPageState#initState に記述しているログイン状態を監視している処理が実行され、ログイン後の画面へ遷移する処理が実行されます。

完成

お疲れ様でした。これでEmail + password（確認メールなしver）でのサインアップ・サインインのサンプルが完成しました。

まとめ

Flutter + SupabaseでのEmail + password（確認メールなしver）のおおまかな手順としましては、以下のようになります。

Supabaseプロジェクトの作成
API Keyの取得・設定
Emailのプロバイダの設定

本来は確認メールありver の方が良いので、そちらのサンプルも作成予定です。そちらは検証がしやすいようローカルのSupabaseで作成する予定です。

雑感

Emailは、手軽でコード量も少なく実装ができるため最初に実装するには良いなと思いました。

またdataにユーザー名などを入れないと、情報がほとんどないので必要な情報はdataに入れてサインアップ処理を実行する必要がありそうです。

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