CODEWITHSUNDEEP
reactjsspring-bootspring-security
Crisan Andrei
Crisan Andrei

Reputation: 21

React axios request to Spring Boot REST server authentication problem

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

Upvotes: 1

Views: 1573

Answers (1)

Vishnu
Vishnu

Reputation: 1701

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
 });

Upvotes: 2

Related Questions