2

Olá, gostaria de um auxilio para a criação de rotas privadas usando NextJs. Todos os arquivos depositados dentro do diretório pages se tornam rotas acessiveis, em minha aplicação algumas destas devem ser acessiveissomente quando o usuário estiver logado. Atualmente estou usando useEffect para verificar se existe um objeto chamado username no sessionStorage, o código abaixo está na página de login e redireciona o usuário caso ele já esteja conectado:

useEffect(() => {
  const session = sessionStorage.getItem('username');
  if (session) {
    router.push(router.query.followPage || '/');
  }
}, [router]);

Esse método está longe de ser eficiente, e redireciona o usuário após o load inicial da página mostrando ao usuário componentes da tela, alem de ser mais lento no redirecionamento. Validações semelhantes há em outras páginas, nestas se username não existe o usuário é direcionado a página de login.

Encontrei algumas instruções para criar um HOC (Higher-Order Component) e envolver minhas páginas privadas com ele, isso parece promissor mas não consegui compreender como o autor propõe que os dados do usuário sejam validados, isso é, como a sessão do usuário é verificada pela função criada por ele checkUserAuthentication nesta fonte: https://medium.com/@eslamifard.ali/how-to-simply-create-a-private-route-in-next-js-38cab204a99c

Usar a função getInitialProps do next para verificar a autenticação do usuário no lado do servidor e redireciona-lo a partir dai parece eficiente, encontrei algumas fontes sugerindo passar um token no header da requisição mas de novo, não compreendi como isso funciona caso o usuário acesse a página diretamente pela url sem usar algum link interno da página.

Então qual é a melhor forma de criar rotas privadas com o NextJs?

3
  • A aplicação atual que estou desenvolvendo é muito simples e não precisa de grandes níveis de segurança, uma simples validação sobre a sessão do usuário já é o suficiente para o meu caso, uma resposta que use uma validação com base no sessionStorage já será bem vinda, mas caso queira contribuir com uma resposta mais avançada para usuários futuros que busquem por isso, fique a vontade. Commented 11/01/2021 às 20:27
  • Apenas um questionamento a se fazer... Nesse cenário (em que o usuário tem que estar logado para visualizar a página) será que realmente vale a pena utilizar Next? O principal propósito do Next é permitir SSR (e similares) para melhorar o SEO. Mas se a página é privada, isso não é necessário. Enfim, não estou falando para deixar de usar Next, mas é algo para se pensar. Autenticação com Next não é muito trivial de se fazer porque tem que sincronizar o token de autorização entre cliente e servidor, o que pode dar um trabalhozinho. Commented 11/01/2021 às 23:43
  • É um ótimo questionamento, eu não deixei claro na pergunta mas estou estendendo um aplicação já existente, tratasse de um site que foi construído em next e que agora o cliente quer incluir duas páginas das quais somente ele tenha acesso, não há nenhuma informação realmente privada nelas, mas o cliente não quer expor as mesmas por enquanto. Commented 12/01/2021 às 12:10

1 Resposta 1

2

A resposta estava na minha frente o tempo todo, sessionStorage e localStorage não podem ser acessados nas funções executadas no servidor, mas os cookies podem, então a solução se você quer criar uma rota privada como uma autenticação simples é salvar sua sessão nos cookies. Eu usei a lib js-cookies para manipular os cookies da minha aplicação mas isso é opcional. O exemplo abaixo demonstra como gravar o cookie no sistema:

import cookie from 'js-cookie';

function signIn(email, password) {
  // aqui é sua validação no servidor
  cookie.set('nomeDoCookie', 'valorDoCookie', { expires: 1, path: '/' });
  // você pode incluir um redirecionamento aqui se quiser
}

Agora na página que você deseja tornar privada, exporte a função getServerSideProps como demonstrado abaixo:

export async function getServerSideProps(ctx) {
  const isAuthenticated = (req) => {
    if (!req?.headers?.cookie) {
      return undefined;
    }

    const match = req.headers.cookie
      .split(';')
      .find((item) => item.trim().startsWith('nomeDoCookie='));

    if (!match) {
      return undefined;
    }

    return match.split('=')[1];
  };

  if (!isAuthenticated(ctx.req)) {
    ctx.res.writeHead(303, { Location: 'paginaDeLogin' });
    ctx.res.end();
  }

  return { props: {} };
}

É claro que você deve criar a função isAuthenticated em um arquivo separado e apenas chama-lo onde precisar. Essa é uma forma simples de fazer uma rota privada usando cookies, você também pode usar a função getInitialProps para validar os cookies, mas não é aconselhável pois torna o código mais complexo já que é necessário fazer validações para saber se a execução esta acontecendo no servidor ou no cliente

getServerSideProps is very similar to getInitialProps, meaning that it gets called every time that you load the page, but the code is only executed on the server.

Fonte: https://www.datocms.com/blog/how-the-new-next-js-9-3-preview-mode-works

É importante destacar que neste exemplo estou apenas verificando se o cookie existe, não estou verificando se ele é válido ou não, no meu caso isso é o suficiente, mas talvez você queira verificar alguns exemplos mais seguros de verificação, busque por auth na página de exemplos do nextJs para descobrir algumas formas de autenticação. https://github.com/vercel/next.js/tree/canary/examples

Esse artigo foi útil para mim enquanto estava pesquisando formas de fazer o que eu precisava: https://medium.com/@positivecarlos/authentication-on-universal-react-with-next-js-b441ef458046

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .