How to go to new page after successful login with EmberFire?

Question

I am trying to go to a new page after a successful login using Firebase and EmberFire.

Below is my controller.js for my sign in page

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    signIn(provider) {
      let controller = this;
      this.get('session').open('firebase', {
        provider: provider,
        email: this.get('email') || '',
        password: this.get('password') || '',
      }).then(() => {
        controller.set('email', null);
        controller.set('password', null);
      }, (error) => {
        console.log(error);
      });
    }
  }
});

Below is my route.js for my sign in page

import Ember from 'ember';

export default Ember.Route.extend({
  login: function() {
  let controller = this.get('controller');
  let email = controller.get('userEmail');
  let password = controller.get('userPassword');
  this.get('session').open('firebase', {
    provider: 'password',
    email: email,
    password: password
  }).then(function() {
    this.transitionTo('protected');
  }.bind(this));
}
});

below is my template.hbs

{{outlet}}

<form class="login">
  <h3>Log in to BettorHalf</h3>
  {{input
      type='text'
      class='form-control'
      value=email
      placeholder="Email address"
  }}
  {{input
    type='password'
    class='form-control'
    value=password
    placeholder='password'
}}
<button 
  class="signinbtn" 
  {{action 'signIn' 'password'}}
>
  {{ 'sign-in'}} Sign In
</button>
</form>

I am trying to log a person in using Firebase auth and then going to a new page which will populate that persons information by querying the relevant data attached to a user.

Thanks for any help you can be, I am new to coding and pretty new to Ember and Firebase.

Answer 1

When using 'password' as your provider the login page controller.js file should handle the action, something like

import Ember from 'ember';

export default Ember.Controller.extend({
actions: {
    signIn() {
        let controller = this;
        this.get('session').open('firebase', {
            provider: 'password',
            email: this.get('email') || '',
            password: this.get('password') || '',
        }).then(() => {
            controller.set('email', null);
            controller.set('password', null);
            this.transitionToRoute('profile');
        }, (error) => {
            console.log(error);
        });
    }
}
});

Within a controller you use this.transitionToRoute() to goto the desired page.