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

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.

signup toast toast1 loading


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.. :)

Liked it? Take a second to support admin on Patreon!
  • Jeetu Choudhary

    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


  • 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….any suggestions?

  • Konstantin

    Can you show us how to add Facebook login (I see you make video for this) but not only fb login also how to create user and save user data (email, names, gender and etc) in firebase?

  • bunty goud

    Hello Guys ! i’m getting Error while while navigating to LoginPage from signup Page(i.e Go Back botton ).

    The error is :

    Uncaught (in promise): Error: Type LoginPage is part of the declarations of 2 modules: AppModule and LoginPageModule! Please consider moving LoginPage to a higher module that imports AppModule and LoginPageModule. You can also create a new NgModule that exports and includes LoginPage then import that NgModule in AppModule and LoginPageModule. Error: Type LoginPage is part of the declarations of 2 modules: AppModule and LoginPageModule! Please consider moving LoginPage to a higher module that imports AppModule and LoginPageModule. You can also create a new NgModule that exports and includes LoginPage then import that NgModule in AppModule and LoginPageModule. at syntaxError (http://localhost:8100/build/vendor.js:93188:34) at CompileMetadataResolver._addTypeToModule (http://localhost:8100/build/vendor.js:107187:31) at http://localhost:8100/build/vendor.js:107075:27 at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:107066:54) at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:118452:70) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:118425:36) at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:118354:37) at ModuleBoundCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:118754:31) at http://localhost:8100/build/vendor.js:74519:25

    Please help

    • Anushka Uditha Bandara

      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?

  • vozax developer

    getting this error when i go for signup but i can login with this email and password
    core.js:1449 ERROR Error: Uncaught (in promise): Error: PERMISSION_DENIED: Permission denied
    Error: PERMISSION_DENIED: Permission denied
    at index.cjs.js:13078
    at exceptionGuard (index.cjs.js:690)
    at Repo.callOnCompleteCallback (index.cjs.js:13069)
    at index.cjs.js:12846
    at index.cjs.js:12019
    at PersistentConnection.onDataMessage_ (index.cjs.js:12052)
    at Connection.onDataMessage_ (index.cjs.js:11337)
    at Connection.onPrimaryMessageReceived_ (index.cjs.js:11331)
    at WebSocketConnection.onMessage (index.cjs.js:11232)
    at WebSocketConnection.appendFrame_ (index.cjs.js:10837)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    defaultErrorLogger @ core.js:1449
    ErrorHandler.handleError @ core.js:1510
    IonicErrorHandler.handleError @ ionic-error-handler.js:61
    next @ core.js:5508
    schedulerFn @ core.js:4342
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:242 @ Subscriber.js:189
    Subscriber._next @ Subscriber.js:129 @ Subscriber.js:93 @ Subject.js:55
    EventEmitter.emit @ core.js:4322
    (anonymous) @ core.js:4782
    t.invoke @ polyfills.js:3 @ polyfills.js:3
    NgZone.runOutsideAngular @ core.js:4708
    onHandleError @ core.js:4782
    t.handleError @ polyfills.js:3
    r.runGuarded @ polyfills.js:3
    (anonymous) @ polyfills.js:3
    n.microtaskDrainDone @ polyfills.js:3
    o @ polyfills.js:3
    e.invokeTask @ polyfills.js:3
    p @ polyfills.js:2
    v @ polyfills.js:2