Angular 2 cookie authentication - ruby-on-rails

Question

I am writing some integration between Angular 2(not a big expert in JS) and Rails 4.2. On Rails side I am using devise for authentication. The thing is when I am requesting to sign in user, Set-Cookie header is returned in response. But then, when I am trying to request any authentication-required resource Cookie header has value of "Set-Cookie=null"(like there is no value of Set-Cookie?). Here's how it's done:
session.service.ts
#Injectable()
export class SessionService{
private headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'})
private createSessionUrl = 'http://localhost:3002/users/sign_in';
constructor(
private http: Http
) { }
create(email: string, password: string): Promise<User>{
return this.http.post(this.createSessionUrl, JSON.stringify({user:{email: email, password: password}}),
{ headers: this.headers })
.toPromise()
.then(response => response.json() as User)
.catch(this.handleError)
}
private handleError(error: any): Promise<any> {
return Promise.reject(error.message || error);
}
}
statistics.service.ts
import { Injectable } from '#angular/core';
import { Headers, Http, RequestOptions } from '#angular/http';
import { Statistics } from '../models/statistics.models'
import 'rxjs/add/operator/toPromise';
#Injectable()
export class StatisticsService{
private headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'})
private statisticsUrl = 'http://localhost:3002/statistics';
constructor(
private http: Http
) {}
show(): Promise<Statistics>{
let options = new RequestOptions({ headers: this.headers, withCredentials: true });
return this.http.get(this.statisticsUrl, options)
.toPromise()
.then(response => response.json() as Statistics)
.catch(this.handleError)
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
As far as I know, let options = new RequestOptions({ headers: this.headers, withCredentials: true });
should include proper Cookie in request.
If there is any extra info required, please write in comments.

Answer 1

your question is quite old, but I hope it helps anyway. I stumbled about that problem as well and wished to find your question answered. Now I take care of that.
I think you forgot the withCredentials option in the POST request of your session.service.ts. As you send a request with credentials (email and password) and you expect the response to set a cookie, you should tell the http-service about that:
return this.http.post(
this.createSessionUrl,
JSON.stringify({user:{email: email, password: password}}),
{ headers: this.headers, withCredentials: true }
)
Now the cookie should be stored by the browser and the next statistics request should contain the correct cookie.
Does this work?
Cheers,
Friedrich