@riligar/auth-react 1.22.0 → 1.24.0

package/dist/index.esm.js

@@ -6,7 +6,6 @@ import { Navigate, Outlet, useNavigate } from 'react-router-dom';
 import { Modal, Stack, Text, Image, Title, Paper, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader, Box, Avatar, Collapse, Card, Tooltip, ThemeIcon, Badge } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconMail, IconLock, IconArrowRight, IconBrandGoogle, IconBrandGithub, IconUser, IconSend, IconCheck, IconX, IconRefresh, IconPhoto, IconTrash, IconPencil, IconShield, IconKey, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle } from '@tabler/icons-react';
-import { notifications } from '@mantine/notifications';
 
 // Config - API Base URL fixa para o serviço de autenticação
 let API_BASE = 'https://manager.myauth.click';
@@ -750,32 +749,39 @@ const useAuthStore = create((set, get) => ({
         if (isAuthenticated()) {
           const token = window.localStorage.getItem('auth:token');
           if (token) {
-            // Decodifica o token para verificar tempo de expiração
-            const base64Url = token.split('.')[1];
-            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
-            const jsonPayload = window.atob(base64);
-            const payload = JSON.parse(jsonPayload);
+            // Usa o decoder oficial do SDK que é mais seguro
+            const payload = decodeJWT(token);
+
+            // Se não for um JWT ou não tiver expiração, não fazemos refresh em background
+            // O backend cuidará da expiração da sessão opaca via 401 nas requisições normais
+            if (!payload || !payload.exp) return;
             const now = Date.now() / 1000;
             const timeUntilExpiry = payload.exp - now;
 
-            // Se o token expira em menos de 5 minutos, faz refresh
+            // Se o token expira em menos de 5 minutos, tenta o refresh
             if (timeUntilExpiry < 300) {
-              // 5 minutos
-              await refreshToken();
-              const user = getCurrentUser();
-              set({
-                user
-              });
+              try {
+                await refreshToken();
+                const user = getCurrentUser();
+                set({
+                  user
+                });
+              } catch (refreshErr) {
+                console.warn('[AuthStore] Falha ao renovar token:', refreshErr);
+                // Só desloga se for um erro de autenticação explícito (401)
+                if (refreshErr.res?.status === 401) {
+                  set({
+                    user: null
+                  });
+                  window.localStorage.removeItem('auth:token');
+                }
+              }
             }
           }
         }
       } catch (error) {
-        console.error('Erro no refresh automático:', error);
-        // Em caso de erro, faz logout
-        set({
-          user: null
-        });
-        window.localStorage.removeItem('auth:token');
+        // Erros de processamento interno não devem deslogar o usuário
+        console.error('[AuthStore] Erro no ciclo de refresh automático:', error);
       }
     }, 4 * 60 * 1000); // Verifica a cada 4 minutos
 
@@ -2066,6 +2072,8 @@ function UserProfile({
   onProfileUpdate,
   onPasswordChange,
   onEmailChange,
+  onSessionRevoked,
+  onOtherSessionsRevoked,
   onError,
   // Features toggle
   showAvatar = true,
@@ -2152,7 +2160,9 @@ function UserProfile({
     if (isCurrentSession) {
       try {
         await revokeSession(sessionId);
+        onSessionRevoked?.(sessionId);
       } catch (error) {
+        onError?.(error);
         // Even if it fails, we're revoking our own session, so just logout
         // The server already revoked our session
       }
@@ -2166,11 +2176,7 @@ function UserProfile({
     // Revoking another session
     try {
       await revokeSession(sessionId);
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.sessionRevoked || 'Sessão encerrada com sucesso',
-        color: 'green'
-      });
+      onSessionRevoked?.(sessionId);
     } catch (error) {
       // Check for 401 error (our SDK uses error.res, axios uses error.response)
       const status = error.res?.status || error.response?.status;
@@ -2181,28 +2187,14 @@ function UserProfile({
         if (variant === 'modal') onClose?.();
         return;
       }
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.sessionRevokeFailed || 'Falha ao encerrar sessão',
-        color: 'red'
-      });
       onError?.(error);
     }
   };
   const handleRevokeOtherSessions = async () => {
     try {
       await revokeOtherSessions();
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.otherSessionsRevoked || 'Todas as outras sessões foram encerradas',
-        color: 'green'
-      });
+      onOtherSessionsRevoked?.();
     } catch (error) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.otherSessionsRevokeFailed || 'Falha ao encerrar sessões',
-        color: 'red'
-      });
       onError?.(error);
     }
   };
