angular 5 http.put request returns error "Authentication credentials were not provided"

Question

I want to update user information using the Http put method but it keeps returning

detail: "Authentication credentials were not provided

Here is my editComponent.ts

export class MyProfileEditComponent implements OnInit {
    store: any = {};
    editProfileForm: FormGroup;
    private formSubmitAttempt: boolean;

    constructor(fb: FormBuilder, public storeSrv: StoreService) {
        this.editProfileForm = fb.group({
            'mobile': [''],
            'address': [''],
            'description': [''],
            'storeUserId': [''],
    });
}

editProfile() {
   this.formSubmitAttempt = true;
   if (this.store.mobile || this.store.address || this.store.description) {
   this.storeSrv.editStore(this.store.mobile, this.store.address, this.store.description, this.store.storeUserId);
   }
 }
}

and my storeService.ts code

@Injectable()
export class StoreService {
 public updateStoreUrl = this.globals.UPDATE_STORE_URL
 store: any = {};
 storeId: any;

 constructor(private http: Http, private router: Router, private globals: Globals) { }

 editStore(mobile: string, address: string, description: string, storeId: any) {
    let tempStore = localStorage.getItem('store');
    if (tempStore) {
      this.store = JSON.parse(tempStore);
      this.storeId = this.store.user;
    }

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.put(this.updateStoreUrl + this.storeId + '/', { 
    headers })
       .subscribe(res => {
          let msg = JSON.parse(res['_body'])['message'];
       }, error => {
          let msg = JSON.parse(error._body)['message'];
       })
   };

I wonder where i am getting this wrong as the api endpoint is expecting the storeId in the request...it all looks good in my eyes but then again...Can you help me spot the error or lead me through right path?

update with editComponent.html

<form [formGroup]="editProfileForm" (ngSubmit)="editProfile()" novalidate>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group has-feedback" style="position: relative;">
                      <label for="storename">Store Name</label>
                      <input type="text" name="storename" class="form-control" placeholder="{{store.name}}" disabled>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group has-feedback" style="position: relative;">
                      <label for="mobilenumber">Mobile Number</label>
                      <input type="text" name="mobilenumber" class="form-control" placeholder="{{store.mobile}}" [(ngModel)]="store.mobile" [formControl]="editProfileForm.controls['mobile']">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group has-feedback" style="position: relative;">
                      <label for="address">Store Address</label>
                      <textarea name="address" id="" cols="30" rows="10" class="form-control" placeholder="{{store.address1}}"></textarea>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group has-feedback" style="position: relative">
                      <label for="description">Store Description</label>
                      <textarea name="description" id="" cols="30" rows="10" class="form-control" placeholder="{{store.description}}"></textarea>
                    </div>
                  </div>

                  <input type="text" name="storeUserId" [(ngModel)]="store.userId" [formControl]="editProfileForm.controls['storeUserId']" value="{{store.user}}" hidden>

                  <div class="btn-container" style="float: right; margin-right: 15px;">
                    <button class="btn btn-accent btn-flat b-r-10">Edit Profile</button>
                  </div>
                </div>
              </form>

Where do you supply the credentials? I don't see it anywhere — Mike Tung, May 08 '18 at 13:50
Why don't you use http interceptors and provide there the authorization credentials? https://alligator.io/angular/httpclient-interceptors/ — Christian Benseler, May 08 '18 at 13:56
@ChristianBenseler from the link you sent there are using the HttpClient but i am working with Http, will it be same use case? — CE0, May 08 '18 at 13:59
To put authentication credentials in the headers of your http requests, you can have a look at this answer: https://stackoverflow.com/questions/48017603/angular-sending-token-with-get-and-other-requests/48017800#48017800 — edkeveked, May 08 '18 at 14:07
@CE0 you should move to `HttpClient` because `Http` is deprecated as of the latest Angular 6 — Mike Tung, May 08 '18 at 14:10
You should update yout code to use HtppClient (from @angular/common/http). the one you are using is deprecated (and has been removed in Angular 6). — Christian Benseler, May 08 '18 at 14:15
I understand the need to move to HttpClient but I can't do that right now due to some circumstances so I am left with Http, I didn't begin the project and have a timeline to meet up with, cannot begin changing right now until later — CE0, May 08 '18 at 14:26

angular 5 http.put request returns error "Authentication credentials were not provided"

0 Answers0