refactoring auth and api with redux-clean-archi

drama-queen/.env

@@ -1,7 +1,6 @@
 VITE_QUEEN_URL=http://localhost:5001
 VITE_QUEEN_V2_URL=http://localhost:5002
 VITE_QUEEN_API_URL=
-VITE_AUTH_TYPE=
-VITE_KEYCLOAK_URL=
-VITE_KEYCLOAK_CLIENT_ID=
-VITE_KEYCLOAK_REALM=
+# If no environment variables for OIDC are provided, the application will use a mock OIDC.
+VITE_OIDC_ISSUER=
+VITE_OIDC_CLIENT_ID=

drama-queen/package.json

@@ -24,6 +24,7 @@
     "jwt-decode": "^3.1.2",
     "keycloak-js": "^21.1.2",
     "memoizee": "^0.4.15",
+    "oidc-spa": "^2.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
@@ -33,7 +34,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@inseefr/lunatic": "^2.4.10",
+    "@inseefr/lunatic": "^2.7.4",
     "@types/node": "^20.3.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",

drama-queen/src/App.tsx

@@ -0,0 +1,33 @@
+import { createCoreProvider } from "core";
+import { RequiresAuthentication } from "ui/auth";
+import { LoadingData } from "ui/pages/LoadingData";
+
+
+const { CoreProvider } = createCoreProvider({
+  "apiUrl": import.meta.env.VITE_API_URL,
+  "publicUrl": import.meta.env.BASE_URL,
+  "oidcParams": {
+    "issuerUri": import.meta.env.VITE_OIDC_ISSUER,
+    "clientId": import.meta.env.VITE_OIDC_CLIENT_ID,
+  },
+});
+
+export default function App() {
+  console.log("public", import.meta.env.BASE_URL)
+  return (
+    /*
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <QueenApiProvider>
+            <RouterProvider router={router} />
+          </QueenApiProvider>
+        </AuthProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+      */
+    <CoreProvider fallback={<h1>Loading</h1>} >
+      <RequiresAuthentication>
+        <LoadingData />
+      </RequiresAuthentication>
+    </CoreProvider>)
+}

drama-queen/src/bootstrap.tsx

@@ -1,39 +1,8 @@
-import { useState, useEffect } from "react";
-import { createCoreProvider } from "core";
 import { createRoot } from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
 import { type RoutingStrategy, createRouter } from "ui/routing/createRouter";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { injectLegacyEntryQueens } from "core/injectLegacyQueens";
-import { createAuthProvider } from "ui/auth";
-import { createQueenApiProvider } from "ui/queenApi";
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { LoadingData } from "ui/pages/LoadingData";
+import App from "App";
 
-const queryClient = new QueryClient({});
-
-const { AuthProvider } = createAuthProvider({
-  isMock: import.meta.env.VITE_AUTH_TYPE !== "OIDC",
-  keycloakUrl: import.meta.env.VITE_KEYCLOAK_URL,
-  clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
-  realm: import.meta.env.VITE_KEYCLOAK_REALM,
-  origin: window.location.origin + import.meta.env.BASE_URL
-});
-
-const { QueenApiProvider } = createQueenApiProvider({
-  apiUrl: import.meta.env.VITE_QUEEN_API_URL
-});
-
-const { CoreProvider } = createCoreProvider({
-  "apiUrl": import.meta.env.VITE_API_URL,
-  "keycloakParams": {
-    "url": import.meta.env.VITE_KEYCLOAK_URL,
-    "clientId": import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
-    "realm": import.meta.env.VITE_KEYCLOAK_REALM,
-    "origin": window.location.origin + import.meta.env.BASE_URL
-  },
-  "redirectUrl": import.meta.env.VITE_REDIRECT_URL,
-});
 
 const mount = ({
   mountPoint,
@@ -51,19 +20,7 @@ const mount = ({
   const router = createRouter({ strategy: routingStrategy, initialPathname });
   const root = createRoot(mountPoint);
   root.render(
-    /*
-    <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <QueenApiProvider>
-          <RouterProvider router={router} />
-        </QueenApiProvider>
-      </AuthProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-    */
-    <CoreProvider fallback={<h1>Loading</h1>} >
-      <LoadingData />
-    </CoreProvider>
+    <App />
   );
 
   return () => queueMicrotask(() => root.unmount());

drama-queen/src/core/adapters/oidc/default.ts

@@ -0,0 +1,16 @@
+import { Oidc } from "core/ports/Oidc";
+import { createOidc as createOidcSpa } from "oidc-spa";
+
+export async function createOidc(params: {
+  issuerUri: string;
+  clientId: string;
+  publicUrl: string;
+}): Promise<Oidc> {
+  const { issuerUri, clientId, publicUrl } = params;
+
+  return createOidcSpa({
+    issuerUri,
+    clientId,
+    publicUrl,
+  });
+}

drama-queen/src/core/adapters/oidc/mock.ts

@@ -0,0 +1,33 @@
+import { Oidc } from "core/ports/Oidc";
+import { id } from "tsafe/id";
+
+export function createOidc(params: { isUserLoggedIn: boolean }): Oidc {
+  const common: Oidc.Common = {
+    params: {
+      issuerUri: "",
+      clientId: "",
+    },
+  };
+
+  if (!params.isUserLoggedIn) {
+    return id<Oidc.NotLoggedIn>({
+      ...common,
+      isUserLoggedIn: false,
+      login: async (params: { doesCurrentHrefRequiresAuth: boolean }) => {
+        return new Promise<never>(() => {});
+      },
+    });
+  }
+
+  return id<Oidc.LoggedIn>({
+    ...common,
+    isUserLoggedIn: true,
+    getTokens: () => ({
+      accessToken: "",
+      idToken: "",
+      refreshToken: "",
+      refreshTokenExpirationTime: Infinity,
+    }),
+    renewTokens: () => Promise.reject("Not implemented"),
+  });
+}

drama-queen/src/core/queenApi/createApiClient.ts → drama-queen/src/core/adapters/queenApi/default.ts

@@ -3,25 +3,25 @@ import {
   IdAndQuestionnaireIdSchema,
   SurveyUnitSchema,
   type SurveyUnitWithId,
-} from "core/model/surveyUnit";
+} from "core/ports/QueenApi/SurveyUnit";
 import axios from "axios";
 import memoize from "memoizee";
-import type { SurveyUnitData } from "core/model/surveyUnitData";
-import type { QueenApi } from "./QueenApi";
-import { type Campaign, CampaignSchema } from "core/model/campaing";
-import { type APIReturnedListOfSurvey } from "core/model/survey";
+import type { SurveyUnitData } from "core/ports/QueenApi/SurveyUnitData";
+import type { QueenApi } from "core/ports/QueenApi/QueenApi";
+import { type Campaign, CampaignSchema } from "core/ports/QueenApi/Campaing";
+import { type APIReturnedListOfSurvey } from "core/ports/QueenApi/Questionnaire";
 import {
   type Nomenclature,
   NomenclatureSchema,
   type RequiredNomenclatures,
   RequiredNomenclaturesSchema,
-} from "core/model/nomenclature";
-import type { Paradata } from "core/model/paradata";
+} from "core/ports/QueenApi/Nomenclature";
+import type { Paradata } from "core/ports/QueenApi/Paradata";
 
 export function createApiClient(params: {
   apiUrl: string;
-  getAccessToken: () => string | null;
-}) {
+  getAccessToken: () => string | undefined;
+}): QueenApi {
   const { apiUrl, getAccessToken } = params;
 
   const { axiosInstance } = (() => {
@@ -121,5 +121,5 @@ export function createApiClient(params: {
     ),
     postParadata: (paradata) =>
       axiosInstance.post<Paradata>(`/api/paradata`, paradata),
-  } satisfies QueenApi;
+  };
 }

drama-queen/src/core/queenApi/createMockApiClient.ts → drama-queen/src/core/adapters/queenApi/mock.ts

@@ -1,7 +1,7 @@
-import type { QueenApi } from "./QueenApi";
+import type { QueenApi } from "core/ports/QueenApi/QueenApi";
 import { surveySample } from "./mockData/surveySample";
 
-export function createMockApiClient() {
+export function createApiClient(): QueenApi {
   return {
     getSurveyUnitsIdsAndQuestionnaireIdsByCampaign: (_idCampaign) =>
       Promise.resolve([{ id: "id", questionnaireId: "questionnaireId" }]),
@@ -25,7 +25,7 @@ export function createMockApiClient() {
     getNomenclature: (idNomenclature) =>
       Promise.resolve([{ id: `${idNomenclature}`, label: "label" }]),
     postParadata: (paradata) => console.log("postParadata", paradata),
-  } satisfies QueenApi;
+  };
 }
 
 function createSUMocked(props: { idSu?: string; idCampaign?: string }) {

drama-queen/src/core/queenApi/mockData/surveySample.ts → drama-queen/src/core/adapters/queenApi/mockData/surveySample.ts

@@ -1,4 +1,4 @@
-import type { Questionnaire } from "core/model/survey";
+import type { Questionnaire } from "core/ports/QueenApi/Questionnaire";
 
 export const surveySample = {
   id: "lk9s32o5",

drama-queen/src/core/checkLunaticVersion/isQueenV2Survey.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Questionnaire } from "core/model/survey";
+import { Questionnaire } from "core/ports/QueenApi/Questionnaire";
 
 const lunaticModelVersionBreaking = "2.2.10";
 

drama-queen/src/core/indexedDb/tables/paradata.ts

@@ -1,4 +1,4 @@
-import type { Paradata } from "core/model/paradata";
+import type { Paradata } from "core/ports/QueenApi/Paradata";
 import type { Table } from "dexie";
 
 export type ParadataTable = {

drama-queen/src/core/indexedDb/tables/surveyUnit.ts

@@ -1,4 +1,4 @@
-import type { SurveyUnitWithId } from "core/model/surveyUnit";
+import type { SurveyUnitWithId } from "core/ports/QueenApi/SurveyUnit";
 import type { Table } from "dexie";
 
 export type SurveyUnitTable = {