I changed my profile.

@Davi Barros dynamically import the component with ssr option false
https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components

I almost fix but the page not redirect to the another:

export const AuthenticatedPage: React.FC<AuthentiticatedPageProps> = ({
children
}) => {
const auth = useAuth();
const [isValid, setIsValid] = useState(false)

//const sessaoValida = auth.isSessionValid();

useEffect(() => {
setIsValid(auth.isSessionValid())
}, [])

if(!isValid){
return <Login />
}

return (
#Unknown Channel{children}</>
)

}

The code above not works

Why not suppress the hydration error from the layout just a suggestion

i cabt implement until now

Im trying

im trying this way

import Login from '@/app/login/page';
import { useAuth } from '@/resources';
import dynamic from 'next/dynamic';


interface AuthentiticatedPageProps {
children: React.ReactNode;
}

export const AuthenticatedPage: React.FC<AuthentiticatedPageProps> = ({
children
}) => {

const auth = useAuth();


if (!auth.isSessionValid()) {
return <Login />
}

return (
#Unknown Channel{children}</>
)

}

// Exportando o componente com SSR desabilitado
export default dynamic(() => Promise.resolve(AuthenticatedPage), {
ssr: false
});

not works

I solved a part of problem with this code

The problem is that when I do login, I need to refresh the page to got to the another page.

You’re using react router for navigation?

Try window.location.href = “youredirectcomponenthere”

If you’re facing redirect issue I think that should work