Fetch objects from Firebase database and display them in your Ionic App

Last updated on July 2nd, 2017 |

We just learned about authentication, now it’s time to add some more functionality to our app, we’re going to learn how to work with objects from the database, while we create a profile page for our users.

I decided to go with a user profile because it can attack to main problems at once, working with Objects and updating the data in our Firebase authentication.

I think that’s enough for an intro, so let’s jump into business!

Setup

The first thing we are going to do is to setup everything we’ll need for this part of the tutorial, we’ll be creating a profile page and a profile data provider.

Remember that the actual files are already created, now we just need to start building on top of them.

The first thing we’ll do is to create a link to the profile page, so go to home.html and create a button in the header that calls the goToProfile() function:

<ion-header>
  <ion-navbar>
    <ion-title>Home Page</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="goToProfile()">
        <ion-icon name="person"></ion-icon>
       </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Now we’ll go to the home.ts file and create a function to send our users to the profile page:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}

  goToProfile(){ 
    this.navCtrl.push('profile'); 
  }
}

That wasn’t so hard, was it?

Creating the User Profile Provider

Now into a bit more complicated bits, we are going to create our profile provider, the idea for this provider is that it lets us store our profile information in Firebase’s real time database and also change our email and password from our profile data.

This provider should have a function for:

• Getting the user profile
• Updating the user’s name
• Updating the user’s date of birth (I always save this stuff so I can surprise my users later)
• Updating the user’s email both in the real time database and the auth data
• Changing the user’s password.

The first thing we need to do to get things rolling is to import Firebase:

import firebase from 'firebase';

Then, let’s create an authentication listener inside the constructor

public userProfile:firebase.database.Reference;
public currentUser:firebase.User;

constructor() {
  firebase.auth().onAuthStateChanged( user => {
    if (user){
      this.currentUser = user;
      this.userProfile = firebase.database().ref(`/userProfile/${user.uid}`);
    }
  });
}

This is because we want to get both the user object and the userProfile database node, we create the observer because we want to make sure we get a proper value there.

Now we can start creating our functions, let’s start with a function that returns the user’s profile from the database:

getUserProfile(): firebase.database.Reference {
  return this.userProfile;
}

That function returns:

firebase.database().ref(`/userProfile/${user.uid}`)

Which is a reference to a database node called userProfile/<userId>.

And if you need to make changes in the future, you’ll be able to make them in just one place.

Next we’re going to create a function to update the user’s name:

updateName(firstName: string, lastName: string): firebase.Promise<void> {
  return this.userProfile.update({
    firstName: firstName,
    lastName: lastName,
  });
}

We’re using .update() here because we only want to update the firstName and lastName properties, if we were to use .set() to write to the database it would delete everything under the user’s profile and replace it with the first and last name.

.update() also returns a promise, but it’s void, meaning it has nothing inside, so you use it just to see when the operation was actually completed and then perform something else.

Next function in line would be the one to update the user’s birthday, this is pretty much the exact same thing as the updateName() function, with the slight difference that we’re updating a different property:

updateDOB(birthDate: string): firebase.Promise<any> {
  return this.userProfile.update({
    birthDate: birthDate,
  });
}

Now is where things get a little trickier, we’re going to change the user’s email address, why is it tricky? Because we’re not only going to change the email from the database, we’re going to change it from the auth service too.

That means that we’re changing the email the user uses to log into our app, and you can’t just call the change email function and have it magically work.

This is because some security-sensitive actions (deleting an account, setting a primary email address, and changing a password) require that the user has recently signed in.

If you perform one of these actions, and the user signed in too long ago, the action fails with an error. When this happens, re-authenticate the user by getting new sign-in credentials from the user and passing the credentials to reauthenticate.

I’m going to go ahead and create the function and then break it down for you to understand better:

updateEmail(newEmail: string, password: string): firebase.Promise<any> {
  const credential =  firebase.auth.EmailAuthProvider
    .credential(this.currentUser.email, password);

  return this.currentUser.reauthenticateWithCredential(credential)
  .then( user => {
    this.currentUser.updateEmail(newEmail).then( user => {
      this.userProfile.update({ email: newEmail });
    });
  });
}

Alright, here’s what’s going on:

• We are using firebase.auth.EmailAuthProvider.credential(); to create a credential object, firebase uses this for authentication.

• We’re passing that credential object to the re-authenticate function, my best guess is that Firebase does this to make sure the user trying to change the email is the actual user who owns the account. For example, if they see the user added email and password recently they let it pass, but if not they ask for it again to avoid a scenario where the user leaves the phone unattended for a while and someone else tries to do this.

• After the re-authenticate function is completed we’re calling .updateEmail() and passing the new email address, the updateEmail() does as its name implies, it updates the user’s email address.

• After the user’s email address is updated in the authentication service we proceed to call the profile reference from the database and also update the email there.

The good thing about that being tricky is that now the updatePassword() function will be really easy for you!

