Angular 6 - httpClient passing basic auth in httpOptions

Question

I have a service in Angular 6 and I'm trying to change a record but it's saying I'm not authorized.

Right now I have this:

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

  update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

My question is:

How to I add basic authorization to my httpOptions or do I add it direct to the update method?

Prachi · Accepted Answer · 2018-06-05T09:16:40.183

47

You can add basic authorization by appending it in headers, as below:

var headers_object = new HttpHeaders();
headers_object.append('Content-Type', 'application/json');
headers_object.append("Authorization", "Basic " + btoa("username:password"));

const httpOptions = {
  headers: headers_object
};

edited Jun 05 '18 at 09:16

answered Jun 05 '18 at 07:56

Prachi

3,478
17
34

This is what i was after but how do I add that to this: const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'}) }; – Jun 05 '18 at 08:02
Getting an error: Argument of type '{ headers: Headers; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; – Jun 05 '18 at 08:15
You have to assign header variable in header parameter. H must be in lowercase. I have updated the solution to avoid the confusion. – Prachi Jun 05 '18 at 08:54
3

`new Headers();` should be `new HttpHeaders()` – Pardeep Jain Jun 05 '18 at 09:13
@PardeepJain It worked in Angular 4. I have updated the answer for Angular 5/6. Thanks. – Prachi Jun 05 '18 at 09:15
Yes, because OP is using v-5/6 as per question details – Pardeep Jain Jun 05 '18 at 09:18
Yes, I didn't note that. – Prachi Jun 05 '18 at 09:19
If the code does not work for you, see https://stackoverflow.com/questions/45286764/adding-a-http-header-to-the-angular-httpclient-doesnt-send-the-header-why – Sky Feb 03 '22 at 03:49

Mehdi Benmoha · Answer 2 · 2021-10-07T12:35:53.030

9

Looking at the angular.io documentation, it's pretty straightforward.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic my-auth-token'
  })
};

And you can use the httpOptions constant as you did.

For more information: https://angular.io/guide/http#adding-headers

PS: This is a method for small or quick apps if you want to build more robust apps, consider using an HTTP interceptor that automatically adds the Authorization header on the fly.

edited Oct 07 '21 at 12:35

answered Jun 05 '18 at 09:18

Mehdi Benmoha

3,694
3
23
43

Hi friend, I have 2 services for example, authservice to login and userService to get data, after to login i set localstorage and create token and in userService I've trying to get token but without success const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') }) }; its don't get token, any idea ? – Rafael Moura May 06 '19 at 19:37

Pardeep Jain · Answer 3 · 2019-05-15T12:31:34.263

8

Just add your token/authorization in the headers like this -

let httpHeaders = new HttpHeaders()
              .set('authorization', this.authorizationHeaderValue)
              .set('Content-Type', application/json);

Both have methods such as set and append. set constructs a new body with a new value and append constructs a new body with an appended value

PS: Here I am assuming the variable (this.authorizationHeaderValue) value is included value like Bearer or Basic or whatever needed, Change it accordingly.

For more read here

https://www.concretepage.com/angular-2/angular-httpclient-get-example#parameters

edited May 15 '19 at 12:31

answered Jun 05 '18 at 07:54

Pardeep Jain

84,110
37
165
215

it's probably the comma on line 2 – Joakim Jun 05 '18 at 17:49
1

Ohh , that was just a typo mistake. Didn't deserve downvote for this anyways thanks for pointing out :) – Pardeep Jain Jun 06 '18 at 04:43
Your Authroization header is wrong. "Authorization" and the value usually has the word "Basic " or "Digest " or "Bearer " in front of the actual token (not the blank space). If this is an OAuth token, then you'd use "Bearer " in front of the authtoken – Kevin M May 10 '19 at 17:22
@KevinM you are right but I am assuming (As best practice) to be a string inlcuding `Bearer or Basic etc` in the variable named here `this.authToken`. Seems it's self understood – Pardeep Jain May 13 '19 at 04:58
1

I wondered if that's what you were implying. But with a variable name of just "authToken" I assumed it was JUST the token itself, not the Authorization header string (I probably would name the variable "authorizationHeaderValue" or something to that effect. – Kevin M May 14 '19 at 13:35
1

You are right, Variable name could be better instead of simply `authToken`, Will update the variable name as you suggested. thanks @KevinM – Pardeep Jain May 15 '19 at 12:30
@KevinM This is improtant anyways, I loved it! – Pardeep Jain May 17 '19 at 05:09

score 2 · Answer 4 · answered Nov 12 '19 at 11:11

httpClient passing basic auth in httpOptions is different in Angular 6

let httpHeaders= new HttpHeaders();
httpHeaders.append('Content-Type', 'application/json');
httpHeaders.append("Authorization", "Basic " + btoa("username:password"));

const httpOptions = {
  headers: httpHeaders
};

update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

score 2 · Answer 5 · answered Jan 15 '20 at 15:17

2

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Content-Type': 'application/json',
      'Authorization': `Basic ` + btoa('user:password'),
    }
  )
};


return this.http.post<any>(
      `apilink`,{},
      httpOptions
    ).pipe(map(res => {
      return res;
}));

answered Jan 15 '20 at 15:17

A. Fantinato

21
2

1

Welcome to SO. You should add some explanation to your answer. – m02ph3u5 Jan 15 '20 at 15:51

score 0 · Answer 6 · edited Mar 11 '20 at 06:00

0

import { HttpClient, HttpHeaders } from '@angular/common/http';

var headers = new HttpHeaders();

var token = localStorage.getItem('token');

headers.append('Content-Type', 'application/json');

headers.append("Authorization", "Basic " + token));

const httpOptions = {
  headers: headers
};

edited Mar 11 '20 at 06:00

Community

1
1

answered Nov 28 '19 at 07:34

Sanket Jadav

9
3

localStorage.getItem is to use to get the token value inside to the local storage if you set to the local storage. – Sanket Jadav Nov 28 '19 at 07:35

score 0 · Answer 7 · answered Jan 05 '21 at 08:31

Many servers require extra headers for save operations. For example, a server might require an authorization token, or "Content-Type" header to explicitly declare the MIME type of the request body. In your case, you can do basic authorization by following code.

import { HttpHeaders } from '@angular/common/http'; 
const httpOptions = {headers: new HttpHeaders({
'Content-Type':  'application/json',
Authorization: 'my-auth-token' })};

you can update the authorization header before making the next request

httpOptions.headers =  httpOptions.headers.set('Authorization', 'my-new-auth-token');

Angular 6 - httpClient passing basic auth in httpOptions

7 Answers7

Linked