HttpContext Session resets after client side request only

Question

Overview

I have an ASP.net core API that has one controller. There are two relevant methods. The first Is LoginGet, which takes in a long token through the URL. Once the token is parsed through a separate core authentication API, the long token is stored like so:

 Request.HttpContext.Session.Set(longToken, Encoding.UTF8.GetBytes(stringResult));

Then, the API generates a GUID for the user to store in session storage. After the user retrieves that GUID, they can pass it through GetAll, which filters through a database only picking out the data that correlates to the user that passed through the GUID. That means the API has to take the GUID, and compare it to the long token that was stored in session at the LoginGet request.

The Good

It all works when I hit these request from my localhost. Here is the series of request I make:

First I hit LoginGet(): http://localhost:5000/api/picker/login?token=ljadsljdaslkjsdfljkljgsdfkjgfFSDDFSsakgfjhdfkhdsfFDAS/asdfkjhdsf+sfdhjkfdsa

That returns a GUID like this: 58fa0fec7726433da47dce966b313c69

Then I hit GetAll(): http://localhost:5000/api/picker?ath=58fa0fec7726433da47dce966b313c69

That returns my json data

The Bad

The above example works! So what's wrong? When I do those exact same request (but with a different random GUID) from my Angular 2 application which is being served locally on a different port (http://localhost:3000/), LoginGet() is successful and returns a new GUID, but when I make the second request, GetAll(), immediately after the first, while debugging, I see that the Session has changed on the API, as if I were doing the second request from a new browser, or I just cleared my cookies.

This was not the case when I was simply making these calls from the browser, myself, manually. I have my request being console logged on the front end, and I get the exact same request URLs as I explained above.

I feel like this has to be an issue with how I am making the request on the front end. But I don't see how that could be the case. Even with routing, my session should remain the same.

Here are the two request methods relevant to this issue (Angular 2)

public Get(): Observable<{}> {
    let newQuery = 'http://localhost:5000/api/picker?ath=' + sessionStorage.getItem('user.token');

    return this.http.get(newQuery).map(this.extractData)
        .catch(this.handleError);
}

public GetLogin(longToken: string) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let body = JSON.stringify({ password: longToken });

    return this.http.get('http://localhost:5000/api/picker/login?token=' + longToken);
}

The order of operations for those request go like so: 1. A longToken is given by the user 2. The long token is passed to GetLogin(longToken) 3. The result is returned and immediately subscribed to. 4. On success, the generated GUID from the API is set in sessionStorage 5. The appilication routes to a different component (this.router.navigateByUrl('/library?pvy=me')) 6. After routing, in library component ngOnInit, Get() is called and uses the GUID stored in sessionStorage. 7. The result is immediately subscribed to in the library component.

That's It

What could be happening in my Angular 2 App that changes the session on the API? Or am just completely lost on how Sessions work in .net core?

Answer 1

What I found out is that when hitting the API externally, from the browser Address bar, Headers were being generated automatically. Which means the cookies from the session could be stored there. When I was calling my Get() method from the angular 2 App, I wasn't adding a header to my request, so the API assumed it was a new session.

My new Get() method on the angular 2 app:

public Get(): Observable<{}> {
    let newQuery = 'http://localhost:5000/api/picker?ath=' + sessionStorage.getItem('user.token');

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get(newQuery, options).map(this.extractData)
        .catch(this.handleError);
}