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"=>"[email protected]", "password"=>"[FILTERED]"}}
WARNING: Can't verify CSRF token authenticity
User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."email" = '[email protected]' 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

hmm, and what seems to be a problem? You just send xhr, you get response with cookie, you can add some more info in response body, and on callback change something in the UI. — sparrovv
– sparrovv, Commented Nov 22, 2011 at 18:59
Use HTTP Auth or check stackoverflow.com/questions/5897060/… — Hauleth
– Hauleth, Commented Nov 22, 2011 at 19:54

Community · Accepted Answer · 2020-06-20 09:12:55Z

7

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 protected]', password: 'password'}},
  success: function(data, textStatus, xhr) {
    //called when successful
  }
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 5, 2011 at 6:33

VvDPzZ

3,0932 gold badges25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kevin Over a year ago

Wow, thanks, I'm still getting problems but this looks close. please see updated question. (this problem was for a previous project where an insecure solution was really hacked out, but right now i actually have the exact same problem for another project)

shybovycha Over a year ago

This one fixes my trouble i was fooling around a few days! Thanks!

dennismonsewicz Over a year ago

if you put remote: true on your sign-in form, Rails will handle the Ajax request for you (if you include require jquery_ujs in your application.js file)

Collectives™ on Stack Overflow

Rails Devise Ajax call

1 Answer 1

First to setup CSRF Token in your application.js:

Second to post your login information:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

First to setup CSRF Token in your application.js:

Second to post your login information:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related