Add OIDC with Passage2

.env.development

@@ -0,0 +1,2 @@
+VUE_APP_OIDC_AUTHORITY=http://localhost:8080/realms/master/
+VUE_APP_OIDC_CLIENT_ID=basegun

.env.production

@@ -0,0 +1,2 @@
+VUE_APP_OIDC_AUTHORITY=https://auth.sso.interieur.rie.gouv.fr/.well-known/openid-configuration
+VUE_APP_OIDC_CLIENT_ID=basegun

docker-compose.yml

@@ -37,7 +37,6 @@ services:
       target: ${BUILD_TARGET:-dev}
     container_name: basegun-frontend
     ports:
-      - 8080:80 # if BUILD_TARGET = prod
       - 3000:5173
     volumes:
       - ./frontend/src:/app/src
@@ -49,3 +48,12 @@ services:
     ports:
       - 9000:9000
       - 9001:9001
+
+  keycloak:
+    image: quay.io/keycloak/keycloak:25.0.0
+    command: start-dev
+    environment:
+      - KEYCLOAK_ADMIN=admin
+      - KEYCLOAK_ADMIN_PASSWORD=password
+    ports:
+      - 8080:8080

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,14 @@ 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"];
     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"];
@@ -35,9 +23,9 @@ declare module "vue" {
     ResultPage: (typeof import("./components/ResultPage.vue"))["default"];
     RouterLink: (typeof import("vue-router"))["RouterLink"];
     RouterView: (typeof import("vue-router"))["RouterView"];
+    SigninRedirect: (typeof import("./components/authentication/SigninRedirect.vue"))["default"];
     SnackbarAlert: (typeof import("./components/SnackbarAlert.vue"))["default"];
     StepsGuide: (typeof import("./components/StepsGuide.vue"))["default"];
-    UploadButton: (typeof import("./components/UploadButton.vue"))["default"];
     VIcon: (typeof import("oh-vue-icons"))["OhVueIcon"];
   }
 }

frontend/src/components/authentication/AuthCallback.vue

@@ -0,0 +1,6 @@
+<script setup>
+import { mgr } from "@/utils/authentication";
+
+mgr.signinCallback();
+mgr.getUser().then((user) => console.log(user));
+</script>

frontend/src/components/authentication/AuthRedirect.vue

@@ -0,0 +1,5 @@
+<script setup>
+import { mgr } from "@/utils/authentication";
+
+mgr.signinRedirect();
+</script>

frontend/src/router/index.ts

@@ -44,6 +44,11 @@ const IdentificationBlankGun = () =>
 const ExpertSituation = () =>
   import("@/views/GuideContactExpert/ExpertSituation.vue");
 
+const AuthRedirect = () =>
+  import("@/components/authentication/AuthRedirect.vue");
+const AuthCallback = () =>
+  import("@/components/authentication/AuthCallback.vue");
+
 const routes: RouteRecordRaw[] = [
   {
     path: "/",
@@ -205,6 +210,21 @@ const routes: RouteRecordRaw[] = [
     name: "ExpertSituationGN",
     component: ExpertSituation,
   },
+  {
+    path: "/auth",
+    children: [
+      {
+        path: "redirect",
+        name: "AuthRedirect",
+        component: AuthRedirect,
+      },
+      {
+        path: "callback",
+        name: "AuthCallback",
+        component: AuthCallback,
+      },
+    ],
+  },
 ];
 
 const router = createRouter({

frontend/src/utils/authentication.ts

@@ -0,0 +1,15 @@
+import { UserManager } from "oidc-client-ts";
+
+const FRONTEND_URL = window.location.origin;
+
+export const mgr = new UserManager({
+  authority: process.env.VUE_APP_OIDC_AUTHORITY,
+  client_id: process.env.VUE_APP_OIDC_CLIENT_ID,
+  redirect_uri: `${FRONTEND_URL}/auth/callback`,
+  silent_redirect_uri: `${FRONTEND_URL}/auth/callback`,
+  post_logout_redirect_uri: `${FRONTEND_URL}`,
+  response_type: "code",
+});
+mgr.events.addAccessTokenExpiring(function () {
+  console.log("token expiring...");
+});