Signing in through AJAX post request on Django All-auth

Question

According to the documentation of django all-auth , it supports logging in through AJAX requests.When I make a normal post request to "accounts/login/" ,content type of the response header is "text/html". But when I make a ajax call it is "application/json". I am unable to figure what I am doing wrong, I have tried changing the contentType and dataType in ajax call but it gives a 400 Bad request error.

I have not modified any URL or view of the default Django all-auth app.

I am including the JavaScript code here -

<script type="text/javascript">
 
var $button = $('#login_button');

    $button.on('click',function(){

      var data = {"csrfmiddlewaretoken" : document.getElementsByName('csrfmiddlewaretoken')[0].value,
       "login": $('#id_login').val(),
       "password": $('#id_password').val(),
       "remember": $('#id_remember').val() };

        var temp = {'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken'[0].value };

        $.post({
          url : "{% url 'account_login' %}",
          headers: temp,
          type: "POST",
          data : data,
          contentType: "application/x-www-form-urlencoded",
          dataType: "text",
          success : function(data) {
            // console.log(data);
          },

        });

  });



</script>

Answer 1

it works for me, try:

$.post("{% url 'account_login' %}", {
   "csrfmiddlewaretoken" : document.getElementsByName('csrfmiddlewaretoken')[0].value,
   "login": $('#id_login').val(),
   "password": $('#id_password').val(),
   "remember": $('#id_remember').val() 
   }, 
   function (data, status) {
     // console.log(data);
});

Answer 2

Here is how I used AJAX with vanilla JavaScript to login to django-allauth.

The django-allauth AJAX response does not include form errors, so I created a new class-based view based on Adam Starrh's solution:

from django.http import JsonResponse
from allauth.account.views import LoginView

class AjaxLoginView(LoginView):
    def post(self, request, *args, **kwargs):
        form_class = self.get_form_class()
        form = self.get_form(form_class)
        if form.is_valid():
            response = self.form_valid(form)
            return JsonResponse({'loggedIn': True})
        else:
            return JsonResponse({'loggedIn': False, 'errors': form.errors})

In urls.py I added a path to this view:

path('login-with-ajax/', AjaxLoginView.as_view(), name='loginWithAjax')

The function that makes the AJAX request does the following:

1. Create a new form with FormData() and add the login and password.
2. Encode the form with a helper method.
3. Use XMLHttpRequest() to post the form, using content type "application/x-www-form-urlencoded".

Here is the method I used:

  loginWithAjax(submittedEmail,submittedPassword){
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest()
      let form = new FormData()
      form.set('login', submittedEmail)
      form.set('password', submittedPassword)
      xhr.open('POST', '/accounts/login-with-ajax/')
      xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded") 
      xhr.setRequestHeader("X-CSRFToken", this.getCookie("csrftoken"))
      xhr.onload = () => {
        if (xhr.status === 200) { //received an ajax response from view
          let ajaxResponse = {
            loggedIn: false,
            error: ''
          }
          let viewResponse = JSON.parse(xhr.response)
          ajaxResponse.loggedIn = viewResponse.loggedIn
          if (!ajaxResponse.loggedIn){
            ajaxResponse.error = viewResponse.errors.__all__[0]
          }
          resolve(ajaxResponse)
        } else { //did not receive an ajax response from view
          reject(xhr.status)
        } 
      } 
      xhr.send(this.urlencodeFormData(form))
    }) 
  }

I used the method provided by cuixiping to encode the form:

  urlencodeFormData(fd){
    var s = '';
    function encode(s){ return encodeURIComponent(s).replace(/%20/g,'+'); }
    for(var pair of fd.entries()){
        if(typeof pair[1]=='string'){
            s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
        }
    }
    return s;
}

I hope this saves someone some time in the future.

Answer 3

I had similar issue and for me worked this solution (not a nice way but worked): - in adapter.py you can see if form is not valid, status 400 and i have also changed the data

def ajax_response(self, request, response, redirect_to=None, form=None):
        data = {}
        status = response.status_code

        if redirect_to:
            status = 200
            data['location'] = redirect_to
        if form:
            if form.is_valid():
                status = 200
            else:
                status = 200
                data['form_errors'] = form._errors
            if hasattr(response, 'render'):
                response.render()
            data = response.content
        return HttpResponse(json.dumps(data),
                            status=status,
                            content_type='application/json')