Authentication - React - Spring Security

basic-react-login-spring.jsx

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

const BASE_URL = 'http://localhost:8080/api';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: 'admin',
      senha: 'admin'
    }

    this.handleChangeEmail = this.handleChangeEmail.bind(this);
    this.handleChangePass = this.handleChangePass.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeEmail(event) {
    this.setState({
      email: event.target.value
    });
  }

  handleChangePass(e) {
      this.setState({
        senha: e.target.value
    })     
  }

  handleSubmit(event) {
    axios.post(BASE_URL + "/login", {
      username: this.state.email,
      password: this.state.senha
    },
    {
      auth: {
        username: this.state.email,
        password: this.state.senha
      }, 
    }).then(data => {
      console.log(data.data);
    }).catch(err => {
      console.error(err);
    })
    
    event.preventDefault();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        { this.state.email }
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="email" 
            value={this.state.email} 
            onChange={this.handleChangeEmail} />
          <input type="password" name="senha" 
            value={this.state.senha}
            onChange={this.handleChangePass} />
          
          <button type="submit">Enviar</button>
        </form>
      </div>
    );
  }
}

export default App;

oauth2-authentication.jsx

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

const BASE_URL = 'http://localhost:8080';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: 'admin',
      senha: 'admin'
    }

    this.handleChangeEmail = this.handleChangeEmail.bind(this);
    this.handleChangePass = this.handleChangePass.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeEmail(event) {
    this.setState({
      email: event.target.value
    });
  }

  handleChangePass(e) {
      this.setState({
        senha: e.target.value
    })     
  }

  handleSubmit(event) {
    axios.post(BASE_URL + '/oauth/token', {},
    {
      auth: {
        username: 'ouath-ws',
        password: 'oauth-ws-secret'  
      },
      params: {
        grant_type: 'password', 
        username: this.state.email,
        password: this.state.senha
      }, 
    }).then(data => {
      console.log(this.state);
      console.log(data.data);
    }).catch(err => {
      console.error(err);
    })
    
    event.preventDefault();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        { this.state.email }
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="email" 
            value={this.state.email} 
            onChange={this.handleChangeEmail} />
          <input type="password" name="senha" 
            value={this.state.senha}
            onChange={this.handleChangePass} />
          
          <button type="submit">Enviar</button>
        </form>
      </div>
    );
  }
}

export default App;