Configure angular project to send http cookie in development mode

Question

I've written a PHP backend that checks if a request is coming from an authorized user. This is done as simple as using the following code

if(!isset($_SESSION["id"])){
    http_response_code(403);
    die("Error. Unauthorized user.");  
}

This is perfectly okay in production, but in development I face issues, because angular app running on local development server does not send cookies (nor does the server store it).

How can I configure angular server/app to send session cookies during development? I am using the following code to start an app

ng serve --port 4000 --host example.com --ssl true --sslKey path --sslCert path2

UPDATE

I don't want to change my app logic or anything. this is solley to make development manageable. I need to send cookies at ng serve or configure node server to send cookie when it operates. Also if use one version in production, and another in development (as the forcefully implied answer suggests), I need to change it every time push an update and then change it back, leaving me with 2 versions. terrible, terrible practice

UPDATE 2:

For additional answer see this Q&A: sending cookies in Angular app and Access-Control-Allow-Origin in development mode

Possible duplicate of [How to send "Cookie" in request header for all the requests in Angular2?](https://stackoverflow.com/questions/35602866/how-to-send-cookie-in-request-header-for-all-the-requests-in-angular2) — Brandon Taylor, Oct 18 '18 at 19:33
nonono, I don't want to change my app. My app runs just fine in production, in fact, your suggestion will break it. I need to send cookies at `ng serve`. Also if use one verision in production, and another in development, I need to change it every time push an update and then change it back, leaving me with 2 versions. terrible, terrible practice — potato, Oct 18 '18 at 19:39
Well, I don't know how you expect Angular to send cookies unless you tell it to. To the best of my knowledge, there isn't an option within `ng serve` to make the HttpClient class use the `withCredentials` option. — Brandon Taylor, Oct 18 '18 at 19:44
You could always add a condition to the Http Interceptor to only pass cookies if your environment is local. — Brandon Taylor, Oct 18 '18 at 19:46
woa.. crazy, that people have 2 versions for every project that needs authorization. I am pretty sure I will forget to unplug local environemnt in at least one of the next 100 updates :) — potato, Oct 18 '18 at 19:48
Why do you think you would have two versions of your application if you're simply checking an environment variable provided by Angular itself? You'd be running and deploying the same code locally and in production. The only thing that would be different is the value in your environment.ts / environment.prod.ts. I'm not sure how this is a "terrible, terrible practice" — Brandon Taylor, Oct 18 '18 at 19:51
Thanks for help. I had to read about environment.ts and how it is used. Although I would prefer sending cookie at ng serve, using evnironment.ts also gets the job done. Post it as an answer if you need points — potato, Oct 19 '18 at 11:47
You're welcome. I certainly don't need the points, but added an answer for others. — Brandon Taylor, Oct 19 '18 at 14:27

score 3 · Accepted Answer · answered Oct 19 '18 at 14:27

It's pretty straightforward to pass cookies on every request. ng serve doesn't provide a way to turn this feature on, but you could pass cookies conditionally depending on your environment settings:

Here's a sample interceptor:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { environment } from '@app/environments/environment.ts'

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

  intercept (httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = httpRequest.clone({
      withCredentials: environment.sendCookies,
    });

    return next.handle(clonedRequest);
  }

}

In your environment.ts you can set sendCookies to true and in environment.prod.ts, set it to false. This way you still only have one version of your application, but different behavior where you need it.

Configure angular project to send http cookie in development mode

1 Answers1