Finished release 2.5.

.env.example

-ENVIRONMENT_NAME=Development
-PROCESS_DETAIL_REFETCH_INTERVAL=3000
-
-ORCHESTRATOR_API_HOST=http://localhost:8080
-ORCHESTRATOR_API_PATH=/api
-ORCHESTRATOR_GRAPHQL_HOST=http://localhost:8080
-ORCHESTRATOR_GRAPHQL_PATH=/api/graphql
-ORCHESTRATOR_WEBSOCKET_URL=ws://localhost:8080
-
-AUTH_ACTIVE=true
-NEXTAUTH_ID="keycloak"
-NEXTAUTH_CLIENT_ID="orchestrator-client"
-NEXTAUTH_CLIENT_SECRET="KEYCLOAK_SECRET"
-NEXTAUTH_SECRET="NEXTAUTH_SECRET"
-NEXTAUTH_ISSUER="http://localhost:8085/realms/orchestrator"
-NEXTAUTH_WELL_KNOWN_OVERRIDE="http://localhost:8085/auth/.well-known/openid-configuration"
-NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE="openid profile"
-NEXTAUTH_URL=http://localhost:3000/api/auth
-
-# OPA Settings
-OPA_PUBLIC_BUNDLE_URL=http://localhost:8181/v1/data/opa/public-bundle
-
-#Maps Settings
-NETWORK_TOPOLOGY_API_URL="https://orchestrator.uat.gap.geant.org/api/v1/networks/topology"
-
-# docker-compose variables
-KEYCLOAK_ADMIN=admin
-KEYCLOAK_ADMIN_PASSWORD=admin
-KEYCLOAK_PORT=8085
-
-USE_WEBSOCKET=false
-USE_THEME_TOGGLE=false
-
-SHOW_WORKFLOW_INFORMATION_LINK=false
-WORKFLOW_INFORMATION_LINK_URL=http://localhost:8080

.env.local.example

 ENVIRONMENT_NAME=Development
-PROCESS_DETAIL_REFETCH_INTERVAL=3000
-
 ORCHESTRATOR_API_HOST=http://localhost:8080
 ORCHESTRATOR_API_PATH=/api
 ORCHESTRATOR_GRAPHQL_HOST=http://localhost:8080
 ORCHESTRATOR_GRAPHQL_PATH=/api/graphql
 ORCHESTRATOR_WEBSOCKET_URL=ws://localhost:8080
+USE_WEB_SOCKETS=true
+USE_THEME_TOGGLE=true
+SHOW_WORKFLOW_INFORMATION_LINK=true
+WORKFLOW_INFORMATION_LINK_URL="https://workfloworchestrator.org/"
+
+# Auth variables
+OAUTH2_ACTIVE=true
+NEXTAUTH_PROVIDER_ID="oidc"
+NEXTAUTH_PROVIDER_NAME="GÉANT Identity Provider"
+NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE="openid profile email aarc offline_access"
+OAUTH2_CLIENT_ID="APP-A43E6FB7-1EEF-49CB-95B9-9AFF6FA7EF66"
+OAUTH2_CLIENT_SECRET=""
+OIDC_CONF_FULL_WELL_KNOWN_URL="https://proxy.aai.geant.org/.well-known/openid-configuration"
+OIDC_TOKEN_ENDPOINT="https://proxy.aai.geant.org/OIDC/token"
+
+# OPA Settings
+OPA_PUBLIC_BUNDLE_URL="http://localhost:8000/policy.wasm"
+
+#Maps Settings
+NETWORK_TOPOLOGY_API_URL="http://localhost:8080/api/v1/networks/topology"
 
-AUTH_ACTIVE=true
+# Required by the Nextauth middleware
 NEXTAUTH_URL=http://localhost:3000/api/auth
+NEXTAUTH_SECRET="LR1a4CU9UVFr1OcVeu4ULDX/VHMMiI+s3wNvOkf6fdE=" # openssl rand -base64 32
 
-# OIDC Authentication Settings
-NEXTAUTH_ID="oidc"
-NEXTAUTH_CLIENT_ID="APP-A43E6FB7-1EEF-49CB-95B9-9AFF6FA7EF66"
-NEXTAUTH_CLIENT_SECRET="YOUR_OIDC_CLIENT_SECRET"
-NEXTAUTH_SECRET="SOhxHLn53mV7ML7y8L6rL5oOQxOVb0V4p2Ez0ZSIuOs=" # openssl rand -base64 32
-NEXTAUTH_ISSUER="https://proxy.aai.geant.org"
-NEXTAUTH_WELL_KNOWN_OVERRIDE="https://proxy.aai.geant.org/.well-known/openid-configuration"
 
-# docker-compose variables
-# KEYCLOAK_ADMIN=admin
-# KEYCLOAK_ADMIN_PASSWORD=admin
-# KEYCLOAK_PORT=8085
 
-USE_WEBSOCKET=true
-USE_THEME_TOGGLE=true
\ No newline at end of file

.eslintrc.js

 module.exports = {
-    root: true,
-    extends: [
-        '@orchestrator-ui/eslint-config-custom',
-        // 'plugin:prettier/recommended'
-    ],
-    // plugins: ['prettier'],
-    // rules: {
-    //     'prettier/prettier': 'error',
-    // },
+  root: true,
+  extends: [
+    '@orchestrator-ui/eslint-config-custom',
+    // 'plugin:prettier/recommended'
+  ],
+  // plugins: ['prettier'],
+  // rules: {
+  //     'prettier/prettier': 'error',
+  // },
 };

.prettierignore

+# Add files here to ignore them from prettier formatting
+
+/coverage
+/mkdocs
+
+.next
+node_modules

Changelog.md

@@ -2,21 +2,32 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.5] - 2024-09-18
+
+- Add refresh token logic
+- update core-lib
+
 ## [2.4] - 2024-08-06
+
 - Redesigned maps to utilize the leafletmap package, replacing graph maps with real-world maps for enhanced accuracy and user experience.
 
 ## [2.3] - 2024-06-18
+
 - Extended the timeout for authentication on GAP
 
 ## [2.2] - 2024-06-04
+
 - Add a new page that shows the IP trunks in the network.
 
 ## [2.1] - 2024-05-24
+
 - Fix a bug that prevented operators from viewing workflows.
 
 ## [2.0] - 2024-05-23
+
 - Update GUI to version 2.
 - Rework project structure to be compatible with new UI library.
 
 ## [0.2] - 2023-12-04
+
 - initial skeleton

configuration/configuration.ts

 import {
   Environment,
   OrchestratorConfig,
+  getEnvironmentVariables,
 } from '@orchestrator-ui/orchestrator-ui-components';
 
