1

I'm new to react and Drupal. I run into the following 403 error in my reactjs login code.

I'm using a custom authentication method that I have working, at least using Postman. I also have it working from the Chrome developer console, if I manually copy in my session token by first visiting /session/token in another browser window (https://github.com/justinlevi/json_web_token).

What has me confused though is that this works fine if I get the anonymous token manually and plug it in to Postman or the Chrome debug console with the following code.

The custom authentication I'm trying to get up and running just takes a JSON object with username/password and returns a JWT token if authenticated.

justinlevi/json_web_token json_web_token - drupal json web token based on https://dropsolid.com/en/blog/drupal-8-and-react-native post

If I run the following JavaScript code from Chrome developer tools.

1 - Request sessions token

fetch('http://blt.dev/session/token')  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem. Status Code: ' +  
          response.status);  
        return;  
      }

      // Examine the text in the response  
      response.text().then(function(data) {  
        console.log(data);  
      });  
    }  
  )  
  .catch(function(err) {  
    console.log('Fetch Error :-S', err);  
  });

I will get some session token, GVRpRLO_GkJbPRd00JEfvXP7ycSIP4UYR766zuGchRc.

If I then use this session token to try and login, with the following code:

2 - Use session token to try and login

fetch('http://blt.dev/api/v1/token?_format=hal_json', {
     method: 'POST',
     credentials: 'include',
     headers: {
       'Content-Type': 'application/hal+json',
       'X-CSRF-Token': 'GVRpRLO_GkJbPRd00JEfvXP7ycSIP4UYR766zuGchRc',
       'Authorization': 'json_auth'
     },
     body: JSON.stringify({ username: 'admin', password: 'admin' })
   })
   .then(function(response){
      if(!response.ok){
        throw Error(response.statusText);
      }
      return response;
   })
   .then(function(response){
      return response.json()
   })
   .then(response => {
     try {
      console.log(response.token)
       return response.token;
     } catch (e) {
       console.log(e);
     }
   })
   .catch(error => {
     console.log(error);
   });

I now get a 403 Forbidden Error.

Error: Forbidden
    at <anonymous>:13:15
    at <anonymous>

If instead, I first visit /session/token in my browser, copy/paste that token into the second JavaScript snippet above, I get the following expected result:

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1MDcxMTk5MjYsImV4cCI6MTUwNzEyMzUyNiwiZHJ1cGFsIjp7InVpZCI6IjEifX0.MS9FvAIseMeD0rZr7-h_b74Sj7BoGi7rCd9wNDa0ypOlvFBNI5sWOs6NWUOlHe_sI7eQMkFfaovgoUIShf9-N3rnZKhQm8fKGxTzqi_s1dCxkIm62vf-2a6NaX0i0t-PtWaMkhd7BUdA4E__N9BzXexnHz3kroicjqQJ0hH17ub0sSOTtNjnWtMjjX35LH0vY17eLaCsOmXpYQzEiUDaAthVJaR3azwwQTc8ChVXbtLYgPWtbekObi-hsliZBdDmz41HnqgIrhjlrnrkWQzlxoOsB_UiD4Ht9oy4GJfzKKi5wbGZ6ayGv7XPoIuih1uJFgAquRmgFeHlbXhH2mhbyQ

  • 1
    jwt !== session – user21641 Oct 4 '17 at 13:32
  • Hmm, not sure I understand your comment. Yes, jwt is definitely not the same thing as the session token. The issue may have something to do with the anonymous session token expiring or somehow not working on subsequent requests. My solution is working intermittently right now – Justin Levi Winter Oct 5 '17 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.