Firebase Email & password Authentication | Flutter (2021)

For Flutter project connection to firebase visit this link here

Step-1

Go to the firebase console and select the Authentication panel from the left side

Click on get started and then your page will look like this

For now, we will focus on Email and password authentication under the section native providers.

Click it and enable and save it.

And the work in the firebase console is done!!

Simple! isn't it?

Let's move on to the coding part

Clean up the counter code and let's build a simple login UI for logging in.

Coded in main.dart file

It's a simple code because what's important is to know how it works

Add both packages shown below to your dependencies

Then, Create a file authentication.dart

Inside the file, we create a class Authentication with 3 methods

(All methods inside the class)

  1. Sign In

2. Sign up

3. Sign out

Now, in the main.dart file we have 2 text fields from which we get email and password after they are entered

First, let's sign up for an account

In the sign-up button (create one below the login button)

In the onPressed function, we use the signUp method we created in the Authentication class earlier, and it takes 2 arguments email and password.

It's a future function so we use await and async and we print out the result to know what happened as there are a few exceptions

The password should be at least 6 characters
SignUP successful if null is printed (ignore “user signed in”)

Now that the account is registered let's tap on the button again

Email is already in use because it is already registered (can't do twice)

Hence, you cant register twice with the same account

You can see registered users in the Authentication panel in the console

Moving on to Sign In, we are using the SignIn method which also takes 2 arguments email and password

Let's tap the login button

Incorrect password
Sign in Success if null is returned

Let's edit the login code a bit more like navigating to another page if login is successful?

So, I created another dart file signedIn.dart just to navigate to it

signedIn.dart

So if null(successful) we will navigate to the other page else if not print the result

So technically we use the right credentials and we login and go to next page

Now we cant be typing the credentials every time right? We need to auto-login if we haven't signed out yet.

Add this code, it listens to changes of the user whether logged in or not.

You can see the print statement here “user signed in” which appeared before when we tapped log in Button

Now with this, a hot restart should take you to the next page automatically

The final step, log out,

In the log out button, we call the signOut method and then pop method to move back to the previous screen

Now if you try hot restart you will not be able to go to the next page without authenticating yourself again.

And another way is that you can manually add users from the console by clicking on add user and entering credentials.

Firebase console

Hope this blog has helped you with enough information on how to authenticate with email and password.

Blogs on other Authentication providers will be coming soon

Flutter developer | Learner | Undergraduate student