feat(auth): Adding logout

Author: Benoit Ngo

apps/back/config/packages/security.yaml

@@ -17,6 +17,8 @@ security:
             security: true
             lazy: true
             provider: app_user_provider
+            logout:
+                path: app_logout
             json_login:
                 check_path: api_login
     #         custom_authenticators:

apps/back/config/routes.yaml

@@ -1,3 +1,6 @@
 #index:
 #    path: /
 #    controller: App\Controller\DefaultController::index
+app_logout:
+  path: "%app.api.url.prefix%/auth/logout"
+  methods: POST

apps/front/src/app.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <NuxtErrorBoundary @error="mHandleError">
-      <NuxtLoadingIndicator color="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,18,71,1) 60%, rgba(0,236,174,1) 100%)"/>
+      <NuxtLoadingIndicator
+        color="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,18,71,1) 60%, rgba(0,236,174,1) 100%)"
+      />
       <NuxtLayout v-if="!isMePending || isAuthenticated">
         <NuxtPage />
       </NuxtLayout>

apps/front/src/components/layout/menu/AppMenu.vue

@@ -2,7 +2,11 @@
   <TieredMenu :model="items" class="h-screen sticky w-full"> </TieredMenu>
 </template>
 <script setup lang="ts">
+import useAuthUser from "~/store/auth";
+
 const { t } = useI18n();
+const authStore = useAuthUser();
+const { $appFetch } = useNuxtApp();
 const items = computed(() => [
   {
     label: t("components.layout.menu.appMenu.users"),
@@ -30,6 +34,10 @@ const items = computed(() => [
   {
     label: t("components.layout.menu.appMenu.quit"),
     icon: "pi pi-fw pi-power-off",
+    command: async () => {
+      await authStore.logoutUser($appFetch);
+      await navigateTo("/", { external: true });
+    },
   },
 ]);
 </script>

apps/front/src/store/auth.ts

@@ -14,6 +14,12 @@ const login = <T>(fetcher: AppFetch<T>, username: string, password: string) => {
   });
 };
 
+const logout = (fetcher: AppFetch<any>) => {
+  return fetcher("/auth/logout", {
+    method: POST,
+  }) as Promise<null>;
+};
+
 export const useAuthUser = defineStore("auth-store", () => {
   const me = ref();
   const { error, resetError, setError } = useBasicError();
@@ -37,6 +43,12 @@ export const useAuthUser = defineStore("auth-store", () => {
     isMePending.value = false;
   };
 
+  const resetAuth = () => (me.value = null);
+  const logoutUser = async (fetch: AppFetch<any>) => {
+    await logout(fetch);
+    resetAuth();
+  };
+
   return {
     me,
     meError: error,
@@ -46,9 +58,9 @@ export const useAuthUser = defineStore("auth-store", () => {
     isAuthenticated: computed(() => !!me.value),
 
     isAuthUser: (user: User) => me.value?.id === user.id,
-    resetAuth: () => (me.value = null),
+    resetAuth,
     refresh,
-
+    logoutUser,
     async authenticateUser(
       username: string,
       password: string,