【Flutter】Firebase ログイン機能を状態管理するなら

こんにちは、タオルです。

続き
https://zenn.dev/yosefstar/articles/bf96bd8b6f1221

Firebaseを使っていて、ログイン機能を状態管理するなら、FirebaseAuthStateが便利です。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'auth_state_notifier.g.dart';

@riverpod
class AuthStateNotifier extends _$AuthStateNotifier {
  @override
  Stream<User?> build() {
    // FirebaseAuthのauthStateChangesをリッスンし、ユーザーの状態変更を監視
    return FirebaseAuth.instance.authStateChanges();
  }
}

FirebaseAuthStateはユーザーのログイン状態を保持しています。

ログイン状態があれば、ログイン入力をスキップ。なければ、ログイン画面入力ページに遷移。

import 'package:flutter/material.dart';
import 'package:flutter_question_answer/Pages/dashboard.dart';
import 'package:flutter_question_answer/Pages/home_page.dart';
import 'package:flutter_question_answer/auth_state_notifier.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Consumer(
          builder: (context, ref, child) {
　　　　　　　///　ここでfirebaseauthStateの監視を定義
            final userAsyncValue = ref.watch(authStateNotifierProvider);

            WidgetsBinding.instance.addPostFrameCallback((_) {
              userAsyncValue.maybeWhen(
                data: (user) {
                  if (user != null) {
                    Navigator.pushReplacement(
                      context,
                      PageRouteBuilder(
                        pageBuilder: (context, animation, secondaryAnimation) => HomePage(),
                        transitionsBuilder: (context, animation, secondaryAnimation, child) {
                          return FadeTransition(opacity: animation, child: child);
                        },
                        transitionDuration: const Duration(milliseconds: 500),
                      ),
                    );
                  } else {
                    Navigator.pushReplacement(
                      context,
                      PageRouteBuilder(
                        pageBuilder: (context, animation, secondaryAnimation) => DashboardPage(),
                        transitionsBuilder: (context, animation, secondaryAnimation, child) {
                          return FadeTransition(opacity: animation, child: child);
                        },
                        transitionDuration: const Duration(milliseconds: 500),
                      ),
                    );
                  }
                },
                orElse: () => const SizedBox.shrink(),
              );
            });

            return const SizedBox.shrink();
          },
        ),
      ),
    );
  }
}

ログインするか、ログアウトするか

 Consumer(
              builder: (context, ref, child) {
                // authStateProviderから認証状態を監視
                final userAsyncValue = ref.watch(authStateNotifierProvider);

                return userAsyncValue.when(
                  data: (User? user) {
                    if (user == null) {
                      // ユーザーがログインしていない場合、新規登録ボタンを表示
                      return ElevatedButton(
                        onPressed: () {
                          // 新規登録処理をここに実装
                        },
                        child: const Text('新規登録'),
                      );
                    } else {
                      // ユーザーがログインしている場合、ログアウトボタンを表示
                      return ElevatedButton(
                        onPressed: () async {
                          await FirebaseAuth.instance.signOut();
                        },
                        child: const Text('ログアウト'),
                      );
                    }
                  },
                  loading: () => const CircularProgressIndicator(),
                  error: (error, stack) => const Text('エラーが発生しました'),
                );
              },
            ),