@riligar/auth-react 1.4.0 → 1.6.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;
 }
 
@@ -263,6 +271,17 @@ const getSession = async () => {
   return await api('/auth/session');
 };
 
+/*--- Application Info ----------------------------*/
+const getApplicationInfo = async () => {
+  try {
+    const data = await api('/application/by-api-key');
+    return data?.data || null;
+  } catch (error) {
+    console.warn('[AuthSDK] Failed to fetch application info:', error.message);
+    return null;
+  }
+};
+
 /* Social login redirect (ex.: Google) -----------*/
 function socialRedirect(provider, redirectTo = typeof window !== 'undefined' ? window.location.href : '/') {
   if (typeof window === 'undefined') return;
@@ -326,6 +345,8 @@ const useAuthStore = create((set, get) => ({
     verifyEmail: false,
     resendVerification: false
   },
+  // Application info (logo, nome, etc)
+  applicationInfo: null,
   // Helper para atualizar loading states
   setLoading: (key, value) => set(state => ({
     loadingStates: {
@@ -333,9 +354,29 @@ const useAuthStore = create((set, get) => ({
       [key]: value
     }
   })),
+  // Buscar informações da aplicação
+  fetchApplicationInfo: async () => {
+    try {
+      const appInfo = await getApplicationInfo();
+      set({
+        applicationInfo: appInfo
+      });
+    } catch (error) {
+      console.warn('[AuthStore] Failed to fetch application info:', error);
+      set({
+        applicationInfo: null
+      });
+    }
+  },
   /* Init ao montar o Provider */
   init: async () => {
+    const {
+      fetchApplicationInfo
+    } = get();
     try {
+      // Buscar application info primeiro (não bloqueia o init)
+      fetchApplicationInfo();
+
       // Verifica se há um token válido
       if (isAuthenticated()) {
         // Tenta extrair usuário do token (JWT)
@@ -756,7 +797,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
@@ -852,6 +895,13 @@ const useSession = () => useAuthStore(useShallow(s => ({
 // Loading States Hook
 const useAuthLoading = () => useAuthStore(s => s.loadingStates);
 
+// Application Logo Hook
+const useApplicationLogo = () => {
+  const applicationInfo = useAuthStore(s => s.applicationInfo);
+  // Retorna o logo da aplicação ou null (componentes usam fallback padrão)
+  return applicationInfo?.image || null;
+};
+
 function ProtectedRoute({
   fallback = /*#__PURE__*/React.createElement("p", null, "\u231B Carregando..."),
   redirectTo = "/login"
@@ -887,7 +937,7 @@ function AuthCard({
   title,
   subtitle,
   logo,
-  logoHeight = 32,
+  logoHeight = 28,
   width = 350,
   ...props
 }) {
@@ -922,7 +972,8 @@ var img = "data:image/webp;base64,iVBORw0KGgoAAAANSUhEUgAAAjwAAADICAYAAADskzu8AA
  */
 function SignInForm({
   // Configuração
-  logo = img,
+  logo,
+  // Removido default, será calculado abaixo
   title = 'Entrar',
   subtitle = 'Acesse sua conta para continuar',
   // Features
@@ -948,6 +999,10 @@ function SignInForm({
   const loadingSignIn = useAuthStore(s => s.loadingStates.signIn);
   const loadingMagicLink = useAuthStore(s => s.loadingStates.magicLink);
   const loadingResetPassword = useAuthStore(s => s.loadingStates.resetPassword);
+
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
   const form = useForm({
     initialValues: {
       email: '',
@@ -992,7 +1047,7 @@ function SignInForm({
   };
   const isLoading = loadingSignIn || loadingMagicLink || loadingResetPassword;
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
-    logo: logo,
+    logo: finalLogo,
     title: title,
     subtitle: subtitle
   }, cardProps), /*#__PURE__*/React.createElement("form", {
@@ -1070,7 +1125,7 @@ function SignInForm({
  */
 function SignUpForm({
   // Configuração
-  logo = img,
+  logo,
   title = 'Criar Conta',
   subtitle = 'Preencha os dados para se cadastrar',
   // Features
@@ -1089,6 +1144,10 @@ function SignUpForm({
 }) {
   const signUp = useAuthStore(s => s.signUp);
   const loading = useAuthStore(s => s.loadingStates.signUp);
+
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
   const form = useForm({
     initialValues: {
       name: '',
@@ -1112,7 +1171,7 @@ function SignUpForm({
     }
   };
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
-    logo: logo,
+    logo: finalLogo,
     title: title,
     subtitle: subtitle
   }, cardProps), /*#__PURE__*/React.createElement("form", {
@@ -1189,7 +1248,7 @@ function SignUpForm({
  */
 function MagicLinkForm({
   // Configuração
-  logo = img,
+  logo,
   title = 'Login sem Senha',
   subtitle = 'Receba um link de acesso no seu email',
   // Features
@@ -1205,6 +1264,10 @@ function MagicLinkForm({
 }) {
   const sendMagicLink = useAuthStore(s => s.sendMagicLink);
   const loading = useAuthStore(s => s.loadingStates.magicLink);
+
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
   const form = useForm({
     initialValues: {
       email: ''
@@ -1222,7 +1285,7 @@ function MagicLinkForm({
     }
   };
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
-    logo: logo,
+    logo: finalLogo,
     title: title,
     subtitle: subtitle
   }, cardProps), /*#__PURE__*/React.createElement("form", {
@@ -1258,7 +1321,7 @@ function MagicLinkForm({
  */
 function MagicLinkVerify({
   // Configuração
-  logo = img,
+  logo,
   // Token pode ser passado diretamente ou extraído da URL
   token: propToken,
   // Callbacks
@@ -1274,6 +1337,11 @@ function MagicLinkVerify({
   const [status, setStatus] = useState('verifying'); // verifying, success, error
   const [errorMessage, setErrorMessage] = useState('');
   const verifyMagicLink = useAuthStore(s => s.verifyMagicLink);
+
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
+  const verifyingTokenRef = useRef(null);
   useEffect(() => {
     const verify = async () => {
       // Pega token da prop ou da URL
@@ -1288,6 +1356,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');
@@ -1304,9 +1376,10 @@ 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
+    logo: finalLogo
   }, cardProps), status === 'verifying' && /*#__PURE__*/React.createElement(Stack, {
     align: "center",
     gap: "sm"
@@ -1350,7 +1423,7 @@ function MagicLinkVerify({
  */
 function ForgotPasswordForm({
   // Configuração
-  logo = img,
+  logo,
   title = 'Recuperar Senha',
   subtitle = 'Enviaremos um link para redefinir sua senha',
   // Features
@@ -1366,6 +1439,10 @@ function ForgotPasswordForm({
 }) {
   const forgotPassword = useAuthStore(s => s.forgotPassword);
   const loading = useAuthStore(s => s.loadingStates.resetPassword);
+
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
   const form = useForm({
     initialValues: {
       email: ''
@@ -1383,7 +1460,7 @@ function ForgotPasswordForm({
     }
   };
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
-    logo: logo,
+    logo: finalLogo,
     title: title,
     subtitle: subtitle
   }, cardProps), /*#__PURE__*/React.createElement("form", {
@@ -1418,7 +1495,7 @@ function ForgotPasswordForm({
  */
 function ResetPasswordForm({
   // Configuração
-  logo = img,
+  logo,
   title = 'Nova Senha',
   subtitle = 'Crie uma nova senha para sua conta',
   // Token pode ser passado diretamente ou extraído da URL
@@ -1437,6 +1514,10 @@ function ResetPasswordForm({
   const resetPassword = useAuthStore(s => s.resetPassword);
   const loading = useAuthStore(s => s.loadingStates.resetPassword);
 
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
+
   // Extrai token da URL se não foi passado como prop
   useEffect(() => {
     if (!propToken && typeof window !== 'undefined') {
@@ -1470,7 +1551,7 @@ function ResetPasswordForm({
   };
   if (success) {
     return /*#__PURE__*/React.createElement(AuthCard, _extends({
-      logo: logo
+      logo: finalLogo
     }, cardProps), /*#__PURE__*/React.createElement(Stack, {
       align: "center",
       gap: "sm"
@@ -1491,7 +1572,7 @@ function ResetPasswordForm({
   }
   if (!token) {
     return /*#__PURE__*/React.createElement(AuthCard, _extends({
-      logo: logo
+      logo: finalLogo
     }, cardProps), /*#__PURE__*/React.createElement(Stack, {
       align: "center",
       gap: "sm"
@@ -1505,7 +1586,7 @@ function ResetPasswordForm({
     }, labels.goToSignIn || 'Voltar para Login')));
   }
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
-    logo: logo,
+    logo: finalLogo,
     title: title,
     subtitle: subtitle
   }, cardProps), /*#__PURE__*/React.createElement("form", {
@@ -1541,7 +1622,7 @@ function ResetPasswordForm({
  */
 function VerifyEmailCard({
   // Configuração
-  logo = img,
+  logo,
   // Token pode ser passado diretamente ou extraído da URL
   token: propToken,
   // Email para reenvio (opcional)
@@ -1559,9 +1640,17 @@ 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);
+
+  // Hook para buscar logo da aplicação
+  const applicationLogo = useApplicationLogo();
+  const finalLogo = logo || applicationLogo || img;
   useEffect(() => {
     const verify = async () => {
       // Pega token da prop ou da URL
@@ -1571,11 +1660,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');
@@ -1586,24 +1689,28 @@ 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);
     }
   };
   return /*#__PURE__*/React.createElement(AuthCard, _extends({
-    logo: logo
+    logo: finalLogo
   }, cardProps), status === 'verifying' && /*#__PURE__*/React.createElement(Stack, {
     align: "center",
     gap: "sm"
@@ -1615,7 +1722,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, {
@@ -1639,7 +1758,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
@@ -1647,8 +1766,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, getApplicationInfo, 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