How to add Basic Authentication header in post request using Angular?

Question

I have a function which does the post request and it is something like this , now In backend I have basic authentication , which means I have to pass the headers username and password in this request to call api succesfully ,I tried something like this and it didnt worked out ..

clickSubmit(event) {
    let httpHeaders = new HttpHeaders();
    httpHeaders.append('Content-Type', 'application/json');
    httpHeaders.append("Authorization", "Basic " + btoa("00000:magical"));

    const httpOptions = {
      headers: httpHeaders
    };

    let user = {
      "userId": this.userId,
      "userName": this.name,
      "adharno": this.adharno,
      "pancardno": this.pancardno,
      "address": this.address,
      "joineddate": this.joinedDate
    }
    const base_URL = 'http://localhost:8090/v1/users'
    return this.http.post(base_URL, user, httpOptions);


  }

score 0 · Answer 1 · answered Jun 19 '21 at 03:48

The header format for Basic Authentication is

Authorization: Basic <credentials>

where <credentials> is the username and password joined by a colon and then Base64 encoded.

So you create the credentials with:

const credentials = btoa(`${username}:${password}`);

and then set your post options to

{headers: new HttpHeaders({Authorization: `Basic ${credentials}`});

How to add Basic Authentication header in post request using Angular?

1 Answers1