Ionic 4: todo App + firebase

20 Signing Up Users Building Mobile Apps with Ionic 4 Video

signing up users in this lesson we are going to learn how we can build a sign a form in ionic and then we'll use firebase authentication to allow the

users to sign up for an account so here we are back inside Visual Studio code and we have successfully configured firebase in this application so if you go to your app dot module or TS file you

can see this configuration right here so the first step would be to create the signup form and to do that I'll create a new page in the application so use the ionic CLI for that

and the command to create a new page will be ionic generate page followed by the name of the page in this case the name of the page is going to be signup and there we have our new page let's run

the developments over again so if you look inside your signup page you can see that I have all the files that I need for any page in an ionic application and if i refresh the

application in the browser I still get to see the home page so I'll change this part to sign up and I get to see the signup page so now we can go ahead and write the code in sign

up dot page dot HTML file to create the signup form so start by changing the title here to create an account and I'll also change the color of this navigation bar to

danger inside my high-end content I'll start by creating an iron list and inside this list I'll create an iron item for the email field and another one for the password field

I'll also define iron labels for each of these fields and I'll also set the position of the labels as stacked the type of the input field for email is going to be email and I'll also set a

placeholder value if I save this right now you can see that I get a nice input field where the user can type in their email address so I'll just squared and copy this I on item and paste it just

below it inside our iron list this time I'll change the label text to password and I'll change the type of the input to password as well you can remove the placeholder for the password or you can

just go ahead and type in anything that you want finally after the iron list I'll define a button using the iron button component I'll set the experiment property to block and I'll set the color

of the button to danger the text on the button will be signup and there we have a sign-up form in a typical application we'll add more fields for example the users name phone

number and even a confirm password field but for now email and password will do the last thing that we'll do inside the HTML file is add bindings so I'll add an NG model and I'll set it equal to a

property called email I'll do the same thing with the password field and I'll set it equal to a property called password finally I'll bind the click event of

this button to a function and let's call this function sign up now we can go to our sign up dot page dot TS file and create all these properties and this sign up function

let's go ahead and do that so I'll open my sign up dot page dot TS file and inside the class the first thing I'll do is define a property called email which is of the type string and another one

called password which will also be of the type string now that we have defined these two properties we can go ahead and create the signup function inside the signup function we'll be

using the firebase SDK to create a new account for the user using this email and password and for that we will have to import firebase first so at the top I'll add the import statement for

firebase import star as firebase from firebase and inside the signup function we'll start using the firebase SDK so I'll just start typing in firebase dot o and on this auth object you get a

number of functions that you can use to perform various actions using firebase authentication for now we just want to use a function called create user with email and password this function takes

in two arguments the first one is the email and the second one is the password and we have both the values so just pass in this dot email and they start password to this function and then you

can execute the promise in the success callback inside your promise you get an object of type user credential which contains all the information about the user if a user is successfully created

on firebase authentication let's call this argument as data and for now let us just log into the console and in case an error occurs we can handle that using the catch block for

now we'll log the errors to the console as well let's save that but before we can test this out we'll have to make a small change in our firebase console so head back to your firebase console click

on authentication and select the sign-in method tab here you can see all the providers that firebase offers to allow the users to log into your application and all these providers are disabled by

default we want to use the email password provider for now so click on it and enable the email password provider click on save and this should change the status of email password provider to

enabled once it's enabled you can go back to your application in the browser and try signing up by inputting an email and a password let's try that I'll also increase the size of the

console so that I can see all the logs that I get I'll enter an email and a small password and I'll click on the signup button and you can see that I get this error in

the console and the error message says password should be at least six characters and this is a requirement that firebase enforces so you should be entering a password which is at least

six characters long now if I click on the sign up button I get a new object logged to the console and this object contains a user object which contains all the information about

the user that has just been created on firebase it also contains a property called u ID which is a unique ID that firebase has alerted to this user make a mental note of this UID

if you go back to your firebase console and have a look at the users tab in the authentication section you can see that a new user has been created with the email S at a.com and the users UID is

the same one that we saw in the console so a new user is successfully created using firebase authentication from your firebase console you can perform various operations on this user you can disable

the account if you want to or you can even delete the account you can also send a reset password email to the users email address and this will allow the user to reset their password in case

they have lost it so now that we know how we can create new users in our application using firebase authentication let's have a look at how we can log users in if they already have

an account