Handling user registration in an Ember.js/Rails/Devise app

5
votes

I'm playing around with writing a pure Ember.js app on top of Rails 4 and I'm puzzled how user management is handled. My original idea was to use pure server-rendered templates (ERB) to do the user registration and login via Devise, and then the rest of the app would use the Ember framework.

The problem with that is that Ember wants to take over the <body> tag and control the entire viewport. In this way I can't pick and choose which aspects of the app should use server-rendered Erb templates and which should live in the Ember logic.

I see plenty of examples of how to deal with a user that's already logged-in and ember-auth looks interesting to facilitate authentication-aware controllers, but I've seen no tutorials or suggestions on allowing the full user signup experience to take place in the Ember app.

Am I missing something, either from a technical perspective where I just haven't found the right code or from a architectural perspective where I shouldn't be doing it this way?

This is with ember-rails (0.12.0 w/1.0.0.rc3.3 ember-source), Rails 4.0.0.rc1, and Devise (rails4 branch).

3
ruby-on-railsdeviseember.js

3 Answers

6
votes

ember-auth dev here.

You don't actually need any special treatment for user sign up. Treat user sign up as you would for another model, in the sense that creating a user model will not require authentication. (Editing it or deleting it should require authentication though.)

Your implementation might look like:

App.User = DS.Model.extend
  email: DS.attr 'string'
  password: DS.attr 'string'

App.UsersNewRoute = Em.Route.extend
  model: ->
    App.User.createRecord()

App.UsersNewController = Em.ObjectController.extend 
  create: ->
    @store.commit()

Error-checking, template code, etc, skipped for brevity.

1
votes

This is here for reference to what worked based off of @heartsentwined's answer since pasting in comments doesn't work very well. See the comments for more info. Since my api returns the user json I just pass in the format its expecting. 

didCreate: function() {
  var user = App.Auth.get('_response').response.user;
  var auth = {auth_token: user.auth_token, id: user.id};
  App.Auth.get('_response').canonicalize(auth);
  App.Auth.trigger('signInSuccess');
}

UPDATE: I switched to ember-model and now do this in the same place that I call model.save() (the submit action of SignupController).

var model = this.get('model'); 
model.on('didCreateRecord', function() { 
  var user = this.data;
  var auth = {auth_token: user.auth_token, user_id: user.id, remember_token: user.remember_token};
  App.Auth.get('_response').canonicalize(auth);
  App.Auth.trigger('signInSuccess');
}); 

model.save();
1
votes

The solutions above ALMOST but not quite worked for me. Here is what did work:

didCreate: function() {
  var user = App.Auth.get('_response').response.user;
  App.Auth.signIn({
    data: {
      'email':    user.email,
      'password': this.get('password'),
      'remember': true
    }
  });
}

App.Auth.signIn is used in the documentation explicitly: http://ember-auth.herokuapp.com/docs