Keycloak config into json config file [#41]

Depending on the environment the app loads the corresponding json config file.

It is controlled by the webpack, see: 'config-overrides.js'

Signed-off-by: Zoltan Magyari <[email protected]>

config-overrides.js

@@ -1,5 +1,24 @@
-// Overrides create-react-app webpack configs without ejecting
-// https://github.com/timarney/react-app-rewired
+const path = require('path');
 
 const { useBabelRc, override } = require('customize-cra');
-module.exports = override(useBabelRc());
+
+module.exports = override(
+  // Use Babel config from .babelrc
+  useBabelRc(),
+
+  // Add Webpack alias for Keycloak configuration based on the environment
+  (config) => {
+    const isProduction = process.env.NODE_ENV === 'production';
+
+    // Define the path to the correct keycloak-config based on the environment
+    config.resolve.alias['keycloak-config'] = path.resolve(
+      __dirname,
+      isProduction
+        ? 'src/keycloak-config.prod.json'   // Production environment
+        : 'src/keycloak-config.json'        // Development environment
+    );
+
+    // Return the modified Webpack config
+    return config;
+  }
+);

src/context/AuthContextProvider.tsx

@@ -1,24 +1,22 @@
 import axios from 'axios';
+import keycloakConfig from 'keycloak-config';
 import Keycloak, { KeycloakConfig, KeycloakInitOptions } from 'keycloak-js';
-import React, { createContext, useEffect, useState, useMemo } from 'react';
+import React, { createContext, useEffect, useMemo, useState } from 'react';
 
-if (!process.env.REACT_APP_KEYCLOAK_API_URL) {
-  throw new Error('REACT_APP_KEYCLOAK_API_URL is not defined');
+const getDotEnvKeycloakApiUrl= (keycloakApiUrl: string): string => {
+  if (!process.env[keycloakApiUrl]) {
+    throw new Error(`${keycloakApiUrl} is not defined`);
+  }
+  return process.env[keycloakApiUrl];
 }
 
-const keycloakConfig: KeycloakConfig = {
-  realm: 'gaia-x',
-  clientId: 'portal',
-  url: process.env.REACT_APP_KEYCLOAK_API_URL,
+const config: KeycloakConfig = {
+  ...keycloakConfig.config,
+  url: getDotEnvKeycloakApiUrl(keycloakConfig.config.url)
 };
 
 const keycloak = new Keycloak(keycloakConfig);
-
-const keycloakInitOptions: KeycloakInitOptions = {
-  onLoad: 'check-sso',
-  checkLoginIframe: false,
-  pkceMethod: 'S256',
-};
+const initOptions = keycloakConfig.initOptions as KeycloakInitOptions;
 
 export interface AuthContextType {
   isAuthenticated: boolean;
@@ -35,7 +33,7 @@ const defaultAuthContextValues: AuthContextType = {
   token: '',
   login: () => Promise.resolve(),
   logout: () => Promise.resolve(),
-  hasRole: (role: string) => false,
+  hasRole: (_role: string) => false,
   redirectPath: null,
   setRedirectPath: () => {},
 };
@@ -58,7 +56,7 @@ const AuthContextProvider: React.FC<AuthContextProviderProps> = ({
   // Initialise Keycloak
   useEffect(() => {
     keycloak
-      .init(keycloakInitOptions)
+      .init(initOptions)
       .then((authenticated) => {
         setIsAuthenticated(authenticated);
         if (authenticated) {

src/keycloak-config.json

@@ -0,0 +1,12 @@
+{
+  "config": {
+    "realm": "gaia-x",
+    "clientId": "portal",
+    "url": "https://fc-keycloak.gxfs.gx4fm.org/"
+  },
+  "initOptions": {
+    "onLoad": "check-sso",
+    "checkLoginIframe": false,
+    "pkceMethod": "S256"
+  }
+}

src/keycloak-config.prod.json

@@ -0,0 +1,12 @@
+{
+  "config": {
+    "realm": "gaia-x",
+    "clientId": "portal",
+    "url": "https://fc-keycloak.gxfs.gx4fm.org/"
+  },
+  "initOptions": {
+    "onLoad": "check-sso",
+    "checkLoginIframe": false,
+    "pkceMethod": "S256"
+  }
+}