Unable to login Angular2 / Django rest framework

Question

I am using session authentication with the following Angular 2 service method.

  login(username : string, password : string) {
    var data = {
      username: username,
      password: password
    }
    return this.http.post(environment.apiEndpoint + 'login', data)
      .catch((error) => {
        return Observable.throw(error.json());
      });
  }

Result : Response contains csrftoken and sessionid in the header setcookie value but it's ignored by angular.

Adding with credentials causes CSRF invalid token error.

How to login using Angular 2 and Django rest framework with session authentication scheme ? Thnx in advance!

Answer 1

I used Django session auth with Angular2 like this:

loginUser (credentials: any): Observable<Profile> {
let headers = new Headers({ 'Content-Type': 'application/json'});
headers.append("X-CSRFToken", this.utils.getCookie('csrftoken'));

let options = new RequestOptions({ headers: headers, withCredentials: true });
return this.http.post(this.userUrl + 'auth/', credentials , options)
              .map(res => res.json())
              .catch(this.handleError);
}

In Django class based view:

@method_decorator(csrf_protect)
def post(self, request, format=None):

    user_data = request.data
    self.logger.info('Authenticating user {0}'.format(user_data['username']))


    user = authenticate(username=user_data['username'], password=user_data['password'])
    login(request, user)

I used Django rest framework. But I suggest you django-jwt auth instead of session(much less pain:)).