updatePassword(newPassword: string, oldPassword: string):
firebase.Promise<any> {
  const credential =  firebase.auth.EmailAuthProvider
    .credential(this.currentUser.email, oldPassword);

  return this.currentUser.reauthenticateWithCredential(credential)
  .then( user => {
    this.currentUser.updatePassword(newPassword).then( user => {
      console.log("Password Changed");
    }, error => {
      console.log(error);
    });
  });
}

You should probably go get yourself a cookie, that was a lot of code and your sugar levels need a refill, I’m taking a 20-minute break myself to get some food…

20 minutes go by

…Alright, I’m back, let’s analyze what you have now, right now you have a fully functional provider that will handle all the profile related interactions between your application and Firebase.

Do you know why this is cool? Because you can call those functions from anywhere inside your app now, without copy/pasting a bunch of functions to make it work.

did you finish the book? If you want to upgrade to the PREMIUM package use the link below to discount what you already paid for the BASIC package. Check out the discount here.

did you finish the book? If you want to upgrade to the PREMIUM package use the link below to discount what you already paid for the COMPLETE package. Check out the discount here.

Follow @javebratt

Now that it’s working, we’re going to be creating the profile page, it’s going to be the page where we display, add, and update our user’s profile information.

Creating the Profile Page.

We’re going to break this down into 3 parts, the view, the design, and the code.

The first thing we’re going to do is the view before we get started I want to explain the logic behind it first.

Instead of having multiple views where you go to update pieces of the profile, I decided to create a single view of it, basically, whenever the user needs to update a property, she can just click on it and a small pop up appears where she can add the information without leaving the page.

So, with that in mind, here’s the HTML code:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Profile</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="logOut()">
        <ion-icon name="log-out"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Personal Information
    </ion-list-header>

    <ion-item (click)="updateName()">
      <ion-grid>
        <ion-row>
          <ion-col col-6>
            Name
          </ion-col>
          <ion-col col-6 *ngIf="userProfile?.firstName || userProfile?.lastName">
            {{userProfile?.firstName}} {{userProfile?.lastName}}
          </ion-col>
          <ion-col col-6 class="placeholder-profile" *ngIf="!userProfile?.firstName">
            <span>
              Tap here to edit.
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>

    <ion-item>
      <ion-label class="dob-label">Date of Birth</ion-label>
      <ion-datetime displayFormat="MMM D, YYYY" pickerFormat="D MMM YYYY"
        [(ngModel)]="birthDate" (ionChange)="updateDOB(birthDate)"></ion-datetime>
    </ion-item>

    <ion-item (click)="updateEmail()">
      <ion-grid>
        <ion-row>
          <ion-col col-6>
            Email
          </ion-col>
          <ion-col col-6 *ngIf="userProfile?.email">
            {{userProfile?.email}}
          </ion-col>
          <ion-col col-6 class="placeholder-profile" *ngIf="!userProfile?.email">
            <span>
              Tap here to edit.
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>

    <ion-item (click)="updatePassword()">
      <ion-grid>
        <ion-row>
          <ion-col col-6>
            Password
          </ion-col>
          <ion-col col-6 class="placeholder-profile">
            <span>
              Tap here to edit.
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>

  <button ion-button block (click)="logOut()">
    Sign Out
  </button>

</ion-content>

It should be very easy to understand, the labels take the left half of the grid and the values take the right half.

If there’s no value we’ll show a placeholder that says: “Tap here to edit” this will let our user know that they need to tap there to be able to edit the profile items.

The one that’s different is the birth date part:

<ion-item>
  <ion-label class="dob-label">Date of Birth</ion-label>
  <ion-datetime displayFormat="MMM D, YYYY" pickerFormat="D MMM YYYY"
    [(ngModel)]="birthDate" (ionChange)="updateDOB(birthDate)"></ion-datetime>
</ion-item>

We could have opened a modal to update the DoB, but using the (ionChange) function allows us to handle everything on the same page 🙂

Now that the HTML is in place, we are going to create the styles for it (remember, CSS isn’t my thing, so if you can, improve upon this!)

page-profile {
  ion-item ion-label {
    margin: 0 !important;
  }

  ion-list {
    margin: 0;
    padding: 0;
  }

  ion-list-header {
    background-color: #ECECEC;
    margin: 0;
    padding: 0;
  }

  ion-item {
    padding: 0 !important;
  }

  ion-datetime {
    padding-left: 3px !important;
  }

  .item-inner {
    border: none !important;
    padding: 0;
  }

  .popover-content {
    min-height: 0 !important;
    max-height: 88px !important;
  }

  .profile-popover {
    margin-top: -1px !important;
  }

  .placeholder-profile {
    color: #CCCCCC;
  }

  .dob-label {
    color: #000000 !important;
    padding: 10px !important;
    max-width: 50% !important;
  }
}

Nothing too weird, just some margins and colors.

And now we’re ready to start coding the functionalities for this page, the first thing we’ll need to do is import everything we’ll use and inject into the constructor when necessary:

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';
import { ProfileProvider } from '../../providers/profile/profile';
import { AuthProvider } from '../../providers/auth/auth';

@IonicPage({
  name: 'profile'
})
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

  constructor(public navCtrl: NavController, public alertCtrl: AlertController,
  public profileProvider: ProfileProvider, public authProvider: AuthProvider){}
}

We’re importing AlertController because we’ll display prompt alerts to capture the data the user is going to update.

We’re importing our profile and authentication providers because we need to call functions from both.

To start adding our functions we need to have our user profile present, so we can show the current data we have on screen, for that we’re going to first create 2 variables right before our constructor:

export class ProfilePage {
    public userProfile: any;
  public birthDate: string;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController,
  public profileProvider: ProfileProvider, public authProvider: AuthProvider){}
}

The userProfile variable will hold all the data from Firebase and our birthDate variable will interact with our date picker component.

Now it’s time to call our profile provider and ask for the user’s profile, so right after our constructor, go ahead and create the function:

ionViewDidEnter() {
  this.profileProvider.getUserProfile().on('value', userProfileSnapshot => {
    this.userProfile = userProfileSnapshot.val();
    this.birthDate = userProfileSnapshot.val().birthDate;
  });
}

Let’s break down what we did here:

• We’re using ionViewDidEnter(), this is part of Ionic’s lifecycle events, it’s called after the view rendered, and it’s the only one that’s ALWAYS called, meaning that if the view was cached it doesn’t matter, it will call the function again.

• We’re calling the getUserProfile() function from our ProfileProvider service, and when it returns we’re assigning the value from the object to our userProfile variable.

• If the userProfile had a birthDate property stored it’s going to assign it to the birthDate variable to use it in our date picker component.

Now that we have our user’s profile ready to use, it’s time to start adding the functions to add, modify or logout our users.

First, we’ll create a logout function, since it’s probably the easiest one:

logOut(){
  this.authProvider.logoutUser().then(() => {
    this.navCtrl.setRoot('login');
  });
}

This is exactly what you expected it to be (since you saw it in the previous chapter) it calls the logoutUser function and then it sets the LoginPage as our rootPage so the user is taken to login without the ability to have a back button.

NOTE: There’s one bug when you log out and then log back in with a different user, sometimes you see the details from the previous user in the profile page, to fix this, go to the src/providers/auth/auth.ts provider and find the logout function:

logoutUser(): firebase.Promise<void> {
  return firebase.auth().signOut();
}

Change it to look like this:

logoutUser(): firebase.Promise<void> {
  firebase.database().ref('/userProfile')
    .child(firebase.auth().currentUser.uid).off();

  return firebase.auth().signOut();
}

What that line is doing, is disconnecting the database reference to the user profile manually, to make sure that when you log in again it creates a new reference, this time for the correct user.

Now let’s move to updating our user’s name:

updateName(){
  let alert = this.alertCtrl.create({
    message: "Your first name & last name",
    inputs: [
      {
        name: 'firstName',
        placeholder: 'Your first name',
        value: this.userProfile.firstName
      },
      {
        name: 'lastName',
        placeholder: 'Your last name',
        value: this.userProfile.lastName
      },
    ],
    buttons: [
      {
        text: 'Cancel',
      },
      {
        text: 'Save',
        handler: data => {
          this.profileProvider.updateName(data.firstName, data.lastName);
        }
      }
    ]
  });
  alert.present();
}

We are creating a prompt here to ask users for their first and last name. Once we get them our “Save” button is going to call a handler, that’s just going to take those first and last name and send them to the updateName function of ProfileProvider.

The Birth Date is even easier since we created an (ionChange) inside the <ion-datetime> we just need to call that function and use it to pass the birth date to ProfileProvider

updateDOB(birthDate){
  this.profileProvider.updateDOB(birthDate);
}

Now email and password are going to be the same as the updateName function, just keep in mind that we are changing the input types to email & password to get the browser validation for them:

updateEmail(){
  let alert = this.alertCtrl.create({
    inputs: [
      {
        name: 'newEmail',
        placeholder: 'Your new email',
      },
      {
        name: 'password',
        placeholder: 'Your password',
        type: 'password'
      },
    ],
    buttons: [
      {
        text: 'Cancel',
      },
      {
        text: 'Save',
        handler: data => {
          this.profileProvider.updateEmail(data.newEmail, data.password);
        }
      }
    ]
  });
  alert.present();
}

updatePassword(){
  let alert = this.alertCtrl.create({
    inputs: [
      {
        name: 'newPassword',
        placeholder: 'Your new password',
        type: 'password'
      },
      {
        name: 'oldPassword',
        placeholder: 'Your old password',
        type: 'password'
      },
    ],
    buttons: [
      {
        text: 'Cancel',
      },
      {
        text: 'Save',
        handler: data => {
          this.profileProvider.updatePassword(data.newPassword, data.oldPassword);
        }
      }
    ]
  });
  alert.present();
}

That will create both functions and send the respective email & passwords to ProfileProvider.

And that’s it for now, at this point you should have a fully functional profile page, not only that, you also should have a better understanding about working with Objects in firebase.

If you’re running into any issues just leave a comment below and I’ll be happy to help.

Next Steps