はじめに

【Flutter】Firebase Authenticationを使ってログイン/ユーザー登録画面を作成する(その4)の続きです。
前回はログインとログアウトを実装しました。
今回はパスワードリセット画面を作成し、パスワードリセットのためのメールを送信する実装を行います。
引き続きVSCodeのMac版を利用していますので、AndroidStudio利用の方は適宜読み替えて行ってみてください。

更新履歴

2024.1.18 初回投稿
2024.1.27 誤字修正

Firebaseプロジェクト側でパスワードリセットメールのテンプレートを変更する

Firebaseのプロジェクトショートカットから「Authentication」をクリックして「Templates」を選択します。
テンプレート画面左下の「テンプレート言語」横の鉛筆マークをクリックして、テンプレート言語を「日本語」に設定します。
テンプレートを編集したい場合は「送信元」横の鉛筆マークをクリックして、編集できます。
編集したら保存ボタンを押して完了です。

パスワードリセット画面を作成する。

「reset_password_screen.dart」というファイル名でファイルを作成します。
最初に作成したユーザ登録画面からWidgetをコピーしてきて、メールアドレスのフィールドのみ残しておきます。

以下のようになります。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class ResetPasswordScreen extends StatefulWidget {
  const ResetPasswordScreen({super.key});

  @override
  State<ResetPasswordScreen> createState() => _ResetPasswordScreenState();
}

class _ResetPasswordScreenState extends State<ResetPasswordScreen> {
  // メッセージ表示用
  String infoText = '';
  String mailAddress = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // メールアドレス入力
              TextFormField(
                decoration: const InputDecoration(labelText: 'メールアドレス'),
                onChanged: (String value) {
                  mailAddress = value;
                },
              ),

              Container(
                padding: const EdgeInsets.all(8),
                // メッセージ表示
                child: Text(infoText),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

次に、パスワードリセットボタンと処理をメッセージ表示Containerの下に追加します。

    SizedBox(
        width: double.infinity,
        // ユーザー登録ボタン
        child: ElevatedButton(
          child: const Text('パスワードリセット'),
          onPressed: () async {
            try {
              final FirebaseAuth auth = FirebaseAuth.instance;
              await auth.sendPasswordResetEmail(email: mailAddress);
              setState(() {
                infoText = "パスワードリセットメールを送信しました。";
              });
            } catch (e) {
              setState(() {
                infoText = "パスワードリセットメールの送信に失敗しました：${e.toString()}";
              });
            }
          },
        ),
      )

最初のログイン/ユーザー登録画面にパスワードリセットボタンを追加します。

ログアウトボタンの下に以下のコードを追加します。

    TextButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) {
                return const ResetPasswordScreen();
              },
            ),
          );
        },
        child: const Text(
          'パスワードを忘れたら',
          style: TextStyle(
            color: Colors.red,
            fontWeight: FontWeight.bold,
          ),
        ),
      )

パスワードリセット画面にAppBarを追加する

このままのパスワードリセット画面だと前のログイン/パスワード画面に戻れなくなるので、AppBarを追加して、前の画面に戻れるようにします。
reset_password_screen.dartのコード

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class ResetPasswordScreen extends StatefulWidget {
  const ResetPasswordScreen({super.key});

  @override
  State<ResetPasswordScreen> createState() => _ResetPasswordScreenState();
}

class _ResetPasswordScreenState extends State<ResetPasswordScreen> {
  // メッセージ表示用
  String infoText = '';
  String mailAddress = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    //ここから追加
      appBar: AppBar(
        title: Text(
          'パスワードリセット',
        ),
      ),
    //ここまで追加
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // メールアドレス入力
              TextFormField(
                decoration: const InputDecoration(labelText: 'メールアドレス'),
                onChanged: (String value) {
                  mailAddress = value;
                },
              ),

              Container(
                padding: const EdgeInsets.all(8),
                // メッセージ表示
                child: Text(infoText),
              ),
              SizedBox(
                width: double.infinity,
                // ユーザー登録ボタン
                child: ElevatedButton(
                  child: const Text('パスワードリセット'),
                  onPressed: () async {
                    try {
                      final FirebaseAuth auth = FirebaseAuth.instance;
                      await auth.sendPasswordResetEmail(email: mailAddress);
                      setState(() {
                        infoText = "パスワードリセットメールを送信しました。";
                      });
                    } catch (e) {
                      setState(() {
                        infoText = "パスワードリセットメールの送信に失敗しました：${e.toString()}";
                      });
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

パスワードリセット画面

動作確認

パスワードリセット画面から任意のメールアドレスを入力して、「パスワードリセット」ボタンをタップします。
すると、「パスワードリセットメールを送信しました。」と表示されますので、入力したメールアドレスを確認します。
メールに添付されたURLをクリックして、パスワードリセット画面が表示されます(PC側)ので、新しいパスワードを入力して「保存」ボタンをクリックします。
パスワードが変わっているかアプリでログイン画面に戻って、変更したパスワードでログインしてみて、ログイン成功すればOKです

次はバリデーションチェックの実装を行なっていきたいかと思います。