【Flutter】Firebase Authenticationを使ってログイン/ユーザー登録画面を作成する(その5)

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

# 更新履歴
2024.1.18 初回投稿
2024.1.27 誤字修正

## Firebaseプロジェクト側でパスワードリセットメールのテンプレートを変更する
1. Firebaseのプロジェクトショートカットから「Authentication」をクリックして「Templates」を選択します。![スクリーンショット 2024-01-18 15.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/63d1c21a-17f1-0b1b-2c6a-1ccd89ac9652.png)
2. テンプレート画面左下の「テンプレート言語」横の鉛筆マークをクリックして、テンプレート言語を「日本語」に設定します。![スクリーンショット 2024-01-18 14.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/80c8b2ea-b7aa-43f5-c461-6ea210919abf.png)
3. テンプレートを編集したい場合は「送信元」横の鉛筆マークをクリックして、編集できます。![スクリーンショット 2024-01-18 16.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/1ccae9ad-2fc3-4f08-94fe-cada32d1ae56.png)
3. 編集したら保存ボタンを押して完了です。

## パスワードリセット画面を作成する。
1. 「reset_password_screen.dart」というファイル名でファイルを作成します。
1. 最初に作成したユーザ登録画面からWidgetをコピーしてきて、メールアドレスのフィールドのみ残しておきます。
1. 以下のようになります。
    ```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(
          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),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    
    ```
1. 次に、パスワードリセットボタンと処理をメッセージ表示Containerの下に追加します。
    ```dart
        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()}";
                  });
                }
              },
            ),
          )
    ```

## 最初のログイン/ユーザー登録画面にパスワードリセットボタンを追加します。
- ログアウトボタンの下に以下のコードを追加します。
    ```dart
        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のコード
```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()}";
                      });
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

```
- パスワードリセット画面
![Simulator Screenshot - iPhone 15 Plus - 2024-01-18 at 15.53.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/e5cf56a7-5bb9-a827-9cae-1a8056a3c97e.png)

## 動作確認
1. パスワードリセット画面から任意のメールアドレスを入力して、「パスワードリセット」ボタンをタップします。
1. すると、「パスワードリセットメールを送信しました。」と表示されますので、入力したメールアドレスを確認します。
![スクリーンショット 2024-01-18 15.19.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/133404a3-0d92-43a5-d4ba-306b2fedb4b4.png)
1. メールに添付されたURLをクリックして、パスワードリセット画面が表示されます(PC側)ので、新しいパスワードを入力して「保存」ボタンをクリックします。![スクリーンショット 2024-01-18 15.19.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/615b3a2b-c100-2767-38b4-a928e47a6a12.png)
1. パスワードが変わっているかアプリでログイン画面に戻って、変更したパスワードでログインしてみて、ログイン成功すればOKです

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