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

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

Voltar para página principal do site

Todas as aulas desse curso

Aula 23                          Aula 25

Fiber

Fiber

Pacote Programador Fullstack

Pacote Programador Fullstack

Redes Sociais:

facebook

 

Conecte-se comigo!

LinkedIn: Fique à vontade para me adicionar no LinkedIn.

Ao conectar-se comigo, você terá acesso a atualizações regulares sobre desenvolvimento web, insights profissionais e oportunidades de networking no setor de tecnologia.

GitHub: Siga-me no GitHub para ficar por dentro dos meus projetos mais recentes, colaborar em código aberto ou simplesmente explorar os repositórios que eu contribuo, o que pode ajudar você a aprender mais sobre programação e desenvolvimento de software.

Recursos e Afiliados

Explorando os recursos abaixo, você ajuda a apoiar nosso site.

Somos parceiros afiliados das seguintes plataformas:

  • Hostinger – Hospedagem web acessível e confiável.
  • Digital Ocean – Infraestrutura de nuvem para desenvolvedores.
  • One.com – Soluções simples e poderosas para o seu site.

Código da aula: Github

Educação e Networking

Amplie suas habilidades e sua rede participando de cursos gratuitos e comunidades de desenvolvedores:

Canais do Youtube

Explore nossos canais no YouTube para uma variedade de conteúdos educativos e de entretenimento, cada um com um foco único para enriquecer sua experiência de aprendizado e lazer.

Toti

Toti: Meu canal pessoal, onde posto clips artesanais de músicas que curto tocar, dicas de teoria musical, entre outras coisas.

Lofi Music Zone Beats

Lofi Music Zone Beats: O melhor da música Lofi para estudo, trabalho e relaxamento, criando o ambiente perfeito para sua concentração.

Backing Track / Play-Along

Backing Track / Play-Along: Acompanhe faixas instrumentais para prática musical, ideal para músicos que desejam aprimorar suas habilidades.

Código Fluente

Código Fluente: Aulas gratuitas de programação, devops, IA, entre outras coisas.

Putz!

Putz!: Canal da banda Putz!, uma banda virtual, criada durante a pandemia com mais 3 amigos, Fábio, Tatá e Lula.

Vocal Techniques and Exercises

Vocal Techniques and Exercises: Melhore suas técnicas vocais com exercícios práticos e dicas de especialistas em canto.

PIX para doações

PIX Nubank

PIX Nubank


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;

Prévia da Próxima Aula

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.

Prepare-se para aprender técnicas práticas que você poderá aplicar em qualquer aplicação web moderna!

Com isso, encerramos essa aula.

Na próxima aula, seguimos na construção do frontend, e vamos fazer a parte de logout

Código da aula: Github

Voltar para página principal do blog

Todas as aulas desse curso

Aula 23                          Aula 25

É isso!

A gente se vê na próxima.

Até lá!

\o/

Bons estudos. 😉

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>