Sign In With Google In Flutter Using GetX State Management

Hello guys,

In this article I’ll show you how to implement Sign-in-with-google in Flutter.

First we have to setup the connection with Firebase, so let’s start

Go to firebase console and add a new project to the firebase. Enter the project name and click on continue.

Then, you just click on the all checkboxes and create a project.

Wait for some time and this will create your project. Then you have to go to the “project settings” on click of “settings” icon at the top.

Project settings screen will open, Fill the support email field , click on android icon and continue.

Now , register your app by filling App name ,Application id & SHA-1 fingerprint. Then click on register app.

For reference, click on the link to know , how to generate SHA-1

Now just download the “google-services.json” file and put this inside “app” folder inside your project.

“Reference Folder Path => Your project>Android>App”

Click on next and add the following code snippet according to instructions provided to your build.gradle files. (project & app modules)

After adding these to your gradle files. Click on next, Yes you added firebase SDK.

Now, continue to console.

Don’t forget to enable the “Google” option under “sign-in-methods”. Go from the “authentication” menu.

Now we are ready.

Now just go to your studio and install these packages inside your :

pubspec.yaml

firebase_core: ^0.5.0
google_sign_in: ^4.0.14
firebase_auth: ^0.18.1

get dependency using

$ flutter pub get

After installing the packages , go to your “main.dart” file and add this line
await Firebase.initializeApp() like that.

void main() async {
  await Firebase.initializeApp();
  runApp(MyApp());
}

Now we have to make the view and controller file for GetX management and google-sign-in. Where view will be the loginPage and controller will be our view controller where all our business logic will remain.

Instead of using stateful widget. I’m using stateless widget for our login page as no need of stateful widget for now coz we are using getX. It will also make our code lightweight.

Our login_page.dart

class LoginPage extends StatelessWidget {
  final LoginController controller = Get.put(LoginController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            FlatButton(
              color: Colors.blue,
              onPressed: () => controller.loginWithGoogle,
              child: Center(
                  child: Text(
                "Login with google",
                style: TextStyle(color: Colors.white),
              )),
            )
          ],
        ),
      ),
    );
  }
}

Our view controller “LoginController” which extends the “GetxController.”

Also our login_controller.dart

class LoginController extends GetxController {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

  loginWithGoogle() async {
    try {
      final GoogleSignInAccount googleSignInAccount =
      await googleSignIn.signIn();
      final GoogleSignInAuthentication googleSignInAuthentication =
      await googleSignInAccount.authentication;
      final AuthCredential credential = GoogleAuthProvider.getCredential(
        accessToken: googleSignInAuthentication.accessToken,
        idToken: googleSignInAuthentication.idToken,
      );
      final authResult = await     _auth.signInWithCredential(credential);

      final User user = authResult.user;
      assert(!user.isAnonymous);
      assert(await user.getIdToken() != null);
      final User currentUser = _auth.currentUser;
      assert(user.uid == currentUser.uid);
      Get.toNamed('/homeView'); // navigate to your wanted page
      return;
    } catch (e) {
      throw (e);
    }
  }

  Future<void> logoutGoogle() async {
    await googleSignIn.signOut();
    Get.back(); // navigate to your wanted page after logout.
  }
  
}

Just copy the code snipped above to your files and we are all done, just run the application & enjoy sign-in-with-google. Here is all i can show you how to implement google-sign-in + GetX. Thanks for reading this article. I hope this article will help you to implement the related functionality

If you liked this article, don’t forget to Clap.

Happy Coding !!