Flutter 2025 Roadmap: Key Performance, AI, and Accessibility Enhancements
Stay updated with the latest content!
Somnio Software Logo
Services
OverviewFull Product DevelopmentProduct DiscoveryStaff Augmentation
About
CompanyFlutter ExpertisePress & NewsCareers
Our work
Industries
Fintech
Healthcare
Education
Fashion
Media & Entertainment
Retail & Ecommerce
Other
Success Cases
Pronti
Pronti
ProWallet
ProWallet
Jaac
Jaac
Meet
Meet
bonnee
bonnee
Aqilis
Aqilis
View all
Resources
Open SourceTutorials & TalksDownloadables
Somnio Solutions
OverviewE-commerceNews
Blog
Let’s talk

Email Authentication with Bloc - Flutter | Firebase

Integrating flutter_bloc into the existing Email Authentication that was previously made with Firebase Authentication

Email Authentication with Bloc - Flutter | Firebase
Authors
Abhishek Doshi
Abhishek Doshi
Technical
N
min read
/
April 15, 2022
Share
Copy post url
linkedin
Facebook
Twitter

Oh! Did our awesome Google Crawler get you landed on this article directly? Not a problem! For a better understanding of this article, you can go through our first part!

In the previous article, we saw how we can integrate Email Authentication using Firebase Auth into our Flutter app. But, it's not over yet! In this article, we will see how we can integrate flutter_bloc into our existing Email Authentication.

Bloc is one of the widely used State Management solutions as it gives us control over a lot of data and how the data is being passed. If you are completely new to bloc, feel free to check our article on flutter_bloc as well.

So in our previous article, we integrated Email Authentication and used Feature-Driven architecture for it, which would look somewhat like this:

Feature-Driven architecture

Now, let's create a bloc folder inside login folder and create 3 files; login_bloc.dart, login_event.dart and login_state.dart.

bloc folder

It's time to separate our business logic from the UI layer!

Let's create a few event classes based on our needs. We will create 3 classes:

1. LoginButtonPressedEvent: This will be used when the user clicks on the login button.

2. LoginEmailChangedEvent: This will be used in the onChanged method of the textfield. So this event will hold the latest value of email.

3. LoginPasswordChangedEvent: This will be used in the same way for password.

Now, let's create the state class!

login_state.dart

Here, we created 1 class, LoginState and enum LoginStatus. Along with this, we created a copyWith method, which basically means that we will be mutating the same state variable for all the status. The main change here is that, if we are not providing any value to the copyWith method, it will be using the value which we provided during creating the object of the state. Hence, the state object will always have some values, and we can update the value whenever we have the latest values!

Now, it's time for creating the main bloc part!

login_bloc.dart

In the bloc part, we need to handle 3 event classes that we created:

1.

Here, we are just calling the login method from the auth package that we created in the previous article. And if we get success, we emit the state with the new success status and message. On the other hand, if we get any exception or failure, we emit the state with failure status and the exception as the message.

2.

The way we had for email, same way we are emitting the state for password.

Time to create our bloc files for Signup functionality!

Create a folder for bloc inside signup folder and create the event, state and bloc files into it.

Folder with bloc and signup files

We are going to follow the same approach that we followed for login part!

So, let me show you quickly how all the 3 files should look like for signup bloc.

signup_event.dart

signup_state.dart

signup_bloc.dart

Just the change here is that we are calling the signup method that we created in the auth package!

Now, let's use this bloc in our UI!

Firstly, we need to provide this bloc to our widget tree.

If you notice, our bloc constructors take AuthService as the parameter. So, we will have to provide our FirebaseAuthService to the widget tree first. To do this, we can provide it in main.dart!

Here, we have used RepositoryProvider as this is something that we are going to inject as a parameter in our bloc class!

For login, let's create a new file called login_page.dart which will be just a skeleton class that will provide our LoginBloc to our login_view.dart

For Signup, similarly, we can create a file called signup_page.dart

Here, we access the FirebaseAuthService using the read method that we have in the bloc library as an extension on context.

Now, let's do some real stuff! Let's use this bloc in our UI part!

Login

So, we created an event which would hold our latest version of email for login (LoginEmailChangedEvent). We can add this event in the onChanged method of our TextField

Here, we read the instance of LoginBloc from the widget tree and add the LoginEmailChangedEvent with the latest value of the text field.

Similarly, we can do this for password:

Now, we can add the LoginButtonPressedEvent in the onPressed method of the button:

Finally, we need to wrap our form with BlocListener so that we can listen to our success and failure states:

Create Account

Now, we can do the exact same thing to create an account too!

For email:

For Password:

For submit button:

Bloc Listener part:

And that's it!

We have successfully integrated bloc to our Email Authentication.

I hope you learned something new today!

Would you like to try it by yourself? Feel free to check out our GitHub Repository and give it a go!

Contact us

Stay in the loop!

Receive tech news, software tips, and business insights.
Subscribe to our newsletter!

Thank you! Your submission has been received!
Oops! Something went wrong.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Read next

Business

How Flutter is Transforming MedTech: Cross-Platform Development for Healthcare Apps

Read more
How Flutter is Transforming MedTech: Cross-Platform Development for Healthcare Apps
Read more
Announcements

Somnio Software: Premier Verified Company on Clutch and Global Award-Winning Leader

Read more
Somnio Software: Premier Verified Company on Clutch and Global Award-Winning Leader
Read more
Somnio Software Logo
Services
Full Product DevelopmentProduct DiscoveryStaff Augmentation
Our work
IndustriesFintechHealthcareEducationEntertainmentSuccess Cases
About
CompanyFlutter ExpertiseCareersPress & NewsPrivacy PolicyCompany Presentation Brochure
Resources
Open SourceTutorials & TalksDownloadablesBlog
Office
José Ellauri 1142
Montevideo, Uruguay
11300
Contact
hello@somniosoftware.comjobs@somniosoftware.com
(+598) 98 168 142 - Uruguay+1 (786) 726‑1751 - US
Clutch Award Top B2B Company 2022
Clutch Award Top B2B Company 2022Clutch Award Top B2B Company 2022Clutch Award Top B2B Company 2022Clutch Award Top B2B Company 2023Clutch Award Top B2B Company 2023Clutch Award Top B2B Company 2023Clutch Award Top B2B Company 2023Clutch Award Top B2B Company 2022The Manifest Award Top Flutter Developers 2021Clutch Award Top 1000 Companies Global 2022Clutch Award Top B2B Company 2023