Boilerplate React Spa.
Works with Jwenky-srv Express server.
Presented at
Hackernoon
- Clone the repo locally.
- Run
npm install
. - Copy .env.example to .env
Edit the server Url if needed.
# Start application locally
$ npm start
This is a simple Single Page Application built with React.
I built it to show the use of the Jwenky-srv server,
instead of describing how the endpoints should be used.
I used
Denny Scott's react application
as the base, and built upon it.
It uses functional components and hooks.
State management is done with context, and reducer.
When the homepage loads for first time it will give a 401 error,
allthough it is a public page.
The reason for that is that the application will try to do a refresh,
everytime the user sends a request to the server,
which is not generated by the React router.
These requests do not 'know' the React state, so the user should have to
re-enter the credentials, if the application wouldn't try to refresh by itself.
There are many ways to know, if it is the first page load,
or a user induced page reload. It can be done by a flag in a cookie,
in some database value etc. I didn't do it, so that the developer
can apply what fits better in the particular application.
One feature that I have to explain is that the client application is counting
time,
starting when an access token is set, so that it won't send
a request with an expired access token.
Generally, the clock on the server is not in sync with the client clock.
So it is possible a client to send a request,
after it checks that the access token is valid,
but the request be invalid on the server, due to different clock set.
For that, there is a time tolerance period configurable in
/components/config/auth.js.
The parameter name is time_diff_allowance, by default set to 30 seconds.
For example, if the access token is valid for 10 minutes,
and the time_diff_allowance is set to 30 seconds,
the client won't send a regular request to the Access server,
after 570 (10 * 60 - 30) seconds have past.
It will send a refresh request to the Auth server first,
and then it will send the regular request to the Access server,
with the newly acquired access token.