Dynamic auth client_id and keycloak_realm Env Variables (#401)

* dynamic auth client id and keycloak realm

Signed-off-by: MohammedAbdi <mohammma@usc.edu>

* add env auth variables in prod

Signed-off-by: MohammedAbdi <mohammma@usc.edu>

* add documentation

Signed-off-by: MohammedAbdi <mohammma@usc.edu>

---------

Signed-off-by: MohammedAbdi <mohammma@usc.edu>

Author: Mohammed Abdi

USAGE.md

@@ -57,6 +57,8 @@ The frontend is meant to connect to either the Tornjak backend or the Tornjak ma
 | `NODE_OPTIONS`              | Node options for npm start | `--openssl-legacy-provider` | `--openssl-legacy-provider` | false |
 | `REACT_APP_TORNJAK_MANAGER` | Boolean for whether the connected server is a manager | `false` | `true` | false |
 | `REACT_APP_AUTH_SERVER_URI` | URI for the Keycloak instance to obtain access tokens |  | `http://localhost:8080` | false |
+| `REACT_APP_KEYCLOAK_REALM` | Name of Keycloak realm |  | 'tornjak' | false |
+| `REACT_APP_OIDC_CLIENT_ID` | Auth Client ID |  | 'tornjak' | false |
 | `PORT_FE` | Port for the frontend to run | `3000` | `3000` | true |
 | `PORT_BE` | Port for the backend to run | `10000` | `10000` | true |
 | `REACT_APP_SPIRE_HEALTH_CHECK_ENABLE` | Enable SPIRE health check component | `false` | `true` | false |

docs/user-management.md

@@ -59,18 +59,27 @@ with more details on the general configuration
 1. **Configure Tornjak Frontend**
 Finally, the Frontend must be deployed and configured to obtain access tokens from this auth server. 
 This can be done locally with the environment variable 
-`REACT_APP_AUTH_SERVER_URI`:
+`REACT_APP_AUTH_SERVER_URI`. In addition `REACT_APP_KEYCLOAK_REALM` and `REACT_APP_OIDC_CLIENT_ID` must be set as well. 
+
+Default values are:
+
+`REACT_APP_KEYCLOAK_REALM` - 'tornjak'
+
+`REACT_APP_OIDC_CLIENT_ID` - 'tornjak'
 
 ```
 cd tornjak-frontend
 REACT_APP_API_SERVER_URI=http://localhost:10000/
+REACT_APP_KEYCLOAK_REALM=tornjak
+REACT_APP_OIDC_CLIENT_ID=tornjak
 REACT_APP_AUTH_SERVER_URI=http://localhost:8080/ npm start
 ```
 
 Alternatively, we can do the same on the containerized version:
 
 ```
-docker run -p 3000:3000 -d -e REACT_APP_API_SERVER_URI='http://localhost:10000' -e REACT_APP_AUTH_SERVER_URI='http://localhost:8080' ghcr.io/spiffe/tornjak-frontend:v1.5.0
+docker run -p 3000:3000 -d -e REACT_APP_API_SERVER_URI='http://localhost:10000' -e REACT_APP_AUTH_SERVER_URI='http://localhost:8080' -e REACT_APP_KEYCLOAK_REALM='tornjak' -e 
+REACT_APP_OIDC_CLIENT_ID='tornjak' ghcr.io/spiffe/tornjak-frontend:v1.5.0
 `
 ```
 

frontend/.env

@@ -11,6 +11,8 @@ REACT_APP_API_SERVER_URI=http://localhost:10000/
 
 ##### For user management #####
 # REACT_APP_AUTH_SERVER_URI=http://localhost:8080/
+REACT_APP_KEYCLOAK_REALM="tornjak"
+REACT_APP_OIDC_CLIENT_ID="tornjak"
 
 
 ##### To check SPIRE health #####

frontend/.env.prod

@@ -5,6 +5,8 @@ REACT_APP_API_SERVER_URI=http://localhost:10000/
 
 ##### For user management #####
 # REACT_APP_AUTH_SERVER_URI=http://localhost:8080/
+REACT_APP_KEYCLOAK_REALM="tornjak"
+REACT_APP_OIDC_CLIENT_ID="tornjak"
 
 
 ##### To check SPIRE health #####

frontend/src/auth/KeycloakAuth.js

@@ -1,10 +1,10 @@
 import Keycloak from "keycloak-js";
 import {env} from '../env';
 const keycloakConfig = {
-    "realm": "tornjak",
+    "realm": env.REACT_APP_KEYCLOAK_REALM,
     "url": env.REACT_APP_AUTH_SERVER_URI,
     "ssl-required": "external",
-    "clientId": "Tornjak-React-auth",
+    "clientId": env.REACT_APP_OIDC_CLIENT_ID,
     "public-client": true,
     "verify-token-audience": true,
     "use-resource-role-mappings": true,

frontend/src/env.ts

@@ -8,5 +8,7 @@ declare global {
     REACT_APP_AUTH_SERVER_URI: string,
     REACT_APP_API_SERVER_URI: string,
     REACT_APP_TORNJAK_MANAGER: string,
+    REACT_APP_KEYCLOAK_REALM: string,
+    REACT_APP_OIDC_CLIENT_ID: string,
   }
   export const env: EnvType = { ...process.env, ...window.env }