Estou usando um componente com withSessionHOC: "export default withSessionHOC(Componente);" mas ainda dá de ver a página por alguns segundos antes de ser redirecionado por não estar autenticado.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Estou usando um componente com withSessionHOC: "export default withSessionHOC(Componente);" mas ainda dá de ver a página por alguns segundos antes de ser redirecionado por não estar autenticado.
Oi
Uma solução viável para o dilema é empregar a função getServerSideProps, a qual é executada no servidor antes de renderizar a página. Dessa maneira, é possível verificar a autenticação do usuário e redirecioná-lo antes da carga completa da página.
Segue um exemplo de como se pode usar o getServerSideProps para efetuar essa verificação:
import { getSession } from 'next-auth/client';
export async function getServerSideProps(context) {
const session = await getSession(context);
if (!session) {
return {
redirect: {
destination: '/login',
permanent: false,
},
};
}
return {
props: {},
};
}
function MinhaPagina() {
// Conteúdo da página
}
export default MinhaPagina;
A função getServerSideProps verifica a existência de uma sessão ativa para o usuário. Se não houver sessão, ele será redirecionado para a página de login; caso contrário, a página será renderizada normalmente.