Flutter Firebase Authentication Tutorial: Part Two

Now let’s start the coding part,

1. Go to your pubspec.yaml file and add google_sign_in,get_it as the as a dependency.

We are going to use GetIt for dependency injection which service locator pattern to keep the logged-in state throughout our app screens.

Create a file named AuthService.dart and put the contents as below.

import 'package:flutter/foundation.dart';
import 'package:google_sign_in/google_sign_in.dart';
class AuthService extends ChangeNotifier {
  bool _isLoggedIn = false;
  late GoogleSignInAccount? _loggedInUser;
  GoogleSignIn googleSignIn = GoogleSignIn();
bool get isLoggedIn => _isLoggedIn;
  GoogleSignInAccount? get loggedInUser => _loggedInUser;
Future<bool> loginOutWithGoogle() async {
    try {
      await googleSignIn.signOut();
      _isLoggedIn = false;
      _loggedInUser = null;
      notifyListeners();
      return true;
    } catch (ex) {
      _isLoggedIn = true;
      notifyListeners();
      return false;
    }
  }
void setLoggedInUser(GoogleSignInAccount account) {
    this._loggedInUser = account;
    notifyListeners();
  }
Future<GoogleSignInAccount?> loginWithGoogle() async {
    return await googleSignIn.signIn();
  }
}

Create a file named NavigationService.dart and add the code as below.

import 'package:flutter/material.dart';
class NavigationService {
  final GlobalKey<NavigatorState> navigatorKey =
      new GlobalKey<NavigatorState>();
  Future<dynamic> navigateTo(String routeName) {
    return navigatorKey.currentState!.pushNamed(routeName);
  }
Future<dynamic> replaceTo(String routeName) {
    return navigatorKey.currentState!.pushReplacementNamed(routeName);
  }
void goBack() {
    return navigatorKey.currentState!.pop();
  }
}

Create a file named locator.dart and put the content’s as below.

import 'package:firebaseapp/authservice.dart';
import 'package:get_it/get_it.dart';
import 'homepage.dart';
import 'navigation_service.dart';
GetIt getIt = GetIt.instance;
void setupLocator() {
  getIt.registerLazySingleton(() => NavigationService());
}

Go to router.dart and add the code as below.

import 'package:firebaseapp/homepage.dart';
import 'package:firebaseapp/signin_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'googlesignin.dart';
class AppRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/signin':
        return MaterialPageRoute(builder: (_) => SigninPage());
      default:
        return MaterialPageRoute(
            builder: (_) => Scaffold(
                  body: Center(
                    child: Text('No route defined for ${settings.name}'),
                  ),
                ));
    }
  }
}

go to main.dart and add the code as below.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'homepage.dart';
import 'locator.dart';
import 'navigation_service.dart';
import "router.dart";
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  setupLocator();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Auth App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Homepage(),
      initialRoute: '/signin',
      navigatorKey: getIt<NavigationService>().navigatorKey,
      onGenerateRoute: AppRouter.generateRoute,
    );
  }
}

We have 2 widget pages , Homepage and SigninPage. Create the page as desired.

Create the signing page as below,

import 'package:firebaseapp/authservice.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'locator.dart';
class SigninPage extends StatefulWidget {
  @override
  _SigninPageState createState() => _SigninPageState();
}
class _SigninPageState extends State<SigninPage> {
  final authService = getIt.get<AuthService>();
  @override
  void initState() {
    super.initState();
    authService.addListener(update);
  }
void update() => setState(() => {});
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("TechBytesOnline Auth")),
      body: Center(
                child: ElevatedButton(
                  child: Text("Login with Google"),
                  onPressed: () {
                    authService.loginWithGoogle().then((value) {
                      authService.setLoggedInUser(value!);
                      Navigator.pushNamed(context, "/");
                    });
                  },
                ),
              ),
      ),
    );
  }
}

Here’s the code for Homepage,

import 'package:flutter/material.dart';
class Homepage extends StatelessWidget {
  const Homepage({Key key}) : super(key: key);
final authService=getIt<AuthService>().
  @override
  Widget build(BuildContext context) {
    return Container(
        child: authService.isLoggedIn
            ? Column(
                children: [
                  Image.network(authService.loggedInUser!.photoUrl!),
                  Text(authService.loggedInUser!.displayName!),
                  Text(authService.loggedInUser!.email),
                  TextButton(
                      onPressed: () {
                        authService.loginOutWithGoogle();
                      },
                      child: Text("Logout"))
                ],
              )
            : Text("Not Logged In")
  }
}

It’s everything you need to do to create a flutter app with google login.