FirebaseにOTPコードを送信し、OTPコードが合っていた場合にユーザー名入力画面に飛ぶといった挙動について

実現したいこと

Flutter × Firebase開発においてユーザー認証の処理の仕方、コードの書き方を学び期待している挙動を得たい。

前提

Flutter × Firebase開発を学習しており、ユーザー認証の実装中です。

発生している問題・エラーメッセージ

FirebaseにOTPコードを送信し、OTPコードが合っていた場合にユーザー名入力画面に飛ぶといった挙動を得たいが、その通りになっていない。

該当のソースコード

verify_number.dart
1import 'package:cupertino_chat_app/screens/login/user_name.dart';
2import 'package:firebase_auth/firebase_auth.dart';
3import 'package:flutter/cupertino.dart';
4import 'package:flutter/foundation.dart';
5
6enum Status { waiting, error }
7
8class VerifyNumber extends StatefulWidget {
9  final String number;
10  const VerifyNumber({super.key, required this.number});
11
12  @override
13  State<VerifyNumber> createState() => _VerifyNumberState(number);
14}
15
16class _VerifyNumberState extends State<VerifyNumber> {
17  final String phoneNumber;
18  Status? _status;
19  late String _verificationId = "";
20  final _textEditingController = TextEditingController();
21  final FirebaseAuth _auth = FirebaseAuth.instance;
22
23  _VerifyNumberState(this.phoneNumber);
24
25  @override
26  void initState() {
27    super.initState();
28    _verifyPhoneNumber();
29  }
30
31  Future _verifyPhoneNumber() async {
32    _auth.verifyPhoneNumber(
33        phoneNumber: phoneNumber,
34        verificationCompleted: (phoneAuthCredential) async {},
35        verificationFailed: (verificationFailed) async {},
36        codeSent: (verificationId, resendingToken) async {
37          setState(() {
38            this._verificationId = verificationId;
39          });
40        },
41        codeAutoRetrievalTimeout: (codeAutoRetrievalTimeout) async {});
42  }
43
44  Future _sendCodeToFirebase({String? code}) async {
45    if (_verificationId != null) {
46      var credential = PhoneAuthProvider.credential(
47          verificationId: _verificationId, smsCode: code!);
48
49      await _auth
50          .signInWithCredential(credential)
51          .then((value) {
52            Navigator.push(
53                context, CupertinoPageRoute(builder: (context) => UserName()));
54          })
55          .whenComplete(() {})
56          .onError((error, stackTrace) {
57            setState(() {
58              _textEditingController.text = "";
59              _status = Status.error;
60            });
61          });
62    }
63  }
64
65  @override
66  Widget build(BuildContext context) {
67    return CupertinoPageScaffold(
68      navigationBar: const CupertinoNavigationBar(
69        middle: Text("Verify Number"),
70        previousPageTitle: "Edit Number",
71      ),
72      child: _status != Status.error
73          ? Column(
74              mainAxisAlignment: MainAxisAlignment.center,
75              crossAxisAlignment: CrossAxisAlignment.center,
76              children: [
77                Center(
78                  child: Text(
79                    "OTP verification",
80                    style: TextStyle(
81                      color: const Color(0xFF08C187).withOpacity(0.7),
82                      fontSize: 30,
83                    ),
84                  ),
85                ),
86                const Text(
87                  "Enter OTP sent to",
88                  style: TextStyle(
89                    color: CupertinoColors.secondaryLabel,
90                    fontSize: 20,
91                  ),
92                ),
93                Text(phoneNumber),
94                CupertinoTextField(
95                  onChanged: (value) async {
96                    if (kDebugMode) {
97                      print(value);
98                    }
99                    if (value.length == 6) {
100                      _sendCodeToFirebase(code: value);
101                    }
102                  },
103                  textAlign: TextAlign.center,
104                  style: const TextStyle(letterSpacing: 30, fontSize: 30),
105                  maxLength: 6,
106                  controller: _textEditingController,
107                  keyboardType: TextInputType.number,
108                  autofillHints: const <String>[AutofillHints.telephoneNumber],
109                ),
110                Row(
111                  mainAxisAlignment: MainAxisAlignment.center,
112                  children: [
113                    const Text("Didn't receive the OTP?"),
114                    CupertinoButton(
115                        child: const Text("RESEND OTP"),
116                        onPressed: () async {
117                          setState(() {
118                            _status = Status.waiting;
119                          });
120                          _verifyPhoneNumber();
121                        }),
122                  ],
123                ),
124              ],
125            )
126          : Column(
127              mainAxisAlignment: MainAxisAlignment.center,
128              crossAxisAlignment: CrossAxisAlignment.center,
129              children: [
130                Center(
131                  child: Text(
132                    "OTP verification",
133                    style: TextStyle(
134                      color: const Color(0xFF08C187).withOpacity(0.7),
135                      fontSize: 30,
136                    ),
137                  ),
138                ),
139                const Text("The code used is invalid!"),
140                CupertinoButton(
141                  child: const Text("Edit Number"),
142                  onPressed: () => Navigator.pop(context),
143                ),
144                CupertinoButton(
145                  child: const Text("Resend Code"),
146                  onPressed: () async {
147                    setState(
148                      () {
149                        _status = Status.waiting;
150                      },
151                    );
152                    _verifyPhoneNumber();
153                  },
154                ),
155              ],
156            ),
157    );
158  }
159}