@@ -2263,21 +2255,13 @@ function UserProfile({
 
     // Validate file type
     if (!file.type.startsWith('image/')) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: labels.avatarInvalidType || 'Por favor, selecione uma imagem válida',
-        color: 'red'
-      });
+      onError?.(new Error(labels.avatarInvalidType || 'Por favor, selecione uma imagem válida'));
       return;
     }
 
     // Validate file size
     if (file.size > maxAvatarSize) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: labels.avatarTooLarge || `Imagem muito grande. Máximo ${Math.round(maxAvatarSize / 1024)}KB.`,
-        color: 'red'
-      });
+      onError?.(new Error(labels.avatarTooLarge || `Imagem muito grande. Máximo ${Math.round(maxAvatarSize / 1024)}KB.`));
       return;
     }
     setAvatarFile(file);
@@ -2316,40 +2300,20 @@ function UserProfile({
   const handleChangePassword = async values => {
     try {
       await changePassword(values.currentPassword, values.newPassword);
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.passwordChanged || 'Senha alterada com sucesso',
-        color: 'green'
-      });
       passwordForm.reset();
       setEditingSection(null);
       onPasswordChange?.();
     } catch (error) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.passwordChangeFailed || 'Falha ao alterar senha',
-        color: 'red'
-      });
       onError?.(error);
     }
   };
   const handleChangeEmail = async values => {
     try {
       await changeEmail(values.newEmail);
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.emailVerificationSent || 'Verifique seu novo email para confirmar a alteração',
-        color: 'green'
-      });
       emailForm.reset();
       setEditingSection(null);
       onEmailChange?.(values.newEmail);
     } catch (error) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.emailChangeFailed || 'Falha ao alterar email',
-        color: 'red'
-      });
       onError?.(error);
     }
   };
@@ -2358,43 +2322,29 @@ function UserProfile({
       await updateProfile({
         name: values.name
       });
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.nameUpdated || 'Nome atualizado com sucesso',
-        color: 'green'
-      });
       nameForm.reset();
       setEditingSection(null);
       onProfileUpdate?.({
         name: values.name
       });
     } catch (error) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.nameUpdateFailed || 'Falha ao atualizar nome',
-        color: 'red'
-      });
       onError?.(error);
     }
   };
   const handleChangeAvatar = async () => {
     if (!avatarPreview) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: labels.avatarRequired || 'Selecione uma imagem',
-        color: 'red'
-      });
+      // Optionally handle this validation error via callback or just return?
+      // Since it's a validation error before async call, we might want to expose it too?
+      // The original code used notifications. Let's send to onError for consistency or just return if it's UI state.
+      // Actually, for validation within the component, maybe we can just let it be silent or use form error if applicable?
+      // But this is outside form context. Let's use onError with a custom error object.
+      onError?.(new Error(labels.avatarRequired || 'Selecione uma imagem'));
       return;
     }
     try {
       await updateProfile({
         image: avatarPreview
       });
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.avatarUpdated || 'Foto de perfil atualizada com sucesso',
-        color: 'green'
-      });
       setAvatarPreview(null);
       setAvatarFile(null);
       setEditingSection(null);
@@ -2402,11 +2352,6 @@ function UserProfile({
         image: avatarPreview
       });
     } catch (error) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.avatarUpdateFailed || 'Falha ao atualizar foto',
-        color: 'red'
-      });
       onError?.(error);
     }
   };
@@ -2415,11 +2360,6 @@ function UserProfile({
       await updateProfile({
         image: ''
       });
-      notifications.show({
-        title: labels.successTitle || 'Sucesso',
-        message: labels.avatarRemoved || 'Foto de perfil removida',
-        color: 'green'
-      });
       setAvatarPreview(null);
       setAvatarFile(null);
       setEditingSection(null);
@@ -2427,11 +2367,6 @@ function UserProfile({
         image: ''
       });
     } catch (error) {
-      notifications.show({
-        title: labels.errorTitle || 'Erro',
-        message: error.message || labels.avatarRemoveFailed || 'Falha ao remover foto',
-        color: 'red'
-      });
       onError?.(error);
     }
   };