Ionic 4: todo App + firebase

28 Creating User Login Building Mobile Apps with Ionic 4 Vid

in this lesson we are going to work on the user login page we'll start by creating a new page called the login page and then we'll set that page as the

default page for our application will then start by designing the form and finally we'll conclude this lesson by writing the code to allow the user to login to the application using firebase

authentication so let's get back to Visual Studio code and the first thing we'll do in Visual Studio code is type in the command to generate a new page called the login page now that the page

has been created before we run a onyx server again we need to modify the routes of our application so that the login page becomes the default route for our

application so I'll go to the SRC folder the app folder and I'll open up – routing dot module or TS file in this file we have the routes for all the pages in our application and we also

have a route route as you can see that for the route route we are redirecting the users to the home route so we'll change this to login and now all the users will be navigated to the login

route when the application loads up now that we are not using the home route anymore we can go ahead and delete that from the routes array those are all the changes we need to do

to app – routing dot module door TS file now that we are not using the homepage at all we can also go ahead and delete the home folder which contains all the files for the home page

and now I'll go ahead and run the ioniq serve command again and as the application loads up in the browser you can see that the page that shows up is the login page so now we can

go ahead and start writing the code in login dot page dot HTML file to design the form since the login page is going to be very similar to the sign up page we can copy all the code from sign up

dot page dot HTML and paste that inside login dot page dot HTML file now we can start making changes to this code so I start from the top I change the title of the page first

and then in our iron content we have the hire list I'm going to keep the list as it is but I'm going to change the text on these two buttons so I'll change the first button text to login and I'll

change the name of the function that the click event is bound to for this button the name of the function will be login similarly for the second button I'll name the function go to signup and this

will be the button that will navigate the user to the signup page if they do not have an account I'll also change the text on the button to make it something relevant

now that all the changes are done in login dot page dot HTML let's save the file and see how the page looks like in the browser so as you can see that the form looks ok the button looks okay but

the app title on the top does not have any CSS applied to it and that's because we have defined the CSS class in the S CSS file for the sign up page so we'll copy those CSS styles from sign abroad

page stored as CSS and we'll paste all that CSS code inside login dot page dot s CSS we'll save the file and now you can see that the login page looks just perfect so now that we are done with the

login page dot HTML file and we are also done with the styling of the page let's write the code in login dot page tour ts file to log the users in using firebase SDK

so we'll start from the top the first thing we'll do is import firebase and next we'll create the properties for email and password inside the login page class once that is done we'll create the

login function to let the users log in using firebase authentication so we'll type in firebase dot dot dot sign in with email and password and we'll pass in the user's email and the user's

password to this function since this function returns a promise we can execute the den and the catch functions in the den function we will receive a user credential object as a

parameter that for now we'll just log to the console ideally we should be navigating the user to the application page but since the application page is not yet created we'll come back to this

piece of code later and write the navigation code to navigate the user to the application page in the catch block will handle the errors and just like on the signup page

will use a toast controller to display a toast notification to the user if an error occurs so we'll import the toast controller we'll inject it into the class and then finally we'll use the

toast controller to display the toast notification to the user I'll display this toast notification for 3 seconds to the user and the login function is complete before we test this application

out let's also create the second function that we need to create which is go to sign up the job of this function is to navigate the user to the signup page so we'll write the code for that so

we start by creating the function and in this function because we want to navigate the user to another page we need the navigation controller or the nav controller so we'll import the nav

controller first and then we'll inject it into the glass and then finally inside the go to sign-up function will type in they start nav controller dot navigate forward and

this function takes in an array of strings in which I will just pass the URL to the sign-up route which is slash signup and this will allow the users to navigate to the signup page before we

proceed let's go ahead and test this out so you can see that in the application if I click on the Clear button at the bottom I am navigated to the signup page but from the signup page there is no way

to come back to the login page so let's quickly go to the signup page and write the code to allow the user to navigate back to the login page so I'll open the sign of blood page dot

HTML file first and inside the iron toolbar inner iron header I use a component called iron back button and this is a component that adds a back button to the navigation bar

automatically I'll also give this button a color of light so the color of the back button is a white color next we'll create another function in sign up dot page dot TS file that will

also allow the users to navigate back to the login page this function is called as go to login and here also we need the nav controller so we'll import the nav controller on the top we will inject it

into the class and then finally inside the go to login function I'll just go ahead and type in this dot nav controller dot go back which is a function that navigates the user back to

the previous page so now that everything is done let's test it out so first of all I will click on the Clear button and I am navigated to the signup page and if I click on already have an account

button on the signup page I am navigated back to the login page so that's working now let's go ahead and login using an email and password so I'll enter an email and I'll enter a

wrong password and you can see that I get the toast notification the password is invalid which is perfect now I'll test by inputting the correct email and the correct password

and you can see that a user credential object is logged to the console which contains all the information about the user that has just logged in and that concludes our login page in the next

lesson we'll start building the main application page which is the traduce page