Add OIDC with Passage2

backend/requirements.txt

@@ -9,6 +9,7 @@ pyyaml>=5.4.1
 user-agents==2.2.0
 boto3==1.28.39
 autodynatrace==2.0.0
+PyJWT==2.8.0
 # ML
 https://github.com/dnum-mi/basegun-ml/raw/MLPackages/MLpackages/basegun_ml/dist/basegunml-0.1.tar.gz
 # Dev

docker-compose.yml

@@ -37,15 +37,25 @@ services:
       target: ${BUILD_TARGET:-dev}
     container_name: basegun-frontend
     ports:
-      - 8080:80 # if BUILD_TARGET = prod
       - 3000:5173
     volumes:
       - ./frontend/src:/app/src
       - /app/node_modules
 
+  # Mock Cloud Pi S3
   minio:
     image: minio/minio
     command: server /data --console-address ":9001"
     ports:
       - 9000:9000
       - 9001:9001
+
+  # Mock Passage2 OIDC
+  keycloak:
+    image: quay.io/keycloak/keycloak:25.0.0
+    command: start-dev
+    environment:
+      - KEYCLOAK_ADMIN=admin
+      - KEYCLOAK_ADMIN_PASSWORD=password
+    ports:
+      - 8080:8080

frontend/.env.development

@@ -1 +1,2 @@
-VITE_API_HOST=http://localhost:5000
+VITE_OIDC_AUTHORITY=http://localhost:8080/realms/master/
+VITE_OIDC_CLIENT_ID=basegun

frontend/.env.production

@@ -0,0 +1,2 @@
+VITE_OIDC_AUTHORITY=https://auth.sso.interieur.rie.gouv.fr/.well-known/openid-configuration
+VITE_OIDC_CLIENT_ID=BaseGun-Production-69i

frontend/.eslintrc-auto-import.json

@@ -296,6 +296,7 @@
     "provideLocal": true,
     "useClipboardItems": true,
     "useScheme": true,
-    "useTabs": true
+    "useTabs": true,
+    "useStore": true
   }
 }

frontend/package.json

@@ -19,6 +19,7 @@
     "@gouvminint/vue-dsfr": "^5.8.0",
     "axios": "^1.6.7",
     "luxon": "^3.4.4",
+    "oidc-client-ts": "^3.0.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "swiper": "^11.0.6",

frontend/src/components.d.ts

