title: React JS - How to authenticate credentials via a fetch statement
body: <p>My goal is to create a React JS login page that runs off a json Rest service. In Postman, when I enter the URL for the service, set it to run as POST and enter the following JSON into the body: 
  {username: "myUserName", password: "myPassword"}
  ...a token is returned. So in my fetch clause, I'm using JSON.stringify to pass the username and password to the server.</p>
  
  <p>I'm new to using Fetch with react, So my question is, how do I get started in authenticating various users, just using react JS with fetch only? I assume, I'm to write my logic within the second then of my Fetch clause?</p>
  
  <p>Currently, my page accepts any credentials and routes the user to a landing page upon clicking the submit button. I have a function containing fetch and now calling the fetch function once the onSubmit button is clicked, which now grabs the token.   </p>
  
  <p>This is my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import './Login.css';
  import { withRouter } from 'react-router-dom';
  
  class Login extends Component {
  
      constructor() {
          super();
          this.state = {
              data: [],
              username: "",
              password: "",
              token: "",
          };
      } //end constructor
  
      componentWillMount() {
      }
  
      componentDidMount() {
          this.fetchData();
      }
  
      fetchData() {
          fetch('http://theapi/api/auth', {
              method: 'POST',
              headers: {
                  'Content-type': 'application/json',
              },
               body: JSON.stringify({
                  username: 'myUserName',
                  password: 'myPassword',
                  Authorization: 'TheReturnedToken',
              })
          }) /*end fetch */
          .then(results =&gt; results.json())
          .then(data =&gt; this.setState({ data: data })
  
          )
      }
  
      //request the token
        requestAccessToken(data) {
          const loginInfo = '${data}&amp;grant_type=password';
          return fetch('${API_URL}Token', {
            method: 'POST',
            headers: new Headers({
              'Content-Type': 'application/json',
            }),
            body: loginInfo,
          })
            .then((response) =&gt; response.json());
        }
  
        //authenticate request
        requestUserInfo(token) {
          return fetch('${API_URL}api/participant/userinfo', {
            method: 'GET',
            headers: new Headers({
              Authorization: 'Bearer ${token}',
            }),
          })
            .then((response) =&gt; response.json());
        }
  
      change = (e) =&gt; {
          this.setState({
              [e.target.name]: e.target.value
          });
      }; //end change
  
      onSubmit = (e) =&gt;{
          this.fetchData();
          e.preventDefault();
          //console.log(this.state);
          this.setState({
               username: "",
               password: "",
              });
  
          this.props.history.push('/landing');
          };
  
      render() {
      console.log(this.state.data);
          return (
             &lt;div&gt;
                  &lt;div className="loginContainer"&gt;
                  &lt;h2&gt;Member Login&lt;/h2&gt;
                      &lt;form&gt;
                              &lt;input
                              id="username"
                              name="username"
                              placeholder="User Name"
                              value={this.state.username}
                              onChange={e =&gt; this.change(e) }
                              className="form-control"
                              /&gt;  &lt;br /&gt;
  
                              &lt;input
                              id="password"
                              name="password"
                              type="password"
                              placeholder="Password"
                              value={this.state.password}
                              onChange={e =&gt; this.change(e) }
                              className="form-control"
                              /&gt;  &lt;br /&gt;
  
                          &lt;button onClick={e =&gt; this.onSubmit(e)} className="btn btn-primary"&gt;Submit&lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          );
        }
  }
  
  export default withRouter(Login);
  </code></pre>
  
  <p>How do I get started in getting my form to authenticate various users? Basically, I'm attempting to have my page to accept a username and password and if the two match, and then route the user to a landing page. </p>