Where to store the user credentials in an Angular application?

Question

The angular client application is running on http://localhost:4200

It communicates with a Spring based Restful API running on http://localhost:8080 The authentication mechanism at backend is http basic, and for every request Spring internally invokes a filter to check the authenticity of the credentials passed from the Angular client when a user logs in.

When a user logs in, his/her credentials are encoded with Base64.encodeBase64 and set into the Authorization header.

private getHeaders(){

    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization','Basic ' + btoa("bill:abc123"));
    return headers;
}

The btoa function is used to set the Authorization header. This works great and TLS/ HTTPS will be used to encrypt the credentials to securely pass over the network.

For subsequent request, I need to pass the same credentials every time. So, where should I store the user credentials, once he/she has logged in successfully for subsequent requests?

For example, this request:

addEmployee( employee : Employee ) : Observable<Response> {
      return this.http.post('http://localhost:8080/employee/', JSON.stringify(employee),
            {headers: this.getHeaders()}).map(res => res.json());
  }

Answer 1

About storing you have 3 ways.

localStorage

localStorage is storing key and a string value. It won't be wiped after closing browser.

// setting new item
localStorage.setItem('MyApp_Auth', JSON.stringify(obj));

// getting item
let auth;
if (localStorage.getItem('MyApp_Auth')
   auth = localStorage.getItem('MyApp_Auth');

// removing
localStorage.removeItem('MyApp_Auth');

// clear all data
localStorage.clear();

sessionStorage

sessionStorage is similiar to localStorage, but its data is only kept as long as session is not closed. Usage is exatcly the same as localStorage.

Cookies

Cookies are a bit more problematic since it's only

document.cookies = "username=John Doe; expires=Thu, 01 Jan 1970 00:00:00 UTC";

So it's hard to maintain because it's only one string separated with ;, so to use it the best option is 3rd party library. Something like js-cookies or more angular friendly angular2-cookie;

HttpInterceptor

Since version 4 of Angular you can implement HttpInterceptor in which you can automaticaly add headers to your every request. For more information, read Authenticaion using the HttpClient and HttpInterceptors.