AUTHENTICATION VIA BLoC PATTERN.

Muhammad Ibrahim
3 min readApr 2, 2021

The very first step for authentication is to create user Repository.

CREATING USER REPOSITORY

Firstly create the repository class. Then we need a firebase auth instance. Below that initialize that instance.

CREATE FOR POSSIBLE USE CASES

All you need to create for that application is partner method for taking email and password of the user. This will return the value of future, here our return type would be Firebase. Now there can be exceptions, for example internet connection exception or firebase connection etc. so we’ll throw that exception in the code AND THEN WE’LL A CREATE A METHOD FOR SIGN IN A USER. Now we’ll create another method to check either our user is already signed in or not. We’ll use Boolean for that. That’s all about the possible use cases.

BLoC CLASS

We need to build a folder for creating Bloc CLASS.Now we‘ll create the event for the authBLoC and then the corresponding State. Now there will be three kind of state, initial state, authenticated state and for conditions, the third one is unauthenticated state. Now using bloc. Dart we’ll create bloc class. Furthermore, create the asynchronous event. Now check whether the user the signed or not otherwise use unauthenticated state. That’s all about the BLoC class. In addition to this, create the the registration class.

LOG IN BLoC

Foremost thing we’ll do is to create log in event and the corresponding state. Create the abstract class, there we’ll need email and password. Following it there will be four probable states initial, loading. sucessslogin and failure log in. In log in successful state, you need to pass the firebase object.

HOMEPAGE BLoC

Here we’ll create the logout event and the states executed will be the logout initial state and logout success. Afterwards create the Bloc Class and override the initial state. Following the same pattern return the value.

Let’s discuss the very vital area of the Firebase authentication i.e. UI.

CREATING WIDGETS

Now we’ll create the BLoC Provider to access the auth BLoC .Add the app started event. Then, execute the Stateless Widget. Through this we can simply check the state of the Auth BLoC . Check the three states the initial, the authenticated and the unauthenticated and return the appropriate widget according to it. If the state is initial, return the splash screen, and in the third case return the Signup page. Further create the Bloc Builder. To navigate the user we’ll create the BLoC listener widget.

BLoC IMPLEMENTATION

First we need text editing controller. In the text field, add the controller. Now we want to add event to the log in Bloc. Now check the state of the event. We’ll return appropriate UI based on that state. Then we want to navigate the user to the home page. The building widgets are now completed. .Now open the homepage file, we need to have instance of the BLoC, and it has a dependency on the firebase user. The event here is Logout button pressed event. Now we have the text widget for returning email now check the states and navigate the user. Wrap it in the stateless widget. Now create the dependency and make it require in the constructor.

When we’ll run the app, we’ll get the expected result.

--

--

Muhammad Ibrahim

I'm a flutter developer, having active working experience of more than 2 years developing mobile apps.