PPF-522-Keycloak credentials

app/Domain/Integrations/Controllers/IntegrationController.php

@@ -41,6 +41,7 @@
 use App\Domain\Organizations\Repositories\OrganizationRepository;
 use App\Domain\Subscriptions\Repositories\SubscriptionRepository;
 use App\Http\Controllers\Controller;
+use App\Keycloak\Repositories\KeycloakClientRepository;
 use App\ProjectAanvraag\ProjectAanvraagUrl;
 use App\Router\TranslatedRoute;
 use App\Search\Sapi3\SearchService;
@@ -72,6 +73,7 @@ public function __construct(
         private readonly CouponRepository $couponRepository,
         private readonly Auth0ClientRepository $auth0ClientRepository,
         private readonly UiTiDv1ConsumerRepository $uitidV1ConsumerRepository,
+        private readonly KeycloakClientRepository $keycloakClientRepository,
         private readonly KeyVisibilityUpgradeRepository $keyVisibilityUpgradeRepository,
         private readonly SearchService $searchClient,
         private readonly CurrentUser $currentUser
@@ -91,12 +93,14 @@ public function index(Request $request): Response
 
         $auth0Clients = $this->auth0ClientRepository->getByIntegrationIds($integrationIds);
         $uitidV1Consumers = $this->uitidV1ConsumerRepository->getByIntegrationIds($integrationIds);
+        $keycloakClients = $this->keycloakClientRepository->getByIntegrationIds($integrationIds);
 
         return Inertia::render('Integrations/Index', [
             'integrations' => $integrationsData->collection->map(fn (Integration $integration) => $integration->toArray()),
             'credentials' => [
                 'auth0' => $auth0Clients,
                 'uitidV1' => $uitidV1Consumers,
+                'keycloak' => $keycloakClients,
             ],
             'paginationInfo' => $integrationsData->paginationInfo,
         ]);

app/Http/Middleware/HandleInertiaRequests.php

@@ -30,6 +30,7 @@ public function share(Request $request): array
                 'sentryDsn' => config('sentry.dsn'),
                 'sentryEnabled' => config('app.sentry.enabled'),
                 'uitpasEnabled' => config('uitpas.enabled'),
+                'keycloakEnabled' => config('keycloak.enabled'),
             ],
             'widgetConfig' => [
                 'url' => config('uitidwidget.url'),

config/keycloak.php

@@ -5,7 +5,7 @@
 use Auth0\SDK\Configuration\SdkConfiguration;
 
 return [
-
+    'enabled' => env('KEYCLOAK_ENABLED', false),
     'loginEnabled' => env('KEYCLOAK_LOGIN_ENABLED', false),
     'creationEnabled' => env('KEYCLOAK_CREATION_ENABLED', false),
     'login' => [

resources/ts/Components/IntegrationCard.tsx

@@ -22,6 +22,7 @@ import { Alert } from "./Alert";
 import { classNames } from "../utils/classNames";
 import { usePolling } from "../hooks/usePolling";
 import { ButtonSecondary } from "./ButtonSecondary";
+import { usePageProps } from "../hooks/usePageProps";
 
 type Props = Integration &
   Credentials & {
@@ -67,39 +68,70 @@ export const IntegrationCard = ({
   legacyProdConsumer,
   testClient,
   prodClient,
+  keycloakTestClient,
+  keycloakProdClient,
   keyVisibility,
   onEdit,
 }: Props) => {
   const { t } = useTranslation();
+  const { config } = usePageProps();
+  const keycloakEnabled = config.keycloakEnabled;
 
   const integrationTypesInfo = useIntegrationTypesInfo();
 
-  const auth0TestClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: testClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: testClient?.clientSecret,
-    },
-  ];
+  const testClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakTestClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakTestClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: testClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: testClient?.clientSecret,
+        },
+      ];
 
-  const auth0ProdClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: prodClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: prodClient?.clientSecret,
-    },
-  ];
+  const prodClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakProdClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakProdClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: prodClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: prodClient?.clientSecret,
+        },
+      ];
 
   const clientSecretLabel = t("details.credentials.client_secret");
 
   const hasAnyCredentials = Boolean(
-    legacyTestConsumer || legacyProdConsumer || testClient || prodClient
+    legacyTestConsumer ||
+      legacyProdConsumer ||
+      testClient ||
+      prodClient ||
+      keycloakProdClient ||
+      keycloakProdClient
   );
 
   usePolling(!hasAnyCredentials, { only: ["credentials"] });
@@ -120,7 +152,7 @@ export const IntegrationCard = ({
             </Heading>
             <div className="flex flex-col gap-2">
               <div className="flex flex-col gap-2">
-                {auth0TestClientWithLabels.map((client) => (
+                {testClientWithLabels.map((client) => (
                   <div
                     key={`${client.label}-${client.value}`}
                     className="flex gap-1 max-md:flex-col max-md:items-start"
@@ -189,7 +221,7 @@ export const IntegrationCard = ({
                 )}
                 {status === IntegrationStatus.Active && (
                   <div className="flex flex-col gap-2">
-                    {auth0ProdClientWithLabels.map((client) => (
+                    {prodClientWithLabels.map((client) => (
                       <div
                         key={`${client.label}-${client.value}`}
                         className="flex gap-1 max-md:flex-col max-md:items-start"

resources/ts/Components/Integrations/Detail/Credentials.tsx

@@ -5,13 +5,17 @@ import { IntegrationType } from "../../../types/IntegrationType";
 import { CredentialsWidgets } from "./CredentialsWidgets";
 import type {
   AuthClient,
+  KeycloakClient,
   LegacyAuthConsumer,
 } from "../../../types/Credentials";
 import type { Integration } from "../../../types/Integration";
 import { Alert } from "../../Alert";
 import { useTranslation } from "react-i18next";
 import { usePolling } from "../../../hooks/usePolling";
 import { KeyVisibility } from "../../../types/KeyVisibility";
+import { UiTiDv1Environment } from "../../../types/UiTiDv1Environment";
+import { Auth0Tenant } from "../../../types/Auth0Tenant";
+import { KeycloakEnvironment } from "../../../types/KeycloakEnvironment";
 
 type Props = Integration & {
   email: string;
@@ -23,6 +27,8 @@ export type Credentials = {
   prodClient?: AuthClient;
   legacyTestConsumer?: LegacyAuthConsumer;
   legacyProdConsumer?: LegacyAuthConsumer;
+  keycloakTestClient?: KeycloakClient;
+  keycloakProdClient?: KeycloakClient;
 };
 
 export const Credentials = ({
@@ -35,6 +41,7 @@ export const Credentials = ({
   keyVisibilityUpgrade,
   legacyAuthConsumers,
   authClients,
+  keycloakClients,
   oldCredentialsExpirationDate,
 }: Props) => {
   const { t } = useTranslation();
@@ -47,15 +54,25 @@ export const Credentials = ({
   const credentials = useMemo(
     () => ({
       legacyTestConsumer: legacyAuthConsumers.find(
-        (consumer) => consumer.environment === "test"
+        (consumer) => consumer.environment === UiTiDv1Environment.Testing
       ),
       legacyProdConsumer: legacyAuthConsumers.find(
-        (consumer) => consumer.environment === "prod"
+        (consumer) => consumer.environment === UiTiDv1Environment.Production
+      ),
+      testClient: authClients.find(
+        (client) => client.tenant === Auth0Tenant.Testing
+      ),
+      prodClient: authClients.find(
+        (client) => client.tenant === Auth0Tenant.Production
+      ),
+      keycloakTestClient: keycloakClients.find(
+        (client) => client.environment === KeycloakEnvironment.Testing
+      ),
+      keycloakProdClient: keycloakClients.find(
+        (client) => client.environment === KeycloakEnvironment.Production
       ),
-      testClient: authClients.find((client) => client.tenant === "test"),
-      prodClient: authClients.find((client) => client.tenant === "prod"),
     }),
-    [legacyAuthConsumers, authClients]
+    [legacyAuthConsumers, authClients, keycloakClients]
   );
 
   if (!hasAnyCredentials) {

resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx

@@ -12,6 +12,7 @@ import { KeyVisibility } from "../../../types/KeyVisibility";
 import { router } from "@inertiajs/react";
 import { Link } from "../../Link";
 import { Alert } from "../../Alert";
+import { usePageProps } from "../../../hooks/usePageProps";
 
 type Props = Pick<
   Integration,
@@ -27,6 +28,8 @@ type Props = Pick<
 export const CredentialsAuthClients = ({
   testClient,
   prodClient,
+  keycloakTestClient,
+  keycloakProdClient,
   id,
   status,
   email,
@@ -36,29 +39,54 @@ export const CredentialsAuthClients = ({
   keyVisibilityUpgrade,
 }: Props) => {
   const { t } = useTranslation();
+  const { config } = usePageProps();
+  const keycloakEnabled = config.keycloakEnabled;
+
   const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1;
 
-  const auth0TestClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: testClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: testClient?.clientSecret,
-    },
-  ];
+  const testClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakTestClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakTestClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: testClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: testClient?.clientSecret,
+        },
+      ];
 
-  const auth0ProdClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: prodClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: prodClient?.clientSecret,
-    },
-  ];
+  const prodClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakProdClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakProdClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: prodClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: prodClient?.clientSecret,
+        },
+      ];
 
   const clientSecretLabel = t("details.credentials.client_secret");
 
@@ -104,7 +132,7 @@ export const CredentialsAuthClients = ({
             <Heading className="font-semibold flex min-w-[5rem]" level={4}>
               {t("details.credentials.test")}
             </Heading>
-            {auth0TestClientWithLabels.map((client) => (
+            {testClientWithLabels.map((client) => (
               <div
                 key={`${client.label}-${client.value}`}
                 className="flex gap-1 max-md:flex-col max-md:items-start"
@@ -128,7 +156,7 @@ export const CredentialsAuthClients = ({
             <StatusLight status={status} />
             {status === IntegrationStatus.Active && (
               <div className="flex flex-col gap-3">
-                {auth0ProdClientWithLabels.map((client) => (
+                {prodClientWithLabels.map((client) => (
                   <div
                     key={`${client.label}-${client.value}`}
                     className="flex gap-1 max-md:flex-col max-md:items-start"

resources/ts/Pages/Integrations/Index.tsx

@@ -19,6 +19,7 @@ import { UiTiDv1Environment } from "../../types/UiTiDv1Environment";
 import type { Credentials } from "../../types/Credentials";
 import type { Integration } from "../../types/Integration";
 import { router } from "@inertiajs/react";
+import { KeycloakEnvironment } from "../../types/KeycloakEnvironment";
 
 type Props = {
   integrations: Integration[];
@@ -72,9 +73,19 @@ const Index = ({ integrations, paginationInfo, credentials }: Props) => {
               client.integrationId === integration.id &&
               client.environment === UiTiDv1Environment.Production
           ),
+          keycloakTestClient: credentials.keycloak.find(
+            (client) =>
+              client.integrationId === integration.id &&
+              client.environment === KeycloakEnvironment.Testing
+          ),
+          keycloakProdClient: credentials.keycloak.find(
+            (client) =>
+              client.integrationId === integration.id &&
+              client.environment === KeycloakEnvironment.Testing
+          ),
         },
       })),
-    [integrations, credentials.auth0, credentials.uitidV1]
+    [integrations, credentials.auth0, credentials.uitidV1, credentials.keycloak]
   );
 
   const handleDeleteIntegration = () => {

resources/ts/types/Credentials.ts

@@ -1,4 +1,5 @@
 import type { Auth0Tenant } from "./Auth0Tenant";
+import type { KeycloakEnvironment } from "./KeycloakEnvironment";
 import type { UiTiDv1Environment } from "./UiTiDv1Environment";
 
 export type LegacyAuthConsumer = {
@@ -17,7 +18,15 @@ export type AuthClient = {
   integrationId: string;
   tenant: Auth0Tenant;
 };
+export type KeycloakClient = {
+  clientId: string;
+  clientSecret: string;
+  environment: KeycloakEnvironment;
+  id: string;
+  integrationId: string;
+};
 export type Credentials = {
   auth0: AuthClient[];
   uitidV1: LegacyAuthConsumer[];
+  keycloak: KeycloakClient[];
 };