Criar uma nova tela de login automático

Atualmente, ao entrar na tela de login o usuario se depara com um texto que indica o inicio do "login automatico".

O objetivo dessa mudança é criar um novo componente, dentro de uma nova rota, que irá realizar essa tarefa de login automatico.

Esse issue é ideal para iniciantes, devido a sua baixa complexidade. Também é interessante para quem quer se familiarizar com o código e como as requisições para o Biblioterra funcionam.

Antes de começar: Deixe a documentação do Biblioterra aberta, lá você pode fazer as requisições diretamente do seu navegador. Siga o tutorial básico para deixar seu ambiente de desenvolvimento pronto.

Requisitos gerais:

Você deve criar uma nova rota que vai levar ao seu novo componente, nós utilizamos o react-router no Bibliomar, e você pode aprender sobre ele aqui: Nós usamos componentes funcionais no Bibliomar (isso significa que usamos funções ao invés de classes). As requisições devem ser feitas utilizando a biblioteca axios, ou a padrão do navegador fetch.
Não há requisitos quanto a forma que você quer apresentar essa tela de login. Apenas lembre-se que em todo o site incluímos o componente <Navbar />, que é a barra de navegação e usamos a classe css bg-alt como plano de fundo.

Dicas gerais:

Essas dicas devem lhe ajudar a se situar em como o processo de autenticação (e consequentemente, re-autenticação) funciona.

Você irá trabalhar com uma rota principal, a /user/validate, ela vai receber um token JWT, e retornará um novo token com uma data de expiração postergada. (Vamos entender melhor, passo a passo)

O login automatico é feito utilizando o endpoint /user/validate do Biblioterra. Este endpoint é protegido. Endpoints protegidos significam que você deve estar autorizado para poder utilizar-los:
O Biblioterra trabalha com autenticação usando JWT do tipo Bearer. Isso significa que você deve enviar, junto da sua chamada a API, um token Bearer no cabeçalho Authorization.
Você recebe um token JWT sempre que realizar um login correto em /user/login ou uma re-autenticação em /user/validate Você, o desenvolvedor, salva esse token em algum lugar para poder utilizar-lo nas operações com o usuario autenticado.
Existem longas discussões sobre onde é o lugar mais seguro para salvar este token, e cada alternativa apresenta seus prós e contras.
Por isso, nós salvamos o token na interface localStorage, onde ele pode ser utilizado em toda a aplicação, e persiste mesmo quando o usuario fecha o navegador. Esse token é salvo na chave "jwt-token", e é muito importante manter esse nome.
O endpoint de revalidação retorna dois códigos de resposta principais, 200 e 401. 200 significa que tudo ocorreu bem, e no corpo dessa resposta está o novo token JWT atualizado. 401 significa que o token é inválido ou expirou, nesse caso, o usuario deve fazer login novamente.

Passo a passo:

Adicione sua rota no aplicativo:
Navegue até o arquivo App.tsx e sem seguida adicione o seguinte dentro da parte de <Routes>:

<Routes>
  // ...
  // Não substitua as outras rotas, apenas adicione isso ao final
  <Route path="/autologin" element={<SeuNovoComponente />} />
</Routes>

Isso vai definir que toda vez que alguém entrar na url /autologin, seu componente será renderizado.

Já no seu componente, salve o valor do token em alguma variavel:

const jwtToken = localStorage.getItem("jwt-token")

Em seguida, envie sua requisição com esse token no cabeçalho Authorization: Usamos a biblioteca axios nesse exemplo

const config = {
  url: "https://biblioterra.herokuapp.com/v1/user/validate",
  method: "GET",
  /* Parte importante */
  headers: {
    Authorization: `Bearer ${jwtToken}`,
  },
};

Em seguida, faça sua requisição, utilizando async/await ou promises.

let req = await axios.request(config);

axios.request(config).then(...);

Você pode verificar o status e o corpo da requisição usando:

// Status
req.status
// Corpo (com o token JWT)
req.data

Caso o status da requisição retorne OK (200), salve o novo token no localStorage:

const newToken = req.data["access_token"]  

//Sempre nomeie a chave como "jwt-token", ou ela não será usada no resto do site.  
localStorage.setItem("jwt-token", newToken)

Seu melhor amigo nessa hora é o hook useEffect(), que vai executar seu código assim que o usuario entrar na página e ela renderizar. Lembre-se sempre de adicionar tratamento de erros. Cheque a documentação da biblioteca de requisições que você está usando para entender como fazer isso.

Agradeço o interesse, e estou aberto a responder qualquer pergunta ou sugestão, boa sorte!

bibliomar / bibliomar-client