This app shows all logs activity, from Auth0, on a map as a heatmap. The information is got from /api/v2/logs. From the IP of the user, and using a third-party service (http://ip-api.com), we obtain an approximation of the latitude and longitude.
For retrieving the tiles and for drawing the map we use Mapbox and mapbox-gl library, respectively.
Since this is considered a hacking exercise, some liberties have been taken:
- API token is passed as a parameter in a
.envfile (in the future this will be handled from a backend app, using Machine to Machine flow). - To avoid banning from the third-party service (there's a limit of 150 requests per minute), a fake cache on the frontend side was created using
localStorage. This cache should be handle also from a backend app (1). Map.jsxfile has a lot of style information. This will be moved to an external file.- Pagination should be added: we are getting only the first page of logs, using the maximum limit of 100 rows (since we only take the IP from the response,
fieldsparam is being used for some performance improvement).
Edit .env file in the root of the project.
- REACT_APP_DOMAIN: Auth0 domain.
- REACT_APP_AUTH0_TOKEN: Auth0 token from an API with
read:logspermission. - REACT_APP_MAPBOX_TOKEN: Mapbox token (free open token by default)
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
This project was bootstrapped with Create React App.
(1). If your IP gets banned, go to http://ip-api.com/docs/unban