Google Login in Flutter

Google Login is one of the methods to get users into the application. In this article we shall be discussing how to log in with google in a flutter application by creating a sample application that works as follows:

Before coding, we need to create an application in the Firebase Console.

1. Register the Android application

Input your package name.

For getting SHA1 key, go to the android folder from the terminal as follows:

cd android

And then run the following code.

gradlew signingReport

If this did not work then

./gradlew signingReport

Wait for the compilation to finish and your SHA keys should be printed out for you.

Find the SHA1 and paste it into your Firebase Application Form.

Then you add the dependencies in your android/build.gradle file.

dependencies {
classpath 'com.google.gms:google-services:4.3.12'
}

Again in your android/app/build.gradle file. Add the following dependencies.

implementation platform('com.google.firebase:firebase-bom:30.2.0')
implementation 'com.google.firebase:firebase-analytics'

Then download the google-services.json file. Put it inside the android/app folder.

2. For IOS App

Please go to the Firebase console application dashboard and click on add iOS icon to set up the iOS app and fill in the configuration which has almost similar steps as Android.

Download GoogleService-Info.plist file and put it in a Runner folder.

Inside the Info.plist add the following code.

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>{YOUR REVERSE CLIENT ID}</string>
</array>
</dict>
</array>

YOUR REVERSE CLIENT ID: REVERSED_CLIENT_ID from GoogleService-Info.plist

In the next step, you need to fill out the OAuth consent form.

App Name: {Your App Name}

User support email: {Your email address associated with this console}

Application home page : https://<Your Authorized domains>

Application privacy policy link : https://<Your Authorized domains>

Application terms of service link : https://<Your Authorized domains>

Also, you need to activate the Google Login Authentication from your console.

For that, you need to click on Authentication from the menu inside your project dashboard.

Select the Sign-in method tab.

Then select Google.

Enable it and then click on Save.

Photo by krakenimages on Unsplash

After all the configurations let’s move to code.

First of all, we need to add the package in the pubsec.yaml file.

google_sign_in: ^5.3.3
fluttertoast: ^8.0.9

Now we implement the google sign in method.

Future<GoogleSignInModel> googleSignInProcess(BuildContext context) async {
GoogleSignIn googleSignIn = GoogleSignIn();
GoogleSignInAccount? googleUser = await googleSignIn.signIn();
GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;
String? token = googleAuth?.idToken;
GoogleSignInModel socialGoogleUser = GoogleSignInModel(
displayName: googleUser?.displayName,
email: googleUser?.email,
photoUrl: googleUser?.photoUrl,
id: googleUser?.id,
token: token);
Fluttertoast.showToast(
msg: "Welcome",
backgroundColor: Colors.green,
textColor: Colors.white);
return socialGoogleUser;
}

This method is responsible for signing in with google and it returns the Future.

This method is called from the LoginScreen as :

onPressed: () {
googleSignInProcess(context);
}

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, Youtube, BuyMeACoffee, and Instagram.

Visit: Flutter Junction

Contribute: BuyMeACoffee

Conclusion

I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.

If you learned something new or want to suggest something then please let me know in the comment.

If you loved the article click on 👏 icon which provides motivation on delivering you all the new things.

Also, follow to get updated on exciting articles and projects.

Learning by sharing gives a great impact on the learning process and makes the community bigger and bigger.

Sharing is a magnet that attracts other enthusiasts toward you.

Hence, let's take a small step toward making our learning community bigger.

Share this article with your friends or tweet about the article if you loved it.

Get full at:

GitHub - nbnD/google_login: Google login in flutter