EmberJS + Firebase: Returned custom user information should update UI

Question

SUMMARY: I have built a simple application with EmberJS, EmberFire, and Firebase. I am happy with the connections so far and have been able to generate custom user profile in Firebase. Once created, I am returned the custom object and can see that information within the console. However, I hadn't yet been able to utilize that data to update the page to display their profile instead of a form to complete their profile.

Relevant packages installed firebase, torrii, ember-paper, emberfire, ember-truth-helpers, Google authentication

Template

{{#if firebaseUser}}

    <div class="container">
        <h3>{{firebaseUser.displayName}}</h3>
        <img src="{{ firebaseUser.profilePic }}">
        <p>Your custom data 1: {{firebaseUser.customData1}}</p>
        <p>Your custom data 2: {{firebaseUser.customData2}}</p>
        {{#if firebaseUser.role}}
            <p>Special because: {{firebaseUser.uniqueAttributeA}}</p>
        {{else}}
            <p>Special because: {{firebaseUser.uniqueAttributeB}}</p>
        {{/if}}
    </div>

{{else}}

    <div class="container">
        <h3 class="center">Complete profile</h3> 
        {{#paper-form onSubmit=(action "createProfile") as |form|}}
            <div>
                {{#paper-select
                    disabled=disableSelect
                    label="Role"
                    options=roleOptions
                    selected=userRole
                    required=true
                    onChange=(action (mut userRole))
                    as |role|
                    }}
                    {{role}}
                {{/paper-select}}
                {{#paper-select
                    disabled=disableSelect
                    label="1st Data"
                    options=customData1Options
                    selected=dataOne
                    required=true
                    onChange=(action (mut dataOne))
                    as |customData1|
                    }}
                    {{customData1}}
                {{/paper-select}}
                {{#paper-select
                    disabled=disableSelect
                    label="2nd Data"
                    options=customData2Options
                    selected=dataTwo
                    required=true
                    onChange=(action (mut dataTwo))
                    as |customData2|
                    }}
                    {{customData1}}
                {{/paper-select}}
                {{#if (eq userRole 'roleA')}}
                    {{#paper-select
                        disabled=disableSelect
                        label="Rate"
                        options=rateOptions
                        selected=userRate
                        onChange=(action (mut userRate))
                        as |rate|}}
                        {{rate}} mph
                    {{/paper-select}}
                {{/if}}
                {{#paper-checkbox value=tosAgreement onChange=(action (mut tosAgreement)) required=true}}
                    Check if you agree to the <a href="/tos">Terms of Service</a>
                {{/paper-checkbox}}
            </div>
            <div class="center">
                {{#form.submit-button raised=true primary=true}}Submit{{/form.submit-button}}
            </div>
        {{/paper-form}}
    </div>

{{/if}}

<br>
<hr>
<br>

<button {{action "signOut"}}>{{#paper-button}}Sign out{{/paper-button}}</button>

Route

import Route from '@ember/routing/route';
export default Route.extend({

model: function() {
    if (this.get('session.currentUser.uid')) {
        let record = this.get('session.currentUser.uid');
        let firebaseUser = this.store.findRecord('people', record).then(function(firebaseUser) {
            console.log('Firebase userID: ' + firebaseUser.id);
            console.log('Firebase role: ' + firebaseUser.role);
            return firebaseUser;
        }, function(error) {
            console.error(error);
            console.log('User does not exist');
        });
    }
}});

Controller

import Controller from '@ember/controller';

const roleOptions = ['RoleA','RoleB'];
const customData1Options = ['Option1','Option2'];
const customData2Options = ['OptionA','OptionB','OptionC'];
const rateOptions = [1,2,3,4,5];

export default Controller.extend({

roleOptions, customData1Options, customData2Options, rateOptions,

actions: {
    createProfile: function() {
        console.log('Creating profile');

        var userRole = this.get('userRole');
        var customData1 = this.get('customData1');
        var customData2 = this.get('customData2');

        if (userRole == 'RoleA') {
            var role = false;
            var rate = this.get('userRate');
        } else {
            role = true;
        }

        if (customData1 == 'Option1') {
            var customData1 = 0;
        } else {
            customData1 = 1;
        }

        if (customData2 == 'OptionA') {
            var customData2 = 0;
        } else if (customData2 == 'OptionB') {
            customData2 = 1;
        } else {
            customData2 = 2;
        }

        var newUser = this.store.createRecord('people', {
            id: this.get('session.currentUser.uid'),
            name: this.get('session.currentUser.displayName'),
            profilePic: this.get('session.currentUser.photoURL'),
            role: role,
            customData1: customData1,
            customData2: customData2,
            created: new Date().getTime()
        newUser.save();
        console.log(newUser);

        if (role == true) { 
            console.log('Creating role A user');
            var newUserA = this.store.createRecord('usertypea', {
                id: this.get('session.currentUser.uid'),
                name: this.get('session.currentUser.displayName'),
                profilePic: this.get('session.currentUser.photoURL'),
                customData1: customData1,
                customData2: customData2,
                uniqueAttributeA: 42
            });
            newUserA.save();
            console.log(newUserA);

        } else {
            console.log('Creating role B user');
            var newUserB = this.store.createRecord('usertypeb', {
                id: this.get('session.currentUser.uid'),
                name: this.get('session.currentUser.displayName'),
                profilePic: this.get('session.currentUser.photoURL'),
                customData1: customData1,
                customData2: customData2
                uniqueAttributeB: somethingCool
                rate: rate
            });
            newUserB.save();
            console.log(newUserB);
        }
        return newUser;
    }
},
});

Question Once the user completes the form and the user and roleUser are created in Firebase, the returned user data should allow the user to now see their profile instead of the form. What am I missing? Also, only one of the roleUser types seems to be created. Please let me know if you need additional information

Answer 1

Some issues that I can see with your code:

1. For something to be available in template, it should be defined on controller. You don't define firebaseUser in controller.
2. Model hook will not be invoked after authentication. Ember calls it once per page visit or if you call refresh method of route.
3. Model hook should return promise, your model hook does not return anything

Did you read official ember guide? If no, that's the first thing you should do before starting to develop an application.

As for problem you trying to solve, torii has session service which is intended for things like storing and displaying authentication status. Also, this post seems to have some info on the subject