Flutter Auth with Google

Foto de Madera creado por mrsiraphol

The login with Google button is very used for several apps. This is escential if you want to use authentication in your app and avoid use username and password.

Note: there are a lot of ways to make an authentication with Google. This is one of them WITHOUT use firebase.

1- Register your app in Google Console

You must follow these steps to setup your Android/iOS app with Google.

Android integration

To access Google Sign-In, you’ll need to make sure to register your application.

You’ll need to enable the Google People API.

iOS integration

1. First register your application.
2. Open Xcode. You’ll have to paste this into Xcode to properly register GoogleServices-Info.plist.
3. Select GoogleServices-Info.plist from the file manager and drag that file into the Runner directory, [my_project]/ios/Runner/GoogleServices-Info.plist.
4. A dialog will show up and ask you to select the targets, select the Runner target.
5. Then add the CFBundleURLTypes attributes below into the [my_project]/ios/Runner/Info.plist file.

2- Install google_sign_in plugin

We must install google_sign_in plugin in first step. So, go to your pubspec.yaml file (in the root of your project) and add the following line in dependencies: section

google_sign_in: "^3.0.4"

Note: check the latest version. I’m using 3.0.4 but you must use the latest to keep update with more recently version

3- Use GoogleSignIn object

Now, we have to setup the GoogleSignIn object to start with the authentication with Google.

GoogleSignIn _googleSignIn = new GoogleSignIn(
   scopes: [
      'email',
      'https://www.googleapis.com/auth/contacts.readonly',
   ],
);

The main scope is get the contact information as read-only.

The idea is check if the app is already logged in (in case the auth with Google was executed in the past). So, we should listen for any changes on the “current user”. To do this, we have to add a listener to check those changes:

If account != null the app is logged in and you have to open your home screen (or the next screen of your flow). Otherwise, you have to do nothing and wait for user interaction (we’ll see the UI later).

After that, you have to execute a silently login in order to do a login without user interaction. The callback will return in the previous listener that we added. So, to execute a silently login we have add the following code:

_googleSignIn.signInSilently().whenComplete(() => dismissLoading());

Note that signInSilently() returns a Future so we can call to whenComplete(...) to know when this execution is finished. Then we can dismiss some loading.

This is the full code:

After that, we have to create a function that executes the signIn action on-demand. This function will be called from UI (in the case you are using it in another class).

We simply call to _googleSignIn.signIn() with a await modifier to wait the execution. The result will be listened for the previous callback that we have set.

4- Build UI Login button

We can make our own login button or find someone for there. I will post here my own implementation (very very basic 😂 but works)

When the user taps on this button, it will call to doLogin function that we defined previously.

Conclusion

I know that there are more ways to do the same thing, but this one worked for me and it does not have any complication. Make sure to register the SHA-1 properly, I had some headaches because I didn’t register it in a wrong way.

Feel free to comment or ask any questions! #LovingFlutter :)

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.