FlutterFire UI — Simplifying Social Logins in Flutter
Social authentication is a multi-step authentication flow, allowing you to sign a user into an account or link them with an existing one.
With mobile apps emerging everyday more than ever, apps with social logins have skyrocketed. Social logins ease the user experience in apps by avoiding extra steps of authentication.
What is FlutterFire UI and how is it different?
FlutterFire UI for Auth provides a simple and easy way to implement authentication in your Flutter app. The library provides fully featured UI screens to drop into new or existing applications, along with lower level implementation details for developers looking for tighter control.
FlutterFire UI provides ready to use UI for Login, Signup and Forgot password.
Steps:
- Create a new project and run the following command:
curl -sL https://firebase.tools | bashThis command installs Firebase CLI which is used to run firebase commands from the project terminal.
2. Add flutterfire_ui to pubspec.yaml, a package with widgets and utilities designed to help you build and integrate your user interface with Firebase.
flutter pub add flutterfire_ui3. Now that the dependency is installed, let's activate the FlutterFireCLI
dart pub global activate flutterfire_cliwhich gives you a warning with a string, we can either add it along with other path variables for use in future projects or simply run in terminal for this particular project.
4. Next step is to either create a new Firebase project or select an existing one. Run the following command:
flutterfire configureIn case you're not logged in to firebase, you can run firebase login which will then ask you to authenticate. Make sure to follow step 3 after login.
5. Let's create a new project and call it flutterfireuiauth, make sure to follow the naming convention(no underscore).
Let's enable the social logins on android, ios and web platforms. Next, you will be asked to enter the ios bundle ID, enter the one you prefer. There is no such configurations at this step for android and web platforms.
Once the files are created, click yes to proceed.
6. After few seconds, the project will be created. Navigate to the firebase dashboard to see the project and the platform configurations
7. That completes all the initial steps and we can finally start coding! In main.dart, initialise Firebase by adding the following code
Import firebase_core package. Remove the default MyHomePage widget and create a new widget called AuthGate such that MyApp returns AuthGate()
8. The AuthGate() is a stateless widget that is used to check the state of the user. It returns Stream of User object (from Firebase Auth package) which tells if a user is logged in or not.
The authStateChanges API returns a Stream with either the current user (if they are signed in), or null if they are not.
If the user is logged in, the snapshot will contain the User instance, or null if the user is not logged in. The snapshot.hasData property can be checked to take the user to SignInScreen in case they are not logged in.
builder: (context, snapshot) {// User is not signed inif (!snapshot.hasData) {// ...}// Render your application if authenticatedreturn HomeScreen();},
9. FlutterFire UI for Auth currently supports the following providers:
but in this article, I will explain about the email/password provider and Google SignIn. I will include the others in a future article.
Email/Password Provider
- Let us start by implementing the EmailProvider, edit the providerConfigs parameter of SignInScreen by providing the EmailProvider
providerConfigs: [EmailProviderConfiguration()],For android: In [project-name]/android/app/build.gradle, I had to change minSdkVersion to 19 and enable the multiDexEnabled
minSdkVersion 19multiDexEnabled true
Hot restart the app and you should now see Sign In Screen which also takes you to Register screen and Forgot Password screen as well.
2. In order to start using the authentication service, let's first enable the Email provider in firebase
Your app should now open to a Sign in screen by default.
This is the code to my HomeScreen(), a Stateless widget that also contains the SignOutButton.
Let us begin by registering a user,
Register:
Enter the credentials for the new user and upon successful registration the user is taken to the HomeScreen()
The user will be recorded in the list of users tab in Firebase
Login:
Enter the registered user credentials and and upon successful authentication the user is taken to the HomeScreen()
Upon clicking the SignOutButton the user will be taken back to the SignInScreen.
In order to access User credentials, we can pass the snapshot.data which contains user information to the HomeScreen()
This is how we can implement the Email/Password authentication using FlutterFire UI.
Google Provider
- In order to support Google as a provider, we need to first install the official
google_sign_inplugin, also, follow the iOS integration for the plugin which requires the GoogleService-Info.plist file to be downloaded from Firebase under the iOS app and paste the code into Info.plist. - Enable Google Provider in Firebase
3. Drag and drop the GoogleService-Info.plist file to [project-name]/ios/Runner folder.
4. Copy the CLIENT_ID string and paste it in AuthGate() as clientId parameter and also replace the REVERSED_CLIENT_ID that was added in Info.plist in previous step.
Stop the app completely and run again.
3. At this point, the iOS app should run perfectly fine.
As for android, the next step is crucial, if you skip the next step, you will get an error in the UI saying “An unknown error occurred”.
The additional step for android is adding SHA keys. Get the project’s SHA keys by running the following command in terminal:
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass androidAdd the SHA keys in Firebase under android app.
Stop the app completely and run again.
The android app should also run perfectly fine.
And that is how we can configure Email and Google social login with the aid of FlutterFire UI. This is an excellent package when you don’t want to spend more time and effort on the social authentication part of your app.
Please note that as of 18th April, 2022, FlutterFire UI is still in beta and is subject to change.
Feel free to leave a comment and share as much if you found it helpful!
