事前準備
Firebaseプロジェクトを作成し、アプリリポジトリを接続する。特にこだわりがなければ、firebase_analyticsを導入して動作確認するのがオススメ。
FirebaseAuthの準備
Firebaseのコンソールを開き、Authを有効にする。Authはログインプロバイダを複数提供しているので、今回はその中からメールログインを選択して有効にする。
ライブラリを導入
$ flutter pub add firebase_auth $ flutter pub add firebase_ui_auth $ flutterfire configure
アプリにメールログイン画面を追加する
アプリ起動時にプロバイダの設定処理を呼び出す
main.dart
Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); FirebaseUIAuth.configureProviders([ EmailAuthProvider(), // 利用するログインプロバイダを設定する。今回はメールのみ ]); runApp(const MyApp()); }
firebase_ui_auth
がSignInScreen
を提供しているのでそれを使う。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'), ), ); }), ], ), ); } }