Headless WordPress: Logging with JWT | https://www.ibenic.com/headless-wordpress-logging-with-jwt

app-2.js

function App() {
  const [login, setLogin] = useState( '' );
  const siteURL = 'yoursite_here';

  useEffect(() => {
    const localLogin = localStorage.getItem('login');
    // If we have logged in, set it.
    if ( localLogin ) {
      setLogin( localLogin );
    }
  }, [login]);
 
  return (
    <div className="App container">
      <h1>Headless WordPress</h1>
      {
        login && <Dashboard url={siteURL} token={login} setLogin={setLogin} />
      }
      {
        ! login && <Login url={siteURL} setLogin={setLogin}/>
      }

    </div>
  );
}

app.js

import React, { useState, useEffect } from 'react';
import './App.scss';
import '@wordpress/components/build-style/style.css';
import Login from './components/Login';
import Dashboard from './components/Dashboard';

App.scss

@import '~bootstrap/scss/bootstrap.scss';

dashboard-2.js

// ...
class Dashboard extends React.Component {
    // ...

    componentDidMount() {
        this.getCurrentUser();
    }

    getCurrentUser() {
        const token = this.props.token;
        const userURI = this.props.url + '/wp-json/wp/v2/users/me';
        const _this = this;
        axios({
            method: 'POST',
            url: userURI,
            headers: { 'Authorization': 'Bearer ' + token }
        }).then(function (response) {
            if ( response.status === 200 ) {
                const data = response.data;
                _this.setState( {user:data});
                
            }
        })
        .catch(function (error) {
            _this.Logout();
        });

    }
   
}

dashboard-3.js

// ...

class Dashboard extends React.Component {
    // ...
    
    Logout() {
        localStorage.removeItem('login');
        this.props.setLogin('');
    }

    render() {
        const { nickname, first_name, last_name } = this.state.user;
        return (
            <div className="dashboard">
                <button type="button" className="btn btn-danger" onClick={this.Logout}>Logout</button>
           
                <div className="jumbotron">
                    Welcome { nickname }
                    <p>I think your name is { first_name } { last_name}</p>
                </div>
            </div>
        );
    }
}

dashboard.js

import React from 'react';
const axios = require('axios');

class Dashboard extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { user: { } };
        this.Logout = this.Logout.bind(this);
        this.getCurrentUser = this.getCurrentUser.bind(this);
    }
}

export default Dashboard;

login-2.js

// ...

class Login extends React.Component {
    // ...

    handleUsername( username ) {
        this.setState( { username } )
    }

    handlePassword( password ) {
        this.setState( { password } )
    }
    render() {
        return (
            <form className="login" method="post">
                <TextControl className="form-group" 
                    label="Username"
                    value={ this.state.username }
                    onChange={ (value) => this.handleUsername( value ) }
                />
                <TextControl className="form-group" 
                    label="Password"
                    type="password"
                    onChange={ (value) => this.handlePassword( value ) }
                />
                <Button isPrimary onClick={this.handleSubmit}>Login</Button>
            </form>
        );
    }
}

login-3.js

//...

class Login extends React.Component {
    //...

    handleSubmit( e ) {
        e.preventDefault();
        const _this = this;
        axios.post( this.props.url + '/wp-json/jwt-auth/v1/token/',
        {
            username: this.state.username,
            password: this.state.password
        })
        .then(function (response) {
            if ( response.status === 200 ) {
                const data = response.data;
                localStorage.setItem( 'login', data.token ); 
                _this.props.setLogin( data.token );
            }
        })
        .catch(function (error) {
            function strip_html_tags(str) {
                if ((str===null) || (str===''))
                    return false;
                else
                str = str.toString();
                return str.replace(/<[^>]*>/g, '');
            }
            alert( strip_html_tags( error.response.data.message ) );
        });
    }

    // ...
}

login.js

import React from 'react';
import { TextControl, Button } from '@wordpress/components';

const axios = require('axios');

class Login extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { username: '', password: '' }
        this.handleUsername = this.handleUsername.bind(this);
        this.handlePassword = this.handlePassword.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
}

export default Login;