EmberFire sign out button not showing up after createUserWithEmailAndPassword()

I am using emberfire to build my app and I am having an issue that the sign out button doesn't show up after I sign up a user by calling createUserWithEmailAndPassword() function. I can see that the user did show up in the data base from firebase console.

Here is what I am doing:

in app/pods/signup/route.js

import Ember from 'ember';

export default Ember.Controller.extend({
  firebaseApp: Ember.inject.service(),

  actions: {
    signUp() {
      const auth = this.get('firebaseApp').auth();
      const email = this.get('email');
      const pass = this.get('password');

      auth.createUserWithEmailAndPassword(email, pass).then((userResponse) => {
        console.log('in createUserWithEmailAndPassword function');
        const user = this.store.createRecord('user', {
          id: userResponse.uid,
          email: userResponse.email,
        });
        return user.save();
      });
    }
  }
});

app/pods/components/app-navbar/template.js

  <small style="color: white;">Logged in as </small>
   <button  class="btn btn-success">Sign out</button>

app/pods/components/app-navbar/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  session: Ember.inject.service('session'),

  actions: {
    signOut() {
      this.get('signOut')();
    }
  }
});

I used my component in application.hbs so the navbar will always stay on the top.

I expect the sign out button will show up after I sign up by calling createUserWithEmailAndPassword(), but it doesn't. But if I refresh the page, the button shows up.

I also tried to login with google by calling this.get('session').open(...) function and the sign out button works perfectly.

I am very confused and I wish someone can help me understand what is going on.

Thanks in advance.