【Flutter x Supabase】ログイン(magic link)＋おまけつき

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

こんにちは。いせりゅーです。今回は、Flutter x Supabaseでログイン（magiclinkの実装）をするやり方に加えて、必要そうな記載を書いてみました。(あくまでも一例です)

Supabaseを学習し始めてからまもないため、間違えた実装を記載するかも知れません。その場合はコメントなどで教えていただけると幸いです🙇

１、記載の漏れがないかを確認する
２、magic linkでログインを試みる

こんな感じで進めていきます〜〜！！

記載の漏れがないかを確認する

こちらについては、さまざまな確認方法があると思いますが、今回はメールアドレスが記載できているかどうかの確認をしています。メールアドレスについては別の確認作業が必要そうですが、今後記載をしてみようと思います
お好みの方法で、警告文を出してください。

final emailTextController = TextEditingController();

void post() {
  if (emailTextController.text.isNotEmpty) {
    // ログインの処理を記載する
  } else {
  print('メールアドレスが入力されていません！');
}

magic linkでログインを試みる

今回はmagic linkの流れは割愛させていただきます🙇。
くわしくはこの後でリンクを載せておきます。こちらの方がわかりやすいと思います！

では実装のみを記載していきます。

 final _shouldCreateUser = true;

 Future<void> login() async {
  try {
    // キーボードを閉じる
    primaryFocus?.unfocus();
    await supabase.auth.signInWithOtp(
      email: emailTextField.text.trim(),
      shouldCreateUser: _shouldCreateUser,
      emailRedirectTo: 'io.supabase.flutterquickstart://login-callback/',
    );
    print('メールを確認してみてください');
  } on AuthException catch (error) {
    print(error.message);
  } 
}

ソースコード

Future<void> login() async {
  if (emailTextController.text.isNotEmpty) {
    try {
      // キーボードを閉じる
      primaryFocus?.unfocus();
      await supabase.auth.signInWithOtp(
        email: emailTextField.text.trim(),
        shouldCreateUser: _shouldCreateUser,
        emailRedirectTo: 'io.supabase.flutterquickstart://login-callback/',
      );
      print('メールを確認してみてください');
    } on AuthException catch (error) {
      print(error.message);
    }
  } else {
    print('メールアドレスが入力されていません！');
  }
}

最後に

自分もまだまだ学習中ですが、Supabaseのいいところが毎日見つかってきてとてもいいですね。個人的にはこれからの発展に期待したいですね😁

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！