-const DEFAULT_GRAPHQL_CORE_ENDPOINT = 'http://localhost:8080/api/graphql';
-const DEFAULT_ORCHESTRATOR_API_BASE_URL = 'http://localhost:8080/api';
-const DEFAULT_ORCHESTRATOR_WEBSOCKET_URL = 'ws://localhost:8080';
-
-const ENGINE_STATUS_ENDPOINT = '/settings/status';
-const PROCESS_STATUS_COUNTS_ENDPOINT = '/processes/status-counts';
-const PROCESSES_ENDPOINT = '/processes';
-const SUBSCRIPTION_PROCESSES_ENDPOINT =
-  '/processes/process-subscriptions-by-subscription-id';
-const DEFAULT_WORKFLOW_INFORMATION_LINK_URL = 'http://localhost:8080';
-
 export const getInitialOrchestratorConfig = (): OrchestratorConfig => {
-  const orchestratorGraphqlBaseUrl =
-    process.env.ORCHESTRATOR_GRAPHQL_HOST &&
-    process.env.ORCHESTRATOR_GRAPHQL_PATH
-      ? `${process.env.ORCHESTRATOR_GRAPHQL_HOST}${process.env.ORCHESTRATOR_GRAPHQL_PATH}`
-      : DEFAULT_GRAPHQL_CORE_ENDPOINT;
+  const {
+    USE_THEME_TOGGLE,
+    ENVIRONMENT_NAME,
+    ORCHESTRATOR_API_HOST,
+    ORCHESTRATOR_API_PATH,
+    ORCHESTRATOR_GRAPHQL_HOST,
+    ORCHESTRATOR_GRAPHQL_PATH,
+    ORCHESTRATOR_WEBSOCKET_URL,
+    USE_WEB_SOCKETS,
+    WORKFLOW_INFORMATION_LINK_URL,
+    SHOW_WORKFLOW_INFORMATION_LINK,
+    OAUTH2_ACTIVE,
+  } = getEnvironmentVariables([
+    'USE_THEME_TOGGLE',
+    'ENVIRONMENT_NAME',
+    'ORCHESTRATOR_API_HOST',
+    'ORCHESTRATOR_API_PATH',
+    'ORCHESTRATOR_GRAPHQL_HOST',
+    'ORCHESTRATOR_GRAPHQL_PATH',
+    'ORCHESTRATOR_WEBSOCKET_URL',
+    'USE_WEB_SOCKETS',
+    'WORKFLOW_INFORMATION_LINK_URL',
+    'SHOW_WORKFLOW_INFORMATION_LINK',
+    'OAUTH2_ACTIVE',
+  ]);
 
-  const orchestratorApiBaseUrl =
-    process.env.ORCHESTRATOR_API_HOST && process.env.ORCHESTRATOR_API_PATH
-      ? `${process.env.ORCHESTRATOR_API_HOST}${process.env.ORCHESTRATOR_API_PATH}`
-      : DEFAULT_ORCHESTRATOR_API_BASE_URL;
+  const graphqlEndpointCore = `${ORCHESTRATOR_GRAPHQL_HOST}${ORCHESTRATOR_GRAPHQL_PATH}`;
+  const orchestratorApiBaseUrl = `${ORCHESTRATOR_API_HOST}${ORCHESTRATOR_API_PATH}`;
 
   return {
     orchestratorApiBaseUrl,
-    engineStatusEndpoint: `${orchestratorApiBaseUrl}${ENGINE_STATUS_ENDPOINT}`,
-    graphqlEndpointCore: orchestratorGraphqlBaseUrl,
-    processesEndpoint: `${orchestratorApiBaseUrl}${PROCESSES_ENDPOINT}`,
-    environmentName: process.env.ENVIRONMENT_NAME ?? Environment.DEVELOPMENT,
-    subscriptionProcessesEndpoint: `${orchestratorApiBaseUrl}${SUBSCRIPTION_PROCESSES_ENDPOINT}`,
-    orchestratorWebsocketUrl:
-      process.env.ORCHESTRATOR_WEBSOCKET_URL ??
-      DEFAULT_ORCHESTRATOR_WEBSOCKET_URL,
-    authActive: process.env.AUTH_ACTIVE?.toLowerCase() !== 'false',
-    useWebSockets: process.env.USE_WEB_SOCKETS?.toLowerCase() === 'true',
-    useThemeToggle: process.env.USE_THEME_TOGGLE?.toLowerCase() === 'true',
-    workflowInformationLinkUrl:
-      process.env.WORKFLOW_INFORMATION_LINK_URL ??
-      DEFAULT_WORKFLOW_INFORMATION_LINK_URL,
+    graphqlEndpointCore,
+    environmentName: ENVIRONMENT_NAME ?? Environment.DEVELOPMENT,
+    orchestratorWebsocketUrl: ORCHESTRATOR_WEBSOCKET_URL,
+    authActive: OAUTH2_ACTIVE?.toLowerCase() != 'false',
+    useWebSockets: USE_WEB_SOCKETS?.toLowerCase() === 'true',
+    useThemeToggle: USE_THEME_TOGGLE?.toLowerCase() === 'true',
+    workflowInformationLinkUrl: WORKFLOW_INFORMATION_LINK_URL,
     showWorkflowInformationLink:
-      process.env.SHOW_WORKFLOW_INFORMATION_LINK?.toLowerCase() === 'true',
+      SHOW_WORKFLOW_INFORMATION_LINK?.toLowerCase() === 'true',
   };
 };

hooks/useAxiosInterceptor.tsx

-import { useEffect } from 'react';
-import axios from 'axios';
-import { signOut } from 'next-auth/react';
-
-const useAxiosInterceptor = () => {
-  useEffect(() => {
-    const responseInterceptor = axios.interceptors.response.use(
-      response => response,
-      error => {
-        if (error.response && error.response.status === 401) {
-          const currentUrl = window.location.href;
-          signOut({ callbackUrl: `/api/auth/signin?error=SessionRequired&callbackUrl=${encodeURIComponent(currentUrl)}` });
-        }
-        return Promise.reject(error);
-      }
-    );
-
-    return () => {
-      axios.interceptors.response.eject(responseInterceptor);
-    };
-  }, []);
-};
-
-export default useAxiosInterceptor;

hooks/useFetchInterceptor.tsx

