The Techies' pub

Chat app with Ionic 3 & Firebase – Ep. 2 – Sign up

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.

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.

1

2

3

4

5

6

7

this.userservice.adduser(this.newuser).then((res:any)=>{

loader.dismiss();

if(res.success)

this.navCtrl.push('ProfilepicPage');

else

alert('Error'+res);

})

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.

1

ionicgpage profilepic

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.

Post navigation

Hello Raja, I really appreciate the work you do here. I have a question. I didn’t get the part where you mentioned:
photoURL: ‘give a dummy placeholder url here’.

can you please explain this?

Rahul Tanwar

You just need put any photo url. You can upload a pic to firebase and use it or best will be to store in the assets folder and give its path in the url. This is only for display purpose.
Afterwards the user will change it by uploading their own pic.

Jeetu Choudhary

Thanks!

Monique Nichols

Hello! I copied my firebase credentials into the config file and I’m getting this error:

FIREBASE WARNING: Provided authentication credentials for the app named “[DEFAULT]” are

invalid. This usually indicates your app was not initialized correctly. Make sure the “apiKey” and

“databaseURL” properties provided to initializeApp() match the values provided for your app at

add this line to your app.module.ts
import { LoginPageModule } from ‘../pages/login/login.module’;

Remove LoginPage from your declarations and add LoginPageModule to your imports under @NgModule

Amer Bazerbachi Jaafari

Hello Raja,
I really appreciate the work you do here and the time you spend.
I have a question: I would like to do something similar to this chat, but with “signinwithphonenumber”. I think it would be great to do like whatsapp and sign with the phone number.
The problem is that signinwithphonenumber needs a recaptcha and the recaptcha doesn’t render in a mobile device.
I did my research online but I could find the solution. Can you please help me/us?