Forbidden 403 on logout(): Using Rest API

Ionic Framework ionic-v3
1

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:

2

Hi, I have the same problem.
In postman it works correctly but with ionic it gives me an error 403,

3

Hi, upon research I’ve somewhat solved this issue.

The problem could be from the ff:

Server side authentication
-Method is not allowed by the server
-Possible CORS issue
-Wrong authentication specified.

In my case, the REST UI configuration for authentication was set to cookie but the code i was using didn’t store or use cookies.
Solution: since I didn’t know how to store cookies, I’ve resorted to other authentication. I intended to use oauth but my understanding of it isn’t good enough yet and this project doesn’t need to be fully secure so I’ve went with basic auth.

Client side authentication(Ionic authservice.ts):
-All i had to do was get the username:password value then convert then to base64 then store it.

I did it by getting the input username and password then using btoa(name:pass) then store it by either localStorage.setItem(‘token’, btoa(name:pass)) or storage.set(‘token’, bota(name:pass)).

I then use the stored value on header(‘Authorization’ : 'Basic '+localStorage.getItem(‘token’) ).

4

Please never store passwords on device.

5

I completely agree. Its done only for the purpose of making basic auth work. I don’t suggest doing this on commercial app.