Published in


Flutter — Firebase authentication using email_id and password | Flutter web tutorials | FirebaseAuth

In this article we shall discuss about how to make Firebase authentication using email_id and password in our flutter web app.

Video Tutorial



In our flutter web app, we will be having two textformFields, one for accepting email_id and another for getting the password from the user. Once user enters a valid email_id and password, they will be navigated to the homepage which contains a logout button in it, for logging out the user on demand.

  1. Add Firebase credentials:

Add your Firebase credentials in index.html file present in web folder of your project directory. You can get your Firebase credentials from the Firebase console after creating a web app project in it.

2. Logic for switching between screens:

After providing valid credential (email_id and password) the user will be navigated to homepage, similarly when user presses the logout button, they shall be logged-out and navigated back to the login page again. This part of switching between screens is monitored with the help of authStateChanges() event and StreamBuilder widget as follows.

3. Logic for sign-in to firebase:

To sign-in to firebase we will be making use of createUserWithEmailAndPassword() event, which accepts email_id and password for authentication. This in turn will also create an entry in the firebase console. Moreover only one entry can be created using an email_id (i.e., no two entries will have same email_id or in other words, we can’t sign-up multiple times using the same email_id unless that particular email_id is deleted from the firebase console).

4. Logic for sign-out:

Well that’s it. Call these methods [signUp(), signOut()] on respective button clicks to see them in action.

This is how we can make use of Firebase Authentication using email_id and password in our Flutter Web application.

Get the complete source code here 👉:

Check out all my Flutter related blogs here.,👇




A list of Flutter Tutorials and app templates

Recommended from Medium

Visualize Nginx web Log with GoAccess

Expert session

Databricks: Upsert to Azure SQL using PySpark

AWS Api Gateway Authorization(Access Control) with IAM, Cognito or Lambda Authorizer

Make your Android application rock SOLID — Open Close

Parameter passing types in Flutter

Book Review: Project to Product

What happens when you type ls *.c

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vijay R

Vijay R

Flutter Developer

More from Medium

Getting Started With Flutter

Flutter — manage permissions directly in app

Flutter Popup Menu Button Detailed Customization With Example

How to create a custom plugin in Flutter ?

How to create a custom plugin in flutter