Ionic 4: todo App + firebase

27 Creating User Sign Up Building Mobile Apps with Ionic 4 V

in this lesson we are going to create user signup inner ionic application we'll start by creating a new page called the signup page and design the

signup form and then we'll write the code to allow the users to sign up for an account using firebase authentication so here we are back inside Visual Studio code and the first thing I'll do is

create a new page called the signup page and I'll use the ionic CLI to create this new page I'll go ahead and type in ionic generate page signup which will be the name of the page and press Enter

this will create the new page for us now we'll be working inside sign upload page dot HTML file where we'll be designing the form the first thing I'll do in this file is changed the title to

create an account and I'll also change the color of the toolbar since we are designing the page I'll also run ionic serve to see how the actual page looks like

so here you can see that on the right the ionic application loads up and here I will have to change the URL to point to the signup page and now we get to see the signup page so inside our iron

content we'll start by creating a new list using the iron list component inside desire list will create an iron item with an iron label and an ion input the position of the label will be

stabbed and the text on the label will be emailed for the iron input the type will be email and we can also have a placeholder text let's save this and you can see that we have a nice

input field on our page let's copy this iron item and paste it just below it and I'll make changes to use it for the password field finally after the iron list I'll create two buttons the first

button will be used to allow the users to sign up for an account and this will be a blog button I will give it a color of danger and this will also be a round button so I will give it a shape of

round and there we have our button I'll create another button so I'll make a copy of the first one and I'll make the required changes this will be the button that

will navigate the user to the login page if they already have an account and this will be a clear button so I set the fill property to clear and I'll also remove the shape

and there we have the second button the last thing I'll do is add some heading to this form and we'll use this heading to add the name of the application on the top for this I'll add an eye on item

and within the eye on item I'll add the text to do app the text is too small so we'll wrap it inside an h1 tag and now the font size of the text is much larger

to add some more styling I'll add a CSS class to the iron item called vertical space you can name this class whatever you want and I'll also add another class to the h1 tag called Center these

classes do not exist as of now so next we'll be writing these classes inside sign up dot page dot s CSS file so we'll start by defining the vertical space class which will add 75 pixels of margin

on the top and 75 pixels of margin at the bottom feel free to play around with different values of margin and use what looks best to you for me 75 pixels works the best

we'll also define the class called center and within the center class we'll define a width of 100% and we'll also set the text aligned property to send out

this remove the to-do app text in the center of the page so now we have the application title right there in the center of the page with some space on the top and the

bottom looks good but we still need to get rid of this line that we have under the text and for that ioniq has a variable and the name of the variable is inner border width and we'll set it to

zero pixels this will remove this border from the iron item completely and you can see that as the application refreshes the line is gone and while we are at it I'll also make

the second button a block button this will Center the text on the button so now that the form looks good let's add bindings to the input fields so on the first input field I'll use an NG model

and I'll set it equal to email and similarly for the second input field I'll use an NG model and I'll set it equal to the password next we'll wire up the click event of

the button to a function called sign up and for the second button will bind the click event to another function let's call it go to login so now that the HTML file is complete

let's go to our signup dot page dot TS file and start writing the code so the first thing we'll do is import firebase because we will be using the firebase authentication SDK so let's start by

typing in import star as firebase from firebase and then inside the class we'll define an email property which will be of their type string and we'll also define a

property called password which will also be of the type string next we'll create the function called sign up and this function will use the firebase authentication is DK to create a new

user using the values of the email and password properties so I'll just go ahead and type in firebase dot off dot create user with email and password this is a function that takes in an email and

a password as arguments I change it to password and once the user has been created we can execute the den function inside the den function we receive a user credential object let's call it

user data and this is the place where we'll navigate the user to the application page we'll come back to this piece of code when we'll create the page where we'll display all the to dues to

the user in the catch block we'll handle all the errors up until now we have been logged in the errors to the console but now we'll be using a toast controller to display the errors to the

user as a toast notification so we'll have to import the toast controller first so I'll just go ahead and type in import toast controller and we'll import it from the package add ionic slash

angular once you have imported the toast controller you need to inject it into the signup page class by passing it as an argument to the constructor finally inside the catch block we'll type in

this dot toast controller dot create and the create function takes in a JSON object inside the JSON object we'll set the message property equal to error dot message where error dot message contains

the message specifying the error and we'll also set the duration to 3,000 milliseconds so the toast notification will be displayed to the user for 3 seconds and after that it will be hidden

automatically since the create function also returns a promise we'll have to execute the 10 function where we get the toast object as a parameter on which we can execute the present function that's

all we need to do to display a toast notification to the user inside the success callback will also log the user data object to the console just for debugging purposes so now that the code

is done let's save everything and let's test it out in the browser so first of all I'll clear out the console and I'll type in an email and a very small password and you can see that I get this

notification that password must be at least 6 characters long so I change the password and I'll hit on the create button again and this time you can see that a user

credential object is logged to the console it contains all the information about the user that has just been created on file store if you go back to firebase

console and have a look at the authentication section you will see the newly created user there and the ID of the user matches with the ID that we get here in the console which

confirms that a user is successfully created on firebase and that's pretty much we need to do to sign users up in our to do application so now that the sign up is working in the next lesson

we'll be working on creating the user login page