@riligar/auth-react 1.3.0 → 1.5.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React$1, { useEffect, useMemo, createContext, useState } from 'react';
+import React$1, { useMemo, useEffect, createContext, useState, useRef } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { Paper, Stack, Image, Title, Text, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader } from '@mantine/core';
 import { useForm } from '@mantine/form';
@@ -58,10 +58,18 @@ async function api(route, opts = {}) {
 
   // Converte JSON automaticamente e lança erro legível
   const data = res.status !== 204 ? await res.json().catch(() => ({})) : null;
-  if (!res.ok) throw Object.assign(new Error(data?.error ?? res.statusText), {
-    res,
-    data
-  });
+  if (!res.ok) {
+    let errorMessage = data?.message || data?.error || data?.detail || res.statusText;
+
+    // Se a mensagem for um objeto, tenta extrair string ou stringify
+    if (typeof errorMessage === 'object') {
+      errorMessage = errorMessage.message || JSON.stringify(errorMessage);
+    }
+    throw Object.assign(new Error(errorMessage), {
+      res,
+      data
+    });
+  }
   return data;
 }
 
@@ -672,6 +680,68 @@ const useAuthStore = create((set, get) => ({
   })
 }));
 
+const isIterable = (obj) => Symbol.iterator in obj;
+const hasIterableEntries = (value) => (
+  // HACK: avoid checking entries type
+  "entries" in value
+);
+const compareEntries = (valueA, valueB) => {
+  const mapA = valueA instanceof Map ? valueA : new Map(valueA.entries());
+  const mapB = valueB instanceof Map ? valueB : new Map(valueB.entries());
+  if (mapA.size !== mapB.size) {
+    return false;
+  }
+  for (const [key, value] of mapA) {
+    if (!mapB.has(key) || !Object.is(value, mapB.get(key))) {
+      return false;
+    }
+  }
+  return true;
+};
+const compareIterables = (valueA, valueB) => {
+  const iteratorA = valueA[Symbol.iterator]();
+  const iteratorB = valueB[Symbol.iterator]();
+  let nextA = iteratorA.next();
+  let nextB = iteratorB.next();
+  while (!nextA.done && !nextB.done) {
+    if (!Object.is(nextA.value, nextB.value)) {
+      return false;
+    }
+    nextA = iteratorA.next();
+    nextB = iteratorB.next();
+  }
+  return !!nextA.done && !!nextB.done;
+};
+function shallow(valueA, valueB) {
+  if (Object.is(valueA, valueB)) {
+    return true;
+  }
+  if (typeof valueA !== "object" || valueA === null || typeof valueB !== "object" || valueB === null) {
+    return false;
+  }
+  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) {
+    return false;
+  }
+  if (isIterable(valueA) && isIterable(valueB)) {
+    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
+      return compareEntries(valueA, valueB);
+    }
+    return compareIterables(valueA, valueB);
+  }
+  return compareEntries(
+    { entries: () => Object.entries(valueA) },
+    { entries: () => Object.entries(valueB) }
+  );
+}
+
+function useShallow(selector) {
+  const prev = React$1.useRef(void 0);
+  return (state) => {
+    const next = selector(state);
+    return shallow(prev.current, next) ? prev.current : prev.current = next;
+  };
+}
+
 const AuthContext = /*#__PURE__*/createContext(); // só para ter o Provider em JSX
 
 function AuthProvider({
@@ -694,7 +764,9 @@ function AuthProvider({
   const checkTokenValidity = useAuthStore(s => s.checkTokenValidity);
 
   // Configura SDK com apiUrl e apiKey
-  useEffect(() => {
+  // Configura SDK com apiUrl e apiKey
+  // Usamos useMemo para garantir que a configuração ocorra ANTES dos efeitos dos componentes filhos
+  useMemo(() => {
     configure({
       apiUrl,
       apiKey
@@ -741,12 +813,12 @@ function AuthProvider({
 }
 
 /* Hooks "facade" que a app vai usar */
-const useAuth = () => useAuthStore(s => ({
+const useAuth = () => useAuthStore(useShallow(s => ({
   user: s.user,
   loading: s.loading,
   error: s.error,
   isAuthenticated: s.user !== null
-}));
+})));
 
 // Auth Actions
 const useSignIn = () => useAuthStore(s => s.signIn);
@@ -755,62 +827,37 @@ const useSignOut = () => useAuthStore(s => s.signOut);
 const useCheckToken = () => useAuthStore(s => s.checkTokenValidity);
 
 // Magic Link Hook
-const useMagicLink = () => {
-  const sendMagicLink = useAuthStore(s => s.sendMagicLink);
-  const verifyMagicLink = useAuthStore(s => s.verifyMagicLink);
-  const loading = useAuthStore(s => s.loadingStates.magicLink);
-  const verifying = useAuthStore(s => s.loadingStates.verifyMagicLink);
-  const error = useAuthStore(s => s.error);
-  return {
-    sendMagicLink,
-    verifyMagicLink,
-    loading,
-    verifying,
-    error
-  };
-};
+const useMagicLink = () => useAuthStore(useShallow(s => ({
+  sendMagicLink: s.sendMagicLink,
+  verifyMagicLink: s.verifyMagicLink,
+  loading: s.loadingStates.magicLink,
+  verifying: s.loadingStates.verifyMagicLink,
+  error: s.error
+})));
 
 // Password Reset Hook
-const usePasswordReset = () => {
-  const forgotPassword = useAuthStore(s => s.forgotPassword);
-  const resetPassword = useAuthStore(s => s.resetPassword);
-  const loading = useAuthStore(s => s.loadingStates.resetPassword);
-  const error = useAuthStore(s => s.error);
-  return {
-    forgotPassword,
-    resetPassword,
-    loading,
-    error
-  };
-};
+const usePasswordReset = () => useAuthStore(useShallow(s => ({
+  forgotPassword: s.forgotPassword,
+  resetPassword: s.resetPassword,
+  loading: s.loadingStates.resetPassword,
+  error: s.error
+})));
 
 // Email Verification Hook
-const useEmailVerification = () => {
-  const verifyEmail = useAuthStore(s => s.verifyEmail);
-  const resendVerification = useAuthStore(s => s.resendVerification);
-  const loading = useAuthStore(s => s.loadingStates.verifyEmail);
-  const resending = useAuthStore(s => s.loadingStates.resendVerification);
-  const error = useAuthStore(s => s.error);
-  return {
-    verifyEmail,
-    resendVerification,
-    loading,
-    resending,
-    error
-  };
-};
+const useEmailVerification = () => useAuthStore(useShallow(s => ({
+  verifyEmail: s.verifyEmail,
+  resendVerification: s.resendVerification,
+  loading: s.loadingStates.verifyEmail,
+  resending: s.loadingStates.resendVerification,
+  error: s.error
+})));
 
 // Session Hook
-const useSession = () => {
-  const getSession = useAuthStore(s => s.getSession);
-  const user = useAuthStore(s => s.user);
-  const setUser = useAuthStore(s => s.setUser);
-  return {
-    getSession,
-    user,
-    setUser
-  };
-};
+const useSession = () => useAuthStore(useShallow(s => ({
+  getSession: s.getSession,
+  user: s.user,
+  setUser: s.setUser
+})));
 
 // Loading States Hook
 const useAuthLoading = () => useAuthStore(s => s.loadingStates);
@@ -1237,6 +1284,7 @@ function MagicLinkVerify({
   const [status, setStatus] = useState('verifying'); // verifying, success, error
   const [errorMessage, setErrorMessage] = useState('');
   const verifyMagicLink = useAuthStore(s => s.verifyMagicLink);
+  const verifyingTokenRef = useRef(null);
   useEffect(() => {
     const verify = async () => {
       // Pega token da prop ou da URL
@@ -1251,6 +1299,10 @@ function MagicLinkVerify({
         onError?.(new Error('No token'));
         return;
       }
+
+      // Evita verificar o mesmo token duas vezes (React Strict Mode ou re-renders)
+      if (verifyingTokenRef.current === token) return;
+      verifyingTokenRef.current = token;
       try {
         const result = await verifyMagicLink(token);
         setStatus('success');
@@ -1267,7 +1319,8 @@ function MagicLinkVerify({
       }
     };
     verify();
-  }, [propToken, verifyMagicLink, onSuccess, onError, redirectTo, redirectDelay, labels]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propToken, redirectTo, redirectDelay]);
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
     logo: logo
   }, cardProps), status === 'verifying' && /*#__PURE__*/React.createElement(Stack, {
@@ -1522,9 +1575,13 @@ function VerifyEmailCard({
 }) {
   const [status, setStatus] = useState('verifying'); // verifying, success, error
   const [errorMessage, setErrorMessage] = useState('');
+  const [tokenEmail, setTokenEmail] = useState(null); // Novo estado para email do token
+
   const verifyEmail = useAuthStore(s => s.verifyEmail);
   const resendVerification = useAuthStore(s => s.resendVerification);
   const loadingResend = useAuthStore(s => s.loadingStates.resendVerification);
+  const user = useAuthStore(s => s.user);
+  const verifyingTokenRef = useRef(null);
   useEffect(() => {
     const verify = async () => {
       // Pega token da prop ou da URL
@@ -1534,11 +1591,25 @@ function VerifyEmailCard({
         token = urlParams.get('token');
       }
       if (!token) {
-        setStatus('error');
-        setErrorMessage(labels.noToken || 'Token não encontrado na URL');
-        onError?.(new Error('No token'));
+        // Se já mostramos o erro de token faltando, não precisa fazer nada
+        if (status === 'missing_token') return;
+        setStatus('missing_token');
         return;
       }
+
+      // Tenta extrair email do token (mesmo expirado) para permitir reenvio
+      try {
+        const payload = decodeJWT(token);
+        if (payload?.email) {
+          setTokenEmail(payload.email);
+        }
+      } catch (e) {
+        // ignore jwt error
+      }
+
+      // Evita verificar o mesmo token duas vezes (React Strict Mode ou re-renders)
+      if (verifyingTokenRef.current === token) return;
+      verifyingTokenRef.current = token;
       try {
         const result = await verifyEmail(token);
         setStatus('success');
@@ -1549,18 +1620,22 @@ function VerifyEmailCard({
           }, redirectDelay);
         }
       } catch (error) {
+        // Se der erro, permitimos tentar novamente apenas se o usuário recarregar
+        // ou se implementarmos um botão de retry que limpe o ref
         setStatus('error');
         setErrorMessage(error.message || labels.verificationFailed || 'Verificação falhou');
         onError?.(error);
       }
     };
     verify();
-  }, [propToken, verifyEmail, onSuccess, onError, redirectTo, redirectDelay, labels]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propToken, redirectTo, redirectDelay]);
   const handleResend = async () => {
-    if (!email) return;
+    const targetEmail = email || user?.email || tokenEmail;
+    if (!targetEmail) return;
     try {
-      await resendVerification(email);
-      onResent?.(email);
+      await resendVerification(targetEmail);
+      onResent?.(targetEmail);
     } catch (error) {
       onError?.(error);
     }
@@ -1578,7 +1653,19 @@ function VerifyEmailCard({
     size: "sm",
     c: "dimmed",
     ta: "center"
-  }, labels.pleaseWait || 'Aguarde enquanto verificamos seu email...')), status === 'success' && /*#__PURE__*/React.createElement(Stack, {
+  }, labels.pleaseWait || 'Aguarde enquanto verificamos seu email...')), status === 'missing_token' && /*#__PURE__*/React.createElement(Stack, {
+    align: "center",
+    gap: "sm"
+  }, /*#__PURE__*/React.createElement(IconMail, {
+    size: 48,
+    color: "var(--mantine-color-blue-6)"
+  }), /*#__PURE__*/React.createElement(Title, {
+    order: 4
+  }, labels.verification || 'Verificação de Email'), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    c: "dimmed",
+    ta: "center"
+  }, labels.missingToken || 'Para verificar seu conta, clique no link enviado para seu email.')), status === 'success' && /*#__PURE__*/React.createElement(Stack, {
     align: "center",
     gap: "sm"
   }, /*#__PURE__*/React.createElement(IconCheck, {
@@ -1602,7 +1689,7 @@ function VerifyEmailCard({
     size: "sm",
     c: "dimmed",
     ta: "center"
-  }, errorMessage || labels.invalidToken || 'O link é inválido ou expirou.'), email && /*#__PURE__*/React.createElement(Button, {
+  }, errorMessage || labels.invalidToken || 'O link é inválido ou expirou.'), (email || user?.email || tokenEmail) && errorMessage?.toLowerCase().includes('expired') && /*#__PURE__*/React.createElement(Button, {
     variant: "light",
     leftSection: /*#__PURE__*/React.createElement(IconRefresh, {
       size: 16
@@ -1610,8 +1697,8 @@ function VerifyEmailCard({
     onClick: handleResend,
     loading: loadingResend,
     fullWidth: true
-  }, labels.resend || 'Reenviar Email de Verificação')));
+  }, labels.resend || 'Solicitar novo link')));
 }
 
-export { AuthCard, AuthProvider, ForgotPasswordForm, MagicLinkForm, MagicLinkVerify, ProtectedRoute, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailCard, configure, forgotPassword, getCurrentUser, getSession, isAuthenticated, refreshToken, resendVerification, resetPassword, sendMagicLink, signIn, signOut, signUp, socialRedirect, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useSession, useSignIn, useSignOut, useSignUp, verifyEmail, verifyMagicLink };
+export { AuthCard, AuthProvider, ForgotPasswordForm, MagicLinkForm, MagicLinkVerify, ProtectedRoute, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailCard, configure, decodeJWT, forgotPassword, getCurrentUser, getSession, isAuthenticated, refreshToken, resendVerification, resetPassword, sendMagicLink, signIn, signOut, signUp, socialRedirect, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useSession, useSignIn, useSignOut, useSignUp, verifyEmail, verifyMagicLink };
 //# sourceMappingURL=index.esm.js.map