Rails Devise Ajax call

Question

I need to handle login with devise through an ajax call. Right now I have a devise login that is built with simple forms, what exists for devise is meant completely for the server side. the client side is built completely independently of ruby. The person on the client side needs to know how to send information through AJAX with the proper parameters to handle login and sign in.

Edit

My application.js no looks like this

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
$(function(){
  $.ajaxSetup({
    beforeSend: function( xhr ) {
      var token = $('meta[name="csrf-token"]').attr('content');
      if (token) xhr.setRequestHeader('X-CSRF-Token', token);
    }
  });
});

and this is my post request

function signIn(email, password){

    var data = {user: {email: email, password: password}};
    $.ajax({
        url: 'http://localhost:3000/users/sign_in.json',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function(data, textStatus, xhr) {
            alert('success');
            alert(data); //to see what kind of outputs these have
            alert(textStatus);
            alert(xhr);

        //called when successful
        }
    });
}

this gives this in my rails console

Started POST "/users/sign_in.json" for 127.0.0.1 at 2011-12-08 12:30:06 -0500
Processing by SessionsController#create as JSON
Parameters: {"user"=>{"email"=>"someone@hotmail.com", "password"=>"[FILTERED]"}}
WARNING: Can't verify CSRF token authenticity
User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."email" = 'someone@hotmail.com' LIMIT 1
(0.3ms)  UPDATE "users" SET "last_sign_in_at" = '2011-12-08 17:29:23.030686', "current_sign_in_at" = '2011-12-08 17:30:07.069479', "sign_in_count" = 11, "updated_at" = '2011-12-08 17:30:07.069864' WHERE "users"."id" = 16
Completed 201 Created in 144ms (Views: 2.1ms | ActiveRecord: 0.0ms)

and in my browser when i inspect element and go to the console i get

XMLHttpRequest cannot load http://localhost:3000/users/sign_in.json. Origin null is not allowed by Access-Control-Allow-Origin.

And none of my alerts show.

What do i need to change

Answer 1

By default, You should write some code like this:

First to setup CSRF Token in your application.js:

$(function(){
  $.ajaxSetup({
    beforeSend: function( xhr ) {
      var token = $('meta[name="csrf-token"]').attr('content');
      if (token) xhr.setRequestHeader('X-CSRF-Token', token);
    }
  });
});

Second to post your login information:

$.ajax({
  url: '/users/sign_in.json',
  type: 'POST',
  dataType: 'json',
  data: {user: {email: 'email@example.com', password: 'password'}},
  success: function(data, textStatus, xhr) {
    //called when successful
  }
});