Ionic 4: todo App + firebase

21 Logging Users In Building Mobile Apps with Ionic 4 Video

in this lesson we'll learn about logging users in using firebase authentication we'll start by building a login form in our ionic application and then we will

use the firebase SDK to write the code to log the users in using their email and password so here we are back inside Visual Studio code and the first thing I'll do is create a new page to

implement the login functionality so I'll open up the terminal stop the development server and type in the command to create a new page called login

once the page is created I'll rerun the ioniq development server using ionic serve in my application in the browser I'll change the URL to point to the login

page and this will load the login page in the browser and there we have our login page so let's start by building the login form first and then we'll write the code to log the users in using

firebase authentication to build the form we can copy the code that we have inside our iron content in the signup page so I'll copy all this code from here and I'll go to my login dot page

dot HTML file and paste all this content that I've just copied inside the iron content tag for the login page this is because the fields in the login page are going to be the same I change the color

of the toolbar using the color attribute to danger and I'll also change the title and finally I'll create a button after the I a list using the iron button component

the text on the button is going to be login and finally I'll bind the click event of this button to a function let's call this function as login so now that we have the form and the button ready

let's go to our login dot page dot ts file and create these properties with the name email and password and also implement the login function so inside the login dot page dot TS

inside the login page class will create a property called email which will be of the type string and similarly we will create one for the password which will also be of the type string next we'll

implement the login function and inside this function we'll be using the firebase SDK so let's import that as well now that we have the firebase SDK imported we can use it to log the users

in so here we'll start by typing in firebase dot o and of all these functions the function that we want to use is sign-in with email and password this function takes in two arguments the

user's email and the user's password and we can execute the promise on this function so in the then callback we get the same object as response that we get when a new user is signed up

so for now we'll just log into the console and if the then callback is executed it means that the user is successfully logged into the application which confirms that their email and

password was correct in case an error occurs we can handle that using the catch block for now we can log the error to the console as well let's save that and test this out in the browser

so I'll clear out the console first and I will start by inputting an email and a password the password for this account s at a.com is a different fun than what I have

entered so I should probably get an arrow I'll hit on the login button and I get this error in the browsers console with the message the password is invalid or the user does not have a password so

it means that my password is wrong let's try logging in with the correct password I'll hit on the login button again and this time I get the same object that

we got when we signed a new user up using firebase authentication this object has a user property which further contains all the information about the user that is currently logged in you can

also see that I get the same UID object that can be used to uniquely identify a user and this is how you can log users into your application so now that you know how you can log the users into your

application using their email and password using firebase authentication in the next video we'll learn how we can check if a user is already logged into the application or not