@riligar/auth-react 1.15.0 → 1.16.0

package/dist/index.esm.js

@@ -3,9 +3,9 @@ import { useMemo, useEffect, createContext, useState, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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 } from '@mantine/core';
+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, IconUserCircle } from '@tabler/icons-react';
+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 - pode ser sobrescrita pelo AuthProvider
@@ -273,11 +273,11 @@ const getSession = async () => {
 const listSessions = async () => {
   return await api('/auth/list-sessions');
 };
-const revokeSession = async token => {
-  return await api('/auth/revoke-session', {
+const revokeSession = async id => {
+  return await api('/auth/revoke-session-by-id', {
     method: 'POST',
     body: JSON.stringify({
-      token
+      id
     })
   });
 };
@@ -339,7 +339,7 @@ const useAuthStore = create((set, get) => ({
   error: null,
   // Session management
   sessions: [],
-  currentSessionToken: null,
+  currentSession: null,
   // Loading states granulares
   loadingStates: {
     signIn: false,
@@ -397,9 +397,14 @@ const useAuthStore = create((set, get) => ({
         // Precisamos buscar a sessão no servidor.
         if (!user) {
           try {
-            const session = await getSession();
-            if (session?.user) {
-              user = session.user;
+            const sessionData = await getSession();
+            if (sessionData?.user) {
+              user = sessionData.user;
+            }
+            if (sessionData?.session) {
+              set({
+                currentSession: sessionData.session
+              });
             }
           } catch (sessionError) {
             console.warn('[AuthStore] Failed to fetch session:', sessionError);
@@ -472,8 +477,13 @@ const useAuthStore = create((set, get) => ({
 
       // Se não encontrou no token (sessão opaca), busca do servidor
       if (!user) {
-        const session = await getSession();
-        if (session?.user) user = session.user;
+        const sessionData = await getSession();
+        if (sessionData?.user) user = sessionData.user;
+        if (sessionData?.session) {
+          set({
+            currentSession: sessionData.session
+          });
+        }
       }
       set({
         user,
@@ -655,14 +665,14 @@ const useAuthStore = create((set, get) => ({
   /* Session */
   getSession: async () => {
     try {
-      const session = await getSession();
-      // Store current session token for comparison
-      if (session?.session?.token) {
+      const sessionData = await getSession();
+      // Store current session for comparison (includes id)
+      if (sessionData?.session) {
         set({
-          currentSessionToken: session.session.token
+          currentSession: sessionData.session
         });
       }
-      return session;
+      return sessionData;
     } catch (err) {
       set({
         error: err
@@ -914,8 +924,24 @@ function AuthProvider({
         checkTokenValidity();
       }
     };
+
+    // Escuta evento de sessão revogada (quando o usuário revoga sua própria sessão)
+    const handleSessionRevoked = () => {
+      // Limpa o usuário do store
+      useAuthStore.setState({
+        user: null,
+        currentSession: null,
+        sessions: []
+      });
+      // Dispara evento de logout para sincronizar entre abas
+      localStorage.setItem('auth:logout', Date.now());
+    };
     window.addEventListener('storage', handleStorageChange);
-    return () => window.removeEventListener('storage', handleStorageChange);
+    window.addEventListener('auth:session-revoked', handleSessionRevoked);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('auth:session-revoked', handleSessionRevoked);
+    };
   }, [checkTokenValidity]);
 
   // Verifica validade do token periodicamente
@@ -1003,6 +1029,19 @@ const useUser = () => useAuthStore(useShallow(s => ({
 // Alias deprecado para backwards compatibility
 const useProfile = useUser;
 
+// Sessions Management Hook
+const useSessions = () => useAuthStore(useShallow(s => ({
+  currentSession: s.currentSession,
+  sessions: s.sessions,
+  getSession: s.getSession,
+  listSessions: s.listSessions,
+  revokeSession: s.revokeSession,
+  revokeOtherSessions: s.revokeOtherSessions,
+  loadingListSessions: s.loadingStates.listSessions,
+  loadingRevokeSession: s.loadingStates.revokeSession,
+  error: s.error
+})));
+
 // Application Logo Hook
 const useApplicationLogo = () => {
   const applicationInfo = useAuthStore(s => s.applicationInfo);
@@ -2032,6 +2071,7 @@ function UserProfile({
   showName = true,
   showEmail = true,
   showPassword = true,
+  showSessions = true,
   // Customização
   labels = {},
   title = 'Account',
@@ -2059,6 +2099,111 @@ function UserProfile({
     loadingChangeEmail
   } = useProfile();
 
+  // Hook para sessions
+  const {
+    currentSession,
+    sessions,
+    listSessions,
+    getSession,
+    revokeSession,
+    revokeOtherSessions,
+    loadingListSessions,
+    loadingRevokeSession
+  } = useSessions();
+
+  // Load sessions when opened (modal) or component mounts (card), and when sessions section is opened
+  useEffect(() => {
+    if (showSessions && (variant === 'card' || opened)) {
+      // Fetch current session first to get the session ID, then list all sessions
+      getSession().catch(err => console.warn('Failed to get current session:', err));
+      listSessions().catch(err => console.warn('Failed to load sessions:', err));
+    }
+  }, [opened, showSessions, variant]);
+
+  // Helper to parse user agent string
+  const parseUserAgent = ua => {
+    if (!ua) return {
+      browser: 'Unknown Browser',
+      os: 'Unknown OS'
+    };
+    let browser = 'Unknown Browser';
+    let os = 'Unknown OS';
+
+    // Detect browser
+    if (ua.includes('Chrome') && !ua.includes('Edg')) browser = 'Chrome';else if (ua.includes('Firefox')) browser = 'Firefox';else if (ua.includes('Safari') && !ua.includes('Chrome')) browser = 'Safari';else if (ua.includes('Edg')) browser = 'Edge';else if (ua.includes('Opera') || ua.includes('OPR')) browser = 'Opera';
+
+    // Detect OS
+    if (ua.includes('Windows')) os = 'Windows';else if (ua.includes('Mac OS')) os = 'macOS';else if (ua.includes('Linux')) os = 'Linux';else if (ua.includes('Android')) os = 'Android';else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'iOS';
+    return {
+      browser,
+      os
+    };
+  };
+
+  // Session handlers
+  const handleRevokeSession = async sessionId => {
+    // Check if revoking current session
+    const isCurrentSession = sessionId === currentSession?.id || sessions.length === 1;
+
+    // If revoking current session, handle logout immediately after revocation
+    if (isCurrentSession) {
+      try {
+        await revokeSession(sessionId);
+      } catch (error) {
+        // Even if it fails, we're revoking our own session, so just logout
+        // The server already revoked our session
+      }
+      // Clear auth state and redirect
+      localStorage.removeItem('auth:token');
+      window.dispatchEvent(new CustomEvent('auth:session-revoked'));
+      if (variant === 'modal') onClose?.();
+      return;
+    }
+
+    // Revoking another session
+    try {
+      await revokeSession(sessionId);
+      notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.sessionRevoked || 'Sessão encerrada com sucesso',
+        color: 'green'
+      });
+    } catch (error) {
+      // Check for 401 error (our SDK uses error.res, axios uses error.response)
+      const status = error.res?.status || error.response?.status;
+      if (status === 401) {
+        // This means our session was revoked, not the target one - do logout
+        localStorage.removeItem('auth:token');
+        window.dispatchEvent(new CustomEvent('auth:session-revoked'));
+        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'
+      });
+    } catch (error) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.otherSessionsRevokeFailed || 'Falha ao encerrar sessões',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+
   // Password form
   const passwordForm = useForm({
     initialValues: {
@@ -2590,7 +2735,7 @@ function UserProfile({
           })]
         })]
       })]
-    }), showPassword && /*#__PURE__*/jsxs(Box, {
+    }), (showPassword || showSessions) && /*#__PURE__*/jsxs(Box, {
       mb: "md",
       children: [/*#__PURE__*/jsx(SectionHeader, {
         icon: IconShield,
@@ -2598,69 +2743,196 @@ function UserProfile({
         description: labels.securityDescription || 'Protect your account'
       }), /*#__PURE__*/jsxs(Stack, {
         gap: "sm",
-        children: [/*#__PURE__*/jsx(SettingRow, {
-          label: labels.password || 'Password',
-          action: labels.change || 'Change',
-          actionLabel: labels.changePassword || 'Change your password',
-          onClick: () => handleToggleSection('password'),
-          expanded: editingSection === 'password',
-          children: /*#__PURE__*/jsxs(Group, {
-            gap: "xs",
-            children: [/*#__PURE__*/jsx(IconKey, {
-              size: 16,
-              color: "var(--mantine-color-dimmed)"
-            }), /*#__PURE__*/jsx(Text, {
-              size: "sm",
-              c: "dimmed",
-              children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
-            })]
-          })
-        }), /*#__PURE__*/jsx(Collapse, {
-          in: editingSection === 'password',
-          children: /*#__PURE__*/jsx(Card, {
-            p: "md",
-            withBorder: true,
-            children: /*#__PURE__*/jsx("form", {
-              onSubmit: passwordForm.onSubmit(handleChangePassword),
-              children: /*#__PURE__*/jsxs(Stack, {
-                gap: "sm",
-                children: [/*#__PURE__*/jsx(PasswordInput, {
-                  label: labels.currentPassword || 'Senha Atual',
-                  placeholder: labels.currentPasswordPlaceholder || 'Digite sua senha atual',
-                  ...passwordForm.getInputProps('currentPassword')
-                }), /*#__PURE__*/jsx(PasswordInput, {
-                  label: labels.newPassword || 'Nova Senha',
-                  placeholder: labels.newPasswordPlaceholder || 'Digite a nova senha',
-                  description: labels.passwordDescription || 'Mínimo 8 caracteres',
-                  ...passwordForm.getInputProps('newPassword')
-                }), /*#__PURE__*/jsx(PasswordInput, {
-                  label: labels.confirmPassword || 'Confirmar Nova Senha',
-                  placeholder: labels.confirmPasswordPlaceholder || 'Confirme a nova senha',
-                  ...passwordForm.getInputProps('confirmPassword')
-                }), /*#__PURE__*/jsxs(Group, {
-                  justify: "flex-end",
-                  gap: "xs",
-                  children: [/*#__PURE__*/jsx(Button, {
-                    variant: "default",
-                    size: "xs",
-                    onClick: () => handleToggleSection('password'),
-                    leftSection: /*#__PURE__*/jsx(IconX, {
-                      size: 14
-                    }),
-                    children: labels.cancel || 'Cancelar'
-                  }), /*#__PURE__*/jsx(Button, {
-                    type: "submit",
-                    size: "xs",
-                    loading: loadingChangePassword,
-                    leftSection: /*#__PURE__*/jsx(IconCheck, {
-                      size: 14
-                    }),
-                    children: labels.save || 'Salvar'
+        children: [showPassword && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SettingRow, {
+            label: labels.password || 'Password',
+            action: labels.change || 'Change',
+            actionLabel: labels.changePassword || 'Change your password',
+            onClick: () => handleToggleSection('password'),
+            expanded: editingSection === 'password',
+            children: /*#__PURE__*/jsxs(Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsx(IconKey, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsx(Text, {
+                size: "sm",
+                c: "dimmed",
+                children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+              })]
+            })
+          }), /*#__PURE__*/jsx(Collapse, {
+            in: editingSection === 'password',
+            children: /*#__PURE__*/jsx(Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsx("form", {
+                onSubmit: passwordForm.onSubmit(handleChangePassword),
+                children: /*#__PURE__*/jsxs(Stack, {
+                  gap: "sm",
+                  children: [/*#__PURE__*/jsx(PasswordInput, {
+                    label: labels.currentPassword || 'Senha Atual',
+                    placeholder: labels.currentPasswordPlaceholder || 'Digite sua senha atual',
+                    ...passwordForm.getInputProps('currentPassword')
+                  }), /*#__PURE__*/jsx(PasswordInput, {
+                    label: labels.newPassword || 'Nova Senha',
+                    placeholder: labels.newPasswordPlaceholder || 'Digite a nova senha',
+                    description: labels.passwordDescription || 'Mínimo 8 caracteres',
+                    ...passwordForm.getInputProps('newPassword')
+                  }), /*#__PURE__*/jsx(PasswordInput, {
+                    label: labels.confirmPassword || 'Confirmar Nova Senha',
+                    placeholder: labels.confirmPasswordPlaceholder || 'Confirme a nova senha',
+                    ...passwordForm.getInputProps('confirmPassword')
+                  }), /*#__PURE__*/jsxs(Group, {
+                    justify: "flex-end",
+                    gap: "xs",
+                    children: [/*#__PURE__*/jsx(Button, {
+                      variant: "default",
+                      size: "xs",
+                      onClick: () => handleToggleSection('password'),
+                      leftSection: /*#__PURE__*/jsx(IconX, {
+                        size: 14
+                      }),
+                      children: labels.cancel || 'Cancelar'
+                    }), /*#__PURE__*/jsx(Button, {
+                      type: "submit",
+                      size: "xs",
+                      loading: loadingChangePassword,
+                      leftSection: /*#__PURE__*/jsx(IconCheck, {
+                        size: 14
+                      }),
+                      children: labels.save || 'Salvar'
+                    })]
                   })]
-                })]
+                })
               })
             })
-          })
+          })]
+        }), showSessions && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SettingRow, {
+            label: labels.sessions || 'Sessions',
+            action: editingSection === 'sessions' ? labels.close || 'Close' : labels.manage || 'Manage',
+            actionLabel: labels.manageSessions || 'Manage your active sessions',
+            onClick: () => handleToggleSection('sessions'),
+            expanded: editingSection === 'sessions',
+            children: /*#__PURE__*/jsxs(Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsx(IconDevices, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsx(Text, {
+                size: "sm",
+                c: "dimmed",
+                children: sessions.length > 0 ? `${sessions.length} active session${sessions.length > 1 ? 's' : ''}` : loadingListSessions ? 'Loading...' : 'No sessions'
+              })]
+            })
+          }), /*#__PURE__*/jsx(Collapse, {
+            in: editingSection === 'sessions',
+            children: /*#__PURE__*/jsx(Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsx(Stack, {
+                gap: "md",
+                children: loadingListSessions ? /*#__PURE__*/jsx(Text, {
+                  size: "sm",
+                  c: "dimmed",
+                  ta: "center",
+                  children: labels.loadingSessions || 'Carregando sessões...'
+                }) : sessions.length === 0 ? /*#__PURE__*/jsx(Text, {
+                  size: "sm",
+                  c: "dimmed",
+                  ta: "center",
+                  children: labels.noSessionsFound || 'Nenhuma sessão encontrada'
+                }) : /*#__PURE__*/jsxs(Fragment, {
+                  children: [sessions.map(sessionItem => {
+                    const isCurrentSession = sessionItem.id === currentSession?.id;
+                    const deviceInfo = parseUserAgent(sessionItem.userAgent);
+                    const createdDate = new Date(sessionItem.createdAt);
+                    return /*#__PURE__*/jsx(Card, {
+                      p: "sm",
+                      style: {
+                        borderColor: isCurrentSession ? 'var(--mantine-color-blue-5)' : undefined,
+                        backgroundColor: isCurrentSession ? 'var(--mantine-color-blue-light)' : undefined
+                      },
+                      children: /*#__PURE__*/jsxs(Group, {
+                        justify: "space-between",
+                        wrap: "nowrap",
+                        children: [/*#__PURE__*/jsxs(Group, {
+                          gap: "sm",
+                          wrap: "nowrap",
+                          style: {
+                            flex: 1
+                          },
+                          children: [/*#__PURE__*/jsx(ThemeIcon, {
+                            size: 36,
+                            variant: "light",
+                            color: isCurrentSession ? 'blue' : 'gray',
+                            children: /*#__PURE__*/jsx(IconDeviceMobile, {
+                              size: 18
+                            })
+                          }), /*#__PURE__*/jsxs(Box, {
+                            style: {
+                              flex: 1
+                            },
+                            children: [/*#__PURE__*/jsxs(Group, {
+                              gap: "xs",
+                              children: [/*#__PURE__*/jsx(Text, {
+                                size: "sm",
+                                fw: 500,
+                                children: deviceInfo.browser
+                              }), isCurrentSession && /*#__PURE__*/jsx(Badge, {
+                                size: "xs",
+                                variant: "filled",
+                                color: "blue",
+                                children: labels.thisDevice || 'Este dispositivo'
+                              })]
+                            }), /*#__PURE__*/jsxs(Text, {
+                              size: "xs",
+                              c: "dimmed",
+                              children: [deviceInfo.os, " \u2022 ", sessionItem.ipAddress || labels.unknownIP || 'IP desconhecido']
+                            }), /*#__PURE__*/jsxs(Text, {
+                              size: "xs",
+                              c: "dimmed",
+                              children: [labels.createdAt || 'Criada em', " ", createdDate.toLocaleDateString('pt-BR'), " ", labels.at || 'às', ' ', createdDate.toLocaleTimeString('pt-BR', {
+                                hour: '2-digit',
+                                minute: '2-digit'
+                              })]
+                            })]
+                          })]
+                        }), /*#__PURE__*/jsx(Tooltip, {
+                          label: isCurrentSession ? labels.signOutAndEnd || 'Encerrar e sair' : labels.endSession || 'Encerrar sessão',
+                          children: /*#__PURE__*/jsx(Button, {
+                            variant: "light",
+                            color: "red",
+                            size: "xs",
+                            onClick: () => handleRevokeSession(sessionItem.id),
+                            loading: loadingRevokeSession,
+                            leftSection: /*#__PURE__*/jsx(IconLogout, {
+                              size: 14
+                            }),
+                            children: labels.end || 'Encerrar'
+                          })
+                        })]
+                      })
+                    }, sessionItem.id);
+                  }), sessions.length > 1 && /*#__PURE__*/jsx(Group, {
+                    justify: "flex-end",
+                    children: /*#__PURE__*/jsx(Button, {
+                      variant: "light",
+                      color: "red",
+                      size: "xs",
+                      onClick: handleRevokeOtherSessions,
+                      loading: loadingRevokeSession,
+                      leftSection: /*#__PURE__*/jsx(IconLogout, {
+                        size: 14
+                      }),
+                      children: labels.endOtherSessions || 'Encerrar todas as outras sessões'
+                    })
+                  })]
+                })
+              })
+            })
+          })]
         })]
       })]
     })]
@@ -2844,5 +3116,5 @@ function SignOutButton({
   });
 }
 
-export { UserProfile as AccountModal, AuthCard, AuthLoaded, AuthLoading, AuthProvider, ForgotPassword, ForgotPassword as ForgotPasswordForm, MagicLink, MagicLinkCallback, MagicLink as MagicLinkForm, MagicLinkCallback as MagicLinkVerify, Protect, Protect as ProtectedRoute, ResetPassword, ResetPassword as ResetPasswordForm, SignIn, SignInButton, SignIn as SignInForm, SignOutButton, SignUp, SignUpButton, SignUp as SignUpForm, SignedIn, SignedOut, UserProfile, VerifyEmail, VerifyEmail as VerifyEmailCard, changeEmail, changePassword, configure, decodeJWT, forgotPassword, getApplicationInfo, getCurrentUser, getSession, isAuthenticated, listSessions, refreshToken, resendVerification, resetPassword, revokeOtherSessions, revokeSession, sendMagicLink, signIn, signOut, signUp, socialRedirect, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useUser as useProfile, useSession, useSignIn, useSignOut, useSignUp, useUser, verifyEmail, verifyMagicLink };
+export { UserProfile as AccountModal, AuthCard, AuthLoaded, AuthLoading, AuthProvider, ForgotPassword, ForgotPassword as ForgotPasswordForm, MagicLink, MagicLinkCallback, MagicLink as MagicLinkForm, MagicLinkCallback as MagicLinkVerify, Protect, Protect as ProtectedRoute, ResetPassword, ResetPassword as ResetPasswordForm, SignIn, SignInButton, SignIn as SignInForm, SignOutButton, SignUp, SignUpButton, SignUp as SignUpForm, SignedIn, SignedOut, UserProfile, VerifyEmail, VerifyEmail as VerifyEmailCard, changeEmail, changePassword, configure, decodeJWT, forgotPassword, getApplicationInfo, getCurrentUser, getSession, isAuthenticated, listSessions, refreshToken, resendVerification, resetPassword, revokeOtherSessions, revokeSession, sendMagicLink, signIn, signOut, signUp, socialRedirect, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useUser as useProfile, useSession, useSessions, useSignIn, useSignOut, useSignUp, useUser, verifyEmail, verifyMagicLink };
 //# sourceMappingURL=index.esm.js.map