Google Sign-In Flutter Integration for MacOS

Integrating Google Sign-In into your Flutter app is a great way to enhance user experience by offering a quick and easy authentication process. While setting this up for Android and iOS is well-documented, the macOS platform often gets overlooked. In this guide, we’ll walk you through the steps needed to seamlessly add Google Sign-In to your Flutter macOS app. Whether you’re expanding your existing Flutter project or starting fresh, this tutorial will equip you with everything you need to implement secure and reliable authentication for macOS users. Let’s dive in and get started!

Prerequisites :

Flutter : Obviously 😂
Firebase : To enable google sign in as a Authentication Method we need to add Google as a provider in your Firebase Project.
google_sign_in : A Flutter plugin for Google Sign In.

Step 1 : OSX Deployment Target

While the official google_sign_in package suggests to keep the minimum deployment target of 10.15+, but by default while creating a flutter app the minimum deployment for macos is set to 10.14, so let's start by changing this :

Navigate to your macos/Podfile file and simply change version as shown here:

 platform :osx, '10.15'

now open the macos directory in xcode and do the following:

click on Runner.
Select Info from the tabview
Set the `macOS Deployment Target` to 10.15.

Step 2 : OAuth client configuration in Google Cloud Console.

Create a Firebase project , add Google as an Auth Provider in the Authentication Section and then do the fun stuff (adding SHA, flutterfire_cli etc), once you're completely done setting up the project and initialising our Flutter App do :

visit the GCP dashboard
Select the Firebase project form the top left corner.
Click on APIs and Services
Select Credentials from the left panel.
Click on the Create Credentials button and proceed as follows:

Just give it a Name for identification and your app's bundle ID, which you can find here, then copy the Client ID and the IOS URL scheme.

Now open your Info.plist file `macos/Runner` and add the following key values

 <key>GIDClientID</key>
         <string>CLIENT ID</string>
         <key>CFBundleURLTypes</key>
         <array>
             <dict>
                 <key>CFBundleURLSchemes</key>
                 <array>
                     <string>iOS URL scheme</string>
                 </array>
             </dict>
         </array>

now replace the paste the copied values in the fields.

Lastly add these to your Release.entitlements and DebugProfile.entitlements files under `macos/Runner` to allow networking in your macos app from client side.
```
 <key>com.apple.security.network.client</key>
 <true />
```

Seems like a lot of work , but the hard part is over.

Let's now move towards the flutter side of things.

Step 3 : Flutter 😁

In your dependencies add google_sign_in: ^6.2.1 and firebase_core: ^3.3.0.
(Optional) : cd into your macos directory and run these commands
```
 pod repo update
 pod update
```

Edit your `main.dart` file.

 import 'package:flutter/material.dart';
 import 'firebase_options.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:google_sign_in/google_sign_in.dart';

 void main() {
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(MyApp());
 }

 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: SignInDemo(),
     );
   }
 }

 class SignInDemo extends StatefulWidget {
   @override
   _SignInDemoState createState() => _SignInDemoState();
 }

 class _SignInDemoState extends State<SignInDemo> {
   GoogleSignInAccount? _currentUser;

   final GoogleSignIn _googleSignIn = GoogleSignIn();

   @override
   void initState() {
     super.initState();
     _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {
       setState(() {
         _currentUser = account;
       });
     });
     _googleSignIn.signInSilently();
   }

   Future<void> _handleSignIn() async {
     try {
       await _googleSignIn.signIn();
     } catch (error) {
       print(error);
     }
   }

   Future<void> _handleSignOut() async {
     await _googleSignIn.disconnect();
   }

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: ConstrainedBox(
         constraints: const BoxConstraints.expand(),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             if (_currentUser != null)
               Column(
                 children: <Widget>[
                   ListTile(
                     leading: GoogleUserCircleAvatar(
                       identity: _currentUser!,
                     ),
                     title: Text(_currentUser!.displayName ?? ''),
                     subtitle: Text(_currentUser!.email),
                   ),
                   ElevatedButton(
                     onPressed: _handleSignOut,
                     child: Text('SIGN OUT'),
                   ),
                 ],
               )
             else
               Column(
                 children: <Widget>[
                   ElevatedButton(
                     onPressed: _handleSignIn,
                     child: Text('SIGN IN'),
                   ),
                 ],
               ),
           ],
         ),
       ),
     );
   }
 }

That's it, you've successfully implemented google signin in your macos app.

https://tenor.com/en-GB/view/thumbs-up-okay-ok-well-done-gif-13840394

Conclusion :

Conclusion:

By following this guide, you’ve successfully integrated Google Sign-In into your Flutter macOS application, bringing a smooth and secure authentication experience to your users. While macOS support in Flutter may not always be as straightforward as mobile platforms, taking the time to implement this feature ensures your app is versatile and user-friendly across devices. Now, your users can effortlessly sign in with their Google accounts, enhancing engagement and trust in your app. As Flutter continues to grow, mastering cross-platform integration like this is key to staying ahead.

Let me know your thoughts in the Comment Section.

Happy Coding !! Keep Building!

Resources used :

Easily Integrate Google Sign-In with Flutter on MacOS

Streamline Authentication in Your Flutter macOS App with Step-by-Step Instructions for Adding Google Sign-In

Table of contents

Prerequisites :

Step 1 : OSX Deployment Target

Step 2 : OAuth client configuration in Google Cloud Console.

Step 3 : Flutter 😁

Conclusion :