title: React JS Error unexpected end of json when passing user token via session-storage
body: <p>I have a login page, which excepts the username and password. Upon button submission, the page processes the user credentials via a json / api and generates a token thus routing the user over to a landing that presents the client with a drop-down of their respective info.</p>
  
  <p>My login page is getting the user token from the API (confirmed via console.log), but the problem I'm encountering is getting the token to pass from the login page over to the landing page. </p>
  
  <p>Now, <strong>when I manually paste the generated token into my landing page</strong>, the dropdown list displays the user's data, so the issue is getting the generated token to pass over to the landing page.</p>
  
  <p>First, in the login page, I have a function for retrieving the client's token from the API. I call this function on button submit:</p>
  
  <pre><code>componentDidMount() {  
      this.fetchData(); 
  } 
  
  //request the token
  fetchData() {
      return fetch('http://myapiauth:11111/api/auth', {
          method: 'POST',
          headers: {
              'Content-type': 'application/json',
          },
           body: JSON.stringify({
              username: 'myadminName',
              password: 'myPassword',
              Authorization: 'myPassword',
          })
      }) /*end fetch */
      .then(results =&gt; results.json())
      .then(data =&gt; {
          this.setState({ data: data })
          sessionStorage.setItem('token', JSON.stringify(data))
        })
      }
  
    //authenticate request
    requestUserInfo() {
      var token = JSON.parse(sessionStorage.getItem('token'));
      return fetch('http://myapiauth:11111/api/auth', {
        method: 'GET',
        headers: new Headers({
          Authorization: 'Bearer ' +sessionStorage.token
        }),
      })
        .then((response) =&gt; response.json());
    }
  </code></pre>
  
  <p><strong>Login Full Code</strong>: <a href="https://codepen.io/lkennedy009/pen/mLKPLv?editors=0010#0" rel="nofollow noreferrer">https://codepen.io/lkennedy009/pen/mLKPLv?editors=0010#0</a></p>
  
  <p>...for the landing page, in the snippet below, am retrieving the token from the login page:</p>
  
  <pre><code>componentDidMount() {
      fetch('http://myapiclients:22222/api/clients', {
          method: 'GET',
          headers: {
              'Content-type': 'application/json',
              'Authorization': 'Bearer ' +sessionStorage.token
          },
      })
      .then(results =&gt; results.json())
      .then(data =&gt; this.setState({ data: data }))
  }
  </code></pre>
  
  <p>Landing Page full code: <a href="https://codepen.io/lkennedy009/pen/ELRKpw?editors=0010#0" rel="nofollow noreferrer">https://codepen.io/lkennedy009/pen/ELRKpw?editors=0010#0</a></p>
  
  <p>Could I please get some help as to what am doing wrong? I've checked my syntax / setup and compared against other online resources, but still unable to figure out the issue. </p>