Iniciando com ReactJS: Navegação e Autenticação com JWT

Série Clone AirBnB com AdonisJS, React Native e ReactJS [Parte 8]

Iniciando com ReactJS: Navegação e Autenticação com JWT

Esse post é a oitava parte da série de posts “Clone AirBnB com AdonisJS, React Native e ReactJS” onde iremos construir do zero uma aplicação web com ReactJS e também uma aplicação mobile com React Native com dados servidos através de uma API REST feita com NodeJS utilizando o framework AdonisJS.

Cara que insano tem sido esses posts do clone do AirBnB. O Diego chegou arrasando com o AdonisJS e o Cláudio não ficou para trás  com o React Native e agora é minha vez de contribuir com você para essa tríade ficar perfeita.

E vamos de ReactJS, então já apertou o sinto? O foguete já vai voar!!!

Obs.: Não se esqueça de rodar a API do Adonis, pois do contrário o app não conseguirá estabelecer conexão.

Iniciando

Primeiro passo é instalar o CLI (Command Line Interface) do ReactJS

npm install -g create-react-app

E criar o projeto:

create-react-app airbnb-web

Feito isso, adicione algumas dependências:

npm install react-router-dom axios styled-components prop-types font-awesome
  • Axios: Cliente HTTP usado para enviar requisições à API;
  • PropTypes: Lib para chegagem de tipo das props de componentes React;
  • ReactRouter:Lib implementação de navegação na aplicação;
  • StyledComponents: Lib usada estilização dos componentes.
  • Font Awesome: Lib de fontes de ícones.
Agora, você precisa definir uma organização na estrutura do projeto:
src/
 |--- assets/   # Aqui ficará as imagens
 |--- configs/  # Variáveis de configurações
 |--- pages/    # As nossas páginas
 |--- services/ # Configuração de serviços utilizados
 |--- styles/   # Estilos globais
 |--- App.js    # Arquivo que conterá configurações principais do App
 |--- index.js  # Ponto de entrada para execução do nosso App
 |--- routes.js # Arquivo contendo as principais rotas do App

Essa será a configuração inicial e a medida que for preciso você vai alterando. Como o create-react-app cria uma estrutura com arquivos e códigos básicos, é preciso retira-los para ficar organizado como mostrei acima. No index.js:

E no App.js:

Serviços

Nesse sistema existirá dois serviços importantes que serão requisitados em diversas situações, por isso que foi criado o diretório services. Um serviço para a autenticação do usuários, o auth.js, e o outro para consumir os dados da nossa API feita com o AdonisJS, o api.js.

No arquivo services/auth.js, como dito, será tratado a autenticação dos usuários, e para isso há quatro funções login, logout, getToken e isAuthenticated:

Já no services/api.js será definido qual é a API de consumo, para você não ficar passando isso por extenso toda hora, e já pode definir o header de Authorization passando o token jwt caso o mesmo exista. (Famoso 2 coelhos, uma cajadada rsrs)

Aqui foi utilizado o interceptors do Axios, como o nome sugere ele intercepta uma requisição request antes dela efetivamente acontecer, nesse instante é verificado se existe um token no localStorage, e existindo, ele adiciona o Header de Authorization na request. Isso possibilitará o acesso a páginas que precisam de autenticação, assim como o Diego configurou no Insomnia.

Rotas

Como é comum na maioria dos Apps, a navegação entre páginas, será importante neste também. Por ser pequeno, conterá três rotas principais sendo o SignIn, SignUp e App.

  • SignIn: Entrar com as credenciais para acessar o sistema.
  • SignUp: Criar uma nova conta para acessar o sistema.
  • App: Área que contém as properties e permite adicionar novas.
  • NotFound: Para rotas desconhecidas.

Quem vai orquestrar isso será o ReactRouter no arquivo routes.js onde montaremos a seguinte estrutura:

Se você não entendeu porque crio o PrivateRoute veja esse vídeo do Diego sobre controle de rotas no youtube. Dê o npm start e até o momento você terá isso:

Primeiras rotas do app AirBnB com React JS

Repara que quando acesso http://localhost:3000/app ele me retorna para a página inicial? Isso é o esperado, uma vez que o usuário ainda não está logado no sistema. E na rota http://localhost:3000/umapaginaqualquer ele exibe o Page Not  Found como o esperado também.

SignUp

Agora que você já tem a estrutura de rotas prontas, precisa definir as páginas do projeto.

Comece com com a página de SignUp. Primeiro defina o formulário para ter noção daquilo que será a página e vá, posteriormente, estilizando o que for necessário com StyledComponent.

Como estou falando de páginas, os arquivos ficarão no diretório pages e para ficar mais organizado você deve criar um diretório para cada página, sendo que o nome dele será o nome da página e conterá pelo menos o arquivo index.js com a lógica do componente e o styles.js com as estilizações.

src/pages/
      |--- SignUp/
              |--- index.js
              |--- styles.js

Primeiro, crie um componente Form e Containeratravés do StyledComponents, mas não estilize ainda. O styled disponibiliza todos os elementos que temos em HTML, e com a sintaxe tagged template string conseguimos passar o CSS estilizando o elemento selecionado.

A princípio será usado o elemento sem estilização, para você perceber que é um componente comum.

Em index.js ficará:

O arquivo para o Logo será disponibilizado no repositório, basta copia-lo para o assets.

E para finalizar adicionar a Page no routes.js:

Nesse momento a página estará muito feia, algo parecido com isso:

Página SignUp do clone do AirBnB

O ponto que volto a frisar é que estamos utilizando dois elementos do StyledComponent e que na prática é como se você estivesse usando a tag convencional como os demais elementos da página.

Antes que eu me esqueça, você deve definir um estilo global e para isso vamos com o StyledComponent também. Já vamos importar o font-awesome, para utiliza-lo depois. Crie um arquivo global.js no diretório src/styles que havíamos criado anteriormente, com o seguinte conteúdo:

E fazer um kuchiyose no jutsu dele, digo importa-lo em App.js:

Bora estilizar a página então?? Volte no arquivo styles.js da Page SignUp e faça o seguinte:

E como num passe de mágica temos:

Página SignUp do clone do AirBnB estilizada

Você percebeu que com o StyledComponent foi estilizado além dos elementos passados, os filhos dele também foram? Isso ocorreu porque os elementos foram encadeados. Funciona como o CSS normal, só que nesse caso você pode colocar os elementos filhos dentro das chaves {} poupando assim ter que escrever por extenso todas as tags do CSS e deixando isso por conta do StyledComponent. É isso mesmo, você pode usar todo o poder do CSS que apenas o elemento e os seus filhos receberão  a estilização!!!! Isso é bruto, bruto, bruto!!!

Criando usuário

Se você observou bem, a estrutura para pegar os dados do formulário está feita passando do input para o state, bem como a função que será chamada quando o botão “Cadastrar Grátis” for pressionado disparando o evento onSubmit.

Só uma ressalva, será necessário habilitar o CORS do servidor AdonisJS que temos, para isso no arquivo config/cors.js procure pela chave origin e ponha true.

O que precisa agora é fazê-la funcionar, importando a api de consumo de dados, adicionando o withRouter para ter acesso as rotas e substituindo a função handleSignUp no arquivos index.js:

Agora a função handleSignUp é assíncrona e por isso foi adicionado o async/await para trabalhar com isso. Os dados do state foram extraídos e feito uma verificação simples adicionando um error ao estado caso falte algum campo preenchido ou continua com o try/catch. Dentro do try foi feito uma requisição com o método POST do HTTP enviando os dados para inserir o usuário novo. Se tudo ocorrer bem você será redirecionado para a rota de login, caso contrário um erro será informado.

Só reforçando que o withRouter é um HOC que adiciona a propriedade history que possibilita mudar de página.

Página SignUp do clone do AirBnB funcionando

SignIn

Assim como antes, monte uma estrutura de diretórios para página de SignIn:

src/pages/
      |--- SignIn/
              |--- index.js
              |--- styles.js

Dessa vez, serei mais direto com os códigos, então no index.js:

A estrutura é semelhante a página de SignUp só que o método disparado no submit é o handleSignIn, que mostra um erro caso falte algum campo ser preenchido e uma estrutura de try/catch para a requisição na API, exibindo um erro caso haja algum problema na requisição. Dessa vez foi necessário guardar a resposta da API, pois ela traz consigo o token que é guardado no localStorage com a função login que criamos em auth.

Para estilizar mais um vez use o StyledComponents, no styles.js:

Para finalizar, chame a  página no routes.js:

Página SignIn do clone do AirBnB

É só isso, não tem mais jeito, acabou, boa sorte…

Caaaalma só quis cantar um pouco HAHAH

Essa primeira parte foi para você criar uma conta e acessar o sistema com ela, e você já deve ter percebido que não tem muito segredo! Ainda vamos adicionar o Mapa, listar propriedades e muito mais! * — *

Esse código está no github, só clicar aqui

Ah, vale lembrar que você pode deixar seu comentário ali embaixo com suas dúvidas, sugestões e até mesmo falando o que está achando da série.

Abração, nos vemos logo!!

AdonisJS + ReactJS + React Native
A seguir:

Utilizando o ModalRoute e fazendo upload de imagens

Utilizando o ModalRoute e fazendo upload de imagens