hamburger-tech-nits

主にプログラミングのNITSな話

Flutterアプリでfirebase_ui_authを使ってメールログインを追加する

事前準備

firebase.google.com

Firebaseプロジェクトを作成し、アプリリポジトリを接続する。特にこだわりがなければ、firebase_analyticsを導入して動作確認するのがオススメ。

FirebaseAuthの準備

Firebaseのコンソールを開き、Authを有効にする。Authはログインプロバイダを複数提供しているので、今回はその中からメールログインを選択して有効にする。

ライブラリを導入

$ flutter pub add firebase_auth
$ flutter pub add firebase_ui_auth
$ flutterfire configure

pub.dev

アプリにメールログイン画面を追加する

アプリ起動時にプロバイダの設定処理を呼び出す

main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  FirebaseUIAuth.configureProviders([
    EmailAuthProvider(),  // 利用するログインプロバイダを設定する。今回はメールのみ
  ]); 
  runApp(const MyApp());
}

firebase_ui_authSignInScreenを提供しているのでそれを使う。AuthStateChangeActionのコールバックでログイン後の処理を呼び出す。今回はログイン後にサンプル画面に遷移する

my_app.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final providers = [EmailAuthProvider()];

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SignInScreen(
        providers: providers,
        actions: [
          AuthStateChangeAction<SignedIn>((context, state) {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) =>
                    const MyHomePage(title: 'Flutter Demo Home Page'),
              ),
            );
          }),
        ],
      ),
    );
  }
}

起動後の画面。サインインだけでなくサインアップも利用可能

サインアップ後はFirebase上でアカウントを確認できる