@riligar/auth-react 1.15.0 → 1.16.0

package/dist/index.js

@@ -276,11 +276,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
     })
   });
 };
@@ -342,7 +342,7 @@ const useAuthStore = zustand.create((set, get) => ({
   error: null,
   // Session management
   sessions: [],
-  currentSessionToken: null,
+  currentSession: null,
   // Loading states granulares
   loadingStates: {
     signIn: false,
@@ -400,9 +400,14 @@ const useAuthStore = zustand.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);
@@ -475,8 +480,13 @@ const useAuthStore = zustand.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,
@@ -658,14 +668,14 @@ const useAuthStore = zustand.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
@@ -917,8 +927,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
@@ -1006,6 +1032,19 @@ const useUser = () => useAuthStore(shallow.useShallow(s => ({
 // Alias deprecado para backwards compatibility
 const useProfile = useUser;
 
+// Sessions Management Hook
+const useSessions = () => useAuthStore(shallow.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);
@@ -2035,6 +2074,7 @@ function UserProfile({
   showName = true,
   showEmail = true,
   showPassword = true,
+  showSessions = true,
   // Customização
   labels = {},
   title = 'Account',
@@ -2062,6 +2102,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
+  react.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.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.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.notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.otherSessionsRevoked || 'Todas as outras sessões foram encerradas',
+        color: 'green'
+      });
+    } catch (error) {
+      notifications.notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.otherSessionsRevokeFailed || 'Falha ao encerrar sessões',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+
   // Password form
   const passwordForm = form.useForm({
     initialValues: {
@@ -2593,7 +2738,7 @@ function UserProfile({
           })]
         })]
       })]
-    }), showPassword && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+    }), (showPassword || showSessions) && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
       mb: "md",
       children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
         icon: iconsReact.IconShield,
