Forbidden 403 on logout(): Using Rest API

Hi!

I’m new to most things ionic. I’d like to get suggestions on what I’m missing.

I’m trying to get a Login/Registration/Logout function and I seem to have issues with the Logout part.

I’ve followed a fairly old guide on how to do this using rest API.

If i should mention, I’m using headless Drupal 8 as server for this.

here’s my authservice codes:

login(credentials){
    this.storage.clear();
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Accept', 'application/json');
        headers.append('Access-Control-Allow-Origin', '*');
        headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');

        this.http.post(apiUrl+'/user/login?_format=json', JSON.stringify(credentials), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

  register(data){
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'/user/register?_format=json', JSON.stringify(data), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }


  logout(){
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('X-Auth-Token', localStorage.getItem('csrf_token').replace(/['"]+/g, ''));

        this.http.post(apiUrl+'/user/logout?_format=json', {}, {headers: headers})
          .subscribe(res => {
            localStorage.clear();
          }, (err) => {
            reject(err);
          });
    });
  }

I’ve been able to make the Login and Registration part work but Logout seems to be having a 403 Forbidden issue.

here are more function codes from their respective pages. (LoginPage
/ RegisterPage / AccountSettingPage>Logout)

doLogin() {
    this.showLoader();
    this.authService.login(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;
      localStorage.setItem('csrf_token', JSON.stringify(this.data.csrf_token) );
      localStorage.setItem('logout_token', JSON.stringify(this.data.logout_token) );
      localStorage.setItem('uid', JSON.stringify(this.data.current_user.uid) );
      this.navCtrl.setRoot(CPanelPage);
      console.log('current user data ='+ JSON.stringify(this.data));
      console.log('uid: '+ localStorage.getItem('uid').replace(/['"]+/g, ''));
      console.log('csrf_token: '+localStorage.getItem('csrf_token').replace(/['"]+/g, '') );
      console.log('logout_token: '+localStorage.getItem('logout_token').replace(/['"]+/g, ''));
    }, (err) => {
      this.loading.dismiss();
      this.presentToast(err);
    });
  }

doSignup() {
    this.showLoader();
    this.authService.register(this.regData).then((result) => {
      this.loading.dismiss();
      this.navCtrl.pop();
    }, (err) => {
      this.loading.dismiss();
      this.presentToast(err);
      this.CheckregData();
    });
  }

logout() {
    this.authService.logout().then((result) => {
      this.loading.dismiss();
      this.navCtrl.setRoot(HomePage);
      this.navCtrl.push(HomePage);
    }, (err) => {
      this.loading.dismiss();
      this.presentToast(err);
    });
  }

I am also getting 403 Forbidden on HTTP get requests but it seems weird since upon testing things on Postman, everything works.

Can anyone suggest anything? Like a different approach. I don’t mind doing a completely different one. :slight_smile: