Flutter Google SignIn Firebase Authentication
In this tutorial, I’ll walk you through adding Google authentication to Flutter applications using the Firebase Authentication plugin and display user’s profile picture.
Step 2: Now, register your project on https://console.firebase.google.com, follow the steps 1 to 4 to add Firebase to your android app, and don’t forget to enable Google sign-in method for your app under Authentication tab.
Step 3: Create a login screen which will have the sign-in button and on button pressed
signInWithGoogle(…) will be called which we will define in the state_widget.dart file.
Step 4: To set the state of the app when the user logs in successfully, use
setState(). In this tutorial, we will use
InheritedWidget to update the state and build content as the state of the app changes.
The InheritedWidget is a special Widget, that you put in the Widgets tree as a parent of another sub-tree.
If user is not logged-in already,
_buildContent() method in HomeScreen will be called and LoginScreen will be displayed as user property is set to null initially. When the user logs in successfully the state of the app will change and user property will store the Firebase user instance. Hence, home screen will be displayed.
signIn() will trigger a user account selection prompt. When the user confirms their account selection a
GoogleSignInAccount instance will be returned that will be used to authenticate the user with Firebase.
Step 5: Create a function called
signIntoFirebase() in auth.dart file that handles Firebase authentication and import:
signIntoFirebase(…)we first created the instance of the
GoogleSignInAuthentication that holds a reference to the authenticated user and access token. After getting the information we call
signInWithGoogle() from our
FirebaseAuth instance by passing accessToken and idToken from the instance of
GoogleSignInAuthentication. This is an asynchronous function and will return us a Future of the type
FirebaseUser which we will use to set the state of the app in state_widget.dart file.
Step 6: The
_buildContent(...) method in home.dart file is just used to update the UI when the user logs in successfully.
Step 7: Create UI for HomeScreen to show user’s profile data.
Step 1: Add iOS app to your project on Firebase and follow steps 1 and 2 to add Firebase to your iOS app.
The app will crash on iOS, just add the following code to the end your info.plist file in
/ios/Runnerfolder and copy REVERSE_CLIENT_ID from GoogleServices-Info.plist file.
and …. just do nothing, you have already setup your Flutter code.
Step 2: Run your iOS code in Xcode once.
And, there you go, adding social authentication to your Android and iOS app is just a game of 7 basic steps :)
The complete code for this sample can be found here: