Aula 24 - Golang - Fiber - React - Autenticação de Usuários

Vamos pegar o usuário logado no Home.tsx. Para isso, vamos ter que chamar o endpoint do user, e utilizaremos o gancho useEffect do react.

src/pages/Home.tsx


import React, { useEffect } from 'react';
import axios from 'axios';
const Home: React.FC = () => {
  useEffect( () => {
  (
    async () => {
      const response  = await axios.get('user');
      console.log(response)
    }
  )();
  }, [])
  return (
    <div className="container">
      <h1>You are not logged in!</h1>
    </div>
  );
}

export default Home;

Vamos ajustar a configuração de acesso para aceitar credenciais, pois transmitimos o cookie do backend e precisamos armazená-lo em locais seguros, caso contrário, ele não funcionará corretamente. Vamos ajustar a configuração de acesso para aceitar credenciais, pois transmitimos o cookie do back.

src/index.tsx


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import axios from 'axios';

axios.defaults.baseURL = `${process.env.REACT_APP_API_URL}/api/`; 
axios.defaults.withCredentials = true;
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Portanto, com essas configurações, vamos tentar fazer o login novamente. Após o login, somos redirecionados à página principal onde é possível verificar que o usuário foi recuperado com sucesso através do console.log() que colocamos.

Gestão de Estado e Tratamento de Erros

No código anterior do Home.tsx, a página simplesmente exibia uma mensagem estática informando que o usuário não estava logado. No entanto, essa abordagem não reflete dinamicamente o estado de autenticação do usuário. Portanto, realizamos algumas alterações significativas para melhorar a interação e fornecer feedback em tempo real sobre o status do login. Primeiro, introduzimos o hook useState para gerenciar o estado da mensagem que será exibida ao usuário. Isso permite que a página responda adequadamente, mostrando uma mensagem personalizada com o nome do usuário quando ele está logado ou uma mensagem de erro quando o login falha. Além disso, empregamos um bloco try...catch dentro do useEffect para tentar buscar os dados do usuário com a função axios.get. Se a requisição for bem-sucedida, o nome do usuário é extraído da resposta e utilizado para compor uma saudação personalizada que é definida como estado da mensagem. Se ocorrer um erro na requisição (como quando o usuário não está logado ou a sessão expirou), capturamos esse erro no bloco catch e configuramos a mensagem de estado para indicar que o usuário não está logado. Essas mudanças não só tornam a página mais interativa e útil, mas também introduzem boas práticas de programação, como o tratamento de erros e a manipulação de estados, essenciais para aplicações em React modernas. Abaixo está o código atualizado que implementa estas melhorias:

src/pages/Home.tsx


import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Home: React.FC = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    (async () => {
      try {
        const response = await axios.get('user');
        const user = response.data;
        setMessage(`Hi ${user.first_name} ${user.last_name}`);
      } catch (e) {
        setMessage('You are not logged in!');
      }
    })();
  }, []);
  return (
    <div className="container">
      <h1>{message}</h1>
    </div>
  );
}

export default Home;

Na próxima aula, focaremos na implementação do botão de logout e na lógica associada ao processo de deslogar um usuário. Abordaremos como adicionar este componente essencial em nossa interface de usuário usando React e garantiremos que ele funcione de forma segura e eficiente. Vamos explorar como gerenciar o estado de sessão do usuário, garantindo que todas as informações de sessão sejam limpas corretamente para evitar vulnerabilidades de segurança. Isso não só melhora a usabilidade de nossa aplicação, mas também reforça a importância de práticas de segurança robustas no desenvolvimento web.