@@ -2601,69 +2746,196 @@ function UserProfile({
         description: labels.securityDescription || 'Protect your account'
       }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
         gap: "sm",
-        children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
-          label: labels.password || 'Password',
-          action: labels.change || 'Change',
-          actionLabel: labels.changePassword || 'Change your password',
-          onClick: () => handleToggleSection('password'),
-          expanded: editingSection === 'password',
-          children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-            gap: "xs",
-            children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconKey, {
-              size: 16,
-              color: "var(--mantine-color-dimmed)"
-            }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-              size: "sm",
-              c: "dimmed",
-              children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
-          in: editingSection === 'password',
-          children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
-            p: "md",
-            withBorder: true,
-            children: /*#__PURE__*/jsxRuntime.jsx("form", {
-              onSubmit: passwordForm.onSubmit(handleChangePassword),
-              children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-                gap: "sm",
-                children: [/*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
-                  label: labels.currentPassword || 'Senha Atual',
-                  placeholder: labels.currentPasswordPlaceholder || 'Digite sua senha atual',
-                  ...passwordForm.getInputProps('currentPassword')
-                }), /*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
-                  label: labels.newPassword || 'Nova Senha',
-                  placeholder: labels.newPasswordPlaceholder || 'Digite a nova senha',
-                  description: labels.passwordDescription || 'Mínimo 8 caracteres',
-                  ...passwordForm.getInputProps('newPassword')
-                }), /*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
-                  label: labels.confirmPassword || 'Confirmar Nova Senha',
-                  placeholder: labels.confirmPasswordPlaceholder || 'Confirme a nova senha',
-                  ...passwordForm.getInputProps('confirmPassword')
-                }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-                  justify: "flex-end",
-                  gap: "xs",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                    variant: "default",
-                    size: "xs",
-                    onClick: () => handleToggleSection('password'),
-                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
-                      size: 14
-                    }),
-                    children: labels.cancel || 'Cancelar'
-                  }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                    type: "submit",
-                    size: "xs",
-                    loading: loadingChangePassword,
-                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
-                      size: 14
-                    }),
-                    children: labels.save || 'Salvar'
+        children: [showPassword && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
+            label: labels.password || 'Password',
+            action: labels.change || 'Change',
+            actionLabel: labels.changePassword || 'Change your password',
+            onClick: () => handleToggleSection('password'),
+            expanded: editingSection === 'password',
+            children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconKey, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                c: "dimmed",
+                children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
+            in: editingSection === 'password',
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsxRuntime.jsx("form", {
+                onSubmit: passwordForm.onSubmit(handleChangePassword),
+                children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                  gap: "sm",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
+                    label: labels.currentPassword || 'Senha Atual',
+                    placeholder: labels.currentPasswordPlaceholder || 'Digite sua senha atual',
+                    ...passwordForm.getInputProps('currentPassword')
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
+                    label: labels.newPassword || 'Nova Senha',
+                    placeholder: labels.newPasswordPlaceholder || 'Digite a nova senha',
+                    description: labels.passwordDescription || 'Mínimo 8 caracteres',
+                    ...passwordForm.getInputProps('newPassword')
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
+                    label: labels.confirmPassword || 'Confirmar Nova Senha',
+                    placeholder: labels.confirmPasswordPlaceholder || 'Confirme a nova senha',
+                    ...passwordForm.getInputProps('confirmPassword')
+                  }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                    justify: "flex-end",
+                    gap: "xs",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      variant: "default",
+                      size: "xs",
+                      onClick: () => handleToggleSection('password'),
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
+                        size: 14
+                      }),
+                      children: labels.cancel || 'Cancelar'
+                    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      type: "submit",
+                      size: "xs",
+                      loading: loadingChangePassword,
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+                        size: 14
+                      }),
+                      children: labels.save || 'Salvar'
+                    })]
                   })]
-                })]
+                })
               })
             })
-          })
+          })]
+        }), showSessions && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(core.Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconDevices, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                c: "dimmed",
+                children: sessions.length > 0 ? `${sessions.length} active session${sessions.length > 1 ? 's' : ''}` : loadingListSessions ? 'Loading...' : 'No sessions'
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
+            in: editingSection === 'sessions',
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+                gap: "md",
+                children: loadingListSessions ? /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  size: "sm",
+                  c: "dimmed",
+                  ta: "center",
+                  children: labels.loadingSessions || 'Carregando sessões...'
+                }) : sessions.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  size: "sm",
+                  c: "dimmed",
+                  ta: "center",
+                  children: labels.noSessionsFound || 'Nenhuma sessão encontrada'
+                }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                  children: [sessions.map(sessionItem => {
+                    const isCurrentSession = sessionItem.id === currentSession?.id;
+                    const deviceInfo = parseUserAgent(sessionItem.userAgent);
+                    const createdDate = new Date(sessionItem.createdAt);
+                    return /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+                      p: "sm",
+                      style: {
+                        borderColor: isCurrentSession ? 'var(--mantine-color-blue-5)' : undefined,
+                        backgroundColor: isCurrentSession ? 'var(--mantine-color-blue-light)' : undefined
+                      },
+                      children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                        justify: "space-between",
+                        wrap: "nowrap",
+                        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                          gap: "sm",
+                          wrap: "nowrap",
+                          style: {
+                            flex: 1
+                          },
+                          children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+                            size: 36,
+                            variant: "light",
+                            color: isCurrentSession ? 'blue' : 'gray',
+                            children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconDeviceMobile, {
+                              size: 18
+                            })
+                          }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+                            style: {
+                              flex: 1
+                            },
+                            children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                              gap: "xs",
+                              children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                                size: "sm",
+                                fw: 500,
+                                children: deviceInfo.browser
+                              }), isCurrentSession && /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
+                                size: "xs",
+                                variant: "filled",
+                                color: "blue",
+                                children: labels.thisDevice || 'Este dispositivo'
+                              })]
+                            }), /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+                              size: "xs",
+                              c: "dimmed",
+                              children: [deviceInfo.os, " \u2022 ", sessionItem.ipAddress || labels.unknownIP || 'IP desconhecido']
+                            }), /*#__PURE__*/jsxRuntime.jsxs(core.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__*/jsxRuntime.jsx(core.Tooltip, {
+                          label: isCurrentSession ? labels.signOutAndEnd || 'Encerrar e sair' : labels.endSession || 'Encerrar sessão',
+                          children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                            variant: "light",
+                            color: "red",
+                            size: "xs",
+                            onClick: () => handleRevokeSession(sessionItem.id),
+                            loading: loadingRevokeSession,
+                            leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconLogout, {
+                              size: 14
+                            }),
+                            children: labels.end || 'Encerrar'
+                          })
+                        })]
+                      })
+                    }, sessionItem.id);
+                  }), sessions.length > 1 && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+                    justify: "flex-end",
+                    children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      variant: "light",
+                      color: "red",
+                      size: "xs",
+                      onClick: handleRevokeOtherSessions,
+                      loading: loadingRevokeSession,
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconLogout, {
+                        size: 14
+                      }),
+                      children: labels.endOtherSessions || 'Encerrar todas as outras sessões'
+                    })
+                  })]
+                })
+              })
+            })
+          })]
         })]
       })]
     })]
@@ -2905,6 +3177,7 @@ exports.useMagicLink = useMagicLink;
 exports.usePasswordReset = usePasswordReset;
 exports.useProfile = useUser;
 exports.useSession = useSession;
+exports.useSessions = useSessions;
 exports.useSignIn = useSignIn;
 exports.useSignOut = useSignOut;
 exports.useSignUp = useSignUp;