Chat app with Ionic 3 & Firebase – Ep. 3 – Profile pic & Password reset

Hi Friends,

Hope you are all well. This is episode 3 of my chat app with Ionic 3 and firebase series. In this post let’s see how to choose a profile picture for our account from the phone’s file system and also how to code a password reset provision in our app.

Let’s begin.

Since the screencast was too lengthy this time, I decided to cut it into two parts.

Part 1 of the screencast

Part 2 of the screencast


The code for this post is available – here.

The complete code for this app is available here. (This is a work in progress and new commits will be added as the app is being built).

Password reset:

Generate a new page using the below command.

Get into login.ts and add the below code.

Now get into passwordreset.scss and add the below code.

As you can see it’s the exact same code that we are using in login.scss and signup.scss to design our page.

Open up passwordreset.html and add the below code.

We just have a single input field and a couple of buttons.

Open up passwordreset.ts and add the below code.

We are simply calling the passwordreset() function in the user provider and sending the email there. But wait, do we have a passwordreset() function in the user.ts file ? Let’s go ahead and add that.

Open up user.ts file and add the below code.

I guess the above function is self-explanatory and there isn’t much to explain here. We are simply making use of the sendPasswordResetEmail() that ships with firebase to send an email with password reset instructions. If the entered email is not registered then it will throw an error back.

Choosing a profile picture:

This is a bit lengthy process. Let me first explain what we are trying to achieve here.

  1. We are going to be choosing a picture from our file system using the cordova-file-chooser plugin.
  2. Then we will be resolving the native path of that file using our cordova-filepath plugin and then storing it as a blob in firebase-storage.
  3. Then we would get the download url of the stored file and then make use of it in our app to show the image.

I have already discussed this entire process in detail in one my previous posts.

I would highly recommend that you read it once by clicking here.

If you remember, we have already created the profilepic page in our last post. We’ll simply be making use of it here.

Open up profilepic.scss and add the below code.

This is just to style the profile picture and center the content.

Now open up profilepic.html and add the below code.

We just have a couple of buttons. One of them is to choose an image. The other is displayed based on a value called moveon. Let’s see how that works.

Open up profilepic.ts file and add the below code.

Whoa, Too much code..?

Most of it is just eye-candy stuff..

It’s actually pretty simple. First let’s go ahead and create a new provider called imghandler which we will be using to manipulate and play around with images in our app.

Open up imghandler.ts and add the below code.

Too much code again..?

First things first.

Let’s go ahead and install the 3 cordova plugins that we have used.

Install the ionic-native wrappers for these plugins as well.

Open up app.module.ts and add the below code.

We are simply importing our plugins. Don’t forget to add them in the providers as well.

Now let’s break down the code in the imghandler.ts file. Rather than describing in detail (as I did in my post on serving images with firebase storage), I will make short concise points on what I have done.

  1. We are making use of the file-chooser plugin to choose a file from the phone’s filesystem.
  2. We are making use of the filepath plugin to resolve the native path of the file.
  3. This is then fed into a reader.
  4. Once the reader finishes reading, a blob is created.
  5. The blob is stored in firebase storage.
  6. Once it is successfully stored, the download url of that file is got using getDownloadURL() method and then sent to the calling statement in the profilepic.ts file.

Now I am using zones to update the imgurl with this url so that it would change the image in real-time thereby providing the user a preview of his account picture. Also the moveon variable is changed to false, which indirectly means that the upload & proceed button will be displayed now.

Let’s go ahead and create a updateimage() function in the user.ts file now.

Open up user.ts and add the below code.

This is pretty much self-explanatory. I am simply updating the users collection with the new image url and also updating the firebase users list.

Whoo.. That’s it guys, Once this is successfully done, we can simply direct the user to the Tabs page.

If everything goes fine you would see the below screen.

Screenshot_2017-06-13-18-11-38 Screenshot_2017-06-13-18-11-53


Notice that the first image shows skip this step button, whereas the second image shows the upload & proceed button denoting the stored image in firebase storage.

In our next post we’ll see how to design the profile tab inside our app.

