Access JWT Secured Jhipster API from a React App

  1. POST request to authentication API with request body in format below.
{"username":"admin","password":"admin","rememberMe":false}
{
"id_token" : "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJST0xFX0FETUlOLFJPTEVfVVNFUiIsImV4cCI6MTYyOTg2Nzc4MX0.tdp_w6lMx_hdNalVBvSNBxXKf8sgkD-i7fa5wNyV8NZlkddjGyO26nmhHicqg16LCm6jR_TIVuVO2fPrA-2gKQ"
}
{Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJST0xFX0FETUlOLFJPTEVfVVNFUiIsImV4cCI6MTYyOTg2Nzc4MX0.tdp_w6lMx_hdNalVBvSNBxXKf8sgkD-i7fa5wNyV8NZlkddjGyO26nmhHicqg16LCm6jR_TIVuVO2fPrA-2gKQ}
{ Authorization: Bearer  eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJST0xFX0FETUlOLFJPTEVfVVNFUiIsImV4cCI6MTYyOTg2Nzc4MX0.tdp_w6lMx_hdNalVBvSNBxXKf8sgkD-i7fa5wNyV8NZlkddjGyO26nmhHicqg16LCm6jR_TIVuVO2fPrA-2gKQ}
import React, {useState} from 'react';
import {TextField, Button} from 'reactstrap';
import axios from 'axios';
import HomePage from './HomePage';
const Login = () => { const [bearerId, setBearerId] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const onSubmitLogin = (e: React.MouseEvent<HTMLButtonElement>): void => {
const loginUrl = 'http://localhost:8080/api/authenticate';
const AUTH_TOKEN_KEY = 'jhi-authenticationToken';
e.preventDefault();
// POST request to authentication url,
// extract bearer token from response and
// set state variable and set cookies localStorage
axios.post(loginUrl, { username, password, rememberMe })
.then(res => {
const bearerToken = res.headers.authorization;
if (bearerToken && bearerToken.slice(0, 7) === 'Bearer ') {
const jwt = bearerToken.slice(7, bearerToken.length);
localStorage.setItem(AUTH_TOKEN_KEY, jwt);
setBearerId(jwt);
setIsAuthenticated(true);
}
})
.catch(err => console.log(err.message));
}
const onLogout = () =>{
const AUTH_TOKEN_KEY = 'jhi-authenticationToken';
setIsAuthenticated(false);
setBearerId("");
localStorage.removeItem( AUTH_TOKEN_KEY);
}
return (
<>
// if not authenticated, display login form
{!isAuthenticated &&
<div>
<TextField
value={username}
onChange={event => setUsername(event.target.value)} />
<TextField
type="password"
value={password}
onChange={event => setPassword(event.target.value)} />
<Button
type="submit"
onClick={e => onSubmitLogin(e)} >Sign In</Button>
</div>
}
//If authenticated, display Homepage & logout button
{isAuthenticated &&
<div>
<HomePage />
<Button
type="submit"
onClick={onLogout} >Logout</Button>
</div>
}
</>
);
}
export default LogIn;
import React,{useState} from 'react';
import {Button} from 'reactstrap';
import axios from 'axios';
type IStudent= {
id: number;
name: string;
};
const HomePage = () => {const [student, setStudent] = useState<[IStudent]>(
[{id: 0,name: "" }] );
const getStudent =() =>{
const endpointUrl = 'http://localhost:8080/api/students';
const authHeader = "Bearer "+ localStorage.getItem('jhi-authenticationToken');
// authentication header added to request while making call to API

axios.get(endpointUrl, { headers: { 'Authorization': authHeader } } )
.then(res => setLocation(res.data))
.catch(err => console.log(err.message));
}
return (
<>
<br />
<Button
type="submit"
onClick={getStudent}
> Get Students</Button>
{ student.length > 1 &&
student.map(s => <p key= {s.id}>{s.name}</p> )
}
</>
);
}
export default HomePage;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Himanshu Pratap

Himanshu Pratap

System Administrator and Full stack web developer.