@@ -7,26 +7,18 @@ export {}
 
 declare module "vue" {
   export interface GlobalComponents {
-    AccessibilityPage: (typeof import("./components/AccessibilityPage.vue"))["default"];
     AskingExpert: (typeof import("./components/AskingExpert.vue"))["default"];
+    AuthCallback: (typeof import("./components/authentication/AuthCallback.vue"))["default"];
+    AuthRedirect: (typeof import("./components/authentication/AuthRedirect.vue"))["default"];
     ContactExpert: (typeof import("./components/ContactExpert.vue"))["default"];
-    DsfrAccordion: (typeof import("@gouvminint/vue-dsfr"))["DsfrAccordion"];
-    DsfrAccordionsGroup: (typeof import("@gouvminint/vue-dsfr"))["DsfrAccordionsGroup"];
+    copy: (typeof import("./components/authentification/AuthRedirect copy.vue"))["default"];
     DsfrAlert: (typeof import("@gouvminint/vue-dsfr"))["DsfrAlert"];
     DsfrButton: (typeof import("@gouvminint/vue-dsfr"))["DsfrButton"];
-    DsfrCheckbox: (typeof import("@gouvminint/vue-dsfr"))["DsfrCheckbox"];
-    DsfrFileUpload: (typeof import("@gouvminint/vue-dsfr"))["DsfrFileUpload"];
     DsfrHeader: (typeof import("@gouvminint/vue-dsfr"))["DsfrHeader"];
     DsfrInput: (typeof import("@gouvminint/vue-dsfr"))["DsfrInput"];
-    DsfrInputGroup: (typeof import("@gouvminint/vue-dsfr"))["DsfrInputGroup"];
     DsfrModal: (typeof import("@gouvminint/vue-dsfr"))["DsfrModal"];
     DsfrPicture: (typeof import("@gouvminint/vue-dsfr"))["DsfrPicture"];
     DsfrRadioButton: (typeof import("@gouvminint/vue-dsfr"))["DsfrRadioButton"];
-    DsfrRadioButtonSet: (typeof import("@gouvminint/vue-dsfr"))["DsfrRadioButtonSet"];
-    DsfrSelect: (typeof import("@gouvminint/vue-dsfr"))["DsfrSelect"];
-    DsfrTable: (typeof import("@gouvminint/vue-dsfr"))["DsfrTable"];
-    DsfrTag: (typeof import("@gouvminint/vue-dsfr"))["DsfrTag"];
-    FooterMES: (typeof import("./components/FooterMES.vue"))["default"];
     HeaderMain: (typeof import("./components/HeaderMain.vue"))["default"];
     MissingCardAlert: (typeof import("./components/MissingCardAlert.vue"))["default"];
     OnboardingSwiper: (typeof import("./components/OnboardingSwiper.vue"))["default"];
@@ -37,7 +29,7 @@ declare module "vue" {
     RouterView: (typeof import("vue-router"))["RouterView"];
     SnackbarAlert: (typeof import("./components/SnackbarAlert.vue"))["default"];
     StepsGuide: (typeof import("./components/StepsGuide.vue"))["default"];
-    UploadButton: (typeof import("./components/UploadButton.vue"))["default"];
+    User: (typeof import("./components/authentication/User.vue"))["default"];
     VIcon: (typeof import("oh-vue-icons"))["OhVueIcon"];
   }
 }

frontend/src/components/authentication/User.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from "vue";
+import { mgr } from "@/utils/authentication";
+
+const user = ref(null);
+
+mgr.getUser().then((data) => (user.value = data));
+</script>
+<template>
+  <pre>{{ user }}</pre>
+</template>

frontend/src/router/index.ts

@@ -6,6 +6,7 @@ import {
 } from "vue-router";
 
 import { clearLocalStorage } from "@/utils/storage-utils.js";
+import { mgr } from "@/utils/authentication";
 
 import MissingCardPage from "@/views/MissingCardPage.vue";
 
@@ -44,6 +45,8 @@ const IdentificationBlankGun = () =>
 const ExpertSituation = () =>
   import("@/views/GuideContactExpert/ExpertSituation.vue");
 
+const User = () => import("@/components/authentication/User.vue");
+
 const routes: RouteRecordRaw[] = [
   {
     path: "/",
@@ -205,6 +208,31 @@ const routes: RouteRecordRaw[] = [
     name: "ExpertSituationGN",
     component: ExpertSituation,
   },
+  {
+    path: "/auth",
+    children: [
+      {
+        path: "redirect",
+        name: "AuthRedirect",
+        beforeEnter: (to, from) => {
+          mgr.signinRedirect();
+        },
+      },
+      {
+        path: "callback",
+        name: "AuthCallback",
+        beforeEnter: (to, from) => {
+          mgr.signinCallback();
+          return { name: "User" };
+        },
+      },
+      {
+        path: "user",
+        name: "User",
+        component: User,
+      },
+    ],
+  },
 ];
 
 const router = createRouter({

frontend/src/utils/authentication.ts

@@ -0,0 +1,12 @@
+import { UserManager } from "oidc-client-ts";
+
+const FRONTEND_URL = window.location.origin;
+
+export const mgr = new UserManager({
+  authority: import.meta.env.VITE_OIDC_AUTHORITY,
+  client_id: import.meta.env.VITE_OIDC_CLIENT_ID,
+  redirect_uri: `${FRONTEND_URL}/auth/callback`,
+  silent_redirect_uri: `${FRONTEND_URL}`,
+  post_logout_redirect_uri: `${FRONTEND_URL}`,
+  response_type: "code",
+});