Guess login with firebase and ember

Question

i try to implement a anonymous login with Ember and Firebase. I have successfully configure my project for use with Firebase and Emberfire, and i can login to my Firebase. But when i try to save user information in a Session initializer, i can't retrieve it to make my controllers aware of the user state. This is my code : I have a sidebar in my application.hbs that i want to display if the user is connected.

<div class="container-fluid" id="main">
    <div class="row">
        {{#if loggedIn}}
            <aside class="col-xs-3">
                {{outlet sidebar}}
            </aside>
            <div class="col-xs-9"> 
                {{outlet}}
            </div>
        {{else}}
            <div class="col-xs-12"> 
                {{outlet}}
            </div>
        {{/if}}

    </div>
</div>

Inside of my application.js controller i try to define a computed property :

import Ember from "ember";

var ApplicationController = Ember.ObjectController.extend({
    loggedIn :function() {
        console.log("Tota", this.session.get('isConnected'));
        return this.session.get('isConnected');
    }.property(this.session.get('isConnected')),




});

export default ApplicationController;

this.session references an Initializer that is inject inside of controllers and routes :

import Ember from 'ember';

export function initialize(container, application) {
    var session = Ember.Object.extend({
        authData : [],
        user : null,

        login : function(authData, user) {
            console.log(authData);
            console.log(user);
            this.set('authData', authData);
            this.set('user',user);
        },

      getUser: function() {
        return this.get('user');
      },

      getAuthData: function() {
        return this.get('authData');
      },

      isConnected : function() {
          return (this.get('user') == null) ? false : true;
      }.property('user')
    });

    application.register('session:main', session, { singleton: true });

    // Add `session` object to route to check user
    application.inject('route', 'session', 'session:main');

    // Add `session` object to controller to visualize in templates
    application.inject('controller', 'session', 'session:main');
}

export default {
  name: 'session',
  initialize: initialize
};

And this is my LoginController :

import Ember from "ember";

var LoginController = Ember.ObjectController.extend({
    model : {},
    ages : function() {
        var ages = Ember.A();
        for(var i = 18; i <= 99; i++) {
            ages.push(i);
        }
        return ages;
    }.property(),

    sexs : ['Male', 'Female'],
    actions : {
        logIn : function() {
            var data = this.getProperties("name", "age", "sex");
            var that = this;
            this.database.authAnonymously(function(error, authData) {
                if (error) {
                    console.log(error);
                } else {
                    var newUser = that.store.createRecord('user', {
                        name: data['name'],
                        age: data['age'],
                        sex:(data['age'] === "Male" ? 0 : 1)
                    });
                    newUser.save();
                    that.session.login(authData, newUser);
                    console.log("Toto", that.session.get('isConnected'));
                    that.transitionToRoute('chat');
                }
            });
        }
    }
});

export default LoginController;

So in my application.js, if i define loggedIn to be just a property() not property(this.session.get('isConnected'). loggedIn is not refreshed when the user connects to the application. If i tell it to computes with " this.session.get('isConnected') ", Ember tells me that "this.session" is not defined.

How to refresh this value, to tell to my template to display sidebar if my user is connected?

Kingpin2k Kingpin2k · Accepted Answer · 2014-12-12T15:44:42

Simple answer

var ApplicationController = Ember.ObjectController.extend({
    loggedIn :Em.computed.alias('session.isConnected'),
// or
    loggedIn : function(){
      return this.get('session.isConnected');
    }.property('session.isConnected')
});

Your problem was your dependencies. Either you weren't watching it (property()) or you were crashing because this.session doesn't exist in the scope of the window. And I doubt Ember was really yelling it at you, more of just the javascript engine while it parsing your javascript.

loggedIn :function() {
    console.log("Tota", this.session.get('isConnected'));
    return this.session.get('isConnected');
}.property(), 
// this is resolved while defining the controller, think of its scope

It is resolved like this:

var tmp = this.session.get('isConnected');

var tmp2 =  function() {
    console.log("Tota", this.session.get('isConnected'));
    return this.session.get('isConnected');
}.property(tmp);

var tmp3 = {
   loggedIn: tmp2
};

var ApplicationController = Ember.ObjectController.extend(tmp3);

Guess login with firebase and ember

1 Answers