Flutterを学ぶ③ ーfirebase_authー

前回はfirebase_analyticsをインストールして、作成したflutterのプロジェクトからanalytics.logEventでfirebaseコンソールに実際にイベントが取れてアプリにfirebaseが組み込まれているか確認ができました。

今回は認証を組み込みたいと思います。

まずはfirebaseのコンソールで

Authentication Sign-in methodでメール・パスワードを有効にします。

UIは簡単に実装したいのでfirebase_ui_authをインストールしてしまいます。

flutter pub add firebase_ui_auth

基本は以下のExampleを参考にしていますが、作りたいものに合わせて少し変更しています。

https://pub.dev/packages/firebase_ui_auth

lib/main.dartを以下に変更しました。

※importは省略しています。

class MyApp extends StatelessWidget {　Widget build内を以下に

return MaterialApp(
  initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
  routes: {
    '/sign-in': (BuildContext context) => SignIn(),
     '/profile': (BuildContext context) => Profile(),
  },
);

lib/sign-in.dart　lib/profile.dart　を作成しました。

class SignIn extends StatelessWidget {

  const SignIn({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('sign in.')),
        body:
          SignInScreen(
            providers: [EmailAuthProvider()],
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
        ])
      ),
      routes: {
        'sign-in': (BuildContext context) => const SignIn(),
        '/profile': (BuildContext context) => const Profile(),
      }
    );
  }
}

class Profile extends StatelessWidget {

  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('profile.')),
        drawer: Drawer(
          child: ListView(
            children: const[
              DrawerHeader(
                  decoration: BoxDecoration(color: Colors.yellowAccent),
                  child: Text("メニュー")),
              ListTile(
                title: Text("プロフィール"),
                subtitle: Text("test"),
              ),
              ListTile(title: Text("登録"),),
              ListTile(title: Text("一覧"),),
            ]
          )
        ),
        body:
        ProfileScreen(
            providers: [EmailAuthProvider()],
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
        ])
      ),
      routes: {
        '/sign-in': (BuildContext context) => SignIn(),
        '/profile': (BuildContext context) => Profile(),
      }
    );
  }
}

これで

ログインとプロフィールページ（他ログアウトにパスワード忘れ、アカウント削除）が実装できました。ログイン後に今回作成したい機能のページを選択して遷移したいのでハンバーガーメニューを追加しています。

次はハンバーガーメニューから作りたい機能を実装していきたいと思います。