authentication log in form with jwt and react

Question

I have made and fetched a Login form with JWT and react. I managed to fetched the data for the username and password and everything works perfectly but then I want to redirect the user to a new page when he clicks on submit and I have no idea how to do that. I'm also using react router. Any help will be welcome

import React, { Component } from "react";
import axios from "axios";

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "test",
            password: "test",
        }
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        })
    }

    login = () => {
        const {username, password} = this.state;

        axios(`/users/login`, {
          method: "POST", 
          data: {
              username,
              password,
          }
        })
        .then(response => {
            localStorage.setItem('token', response.data.token);
            console.log(response);
        })
        .catch(error => {
            console.log(error)
        })
        
     }

   


    render() {
        return (
            
             
            <div className="log">
                <h3>Sign In</h3>
                
                <div className="form-group">
                    <label>Username</label>
                    <input type="username" className="form-control" placeholder="Enter username" name="username" value={this.state.username} onChange={this.handleChange} />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" name="password" value={this.state.password} onChange={this.handleChange} />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1"  />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block" onClick={this.login}>Submit</button>
                <p className="forgot-password text-right">
                    Forgot <a href="#">password?</a>
                </p>
               
            </div>

        
            
        );

}
}

Michael Mishin · Accepted Answer · 2020-06-02 18:52:48Z

1

import withRouter import {withRouter} from 'react-router-dom';

remove export before class Login class Login extends Component {...

export class at the end of the file: export default withRouter(Login);

and use react-router-dom:

axios(`/users/login`, {
    //...
})
.then(response => {
    localStorage.setItem('token', response.data.token);
    console.log(response);
    this.props.history.push('/url');
})
//...

edited Jun 2, 2020 at 18:52

answered Jun 2, 2020 at 18:47

Michael Mishin

5713 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

laurent Over a year ago

awesome that works! then if I want to redirected to another component I just change push('/url')?

Collectives™ on Stack Overflow

authentication log in form with jwt and react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related