挨拶
どうも、ぺんまるです。
最近アプリの個人開発をはじめたので、備忘録のためにこの記事を執筆しました。
正直、状態管理パッケージriverpodやMVCとMVVMなどのアーキテクチャなどよくわかっていないため、そこら辺を重視した備忘録記事も書きたいと思っています。
この記事の対象者
- Firebase Authenticationの初期設定が済んでいる、実際にサインアップやログインなどを実装している方
- go_routerパッケージで画面の遷移を実装している方
- riverpodの使い方がある程度わかる方
目的
個人開発を進めていく上でgo_routerやriverpodライブラリ、firebaseなどを利用していく上でちょっと手間取ったところを備忘録のために執筆しました。
やりたいことは
- アプリ立ち上げ時に画面をアカウントの認証状態(ログインしているか、ログアウトしているか)で画面を切り替えたい。
- ログアウト時にサインアップまたはログインする画面へ遷移させたい。
解決方法
今回はfirebaseAuthのインスタンスとログイン状態監視用のauthStateChangesProviderを作成しました。
なぜfirebaseAuthProviderをref.watchしているのかというとStreamProviderでfirebaseAuthの認証状態を監視しています。
認証状態が変更、つまりログインやログアウトが行われると、状態の変更を検知し、authStateChangesProviderを参照している全てのウィジェットが再描画されます。
// firebaseAuthのインスタンス
final firebaseAuthProvider = Provider<FirebaseAuth>((ref) => FirebaseAuth.instance);
// ログイン状態監視用
final authStateChangesProvider = StreamProvider<User?>((ref) {
final firebaseAuth = ref.watch(firebaseAuthProvider);
return firebaseAuth.authStateChanges();
});
次にgo_routerでの記述です。
final routerProvider = Provider(
(ref) {
final authState = ref.watch(authStateChangesProvider);
String initialLocation = FirebaseAuthScreen.routePath;
authState.whenData((user) {
initialLocation = user != null ? HomeScreen.routePath : FirebaseAuthScreen.routePath;
});
return GoRouter(
initialLocation: initialLocation,
routes: [
// 以下略
画面はサインアップやログイン画面のFirebaseAuthScreenとログイン後に表示するHomeScreenを用意します。
routerProviderを作成し、initialLocationに初期ページを設定しますが、そこにさきほどのauthStateChangesProviderを使って認証状態に応じて画面の遷移を行います。
authStateに先ほどのauthStateChangesProviderを監視する変数を代入します。
次にinitialLocation変数を用意します、初期値はFirebaseAuthScreenにします。
そして、whenDataと三項演算子を使って条件分岐をします。
whenDataメソッドはauthStateがAsyncValueオブジェクトなので非同期処理が利用可能になった、つまり、認証状態が取得できた場合により実行されるメソッドです。
条件分岐によりinitialLocationに認証状態によって画面がセットされます。
これにより、アプリ立ち上げ時などに認証状態によって遷移させたい画面を条件分岐させることができます。
また、StreamProviderなのでログイン後もログアウトなどの処理を行うと自動的にFirebaseAuthScreenへ遷移します。
これは参照しているrouterProviderに再描画が実行されるのでもう1度whenDataメソッドが実行されるためですね。
終わり
今回はFirebase Authenticationとgo_router、riverpodを使って認証状態に応じて画面の遷移を行いました。
実際はセキュリティの観点などからどうなのかといった疑問点はありますが、学習していく中で随時アップデートをしようと思います。
ここまで読んで頂き、ありがとうございました。
参考にさせていただいた記事さま