【Flutter】firebaseでgoogleログインを実装するけど、全然簡単じゃなかった

firebaseとflutterのセットで簡単にユーザーログイン画面できますよーって話は有名ですが、
グーグルログインははまった。

そもそもあんまりネタが落ちていない。

完全な備忘録として記載する。

まずパッケージ。

firebase_auth: ^4.19.0
firebase_ui_auth: ^1.13.1
firebase_ui_oauth_google: ^1.3.1
firebase_core: ^2.28.0
firebase_dynamic_links: ^5.5.0
google_sign_in: ^6.2.1

あたりを入れている。
ただ、googleログインしたいなら以下あたりがあればいいはず。

firebase_ui_auth: ^1.13.1
firebase_ui_oauth_google: ^1.3.1
firebase_core: ^2.28.0

google_sign_inはflutter以外でも使えるようなプラグインらしい。

で、メイン関数の実装はこんな感じ

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  // Ideal time to initialize
  await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);

  FirebaseUIAuth.configureProviders([
    GoogleProvider(clientId: "firebaseのgoogle認証を有効にした画面のクライアントID入れる"),
  ]);

https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-auth/providers/oauth.md#google-sign-in

を見ると、なにやらGoogleProvider()の設定のところでもうボタン出ますからねーって言ってます。

Now all pre-built screens that support multiple providers (such as RegisterScreen, SignInScreen, ProfileScreen and others) will have a themed button.

SignInScreenにもう出ますからーっていってる。

で、ログイン画面を作る。

以下のサンプルソースをひっぱてきたんだが、これだと出なくて困っていたら、
providers: providers,
の部分がだめだったみたいで、

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';

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

    return MaterialApp(
      initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
      routes: {
        '/sign-in': (context) {
          return SignInScreen(
            providers: providers,
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
            ],
          );
        },
        '/profile': (context) {
          return ProfileScreen(
            providers: providers,
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
            ],
          );
        },
      },
    );
  }
}

以下のように変更したらちゃんと表示された。

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';

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

    return MaterialApp(
      initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
      routes: {
        '/sign-in': (context) {
          return SignInScreen(
            # providers: providers,
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
            ],
          );
        },
        '/profile': (context) {
          return ProfileScreen(
            # providers: providers,
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
            ],
          );
        },
      },
    );
  }
}

画面