Merge pull request #424 from zesu22/feature/es-301

[ES-301] well-known endpoints in e-signet nginx and render them on UI

oidc-ui/Dockerfile

@@ -3,22 +3,29 @@ FROM node:12.18.4-alpine as build_esignet_ui
 ARG sign_in_with_esignet_plugin_url
 ENV SIGN_IN_WITH_ESIGNET_PLUGIN_URL=$sign_in_with_esignet_plugin_url
 
-COPY package*.json ./
-
 # Set a build-time environment variable (replace YOUR_ENV_VARIABLE_NAME with the desired variable name)
 ARG oidcUIPublicUrl
+ARG defaultLang
+ARG defaultWellknown
+
 ENV OIDC_UI_PUBLIC_URL=$oidcUIPublicUrl
+ENV DEFAULT_LANG=$defaultLang
+ENV DEFAULT_WELLKNOWN=$defaultWellknown
 
 # Set the environment variable as a placeholder for PUBLIC_URL
 ENV PUBLIC_URL=_PUBLIC_URL_
 
+COPY package*.json ./
 RUN npm install
 #Copy the working directory
 COPY . ./
 RUN npm run build
 
 FROM nginx
 
+RUN apt-get -y update \
+    && apt-get install -y curl npm wget unzip zip
+
 ARG SOURCE
 ARG COMMIT_HASH
 ARG COMMIT_ID
@@ -40,24 +47,27 @@ ARG container_user_uid=1001
 # can be passed during Docker build as build time environment for github branch to pickup configuration from.
 ARG container_user_gid=1001
 
-ENV nginx_dir=/usr/share/nginx
-ENV i18n_path=${nginx_dir}/html/locales
-ENV plugins_path=${nginx_dir}/html/plugins
-ENV plugins_format=iife
-
 # can be passed during Docker build as build time environment for artifactory URL
 ARG artifactory_url
 
 # environment variable to pass artifactory url, at docker runtime
 ENV artifactory_url_env=${artifactory_url}
 
+ENV nginx_dir=/usr/share/nginx
+
+ENV work_dir=${nginx_dir}/html
+
+ENV i18n_path=${work_dir}/locales
+
+ENV plugins_path=${nginx_dir}/html/plugins
+
+ENV plugins_format=iife
+
 # set working directory for the user
 WORKDIR /home/${container_user}
 
 # install packages and create user
-RUN apt-get -y update \
-    && apt-get install -y curl npm wget unzip zip \
-    && groupadd -g ${container_user_gid} ${container_user_group} \
+RUN groupadd -g ${container_user_gid} ${container_user_group} \
     && useradd -u ${container_user_uid} -g ${container_user_group} -s /bin/sh -m ${container_user} \
     && mkdir -p /var/run/nginx /var/tmp/nginx ${i18n_path} ${plugins_path}  ${plugins_path}/temp \
     && chown -R ${container_user}:${container_user} /usr/share/nginx /var/run/nginx /var/tmp/nginx ${i18n_path} ${plugins_path} ${plugins_path}/temp
@@ -69,10 +79,15 @@ RUN chmod +x configure_start.sh
 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
 
 # copy build files to nginx html directory
-COPY --from=build_esignet_ui /build $nginx_dir/html
+COPY --from=build_esignet_ui /build  ${work_dir}
+
+RUN echo "DEFAULT_LANG=$DEFAULT_LANG" >> ${work_dir}/env.env && echo "DEFAULT_WELLKNOWN=$DEFAULT_WELLKNOWN" >> ${work_dir}/env.env
 
 RUN chown -R ${container_user}:${container_user} /home/${container_user}
 
+# change permissions of file inside working dir
+RUN chown -R ${container_user}:${container_user} ${work_dir}
+
 # select container user for all tasks
 USER ${container_user_uid}:${container_user_gid}
 
@@ -82,4 +97,4 @@ ENTRYPOINT [ "./configure_start.sh" ]
 
 CMD echo "starting nginx" ; \
     nginx ; \
-    sleep infinity
+    sleep infinity

oidc-ui/nginx/nginx.conf

@@ -44,6 +44,22 @@ http {
       proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header   X-Forwarded-Host $server_name;
     }
