Novox Photos manager

Client - Photos react app

React application with a public facing website (./public) and an administration panel (./private)
React router is split into <PublicRoutes /> and <PrivateRoutes />
<PrivateRoutes /> is wrapped in the <Keycloak> context provider
The <Keyclock> context provider is created using the AuthProvider from the oidc-react package
AutoSignin is explicitly set to false to prevent the website from always trying to log in (even if not trying to access the admin section)
The <AdminLayout> component handles the authentication only rendering the <Outlet> when the user is logged in and has sufficient permissions (role based)
We can access the user info using the useAuth hook, only possible in React components or hooks
Our privateApi service is provided using the usePrivateApi hook, it makes use of the useAuth hook to set the authorization header
The url for the private api is set using a “environment variable” (see build process)

The build process is quite simple and uses react-scripts build
“Environment variables” can be set in the .env file. Before starting the application run ./scripts/env.sh to create an env-config.js file in the./public folder which is then loaded using a <script> tag in index.html
In our docker setup, we can pass the environment variables in our docker-compose. When starting the container the env.sh script is executed before starting the application

We use Koa to setup our web api
Our api is split into a /api/public and /api/private routes (see the 2 routers)
Router and HttpEndpoint types can be used to add new endpoints
Following middleware is provided:
- JWT token validation
- Request/response logging
- CORS
- Error handling
- @koa/multer to handle file uploads using multipart/form-data