We'll be in New York Tech Week 2025
Join Somnio & FlutterFlow Happy Hour
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 Flutter - Firebase

Authentication is one of the basic functionalities every app should have. Here's how to add authentication to your Flutter app using Firebase Auth!

Email Authentication with Flutter - Firebase
Authors
Abhishek Doshi
Abhishek Doshi
Technical
N
min read
/
March 11, 2022
Share
Copy post url
linkedin
Facebook
Twitter

Firebase is one of the go-to Back-End with Flutter apps since it provides many free functionalities as well as great integration with Flutter. One of the features provided by Firebase is Authentication. This way we can integrate Email, Phone, Google, Apple, and many more authentication in our apps!

Select a sign-in provider

To give you a quick sneak-peak of the article, we will be using firebase auth package for Firebase Authentication. This article was created with an example run on Flutter 2.10 version!

So, let's get started with the basic Email/Password Authentication!

Create a private package for auth.

Packages in Flutter are libraries of code that can be shared among projects and are independent of the project that developers incorporate and reuse to make work easy and less time-consuming.

Creating a package for Firebase Auth is a very good option thereby reducing package dependencies on our main project.

So, to create a package, we must first create a folder called packages inside our project. Then, in that location, run the following command:

The above command will create a folder named auth_service inside packages. When you run this command in the terminal, you will find that certain files were created:

Once these files are created, you will find a folder inside packages named auth_service:

Enable Authentication from Firebase Console and select Email/Password.

Once you have added your project and app to Firebase Console, the pre-requisite step is to enable Authentication from the right panel of the console and enable Email/Password from it.

When you click on Authentication, you will get a welcome screen from where you can click on Get Started

When you click on the button, you will be redirected to Sign In Method list. From there you can enable Email/Password.

Firebase Authentication

Create a simple UI for registration and login.

You can create a simple UI with 2 TextFields, one for Email Address, one for Password, and a button to submit. Note: It's a good practice to use StatelessWidget instead of StatefulWidget as its rebuild costs less compared to StatefulWidget.

Here's an example:

login_view.dart

signup_view.dart

As you may see, this UI is pretty simple. Both screens have 2 textfields and a button. When clicking the button, we have just added print statements to print the email and password provided by the user.

Create the Back-End code to pass the credentials to your Firebase.

The first thing you need to do is add 2 packages to your pubspec.yaml file (of the auth package you created); firebase_core and firebase_auth. Once that's done, run flutter pub get so that the Flutter Framework downloads the package content to your local system.

Now, you need to initialize the Firebase App in your main() function which we have in main.dart file:

The 1st line, WidgetsFlutterBinding.ensureInitialized(); ensures that the UI is not rendered until our initialization is not done.

Now, let's create a file to contain our authentication related functions and Firebase calls. Let's name it firebase_auth_service.dart inside our auth package. Next step is to create 2 functions: login and register.

So, as we are using Firebase for Authentication, we have pre-built methods for login and register. For register, we can use createUserWithEmailAndPassword and it takes 2 parameters i.e. email and password. Similarly, we can use signInWithEmailAndPassword which also takes 2 parameters i.e. email and password. Here, we created two user-defined methods to handle our Firebase calls. These methods take email and password as the parameters and pass them to the Firebase functions.

Here, if you notice, we are returning UserEntity. We have just created a simple model class which looks like this:

We have also created a method called _determineError which determines which error was thrown. It's always a good practice to handle exceptions so that our code doesn't break! Here's the code for it:

Here, AuthError is just an enum:

Now, let's call these methods from our UI!

Call functions from UI!

The next step is to call the functions from our UI. Now, to use the auth package that we created in our app, you can add it to your app's pubspec.yaml and then import it wherever needed.

Now, for our UI, currently we just added print statements when the user clicks on the buttons of login and register. Now, it's time for some action!

Here, the above code is for create_account page. Here, we have called the createUserWithEmailAndPassword which we created in the auth_service.dart and if we don't get any exception, we are navigating to home screen or show SnackBar if there's any error. Same way, we can do for login too. So your final code will look like the following:

signup_view.dart

Output:

login_view.dart

Output:

So, now this way we can use the auth_service package in any project that we want. And if at any point in the future we want to change the Back-End from Firebase to another service, we just need to update this package and our task is done! This allows us to make our app more scalable!

So, to summarize the steps:

  1. Add project and app to your Firebase Console.
  2. Enable Authentication and Email/Password Auth from console.
  3. Create a package for authentication service.
  4. Create simple UI to get email and password from user.
  5. Call these functions from the UI

Wait, did you like the article? We have more in our knowledge bag!

This is a beginner-friendly solution for you to easily incorporate and achieve an effective email authentication with Flutter - Firebase. However, to create a more scalable and robust product it would be necessary to use a State Management solution.

If you are interested, we are going to be sharing insight on how to build it for a high-quality product.  So, stay tuned for our next articles 😉!

I hope you learned something new from this article. If you want to try it out, feel free to clone the GitHub Repository!

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

Events

NY Tech Week 2025 Guide: 6 Pro Tips + a Top AI Event in NYC

Read more
NY Tech Week 2025 Guide: 6 Pro Tips + a Top AI Event in NYC
Read more
Community

How to Become a Star Developer: Beyond Coding Skills

Read more
How to Become a Star Developer: Beyond Coding Skills
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