Tengo una url para confirmar la cuenta de mis usuarios, con un token en la url, después de ingresar a la página, debería imprimir un mensaje "El usuario ahora está activo" o "El token no es válido". En localhost funciona perfecto, pero ahora en netlify muestra el sitio web pero muestra cualquier mensaje o realiza alguna solicitud al servidor. Ademas no me da ningun tipo de error ni en el servidor ni en la consola frontend.
aquí está el enlace del sitio web: https://cozy-melomakarona-5853fa.netlify.app/confirm-account/1g52cb94j2rke4pdlgl
mi única sospecha es que el gancho useEffect no funciona en netlify.
import React, { useEffect, useState } from 'react' import {useParams, Link} from "react-router-dom" import Alert from '../components/Alert.jsx'; function Confirm() { const params = useParams(); const {token} = params; const url = `${import.meta.env.VITE_BACKEND_URL}/api/veterinaries/confirm-account/${token}`; const [alert, setAlert] = useState({}); const [confirmedAccount, setConfirmedAccount] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { const confirmAccount = async ()=> { try { const response = await fetch(url); const result = await response.json(); if (!response.ok){ //here we check if there is an error from the backend and we generate a new error with the message from backend throw new Error(result.msg); } //if everything is ok then setConfirmedAccount(true) setAlert({msg: result.msg, error1: false}) } catch (error) { setAlert({msg: error.message, error1: true}) //here we show the backend error on the frontend } //stop loading setLoading(false); } return () => { confirmAccount(); } }, []) const {msg} = alert; return ( <> <div> <h1 className="text-indigo-600 font-black text-5xl text-center capitalize mr-6"> Verify your account and <span className="text-black">manage your patients</span></h1> </div> <div className="shadow-lg rounded-xl bg-white px-5 py-10"> {/* if it is not loading then show alert*/} {!loading ? <Alert alert={alert}/> : null } {/* if the account is confirmed then show sign in link*/} {confirmedAccount && <Link to="/" className="text-blue-600 block text-lg text-center mt-4">Sign in!</Link>} </div> </> ) } export default ConfirmLa forma en que está utilizando useEffect no es la esperada, la declaración de return no es necesaria, en su lugar, debe llamar a su función confirmAccount , esto debería solucionar el problema:
const confirmAccount = async () => { try { const response = await fetch(url); const result = await response.json(); if (!response.ok) { //here we check if there is an error from the backend and we generate a new error with the message from backend throw new Error(result.msg); } //if everything is ok then setConfirmedAccount(true); setAlert({ msg: result.msg, error1: false }); } catch (error) { setAlert({ msg: error.message, error1: true }); //here we show the backend error on the frontend } //stop loading setLoading(false); }; useEffect(() => { confirmAccount(); }, []);