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

Making CSS animations as smooth as it gets

Best way to Remind JavaScript

Improving Vim Workflow With fzf

Slow page load? Not anymore — The Power Of Server Side Rendering

Using Custom Cursors with Javascript for a Better User Experience

Debugging Ember for Absolute Beginners

Building a React App as a Single HTML file with Create React App (no eject)

E2E GraphQL Testing with Supertest & Jest

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

Google OAuth implementation using ReactJs + NodeJs

Prototype A React App with Firebase Authentication Quickly

How to add authentication to a React app using Asgardeo Auth React SDK

An introduction to GraphQL with Node.js