Spring Security with React.js front end on other port

Question

I'm trying to create a spring security authorization for my university project. Unfortunately, I came across a problem, my frontend is on port 3000 and the backend is on port 8080. I have no idea how to enable communication between spring security and reactjs login form. I am not even sure if this is possible. Anyone knows if this is possible and will give some hints on how to do it?

Thank you in advance.

Added dependencies.

<!-- Spring Security Core -->
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-core</artifactId>
    <version>5.3.1.RELEASE</version>
</dependency>

<!-- Spring Security Config -->
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-config</artifactId>
    <version>5.3.1.RELEASE</version>
</dependency>

<!-- Spring Security Web -->
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-web</artifactId>
    <version>5.3.1.RELEASE</version>
</dependency>

My React.js login form:

import React from "react";
import {Form,Button,Card,Col} from 'react-bootstrap';

const responseGoogle = (response) => {
    console.log(response);
}

class Login extends React.Component{



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

        }
        this.loginChange=this.loginChange.bind(this);
        this.submitLogin=this.submitLogin.bind(this);
    }

    submitLogin(event){
       alert("Jesteś zalohowany");

        event.preventDefault();
    }



    loginChange(event){
        this.setState({
            [event.target.name]:event.target.value
        });

    }



    render() {
        return(
            <Card className={"border border-dark bg-dark text-white"}>
                <Card.Header>Login</Card.Header>
                <form onSubmit={this.submitLogin} id={"loginId"}>
                    <Card.Body>

                        <Form.Row>
                            <Form.Group as={Col} controlId="formGridEmail">
                                <Form.Label>Username (email)</Form.Label>
                                <Form.Control required
                                              className={"bg-dark text-white"}
                                              id="username"
                                              name={"username"}
                                              value={this.state.username}
                                              onChange={this.loginChange}
                                              type="email"
                                              placeholder="Enter email" />

                            </Form.Group>
                        </Form.Row>


                        <Form.Row>
                            <Form.Group as={Col} controlId={"fromGridPass"}>
                                <Form.Label>Password</Form.Label>
                                <Form.Control required
                                              className={"bg-dark text-white"}
                                              id="password"
                                              name={"password"}
                                              value={this.state.password}
                                              onChange={this.loginChange}
                                              type="password"
                                              placeholder="Password" />
                            </Form.Group>
                        </Form.Row>



                    </Card.Body>
                    <Card.Footer style={{"textAlign":"right"}}>
                        <Button size={"sm"} variant="success" type="submit">
                            Submit
                        </Button>
                    </Card.Footer>
                </form>

            </Card>
        );
    }

}

export default Login;

My failed attempt to create a configuration file that allows communication:

@Override
public void configure(HttpSecurity http) throws Exception {



    http
            .authorizeRequests()

            .antMatchers("http://localhost:3000/logged").permitAll()
            .anyRequest().hasRole("USER")
            .and()
            .formLogin()
            .loginPage("http://localhost:3000/login")
            .successForwardUrl("http://localhost:3000/logged")
            .permitAll()
            .and()
            .logout().logoutSuccessUrl("http://localhost:3000/login");


}