-import { useEffect } from 'react';
-import { signOut } from 'next-auth/react';
-
-const useFetchInterceptor = () => {
-  useEffect(() => {
-    const handleResponse = (response: Response) => {
-      if (response.status === 401) {
-        const currentUrl = window.location.href;
-        signOut({ callbackUrl: `/api/auth/signin?error=SessionRequired&callbackUrl=${encodeURIComponent(currentUrl)}` });
-      }
-      return response;
-    };
-
-    const originalFetch = global.fetch.bind(global);
-
-    global.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
-      const response = await originalFetch(input, init);
-      return handleResponse(response);
-    };
-
-    return () => {
-      global.fetch = originalFetch;
-    };
-  }, []);
-};
-
-export default useFetchInterceptor;

next.config.js

 module.exports = {
-    reactStrictMode: false,
-    output: 'standalone',
-    i18n: {
-        // These are all the locales you want to support in
-        // your application
-        locales: ['en-GB', 'nl-NL'],
-        defaultLocale: 'en-GB',
-    },
-    transpilePackages: ['@orchestrator-ui/orchestrator-ui-components'],
-    publicRuntimeConfig: {
-        OPA_PUBLIC_BUNDLE_URL: process.env.OPA_PUBLIC_BUNDLE_URL,
-        NEXTAUTH_CLIENT_ID: process.env.NEXTAUTH_CLIENT_ID,
-    },
+  reactStrictMode: false,
+  output: 'standalone',
+  i18n: {
+    // These are all the locales you want to support in
+    // your application
+    locales: ['en-GB'],
+    defaultLocale: 'en-GB',
+  },
+  transpilePackages: ['@orchestrator-ui/orchestrator-ui-components'],
+  publicRuntimeConfig: {
+    OPA_PUBLIC_BUNDLE_URL: process.env.OPA_PUBLIC_BUNDLE_URL,
+    OAUTH2_CLIENT_ID: process.env.OAUTH2_CLIENT_ID,
+  },
 };

package.json

@@ -9,18 +9,19 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "prettier": "prettier --write \"{components,configuration,contexts,pages,translations,public}/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier": "prettier -c \"{**/*,*}.{ts,tsx,json,js,md}\"",
+    "prettier-fix": "prettier --write \"{**/*,*}.{ts,tsx,json,js,md}\"",
     "prettier:check": "prettier --check \"{components,configuration,contexts,pages,translations,public}/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "prepare": "husky"
   },
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^93.1.1",
+    "@elastic/eui": "^95.1.0",
     "@elfalem/leaflet-curve": "^0.9.2",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@open-policy-agent/opa-wasm": "^1.8.1",
-    "@orchestrator-ui/orchestrator-ui-components": "1.20.0",
+    "@orchestrator-ui/orchestrator-ui-components": "1.37.1",
     "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.7.2",
     "cytoscape": "^3.29.2",
@@ -42,7 +43,7 @@
     "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-no-ssr": "^1.1.0",
     "react-query": "3.39.3",
-    "react-redux": "^9.1.0",
+    "react-redux": "^8.1.3",
     "use-query-params": "2.2.1"
   },
   "devDependencies": {
@@ -54,23 +55,25 @@
     "@types/cytoscape-fcose": "^2.2.4",
     "@types/leaflet": "^1.9.12",
     "@types/node": "^20.10.5",
-    "@types/react": "^18.3.3",
+    "@types/node-fetch": "^2.6.11",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@types/react-leaflet-markercluster": "^3.0.4",
     "@types/react-no-ssr": "^1.1.7",
+    "babel-jest": "^29.7.0",
     "esbuild-jest": "^0.4.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "husky": "^9.0.11",
     "prettier": "^2.3.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.5.2"
   },
   "overrides": {
     "@elastic/eui": {
-      "typescript": "^5.3.2"
+      "typescript": "^5.5.2"
     },
     "react-no-ssr": {
-      "react": "^18.2.0"
+      "react": "^18.3.1"
     }
   }
 }

pages/_app.tsx

@@ -3,25 +3,21 @@ import { getAppLogo } from '@/components/AppLogo/AppLogo';
 import { WfoAuthWithPolicy } from '@/components/WfoAuthWithPolicy';
 import { getInitialOrchestratorConfig } from '@/configuration';
 import { GsoConfigProvider, GsoConfig } from '@/contexts/GsoConfigContext';