+    location /.well-known/oauth-authorization-server {
+      proxy_pass         http://esignet.esignet/v1/esignet/oauth/.well-known/oauth-authorization-server;
+      proxy_redirect     off;
+      proxy_set_header   Host $host;
+      proxy_set_header   X-Real-IP $remote_addr;
+      proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header   X-Forwarded-Host $server_name;
+    }
+    location /.well-known/openid-credential-issuer {
+      proxy_pass         http://esignet.esignet/v1/esignet/vci/.well-known/openid-credential-issuer;
+      proxy_redirect     off;
+      proxy_set_header   Host $host;
+      proxy_set_header   X-Real-IP $remote_addr;
+      proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header   X-Forwarded-Host $server_name;
+    }
     # location /oidc-ui {
     #   alias /usr/share/nginx/oidc-ui;
     #   try_files $uri $uri/ /oidc-ui/index.html;

oidc-ui/public/env-config.js

@@ -0,0 +1,18 @@
+window._env_ = {
+  DEFAULT_LANG: "en",
+  DEFAULT_WELLKNOWN: [
+    {
+      name: "OpenID Configuration",
+      value: "/.well-known/openid-configuration",
+    },
+    { name: "Jwks Json", value: "/.well-known/jwks.json" },
+    {
+      name: "Authorization Server",
+      value: "/.well-known/oauth-authorization-server",
+    },
+    {
+      name: "OpenID Credential Issuer",
+      value: "/.well-known/openid-credential-issuer",
+    },
+  ],
+};

oidc-ui/public/index.html

@@ -23,7 +23,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <!-- runtime config -->
-  <script src="%PUBLIC_URL%/env_configs.js"></script>
+  <script src="%PUBLIC_URL%/env-config.js"></script>
   <!-- runtime config -->
 
   <title>e-Signet</title>

oidc-ui/src/App.js

@@ -84,7 +84,7 @@ function App() {
     //3. Check for system locale
     //Language detector will check navigator and subdomain to select proper language
 
-    //4. default lang set in env_configs file as fallback language.
+    //4. default lang set in env-config file as fallback language.
   };
 
   let el;

oidc-ui/src/components/EsignetDetails.js

@@ -11,17 +11,22 @@ export default function EsignetDetails({ i18nKeyPrefix = "esignetDetails" }) {
   useEffect(() => {
     setStatus({ state: states.LOADING, msg: t("loading_msg") });
 
-    let detailList = [
-      {
-        name: "wellknown_api",
-        value: process.env.PUBLIC_URL + "/.well-known/openid-configuration",
-      },
-    ];
+    // if the environment is not passed then this will assigned as empty list
+    let detailList = window._env_.DEFAULT_WELLKNOWN ?? [];
 
     setDetails(detailList);
     setStatus({ state: states.LOADED, msg: "" });
   }, []);
 
+  // to open a well known endpoint in a separate blank tab
+  const openWellKnownEndpoint = (endpoint) => {
+    window.open(
+      process.env.PUBLIC_URL + endpoint,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  };
+
   return (
     <>
       <section className="text-gray-600 mt-7 body-font">
@@ -49,11 +54,14 @@ export default function EsignetDetails({ i18nKeyPrefix = "esignetDetails" }) {
                     <div className="divide-y-2 gap-2">
                       {details.map((detail, idx) => (
                         <div className="px-2 py-1 grid grid-cols-3">
-                          <div className="col-span-1 flex justify-center">
+                          <div className="col-span-1 flex justify-start">
                             {detail.icon && <img src={detail.icon} />}
-                            {!detail.icon && t(detail.name)}
+                            {!detail.icon && detail.name}
                           </div>
-                          <div className="col-span-2 flex justify-start">
+                          <div
+                            className="col-span-2 flex justify-start cursor-pointer"
+                            onClick={() => openWellKnownEndpoint(detail.value)}
+                          >
                             {detail.value}
                           </div>
                         </div>

oidc-ui/src/components/NavHeader.js

@@ -27,7 +27,7 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "header" }) {
     });
 
     if (lang == null) {
-      const defaultLanguageCode = window["envConfigs"].defaultLang;
+      const defaultLanguageCode = window._env_.DEFAULT_LANG;
 
       // Find the language option that matches the extracted language code
       const defaultLang = langOptions.find((option) => option.value === defaultLanguageCode);

oidc-ui/src/i18n.js

@@ -13,7 +13,7 @@ i18n
   // init i18next
   .init({
     debug: false,
-    fallbackLng: window["envConfigs"].defaultLang, //default language
+    fallbackLng: window._env_.DEFAULT_LANG, //default language
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },