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;

--

--

--

System Administrator and Full stack web developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building secure NodeJS APIs with JWTs

Working with NPM from Java

10 Javascript String mthods

Build a progressive web app using Vue CLI 3

Complex Web Applications — Part 1

Chapter 2 | Accessing Console Properties

Javascript : Higher Order Functions

HTML Template Tag and uses in JavaScript

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.

More from Medium

Authentication for Dummies

How to create a model and do the migration in Node.js with Sequelize.js?

React Hosting in Cloud Storage(AWS S3) — Maintain Environment Configs

Building a daily desktop background app with node.js