Getting 'post : 400 bad request in react

Question

Here I have signup form.I have username , password fields. I use rest api to send the data to the server. I can't send the data directly. I have to encrypt the data and send the token to the server.I use Jwt to send the data. To generate the token, I have installed npm i json-web-token package. I think , I have been made mistake while using jwt token. But I'm not able to fix it.

 export class SignUp extends Component {
  constructor() {
    super();
    this.state = {
        username: '',
        Password: '',
        confirmPassword: '',
        token: ''

    }

    this.username = this.username.bind(this);
    this.Password = this.Password.bind(this);
    this.confirmPassword = this.confirmPassword.bind(this);
    this.SignUp = this.SignUp.bind(this);
}

username(event) {
    this.setState({ username: event.target.value })
}

Password(event) {
    this.setState({ Password: event.target.value })
}

confirmPassword(event) {
    this.setState({ confirmPassword: event.target.value })
}
SignUp(event) {

    var jwt = require('json-web-token');
    var secret = "topsecret";
    var payload = {
        "iss": "my_issurer",
        "aud": "World",
        "iat": 1400062400223,
        "username": this.state.username,
        "Password": this.state.Password,
    };
    const token = jwt.encode(secret, payload)
    console.log("token", token);
    const dtoken = jwt.decode(secret, token.value);
    console.log("dtoken", dtoken);


    fetch('url', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },

        body:  token.value


    }).then((Response) => Response.json())

        .then((Result) => {

            if (Result.Status === 'Success')

                this.props.history.push("/Home");
            else
                alert('Sorrrrrry !Account has not been created!!!!!')
        })
    }
  }

render() {

    return (

        <div>
            < form >
                < div class="row">
                    < div  >Sign Up </div >
                </div >

                < input type="text" onChange={this.username} placeholder="Enter username" />
                <br /><br />
                < input type="password" onChange={this.Password} placeholder="Enter Password" />
                <br /><br />
                <input type="password" onChange={this.state.confirmPassword} placeholder="ReEnter Password" />
                <br /><br />
                < Button onClick={this.SignUp}> Create Account</Button >
                <br /><br />
            </form >


        </div >
    );
}

}

Thanks in advance.

Answer 1

You will need to use JWT library on server side, not on client side.

When you have a user sign up, this user will send username, password and other information to your server, then you will need to use JWT library to generate a token for this user based on your secret and the payload.

Then the token will be send back to this user on client side and this user will need to keep the token in localstorage or cookies. If this user need to access your secured rest API, she/he needs to send authorization header with the token in request.

Hope it helps