Merge pull request #107 from GAIA-X4PLC-AAD/feature/41-API-Export-key…

…cloak-config-into-a-keycloak.json

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

.env

@@ -1,7 +1,9 @@
 # React Naming Convention REACT_APP_ https://create-react-app.dev/docs/adding-custom-environment-variables/
 REACT_APP_REALM_NAME=gaia-x
 REACT_APP_EDGE_API_URI=https://portal.gxfs.dev/api
-REACT_APP_FEDERATED_CATALOGUE_API_URL=https://fc-keycloak.gxfs.gx4fm.org/
+REACT_APP_FEDERATED_CATALOGUE_API_URL=https://fc-server.gxfs.gx4fm.org
 REACT_APP_CLIENT_ID=federated-catalogue
+REACT_APP_KEYCLOAK_API_URL=https://fc-keycloak.gxfs.gx4fm.org/
+REACT_APP_SD_WIZARD_API=https://sd-creation-wizard-api.gxfs.gx4fm.org
 WATCHPACK_POLLING=true
 

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,20 +1,20 @@
 import axios from 'axios';
-import Keycloak, { KeycloakConfig, KeycloakInitOptions } from 'keycloak-js';
-import React, { createContext, useEffect, useState, useMemo } from 'react';
-
-const keycloakConfig: KeycloakConfig = {
-  realm: 'gaia-x',
-  clientId: 'portal',
-  url: 'https://fc-keycloak.gxfs.gx4fm.org/',
-};
-
-const keycloak = new Keycloak(keycloakConfig);
+import keycloakConfig from 'keycloak-config';
+import Keycloak, { KeycloakInitOptions } from 'keycloak-js';
+import React, { createContext, useEffect, useMemo, useState } from 'react';
+
+const getDotEnvKeycloakApiUrl = (): string => {
+  if (!process.env.REACT_APP_KEYCLOAK_API_URL) {
+    throw new Error('REACT_APP_KEYCLOAK_API_URL is not defined');
+  }
+  return process.env.REACT_APP_KEYCLOAK_API_URL;
+}
 
-const keycloakInitOptions: KeycloakInitOptions = {
-  onLoad: 'check-sso',
-  checkLoginIframe: false,
-  pkceMethod: 'S256',
-};
+const keycloak = new Keycloak({
+  ...keycloakConfig.config,
+  url: getDotEnvKeycloakApiUrl()
+});
+const initOptions = keycloakConfig.initOptions as KeycloakInitOptions;
 
 export interface AuthContextType {
   isAuthenticated: boolean;
@@ -31,7 +31,7 @@ const defaultAuthContextValues: AuthContextType = {
   token: '',
   login: () => Promise.resolve(),
   logout: () => Promise.resolve(),
-  hasRole: (role: string) => false,
+  hasRole: (_role: string) => false,
   redirectPath: null,
   setRedirectPath: () => {},
 };
@@ -54,7 +54,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,11 @@
+{
+  "config": {
+    "realm": "gaia-x",
+    "clientId": "portal"
+  },
+  "initOptions": {
+    "onLoad": "check-sso",
+    "checkLoginIframe": false,
+    "pkceMethod": "S256"
+  }
+}

src/keycloak-config.prod.json

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

src/services/cypherQueryApiService.ts

@@ -10,7 +10,10 @@ const getHeaders = () => {
 }
 
 function getEndpoint() {
-  const serverUrl: string = 'https://fc-server.gxfs.gx4fm.org';
+  if (!process.env.REACT_APP_FEDERATED_CATALOGUE_API_URL) {
+    throw new Error('REACT_APP_FEDERATED_CATALOGUE_API_URL is not defined');
+  }
+  const serverUrl = process.env.REACT_APP_FEDERATED_CATALOGUE_API_URL;
   return serverUrl + '/query';
 }
 

src/services/schemaApiService.ts

@@ -2,7 +2,10 @@ import axios from 'axios';
 
 import { ShapesAndOntologiesInput } from '../types/ontologies.model';
 
-const SERVER_BASE_URL: string = 'https://fc-server.gxfs.gx4fm.org';
+if (!process.env.REACT_APP_FEDERATED_CATALOGUE_API_URL) {
+  throw new Error('REACT_APP_FEDERATED_CATALOGUE_API_URL is not defined');
+}
+const SERVER_BASE_URL: string = process.env.REACT_APP_FEDERATED_CATALOGUE_API_URL;
 
 export const fetchAllSchemas = async (): Promise<ShapesAndOntologiesInput> => {
   const endpoint = SERVER_BASE_URL + '/schemas';
@@ -40,7 +43,11 @@ export const getConvertedFile = async (id: string) => {
     const formData = new FormData();
     formData.append('file', blob, 'shaclFile.shacl');
 
-    const endpoint = 'https://sd-creation-wizard-api.gxfs.gx4fm.org/convertFile';
+    if (!process.env.REACT_APP_SD_WIZARD_API) {
+      throw new Error('REACT_APP_SD_WIZARD_API is not defined');
+    }
+
+    const endpoint = process.env.REACT_APP_SD_WIZARD_API + '/convertFile';
     const response = await axios.post(endpoint, formData, {
       headers: {
         'Content-Type': 'multipart/form-data'