Hi Friends,

Hope you are all well. This is episode 2 of creating a chat app using Ionic 3 and Firebase series. In this post let’s see how to create a sign up provision for the user using which he/she could create a new account and make use of it.

Let’s begin.

A screencast of this post.

The code for this post is available here.

The complete code for this app is available here. (Please note that this is a work in progress and code will be committed to this repo in each part).

Let’s start from where we left off. Pull the previous code from my github repo available here.

Now go ahead and create a new page called signup using the below command.

Let’s style this page and connect it to the login page.

Open up login.ts and add the below method.

Your login.ts should look like as shown below.

Now that this is done let’s go ahead and copy the below css code into signup.scss

This is the exact styling code that we used for login page as well. Open up signup.html file and add the below code.

Few things to notice:

1) We have three fields namely email, password and nickname and two buttons.

2) The sign up button is used to add the user to the application, whereas the go back button is used to move the user back to the login page.

Now open up signup.ts file and add the below code.

Things to notice:

1. We have two functions namely signup() and goback(). Go  back does what it’s name suggests.
2. Inside the signup() function we are simply performing some basic validation stuff and then calling the adduser method in the userservice to add the user.
3. The loading controller is used to provide a loading animation while the rest call is made and the toast controller is used to display a toast in case of any validation errors.

Wait we haven’t created the userservice yet. Let’s go ahead and do that.

Now get into providers/user/user.ts and add the below code.

Let’s break this down.

We are using the createUserwithEmailAndPassword() in the angularfire2/auth library to create a new user.

Once the user is created then I am using the upadateProfile method in the same library to add the displayName for the user.

Once that is done then we are creating a child in the chatusers collection with the newly registered user’s uid as the key. While creating this child I am also adding the photoURL (a dummy placeholder url).

Please note that we are storing information about all the users in our chatusers collection. This is primarily because we won’t be able to get information about all the users from firebase. This is to avoid issues and provide an increased level of security.

Now that we have created an user, we have to be able to login successfully using this user.

You could see that upon user creation we are redirecting the user to a specific page called profilepicpage.

Go ahead and create a page called Profile Pic using the below command.

This page is used to choose a profile picture for your account.

We will be designing this provision in the next episode.

Let’s go ahead and run whatever we have written so far. If everything goes fine, you would see the screens as shown below.

 

 

In our post we will see how to choose a profile picture for the user from your phone’s filesystem.

Hope this helped you guys. If you found this helpful, kindly share it with someone else and help them too.

I would highly appreciate it if you could become my patron (costs a couple of bucks and you get early access to all my videos plus benefits). Click here if you interested. With the help of patrons I could make more content and release them free of charge.

Thanks for reading guys. Peace..