@autenticar-me/vue 0.15.0 → 0.17.0

package/README.md

@@ -38,6 +38,100 @@ app.mount('#app')
 - **`useAuth()`** - Gerenciamento de autenticação
 - **`useTheme()`** - Controle de tema (light/dark)
 
+## Verificação Periódica de Autenticação
+
+O pacote inclui um sistema automático de verificação de autenticação que monitora o estado de login do usuário a cada 3 segundos. Se a sessão expirar ou o usuário for deslogado no servidor, o logout é executado automaticamente e um evento é emitido.
+
+### Como Funciona
+
+- Após o login, a verificação inicia automaticamente
+- A cada 3 segundos, faz uma requisição à rota de perfil do usuário
+- Se a requisição falhar (token inválido, sessão expirada, etc.):
+  - Executa logout automático
+  - Limpa os dados do usuário
+  - Remove tokens dos cookies
+  - Emite evento de logout
+
+### Capturando o Evento de Logout
+
+Use o método `onLogout()` do composable `useAtm()` para registrar callbacks que serão executados quando o logout ocorrer (manual ou automático):
+
+```vue
+<template>
+  <div>
+    <h1>Minha Aplicação</h1>
+    <UserProfile />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useAtm } from '@autenticar-me/vue'
+import { useRouter } from 'vue-router'
+
+const { onLogout } = useAtm()
+const router = useRouter()
+
+onMounted(() => {
+  const unsubscribe = onLogout(() => {
+    console.log('Usuário foi deslogado')
+    router.push('/login')
+  })
+
+  onUnmounted(() => {
+    unsubscribe()
+  })
+})
+</script>
+```
+
+### Exemplo com Notificação ao Usuário
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useAtm } from '@autenticar-me/vue'
+import { useRouter } from 'vue-router'
+
+const { onLogout } = useAtm()
+const router = useRouter()
+
+onMounted(() => {
+  const unsubscribe = onLogout(() => {
+    alert('Sua sessão expirou. Por favor, faça login novamente.')
+    router.push('/login')
+  })
+
+  onUnmounted(() => {
+    unsubscribe()
+  })
+})
+</script>
+```
+
+### Controle Manual do Polling
+
+Caso precise controlar manualmente quando o polling inicia ou para:
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useAuth } from '@autenticar-me/vue'
+
+const { startAuthPolling, stopAuthPolling } = useAuth()
+
+onMounted(() => {
+  startAuthPolling()
+})
+
+onUnmounted(() => {
+  stopAuthPolling()
+})
+</script>
+```
+
+**Nota:** Na maioria dos casos, não é necessário controlar manualmente o polling, pois ele inicia automaticamente após o login e para automaticamente no logout.
+
 ## Componentes
 
 ### Formulários de Autenticação

package/dist/composables/useAuth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["../../src/composables/useAuth.ts"],"names":[],"mappings":"AAMA,wBAAgB,OAAO;;uCAG6B,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC;;;kBAK7C,OAAO,CAAC,IAAI,CAAC;4BAkBT,IAAI;2BAkBL,IAAI;EAgBnC"}
+{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["../../src/composables/useAuth.ts"],"names":[],"mappings":"AAKA,wBAAgB,OAAO;;uCAG6B,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC;;;kBAM7C,OAAO,CAAC,IAAI,CAAC;4BAkBT,IAAI;2BAIL,IAAI;EAanC"}

package/dist/index.cjs

@@ -66,11 +66,39 @@ function useAtm() {
   return ctx;
 }
 let authPollingInterval = null;
+const startAuthPolling = (client, user, emitLogout) => {
+  if (authPollingInterval !== null) {
+    return;
+  }
+  authPollingInterval = window.setInterval(async () => {
+    const hasToken = document.cookie.includes("atm_access_token") || document.cookie.includes("atm_refresh_token");
+    if (!hasToken || user.value === null || user.value === void 0) {
+      stopAuthPolling();
+      emitLogout();
+      return;
+    }
+    try {
+      await fetchUser(client, user);
+    } catch (error) {
+      stopAuthPolling();
+      user.value = null;
+      writeAccessTokenInCookie(null);
+      emitLogout();
+    }
+  }, 3e3);
+};
+const stopAuthPolling = () => {
+  if (authPollingInterval !== null) {
+    clearInterval(authPollingInterval);
+    authPollingInterval = null;
+  }
+};
 function useAuth() {
-  const { client, user, isSignedIn, emitLogout } = useAtm();
+  const { client, user, emitLogout } = useAtm();
   const signInByAccessToken = async (accessToken) => {
     writeAccessTokenInCookie(accessToken);
     await fetchUser(client, user);
+    startAuthPolling(client, user, emitLogout);
   };
   const logout = async () => {
     stopAuthPolling();
@@ -83,26 +111,11 @@ function useAuth() {
     writeAccessTokenInCookie(null);
     emitLogout();
   };
-  const startAuthPolling = () => {
-    if (authPollingInterval !== null) {
-      return;
-    }
-    authPollingInterval = window.setInterval(async () => {
-      if (!isSignedIn.value) {
-        return;
-      }
-      try {
-        await fetchUser(client, user);
-      } catch (error) {
-        await logout();
-      }
-    }, 3e3);
+  const startAuthPolling$1 = () => {
+    startAuthPolling(client, user, emitLogout);
   };
-  const stopAuthPolling = () => {
-    if (authPollingInterval !== null) {
-      clearInterval(authPollingInterval);
-      authPollingInterval = null;
-    }
+  const stopAuthPolling$1 = () => {
+    stopAuthPolling();
   };
   return {
     user,
@@ -110,8 +123,8 @@ function useAuth() {
     getAccessToken,
     fetchUser,
     logout,
-    startAuthPolling,
-    stopAuthPolling
+    startAuthPolling: startAuthPolling$1,
+    stopAuthPolling: stopAuthPolling$1
   };
 }
 const _hoisted_1$8 = { class: "atm-overlay" };
@@ -2508,7 +2521,12 @@ const atmPlugin = {
     Promise.all([
       fetchUser(client, user),
       fetchConfigurations(client, configurations)
-    ]).then(() => isLoaded.value = true);
+    ]).then(() => {
+      isLoaded.value = true;
+      if (user.value !== null && user.value !== void 0) {
+        startAuthPolling(client, user, emitLogout);
+      }
+    });
     app.provide("atm", {
       client,
       user,