user_name.dart
1import 'package:flutter/cupertino.dart';
2
3class UserName extends StatelessWidget {
4  final _text = TextEditingController();
5  UserName({super.key});
6
7  @override
8  Widget build(BuildContext context) {
9    return CupertinoPageScaffold(
10      child: Column(
11        crossAxisAlignment: CrossAxisAlignment.center,
12        mainAxisAlignment: MainAxisAlignment.center,
13        children: [
14          const Text("Enter your name"),
15          Padding(
16            padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 55),
17            child: CupertinoTextField(
18              textAlign: TextAlign.center,
19              style: const TextStyle(fontSize: 25),
20              maxLength: 15,
21              controller: _text,
22              keyboardType: TextInputType.name,
23              autofillHints: const <String>[AutofillHints.name],
24            ),
25          ),
26        ],
27      ),
28    );
29  }
30}
31

edit_number.dart
1
2import 'package:cupertino_chat_app/components/logo.dart';	
3	import 'package:cupertino_chat_app/screens/login/select_country.dart';
4	import 'package:cupertino_chat_app/screens/login/verify_number.dart';
5	import 'package:flutter/cupertino.dart';
6	
7	class EditNumber extends StatefulWidget {
8	const EditNumber({super.key});
9	
10	@override
11	State<EditNumber> createState() => _EditNumberState();
12	}
13	
14	class _EditNumberState extends State<EditNumber> {
15	final _enterPhoneNumber = TextEditingController();
16	Map<String, dynamic> data = {"name": "Japan", "code": "+81"};
17	Map<String, dynamic> dataResult = {};
18	@override
19	Widget build(BuildContext context) {
20	return CupertinoPageScaffold(
21	navigationBar: const CupertinoNavigationBar(
22	middle: Text("Edit Number"),
23	previousPageTitle: "Back",
24	),
25	child: Column(
26	crossAxisAlignment: CrossAxisAlignment.center,
27	mainAxisAlignment: MainAxisAlignment.center,
28	children: [
29	Row(
30	children: [
31	const Logo(width: 80.0, height: 80.0, radius: 30.0),
32	Expanded(
33	child: Text(
34	"Verification・one step",
35	style: TextStyle(
36	color: const Color(0xFF08C187).withOpacity(0.7),
37	fontSize: 28,
38	),
39	),
40	),
41	],
42	),
43	Text(
44	"Enter your phone number",
45	style: TextStyle(
46	color: CupertinoColors.systemGrey.withOpacity(0.7),
47	fontSize: 28,
48	),
49	),
50	Row(
51	children: [
52	Expanded(
53	child: CupertinoListTile(
54	onTap: () async {
55	dataResult = await Navigator.push(
56	context,
57	CupertinoPageRoute(
58	builder: (context) => const SelectCountry(),
59	),
60	);
61	setState(() {
62	data = dataResult;
63	});
64	},
65	title: Text(
66	data["name"],
67	style: const TextStyle(
68	color: Color(0xFF08C187),
69	),
70	),
71	trailing: const Icon(
72	CupertinoIcons.right_chevron,
73	color: Color(0xFF08C187),
74	),
75	),
76	),
77	],
78	),
79	Padding(
80	padding: const EdgeInsets.all(8.0),
81	child: Row(
82	children: [
83	Padding(
84	padding: const EdgeInsets.only(right: 6.0),
85	child: Text(
86	data["code"],
87	style: const TextStyle(
88	fontSize: 25,
89	color: CupertinoColors.secondaryLabel,
90	),
91	),
92	),
93	Expanded(
94	child: CupertinoTextField(
95	placeholder: "Enter your phone number",
96	controller: _enterPhoneNumber,
97	keyboardType: TextInputType.number,
98	style: const TextStyle(
99	fontSize: 25,
100	color: CupertinoColors.secondaryLabel,
101	),
102	),
103	),
104	],
105	),
106	),
107	const Text(
108	"You will receive an activation code in short time",
109	style: TextStyle(
110	color: CupertinoColors.systemGrey,
111	fontSize: 15,
112	),
113	),
114	Padding(
115	padding: const EdgeInsets.symmetric(vertical: 40),
116	child: CupertinoButton.filled(
117	child: const Text("Request code"),
118	onPressed: () {
119	Navigator.push(
120	context,
121	CupertinoPageRoute(
122	builder: (context) => VerifyNumber(
123	number: data["code"]! + _enterPhoneNumber.text,
124	),
125	),
126	);
127	},
128	),
129	),
130	],
131	),
132	);
133	}
134	
135

試したこと

ユーザー認証の処理の仕方を記述しているのはverify_number.dartなので、
数回にわたり見直し、Firebaseの初期設定がうまくいっていない可能性も考えられたので、
Firebaseの設定も見てみたが問題解決のための決定的なものは得られませんでした。
おそらく、Firebaseの認証あたりが問題だと考えています。
三日三晩自分なりにできることは尽くしましたが、問題解決にいたらなかったので有識者のお知恵をお借りしたいです。

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1
22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
(Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability