I'm new to JWT concept. I have a signup form and login. Signup.js: I have created signup form
import React, { Component } from 'react';import { Button } from 'react-bootstrap';export class SignUp extends Component {constructor() { super(); this.state = { name: '', Password: '', confirmPassword: '' } this.name = this.name.bind(this); this.Password = this.Password.bind(this); this.confirmPassword = this.confirmPassword.bind(this); this.SignUp = this.SignUp.bind(this); }name(event) { this.setState({ Email: event.target.value })}Password(event) { this.setState({ Password: event.target.value })}confirmPassword(event) { this.setState({ confirmPassword: event.target.value })}SignUp(event) { fetch(' api/sign_up', { method: 'post', headers: {'Accept': 'application/json','Content-Type': 'application/json', }, body: JSON.stringify({ Password: this.state.Password, name: this.state.name, }) }).then((Response) => Response.json()) .then((Result) => { if (Result.Status === 'Success') this.props.history.push("/Home"); else alert('Sorrrrrry !!!! Un-authenticated User !!!!!') })} render() { return (< div>< form >< div class="row">< div >Sign Up </div ></div >< input type="text" onChange={this.name} 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 > ); } }Login.js
import React, { Component } from 'react'; import { Button } from 'react-bootstrap'; export class Login extends Component { constructor() { super(); this.state = { name: '', Password: '' } this.Password = this.Password.bind(this); this.name = this.name.bind(this); this.login = this.login.bind(this);}name(event) { this.setState({ name: event.target.value })}Password(event) { this.setState({ Password: event.target.value })}login(event) { fetch('url', { method: 'post', headers: {'Accept': 'application/json','Content-Type': 'application/json' }, body: JSON.stringify({ name: this.state.name, Password: this.state.Password }) }).then((Response) => Response.json()) .then((result) => { console.log(result); if (result.Status == 'Invalid') alert('Invalid User'); else this.props.history.push("/home"); }) } render(){ return (<div><form><div class="row"><div>Login </div></div><br /><br /><input type="text" onChange={this.name} placeholder="Enter username" /><br /><br /><input type="password" onChange={this.Password} placeholder="Enter Password" /><br /><br /><Button onClick={this.login} >Login</Button> </form></div> ); } }When the user signs up, data will be stored in the server. I use rest api to post the data to the server. Now I have to send the data using jwt token. When the user logs in authorization should be performed using this token.
I'm not understanding how to generate jwt tokens and use it to authorization.Using JWT, I have to do authorization when user logs in. Please help me . Thanks in advance.