Skip to content

Instantly share code, notes, and snippets.

@monecchi
Forked from igorbenic/App.scss
Created February 17, 2020 16:07
Show Gist options
  • Save monecchi/b40e10e441de354b1b7a8d800d4242d2 to your computer and use it in GitHub Desktop.
Save monecchi/b40e10e441de354b1b7a8d800d4242d2 to your computer and use it in GitHub Desktop.
Headless WordPress: Logging with JWT | https://www.ibenic.com/headless-wordpress-logging-with-jwt
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>
);
}
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';
@import '~bootstrap/scss/bootstrap.scss';
// ...
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();
});
}
}
// ...
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>
);
}
}
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;
// ...
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>
);
}
}
//...
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 ) );
});
}
// ...
}
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment