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
Pacote Programador Fullstack
Redes Sociais:
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:
- Digital Innovation One – Cursos gratuitos com certificado.
- Workover – Aprenda Python3 gratuitamente.
- Comunidades de desenvolvedores para networking:
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
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 login e redirecting depois do login.
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. 😉