-import useAxiosInterceptor from '@/hooks/useAxiosInterceptor';
-import useFetchInterceptor from '@/hooks/useFetchInterceptor';
 import { TranslationsProvider } from '@/translations/translationsProvider';
+import type { EuiSideNavItemType } from '@elastic/eui';
 import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
-import '@elastic/eui/dist/eui_theme_dark.min.css';
 import '@elastic/eui/dist/eui_theme_light.min.css';
-import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 import {
-  ApiClientContextProvider,
   ColorModes,
   ConfirmationDialogContextWrapper,
   OrchestratorConfig,
   OrchestratorConfigProvider,
   StoreProvider,
   WfoErrorBoundary,
+  WfoMenuItemLink,
   WfoPageTemplate,
   WfoToastsList,
   defaultOrchestratorTheme,
-  WfoMenuItemLink,
 } from '@orchestrator-ui/orchestrator-ui-components';
 import { SessionProvider } from 'next-auth/react';
 import { NextAdapter } from 'next-query-params';
@@ -30,36 +26,17 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import NoSSR from 'react-no-ssr';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
-import { QueryClientConfig } from 'react-query/types/core/types';
 import { QueryParamProvider } from 'use-query-params';
 
 type AppOwnProps = { orchestratorConfig: OrchestratorConfig };
 
