API: Export keycloak config into a keycloak.json (remove hard coded config)

[ssoerensen]

src/context/AuthContextProvider.tsx

https://my.msg-david.de/confluence/display/GAIAX/PoC%3A+Authentication+via+Keycloak

[devbysp]

Pull Request

• https://github.com/GAIA-X4PLC-AAD/portal/pull/107 was merged incorrectly
• https://github.com/GAIA-X4PLC-AAD/portal/pull/110 it is the rollback of the #107 which was merged incorrectly
• https://github.com/GAIA-X4PLC-AAD/portal/pull/111 it is the rollback of the #110 in order to recreate the pull request #107

Solution

• The aplication loads the configuration from the keycloak-config alisa with the following expression import keycloakConfig from 'keycloak-config';
• The alias is set inside the webpack in the ''config-overrride.js' file.
  • If the app is started in 'production' env, for example is built with the command npm run build then started with the serve -s build or live-server build --host=localhost --port=3000, then the configuration is taken from the 'keycloak-config.production.json'.
  • If the application is started in 'development' env, for example started with the npm start, then the configuration is taken from the 'keycloak-config.json'.
• The configuration for 'production' env is stored in the 'src/keycloak-config.production.json'
• The configuration for 'developmen' env is stored in the 'src/keycloak-config.json'
• The related 'webpack' configuration look like this:

config-overrides.js

module.exports = override(
  ...

  // 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;
  }
);

• The keycloack config for 'development' enviroment looks like this:

src/keycloak-config.json

{
  "config": {
    "realm": "gaia-x",
    "clientId": "portal",
  },
  "initOptions": {
    "onLoad": "check-sso",
    "checkLoginIframe": false,
    "pkceMethod": "S256"
  }
}

• The keycloak url is taken from the .env.

  ...
  REACT_APP_KEYCLOAK_API_URL=https://fc-keycloak.gxfs.gx4fm.org/
  ...