Firebase authentication: Overview and how to use it in Flutter

Authentication is undoubtedly one of the most important things in eCommerce application development. As a result, most Flutter applications in the world today need Firebase authentication for retrieving users’ identities. This is because knowing a user’s identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user’s devices.

Firebase authentication

The authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend. So now, in this article, we – ArrowHiTech would like to introduce to you guys the complete guide of Firebase authentication, from the overview to the usage in Flutter app development. Let’s go!

What is Firebase authentication?

Firebase authentication definition
Firebase authentication definition

To put it in the most simple way, Firebase Authentication makes it easy for developers to build secure authentication systems and enhances the sign-in and onboarding experience for users. This provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook, and Twitter, and more.

How does this work?

In order to sign a user into your Flutter app, first, you have to get some pieces of information from your targeted users. These can be the user’s email address and password, or an OAuth token from a federated identity provider. Then, you pass those things to the Firebase Authentication SDK. The backend services will then verify them and return a response to the client as a result. 

So, after signing in successfully, you can have access to the user’s basic information, and you can control the user’s access to data stored in other Firebase products. You can also use the provided authentication token to verify the identity of users in your own backend services. 

Authentication workings

A friendly reminder: By default, authenticated users can read and write data to the Firebase Realtime Database and Cloud Storage. You can control the access of those users by modifying these things.

Where can we start building Firebase authentication?

Supposedly, you’re building a new app or adding sign-in to an existing app, Firebase has libraries and services that can help you implement secure authentication without having to build the authentication backend yourself. Firebase Authentication is a complete backend solution for signing in with passwords, federated identity providers, email links, and text messages.

There are two situations when we encounter this case:

#1. A drop-in solution that’s easy to use

So, the fastest way to add authentication to an app is to use FirebaseUI Auth, a drop-in UI library. FirebaseUI implements complete user flows for all of Firebase Authentication’s supported sign-in methods.

Because FirebaseUI Auth is a drop-in solution, it has a specific UX that might not meet your needs. If you want to change the UX, you can fork the library, which is open source, and use your own version. However, for substantially different sign-in flows, this is quite not a fine solution, as for you can’t be able to take full control over the sign-in sequence.

#2. Total control over the sign-in sequence

For more control over your app’s sign-in experience, you can implement your own authentication flows and use the Firebase SDK to work with Firebase’s authentication services. For example, build your own email address and password flow or Google Sign-in flow, and pass the user’s email address and password or Google ID token to Firebase to authenticate the user.

How to use Firebase authentication in Flutter app development?

User instances are independent of Firebase Authentication instances, so you can have several references to different users within the same context and still call any of their methods. So now, here’s the usage of Firebase authentication.

#1. Setup Firebase project

Open up the firebase console and click on “Add Project”. Call it “compound”, go next, select your account, and then create. This will take a few seconds to setup. When it’s complete click on continue and you’ll land on the overview page. After that, register the app and then download the google-services.json file. You should also open the build.gradle file in the folder and change the applicationId to match the one you entered for your Firebase project.

This is an example:

#2. Authentication implementation

So now, we’ll be creating the Authentication service and then using it in the view models, which are completely empty. First, let’s go to the authentication service. The responsibility of the AuthenticationService in this case is to wrap the Firebase Authentication functionality for us. It will send the info we entered, and then tell us if it’s successful or not. Under the services folder, create a new file called authentication_service.dart.





We’ll start off keeping a reference to the FirebaseAuth instance locally. Then we’ll perform signInWithEmailAndPassword and store the result in a variable called user. It should go something a little bit like this:

#3. Logical sign-up sequence

We’ll start with sign up so that we can then perform a login afterward. Open up the main.dart file and make sure the home is set to SignUpView. Then open up the signup_view_model.dart file. We’ll start by retrieving the AuthenticationService, NavigationService, and DialogService from the locator. Then we’ll create a function called SignUp that takes the email and password. All this sequence of Firebase authentication will look exactly in the set of code below:

 class SignUpViewModel extends BaseModel {
  final AuthenticationService _authenticationService =
      locator<AuthenticationService>();
  final DialogService _dialogService = locator<DialogService>();
  final NavigationService _navigationService = locator<NavigationService>();

  Future signUp({@required String email, @required String password}) async {
    setBusy(true);

    var result = await _authenticationService.signUpWithEmail(
        email: email, password: password);

    setBusy(false);
    if (result is bool) {
      if (result) {
        _navigationService.navigateTo(HomeViewRoute);
      } else {
        await _dialogService.showDialog(
          title: 'Sign Up Failure',
          description: 'General sign up failure. Please try again later',
        );

      }
    } else {
      await _dialogService.showDialog(
        title: 'Sign Up Failure',
        description: result,
      );
    }
  }
}

Open up the main.dart file and change home to LoginView. If you re-run the code now you’ll land on the LoginView. Enter the details you entered, click login and you’re done!

Final words

That should be it! Here is the overview of Firebase authentication, and how to use it in Flutter app development. All in all, by having Firebase authentication in Flutter, your application development will be much more efficient. Also, authenticated users of your Flutter app will be much more believed in your app security, and as a result, sales and conversions will be skyrocketed. Therefore, ArrowHiTech bring to you the best Flutter App Development Services. Don’t miss this chance. Let’s access us right now !


Tags

Share