-const queryClientConfig: QueryClientConfig = {
-  defaultOptions: {
-    queries: {
-      cacheTime: 5 * 1000,
-      refetchOnWindowFocus: true,
-    },
-  },
-};
-
-const useAuthInterceptor = () => {
-  useFetchInterceptor();
-  useAxiosInterceptor();
-};
-
 function CustomApp({
   Component,
   pageProps,
   orchestratorConfig,
 }: AppProps & AppOwnProps) {
   const router = useRouter();
-  useAuthInterceptor();
 
-  const [queryClient] = useState(() => new QueryClient(queryClientConfig));
   const [themeMode, setThemeMode] = useState<EuiThemeColorMode>(
     ColorModes.LIGHT,
   );
@@ -128,40 +105,32 @@ function CustomApp({
                     colorMode={themeMode}
                     modify={defaultOrchestratorTheme}
                   >
-                    <ApiClientContextProvider>
-                      <QueryClientProvider
-                        client={queryClient}
-                        contextSharing={true}
-                      >
-                        <TranslationsProvider>
-                          <Head>
-                            <link rel="icon" href="/favicon.png" />
-                            <title>GÉANT Service Orchestrator</title>
-                          </Head>
-                          <main className="app">
-                            <ConfirmationDialogContextWrapper>
-                              <WfoPageTemplate
-                                getAppLogo={getAppLogo}
-                                onThemeSwitch={handleThemeSwitch}
-                                overrideMenuItems={addMenuItems}
-                              >
-                                <QueryParamProvider
-                                  adapter={NextAdapter}
-                                  options={{
-                                    removeDefaultsFromUrl: false,
-                                    enableBatching: true,
-                                  }}
-                                >
-                                  <Component {...pageProps} />
-                                </QueryParamProvider>
-                              </WfoPageTemplate>
-                              <WfoToastsList />
-                            </ConfirmationDialogContextWrapper>
-                            <ReactQueryDevtools initialIsOpen={false} />
-                          </main>
-                        </TranslationsProvider>
-                      </QueryClientProvider>
-                    </ApiClientContextProvider>
+                    <TranslationsProvider>
+                      <Head>
+                        <link rel="icon" href="/favicon.png" />
+                        <title>GÉANT Service Orchestrator</title>
+                      </Head>
+                      <main className="app">
+                        <ConfirmationDialogContextWrapper>
+                          <WfoPageTemplate
+                            getAppLogo={getAppLogo}
+                            onThemeSwitch={handleThemeSwitch}
+                            overrideMenuItems={addMenuItems}
+                          >
+                            <QueryParamProvider
+                              adapter={NextAdapter}
+                              options={{
+                                removeDefaultsFromUrl: false,
+                                enableBatching: true,
+                              }}
+                            >
+                              <Component {...pageProps} />
+                            </QueryParamProvider>
+                          </WfoPageTemplate>
+                          <WfoToastsList />
+                        </ConfirmationDialogContextWrapper>
+                      </main>
+                    </TranslationsProvider>
                   </EuiProvider>
                 </WfoAuthWithPolicy>
               </GsoConfigProvider>

pages/api/auth/[...nextauth].ts

 import {
   WfoSession,
   WfoUserProfile,
+  getEnvironmentVariables,
 } from '@orchestrator-ui/orchestrator-ui-components';
 import NextAuth, { AuthOptions } from 'next-auth';
 import { JWT } from 'next-auth/jwt';
 import { OAuthConfig } from 'next-auth/providers';
 
-const token_endpoint_auth_method = process.env.NEXTAUTH_CLIENT_SECRET
+const {
+  OAUTH2_ACTIVE,
+  OAUTH2_CLIENT_ID,
+  OAUTH2_CLIENT_SECRET,
+  NEXTAUTH_PROVIDER_ID,
+  NEXTAUTH_PROVIDER_NAME,
+  NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE,
+  OIDC_CONF_FULL_WELL_KNOWN_URL,
+  OIDC_TOKEN_ENDPOINT,
+} = getEnvironmentVariables([
+  'OAUTH2_ACTIVE',
+  'OAUTH2_CLIENT_ID',
+  'OAUTH2_CLIENT_SECRET',
+  'NEXTAUTH_PROVIDER_ID',
+  'NEXTAUTH_PROVIDER_NAME',
+  'NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE',
+  'OIDC_CONF_FULL_WELL_KNOWN_URL',
+  'OIDC_TOKEN_ENDPOINT',
+]);
+
+const isOauth2Enabled = OAUTH2_ACTIVE?.toLowerCase() != 'false';
+
+const token_endpoint_auth_method = OAUTH2_CLIENT_SECRET
   ? 'client_secret_basic'
   : 'none';
 
-const authActive = process.env.AUTH_ACTIVE?.toLowerCase() != 'false';
+async function refreshAccessToken(token: JWT): Promise<JWT> {
+  try {
+    const raw = JSON.stringify({
+      client_id: OAUTH2_CLIENT_ID,
+      grant_type: 'refresh_token',
+      refresh_token: token.refreshToken as string,
+    });
+
+    const response = await fetch(OIDC_TOKEN_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: raw,
+      redirect: 'follow',
+    });
+
+    if (response.ok) {
+      const data: {
+        access_token: string;
+        expires_in: number;
+        refresh_token: string;
+      } = await response.json();
+
+      return {
+        ...token,
+        accessToken: data.access_token,
+        accessTokenExpires:
+          Math.floor(Date.now() / 1000) + (data.expires_in - 300), // Store expiry as a Unix timestamp (in seconds)
+        refreshToken: data.refresh_token,
+      };
+    } else {
+      return {
+        ...token,
+        error: `${response.statusText}`,
+      };
+    }
+  } catch (error) {
+    return {
+      ...token,
+      error: `${error}`,
+    };
+  }
+}
+
 const wfoProvider: OAuthConfig<WfoUserProfile> = {
-  id: process.env.NEXTAUTH_ID || '',
-  name: process.env.NEXTAUTH_ID || '',
+  id: NEXTAUTH_PROVIDER_ID,
+  name: NEXTAUTH_PROVIDER_NAME,
   type: 'oauth',
-  clientId: process.env.NEXTAUTH_CLIENT_ID || '',
-  clientSecret: process.env.NEXTAUTH_CLIENT_SECRET || undefined,
-  wellKnown:
-    process.env.NEXTAUTH_WELL_KNOWN_OVERRIDE ??
-    `${process.env.NEXTAUTH_ISSUER || ''}/.well-known/openid-configuration`,
+  clientId: OAUTH2_CLIENT_ID,
+  wellKnown: OIDC_CONF_FULL_WELL_KNOWN_URL,
   authorization: {
     params: {
-      scope:
-        process.env.NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE ?? 'openid profile',
+      scope: NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE,
+      prompt: 'consent',
     },
   },
   idToken: true,
@@ -35,7 +99,6 @@ const wfoProvider: OAuthConfig<WfoUserProfile> = {
       if (!context.provider.wellKnown || !tokens.access_token) {
         return {};
       }
-
       return await client.userinfo(tokens.access_token);
     },
   },
@@ -53,15 +116,29 @@ const wfoProvider: OAuthConfig<WfoUserProfile> = {
 };
 
 export const authOptions: AuthOptions = {
-  providers: authActive ? [wfoProvider] : [],
+  providers: isOauth2Enabled ? [wfoProvider] : [],
   callbacks: {
-    async jwt({ token, account, profile }) {
+    async jwt({ token, account, profile }): Promise<JWT> {
       // The "account" is only available right after signing in -- adding useful data to the token
       if (account) {
-        token.accessToken = account.access_token;
-        token.profile = profile;
+        return {
+          ...token,
+          accessToken: account.access_token,
+          refreshToken: account.refresh_token,
+          accessTokenExpires: account.expires_at as number,
+          profile: profile as WfoUserProfile,
+        };
+      }
+
+      const now = Math.floor(Date.now() / 1000);
+      if (
+        typeof token.accessTokenExpires === 'number' &&
+        now < token.accessTokenExpires
+      ) {
+        return token;
       }
-      return token;
+
+      return await refreshAccessToken(token);
     },
     async session({ session, token }: { session: WfoSession; token: JWT }) {
       // Assign data to the session to be available in the client through the useSession hook
@@ -72,4 +149,5 @@ export const authOptions: AuthOptions = {
     },
   },
 };
+
 export default NextAuth(authOptions);

pages/api/runtime-config.ts

+import { getEnvironmentVariables } from '@orchestrator-ui/orchestrator-ui-components';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 interface RuntimeConfig {
@@ -6,14 +7,21 @@ interface RuntimeConfig {
   networkTopologyApiUrl: string;
 }
 
+const { OPA_PUBLIC_BUNDLE_URL, OAUTH2_CLIENT_ID, NETWORK_TOPOLOGY_API_URL } =
+  getEnvironmentVariables([
+    'OPA_PUBLIC_BUNDLE_URL',
+    'OAUTH2_CLIENT_ID',
+    'NETWORK_TOPOLOGY_API_URL',
+  ]);
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<RuntimeConfig | { error: string }>,
 ) {
   const config: RuntimeConfig = {
-    opaPublicBundleUrl: process.env.OPA_PUBLIC_BUNDLE_URL || '',
-    oidcClientId: process.env.NEXTAUTH_CLIENT_ID || '',
-    networkTopologyApiUrl: process.env.NETWORK_TOPOLOGY_API_URL || '',
+    opaPublicBundleUrl: OPA_PUBLIC_BUNDLE_URL || '',
+    oidcClientId: OAUTH2_CLIENT_ID || '',
+    networkTopologyApiUrl: NETWORK_TOPOLOGY_API_URL || '',
   };
 
   res.status(200).json(config);

setup.py

@@ -3,7 +3,7 @@ from setuptools import setup
 setup(
     name="geant-service-orchestrator-gui",
     py_modules=[],
-    version="2.4",
+    version="2.5",
     author="GÉANT Orchestration and Automation Team",
     author_email="goat@geant.org",
     description="GÉANT Service Orchestrator GUI dummy package",

translations/en-GB.json

-{
-  "workflow": { "activate_iptrunk": "Activate IP trunk" },
-  "forms": { "fields": { "site_ts_address": "Hello Chris!" } }
-}
+{}

tsconfig.json

 {
-    "extends": "@orchestrator-ui/tsconfig/nextjs.json",
-    "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["./*"]
-        },
-        "plugins": [
-            {
-                "name": "next"
-            }
-        ],
-        "strictNullChecks": true,
-        "jsx": "preserve"
+  "extends": "@orchestrator-ui/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
     },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-    "exclude": ["node_modules"]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

types/types.ts

@@ -15,7 +15,7 @@ export interface IptrunkSideNode {
     site_latitude: number;
     site_longitude: number;
   };
-  owner_subscription_id: string
+  owner_subscription_id: string;
 }
 
 export interface Iptrunk {
@@ -25,10 +25,14 @@ export interface Iptrunk {
   iptrunk_type: string;
   iptrunk_ipv4_network: string;
   iptrunk_ipv6_network: string;
-  geant_s_sid: string,
+  geant_s_sid: string;
   iptrunk_sides: Array<{ iptrunk_side_node: IptrunkSideNode }>;
 }
 
 export interface NetworkTopologyData {
-  iptrunks: Array<{ iptrunk: Iptrunk; insync: boolean; subscription_id: string }>;
+  iptrunks: Array<{
+    iptrunk: Iptrunk;
+    insync: boolean;
+    subscription_id: string;
+  }>;
 }