React axios request to Spring Boot REST server authentication problem

Question

I am trying to send an axios post request to the server having as parameters the username and the password of the user provided in a form. When i send the request it seems like it is sent two times one with username = "" and the other time with username i provided. The response is login error because of that first time the request it is sent.

I tried to send the request using axios.post which is not working (the username received on the server is empty. Also i did a post request using postman and it worked (the username is what i provided in the form body and the authentication is successful).

This is my login form in react

import React, {Component} from 'react'
import axios from 'axios'
import './LoginForm.css'

class LoginForm extends Component{

    constructor(props){
        super(props);
        this.state = {
            username : '',
            password : ''
        };

        this.handleRequest = this.handleRequest.bind(this);
    }
    handleRequest = async () => {
        const response = await axios({
            method: 'post',
            url: 'http://localhost:9090/login',
            auth: {
                username: this.state.username,
                password: this.state.password
            }
        });
        console.log(response);
    };


    render() {
        return (
            <div className="login-page">
                <div className="form">
                    <form  className="login-form">
                        <input type="text" name={'username'} value={this.state.username} onChange={(e) => {this.setState({username: e.target.value})}} placeholder="username"/>
                        <input type="password" name={'password'} value={this.state.password} onChange={(e) => {this.setState({password: e.target.value})}} placeholder="password"/>
                        <button type={'button'} onClick={this.handleRequest}>login</button>
                    </form>
                </div>
            </div>
        );
    }
}

export default LoginForm;

loadByUsername class in Service

@Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
       Optional<User> user = userRepository.findByUserName(username);
        if (user.isPresent()) {
            return new MyUserPrincipal(user.get());
        } else {
            throw new UsernameNotFoundException("Unknown user");
        }
    }

I fill in the form fields and when i press login i've set a breakpoint in loadByUsername method above and first time parameter username is "" and after i press F9 to continue the method is somehow getting called again and it stops again at the breakpoint but now the username is the one i filled in the form. But the response is the login error massage as if username and password are incorrect

if you found the solution, would you mind posting it! running into the same problem where my username is "" and after declaring the params and also them matching in my post request.. — Braden Borman
– Braden Borman, Commented Apr 20, 2021 at 1:59

Vishnu · Accepted Answer · 2019-10-15 09:28:02Z

2

I think the axios request should look like the following:

const response = await axios({
    method: 'post',
    url: 'http://localhost:9090/login',
    data: {
        username: this.state.username,
        password: this.state.password
    }
});

or

const response = await axios.post('http://localhost:9090/login',{
      username: this.state.username,
      password: this.state.password
 });

answered Oct 15, 2019 at 9:28

Vishnu

1,7311 gold badge17 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

React axios request to Spring Boot REST server authentication problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related