Ionic 4: todo App + firebase

29 Creating ToDo Page Building Mobile Apps with Ionic 4 Vide

in this lesson we are going to create the main application page which is the to do stage so we'll start by creating the main application page called the

troduce page and this will be the page that will comprise of most of the functionality in our application so this page will allow the users to add and manage their to Do's once the page is

created will then connect this page to the login and sign up pages so that when the user logs in or when they sign up for a new account they are navigated to the traduced page

where they can manage their traduce finally will conclude this lesson by adding some code in a login page so that the users who are already logged into the application are automatically

navigated to the toodles page so let's get started so I'll just get back to visual studio code and here you can see that I have the application up and running the first thing I'll do is open

up a terminal and in the terminal I'll use the ionic CLI to create a new page we'll call this page as to dues so the name of the class will be to dues page now that the new page is created let's

run our ionic server again so I'll just go ahead and type in ionic serve and our application is working just as it was working before so now let's squared and write some code

inside to do start page to our HTML file and for now I just change the title of the page to your to Do's and I'll also change the color of the toolbar to danger I'll save this file and we'll

come back to this file in a later lesson for now we need to link this page to our login and sign up pages so I'll go to my login dot page dot ts file and here inside the login function

inside the success callback where we need to navigate the user to the application page I'll use the nav controller and I'll use the navigate forward function to navigate the user to

the traduced page so here I'll just go ahead and type in / – duze and that's it that's all we need to do to navigate the user to the to do page I'll do the same thing in the sign up dot page dot ts

file so here also inside the signup function after the user account has been created successfully I'll type in this dot nav controller dot navigate forward and I'll

pass in the path to the to do page that's it let's try logging into the application and see if we are navigated to the toodles page

so I'll enter my email and the password and I'll hit login and you can see that I am navigated to the traduced page and that is pretty much what we wanted

the last thing we want to do is keep a user logged in once they have logged in unless they log out of the application so as of now you can see that if I change the path to the root path the

login page shows up even though a user is currently logged into the application so we need to find out if a user is logged in and if we get a user already logged into the application we need to

navigate the user to the traduced page otherwise we need to make the user login first so I'll go to my login dot page dot TS file and in the constructor of this page I'll use a firebase function

that I can use to find out if a user is currently logged in or not so just go ahead and type in firebase dot off and on this I can use the function on earth state changed this

function gives us a user object if a user is found in the session which means that if a user is logged into the application this user object will not be null if this user object is null we can

assume that no user is logged in so in case we find a user we want to navigate the user to the traduz page that's it that's all we need to do to navigate the user to the application

page if they are already logged into the application let's save this and see if we are navigated to the traduced page automatically or not and you can see that within a second I

was navigated to the to do stage and that's what we wanted so now that the application flow is working fine and we have created the new application page that reduces page it's time to add

functionality to the to do page so in the next lesson we'll write the code to allow the user to add new to Do's