Hope this helped you guys. If you felt that this was helpful, kindly consider supporting me through this link It would help me keep providing quality content for free.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Kuldeep Μaurya

    Thanks for the wonder tutorial bro!!
    Having Problems when uploading profile pic..
    It’s showing Uncaught(in promise)
    Help me bro and thanks alot

    • Vincent Gauthier

      that means it only works in mobile devices, not for testing in the browser

  • Konstantin

    Hey, can you make a video for uploading image in iOS, because I see that this Filechooser working only in Android.

    Thanks in advance Raja

  • Miguel Vera

    Hi! this has been a great tutorial. Thank you so much! However, I keep getting this error when trying to access the profile tab. The app uploads ‘correctly’ on the console ‘ionic serve’. I can login and checked in firebase and my user is registered but when clicking on the Profile tab, I get this runtime error: “ERROR Error: Uncaught (in promise): Error: No provider for FileChooser!
    Error: No provider for FileChooser!”. I have have doubled-checked my code with yours in github but just can’t find the problem. Any advice? Thanks in advance!

    • You would need to install the File Chooser plugin and the native wrapper for it bro.. Thanks.. :)

      • Miguel Vera

        Already did, bro. The 3 plugins and the 3 wrappers. :-s


        A couple days ago, while working on the project. I was prompted to update Ionic to 3.8, this version no longer requires the Cordova cli since it’s already integrated in Ionic’s core. So I did.

        What do you think?

        Many thanks!

        • You fixed this bro..? I updated it now to 3.8 (or the latest version) and I can’t even take a build now.. Have been stuck with this for a couple of hours now.. (Ionic released an update to cli couple of hours back)

          • Miguel Vera

            Noup dude. Been trying different options but haven’t been able to work it out. I’m teying to downgrade to 3.7.0 but the 3.8.0 just won’t go without a fight! Maybe if you try downgrading back to 3.7 and let us how to downgrade if you have

            I’m also considering restarting the project on a diferent directory where I can install 3.7. Will try this evening :-s

            And this morning I was prompted to upgrade to 3.9!!! Can you believe it????

            Let you know if can work it out.


          • Please don’t upgrade to 3.9.. (3.9.1 was the version released 3 hours back and it’s one I am stuck with)

          • Miguel Vera

            here’s a screen of my errors. I’m just a beginner, so hopefully you have a better idea.


          • I fixed this error by adding the vendor.js line. Please add this line in your index.html above the main.js src line.. like this.

          • Miguel Vera

            hi bro!

            JUST SOLVED IT!!!

            I had failed to include the plugins references in the providers list below in the same app.module.ts.

            Since your post only said: “don’t forget to add to the providers as well”, I thought I had to add the imports to the rest of the providers .ts files already created. My bad. Beginner’s error.

            All good now!

            Many thanks for your help!

          • Miguel Vera

            And here’s the error stack

            I have already re-installed the cordova cli, plugins and wrappers. Nothing seems to work :-(

            Runtime Error
            Uncaught (in promise): Error: No provider for FileChooser! Error: No provider for FileChooser! at injectionError (http://localhost:8100/build/vendor.js:1590:86) at noProviderError (http://localhost:8100/build/vendor.js:1628:12) at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:3129:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/vendor.js:3168:25) at ReflectiveInjector_._getByKey (http://localhost:8100/build/vendor.js:3100:25) at ReflectiveInjector_.get (http://localhost:8100/build/vendor.js:2969:21) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:237:122) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:443:58) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3936:44) at ProfilePageModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3937:52)

          • Miguel Vera

            Hi buddy.

            I managed to revert to 3.7.0.

            I uninstalled ionic:
            npm uninstall -g ionic

            Ran ionic info to check. No ionic detected

            Then re-installed ionic:
            npm -g ionic @3.7.0

            Then re-installed local ionic cli:
            npm install –save-dev –save-exact ionic@3.7.0

            Then re-installed cordova
            npm install -g cordova

            Ran ionic info:

            @ionic/cli-plugin-cordova: 1.5.0
            @ionic/cli-plugin-ionic-angular: 1.4.1
            @ionic/cli-utils: 1.7.0
            Ionic (Ionic CLI): 3.7.0

            Global packages:
            Cordova CLI: 7.0.1

            Local packages:
            @ionic/app-scripts: 2.1.3
            Cordova platforms: none
            Ionic Framework: ionic-angular 3.6.0

            All reverted to pre-3.8 ionic-cordova integration!

            Hope it helps!

            (Can’t get the profile tab to work though :-( )

  • Rajat

    while making build i get this error…

    Error: ./src/app/app.module.ngfactory.js
    Module not found: Error: Can’t resolve ‘../../angularfire2/auth’ in ‘D:Rajat Wo
    rkSpaceIonic Workplaceionic3chat-mastersrcapp’
    resolve ‘../../angularfire2/auth’ in ‘D:Rajat WorkSpaceIonic Workplaceionic3c
    using description file: D:Rajat WorkSpaceIonic Workplaceionic3chat-masterp
    ackage.json (relative path: ./src/app)
    Field ‘browser’ doesn’t contain a valid alias configuration
    after using description file: D:Rajat WorkSpaceIonic Workplaceionic3chat-ma
    sterpackage.json (relative path: ./src/app)
    using description file: D:Rajat WorkSpaceIonic Workplaceionic3chat-master
    package.json (relative path: ./angularfire2/auth)
    no extension
    Field ‘browser’ doesn’t contain a valid alias configuration
    D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth d
    oesn’t exist
    Field ‘browser’ doesn’t contain a valid alias configuration
    D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth.j
    s doesn’t exist
    Field ‘browser’ doesn’t contain a valid alias configuration
    D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth.t
    s doesn’t exist
    as directory
    D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth d
    oesn’t exist
    [D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth]
    [D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth.js]
    [D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth.ts]
    [D:Rajat WorkSpaceIonic Workplaceionic3chat-masterangularfire2auth]
    @ ./src/app/app.module.ngfactory.js 49:0-52
    @ ./src/app/main.ts

  • Andreas Agatha

    i follow all your tutrial episode, but i got a problem when i test on mobile phone, and i try to change profile pic, at signup also in profile tabs page, but teh pic always change to the default place holder image, can you help me ?
    something wrong with my rules at firebase or what ?
    this my rules code at storage firebase

    service {
    match /b/{bucket}/o {
    match /{allPaths=**} {
    allow read, write: if request.auth != null;

    thanks !

    • philippe

      please you have had the solution to this problem i have the same one right now?

  • An


    Thanks for your tutorial, it’s very helpful for me.
    Can you explan me: when do you use this.afireauth.auth, when do you use firebase.auth(). Both case are the same?


    • firebase.auth() is from the firebase sdk, whereas this.afireauth.auth is from the angularfire2 library

  • Rred Heart

    hi Raja, the please wait loading is shown non stop whenever i try to upload profile picture same also when i want to sending picture. Why is that?

    • does it get uploaded on firebase storage?

      • Rred Heart


    • Châu An Thuận

      I has same problem. Can you help me if you fixed it?

  • Jakob Hübschmann Pettit

    Hi Raja,
    great guide, thanks!
    I have followed the guide exactly, yet whenever I go to upload an image I get stuck with an infinite please wait loader. The image is not being uploaded to Firebase storage, it just gets stuck there. Any suggestions on how to proceed from here would be greatly appreciated!

    • Jakob Hübschmann Pettit

      I must add that it works as long as I set the firebase storage rules to public, but this poses a security issu imho.

    • Kehinde Adeoya

      Was this problem solved? I’d been on this for more than 5 days. How do I solve it. Please help out.

      • Jakob Hübschmann Pettit

        Ended up setting the firebase rules røto public. I think if you request email verification from the users you can set up firebase to allow authenticated users to post.

        • Kehinde Adeoya

          You mean setting like this: {
          "rules": {
          ".read": "auth == null",
          ".write": "auth == null"

          If I’m wrong, please can you provide an illustration what what you meant by setting the rules to public. This is my first project using firebase, so I’m pretty new. Sorry for the babyish questions.

  • Angelo James Corsega Hi Raja ive got this error see the image, that was long cant snippeta all. but when i Ctrl+S may editor, without doing anything in the code the error was gone and it will run. and another more when i upload image i`ve got error saying Uncaught (in promise): cordova not found. what seems to be the problem?. thanks in advance for the reply

  • Max Martínez Ruts

    Apparently there is a conflict with the file plugins. When they are installed something happens that generates errors when the project is builded!
    Does someone know how to solve this error?
    Or at least how to remove all the modifications that the plugin has generated, because even when I remove the plugin, error stays there.

  • Rahul Rao

    canot find name filepath
    error during –save package angularfire2@5.0.0-rc.11 requires a peer of @angular/platform-browser@^6.0.0 ionic

  • Rahul Rao

    E:ionicback>npm install @ionic-native/file-path –save
    npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/platform-browser@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/platform-browser-dynamic@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN angularfire2@5.0.0-rc.11 requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modulesfsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

    + @ionic-native/file-path@4.10.0
    updated 1 package in 13.15s

  • Rahul Rao

    and in browser cannot find filepath

  • william quimis

    tengo ese error
    ProfilePage.html:17 ERROR TypeError: Object(…) is not a function
    at (index.js:27)
    at ImghandlerProvider.webpackJsonp.507.ImghandlerProvider.uploadimage (imghandler.ts:30)
    at ProfilePage.webpackJsonp.855.ProfilePage.editimage (profile.ts:42)
    at Object.eval [as handleEvent] (ProfilePage.html:17)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at core.js:10629
    at HTMLDivElement.

  • Princess Marco

    2019 and still working, thx