Flutter: Firebase Login Using Provider: package

Some Days ago I published an article on how to use Provider Package With Simple Counter Example. You Can Read That Pragmatic State Management Using Provider Here. Today We’ll be using the same package for building a Flutter Application which integrates with Firebase to authenticate users.

If you want to get your flutter project done. You can hire me at Fiverr. Just leave a message.

Prerequisites:

First of all, put this dependency in your pubspec.yaml.

provider: ^2.0.1 // as of now

Setup Your App with firebase.

Enable UserName/Password Field In Firebase Authentication Console.

Let’s Code:

Create a new project and add integration with firebase. First Things First, our app may be any of these four states.

• Uninitialized: Checking if the user is logged in or not. In this State, we’ll be showing a Splash Screen.
• Unauthenticated: User is not Authenticated. In this State, we’ll be showing login page to enter credentials.
• Authenticating: User has pressed the sign in button and we’re authenticating the user. In this State, we’ll be showing a Progress bar.
• Authenticated: User is authenticated. In this State, we’ll be showing the homepage.

We’ll Start off by making UserRepository for managing our user status.

We’ve defined an enum to track the status of the user.

The different States with Different UI’s

enum Status 
{ Uninitialized, Authenticated, Authenticating, Unauthenticated }

Initially, our status is initialized. In our UserRepository instance constructor, we’re initializing FirebaseAuth object and listening to authentication Changes.

_onAuthStateChanged function is called whenever status of firebase user is changed. In this We’ve two possibilities either we’ll get the user or not. If the firebaseUser is null then we’ll change the status to Unauthenticated else to Authenticated. Whatever happens, We want to show the changes to the user that’s why we’re calling notifyListener() to notify our UI to re-render itself.

In the SignIn Method, when the method is called we change the status to authenticating and notifyListener() to show that we’re tryin’ to sign in. If everything goes well we’ll return true indicating user has logged in. If Unfortunately user is not logged in (maybe because of bad network Or Invalid Credentials) we’ll change the status to Unauthenticated and will notify listeners() and return false to showing the user that something bad happened -.-

In SignOut method we simply sign out the user changes its status to Unauthenticated and notifyListeners() to update UI. And we’re done with business Logic.

Done With Business Logic

Our App Has Three Screens Splash, Login, and UserInfoPage.

We’ll start by the main.dart file.

Other than Basic Structure we’ve defined Our ChangeNotifierProvider at Line 24 and initialized Our UserRepository Instance in the builder. As we’ve defined our provider at root level now every child widget can easily access UserRepository Either by Using Consumer Or Provider.of<Object>(context). In the builder method of Consumer, We’re showing different screens based on the status of UserRepository. If the status is Uninitialized, we’ll be showing Splash screen defined line 69–78. if the status is Authenticated we’ll be showing UserInfoPage defined line 43–67. If the status is Authenticated or Authenticating we’ll be showing the login page.

Inside the build method, we’re making a decision. If the user has pressed the sign-in button our status will change from Unauthenticated to Authenticating now we’ll hide the sign in button and will show the progress indicator to notify the UI that we’re processing we’re doing that at line 64. At line 74 we’re signing in the user and checking if our sign in method returned true or false. If we got true out status will become Authenticated and user info Page will be shown. Otherwise, if we got false it means our status has not been changed we’ve got some error. In this case, we’ll show the snackbar to display something has gone the wrong line 75–80.

Final Result:

Conclusion

At this point, we have got a solid implementation of Firebase Sign in. And what is even exciting is it is very extensible, we can easily define google sign in or other provider methods in UserRepository and extend our login flow further. I have also implemented Google sign-in you can check out from my GitHub app repository here.

ADDED GOOGLE SIGN IN

Thank you for reading the article so far, and please let your feedback. Tell me if you want another article with a more complex example. You can find the above app from my GitHub. If you liked my article, Please do clap and follow for more. Thanks…

Fiverr Gig