Alura > Cursos de Front-end > Cursos de React > Conteúdos de React > Primeiras aulas do curso React: autenticando usuários

React: autenticando usuários

Novos usuários - Apresentação

Olá! Boas vindas ao curso de React com foco em Autenticação! Sou o instrutor Vinícios Neves aqui da Plataforma Alura.

Trabalharemos com o Alura Books, um projeto muito bacana feito no Figma que compartilharemos com você mais adiante nas aulas.

Print da página inicial do projeto "Alura Books" no Figma. No canto esquerdo da tela, está o menu "Pages" contendo uma lista de elementos do projeto. Ao centro, estão visíveis duas telas: "Página inicial - Menu" e "Página inicial - DESLOGADA". Ambas possuem um cabeçalho links, seguido de um banner superior com a frase "Já sabe por onde começar?" e campo de busca. Abaixo, está a parte de "Últimos lançamentos" e de "Mais vendidos" com três cards de livros contendo informações e respectivos preços, além do botão de "Comprar". Mais abaixo, está a parte de "categorias mais buscadas" contendo oito retângulos com legendas diversos. No canto direito da tela do Figma, está aberta a aba "Inspect" com as propriedades e configurações do projeto.

Teremos a página inicial que já estará disponível na atividade "Preparando o Ambiente", contendo a parte de livros mais vendidos, últimos lançamentos, banners superiores, rodapés, botões, menu de cadastro em newsletter e todos os outros elementos do projeto.

Como já teremos esta base pronta, focaremos nas páginas de cadastro e de login de usuário ou usuária, em que pegaremos um token e faremos uma requisição autenticada na API.

Print do mesmo projeto "Alura Books" anterior, porém estão visíveis ao centro as duas telas de "Login" e de "Cadastro". Na primeira, sobreposta à página inicial com transparência, há uma caixa de diálogo com título "Login" contendo campos de "E-mail" e "Senha", seguido dos botões de "Fazer login" e de "Criar conta" ao lado da frase "Ainda não tem uma conta?". Na segunda tela "Cadastro", também há uma caixa de diálogo sobreposta com o título "Cadastro" contendo campos de texto de "nome", "email", "endereço", "complemento", "cep", "senha" e "confirmar senha", seguido do botão de "cadastrar".

Na parte de "Meus Pedidos", que é uma área acessível somente para quem já tiver logado, ou seja, quem tem um token válido.

Para implementarmos tudo isso, usaremos o React, React Router, Axios, Session Storage, entre outras ferramentas.

Este é um curso muito interessante, e logo na primeira atividade teremos um grande desafio para enfrentar!

Então te convidamos a continuar conosco e aprender na prática como funciona a criação de aplicação com React, algo muito comum no dia-a-dia da área.

Vamos lá!

Novos usuários - Preparando o projeto

Vamos preparar o nosso ambiente para conseguirmos desenvolver a autenticação do Alura Books.

Como teremos este foco, ou seja, cadastraremos, logaremos e deslogaremos o usuário ou usuária com tokens, além de outras ações relacionadas à autenticação, disponibilizamos o projeto do Alura Books no Figma neste link.

Print da página inicial do projeto "Alura Books" no Figma. No canto esquerdo da tela, está o menu "Pages" contendo uma lista de elementos do projeto. Ao centro, estão visíveis duas telas: "Página inicial - Menu" e "Página inicial - DESLOGADA". Ambas possuem um cabeçalho links, seguido de um banner superior com a frase "Já sabe por onde começar?" e campo de busca. Abaixo, está a parte de "Últimos lançamentos" e de "Mais vendidos" com três cards de livros contendo informações e respectivos preços, além do botão de "Comprar". Mais abaixo, está a parte de "categorias mais buscadas" contendo oito retângulos com legendas diversos. No canto direito da tela do Figma, está aberta a aba "Inspect" com as propriedades e configurações do projeto.

No topo da página, teremos o menu de navegação com o botão de "Login", logo abaixo teremos os três últimos livros em lançamentos seguido dos três mais vendidos. Ao lado, encontraremos os detalhes do item selecionado em ambas as partes.

Também teremos as categorias mais buscadas seguida da parte de cadastro para receber as últimas notícias em newsletters. Ao final, teremos o rodapé ou footer.

Para praticarmos ainda mais, propomos o desafio de desenvolvermos esses elementos da página inicial por conta própria usando o gabarito do projeto, além das atividades do curso. Afinal, é praticando que absorvemos ainda mais os conceitos relacionados ao React!

Se fizermos o desenvolvimento da base, quando formos trabalhar com a autenticação, conseguiremos medir e saber quais decisões foram boas e quais não, além de refatorações necessárias.

Seria muito interessante compartilhar essas soluções e experiências conosco em nosso Fórum neste link.

Além disso, usaremos a paleta de componentes que desenvolvemos no curso anterior "React: desenvolvendo uma biblioteca de componentes" neste link, focado na construção usando o StoryBook e com pacote ds-alurabooks publicado no NPM aqui para download, caso queira.

Neste package, encontraremos o campo de texto, os cards, grupo de opções, input de quantidade, Modal, componente de tag, entre outros. Ou seja, teremos a base necessária para o Alura Books.

A seguir, cuidaremos da Modal de novo usuário ou usuária.

Na tela de "Cadastro" do Figma, teremos os campos necessários para registramos uma nova pessoa.

Print do projeto "Alura Books" no Figma com a tela de "Cadastro" visível. Há uma caixa de diálogo sobreposta ao fundo transparente com o título "Cadastro" contendo campos de texto de "nome", "email", "endereço", "complemento", "cep", "senha" e "confirmar senha", seguido do botão de "cadastrar". Do lado esquerdo da caixa, há a ilustração de uma pessoa segurando uma grande chave e apontando para uma fechadura que está em uma tela de computador.

Com os arquivos do projeto no GitHub neste link para abrirmos no VSCode e a aplicação rodando com tudo já pronto, poderemos trabalhar com a autenticação a seguir.

Novos usuários - Criando a modal

Vamos construir a Modal do cadastro!

Nas atividades desta aula, você encontra as orientações necessárias para colocar tudo o que precisamos usando os projetos que disponibilizamos tanto do Alura Books quanto no Storybook com alguns componentes, lembrando que foram desenvolvidos no curso anterior de React e publicados no NPM.

É interessante experimentarmos a nossa paleta de componentes, mas conseguiremos aproveitar este curso de autenticação de qualquer forma.

Começaremos rodando o Storybook na porta 6006, que inclusive dá o exemplo de como trabalhar com uma Modal, e também o Alura Books em si na porta 3000 em outra aba do navegador, que é a aplicação React.

Para construirmos a Modal de cadastro, abriremos o Visual Studio Code ou VSCode, e acessaremos o arquivo index.tsx na pasta "src > componentes > BarraNavegacao". Usaremos o atalho "Ctrl + B" ou "Command + B" para fechar e abrir a aba de "Explorer" na lateral esquerda da tela.

Dentro desse código, teremos o botão de navegação <BotaoNavegacao> com o texto "Cadastrar-se" que é o que ativaremos na Modal.

Se construirmos dentro de BarraNavegacao com diversos inputs e useState()s para controlá-los, crescer o código do componente com responsabilidades diferentes pode não ser uma boa prática.

Então criaremos uma nova pasta dentro de "src > componentes" chamada "ModalCadastroUsuario" contendo um novo arquivo index.stx.

Como é um componente React, usaremos const ModalCadastroUsuario recebendo uma arrow function que já conhecemos, e retornaremos diretamente, sem controlarmos nenhum estado de nada, a Modal <abModal> retirada do Storybook da paleta de componentes.

Depois faremos o expor default.

Primeiro, passaremos um título "Cadastrar" que está aberta por padrão, então aberta será igual a {true}.

Também definiremos a função aoFechar com a arrow function, e depois faremos o console.log() de uma string dizendo 'fecha aí', já que não queremos fazer nada por enquanto.

Dentro ainda da Modal, criaremos um <h1> com Olá mundo para testarmos se está funcionando.

import { abModal } from 'ds-alurabooks'

const ModalCadastroUsuario = () => {
    return <abModal
        título="Cadastrar"
        aberta={true}
        aoFechar={() => console.log('fecha aí')}
    >
        <h1>Olá mundo</h1>
    </abModal>)
}

export default ModalCadastroUsuario

Voltaremos ao Alura Books no navegador, e notaremos que nada aconteceu porque criamos o componente mas ainda não o chamamos.

Então acessaremos o index.tsx de BarraNavegacao.css e chamaremos <ModalCadastroUsuario> após o fim do bloco de <BotaoNavegacao>. Apertando a tecla "Enter", o VSCode fará a importação e salvaremos o arquivo.

Recarregaremos o Alura Books no navegador e exibiremos a caixa de diálogo sobreposta à página inicial com os escritos "Cadastrar" e "Olá mundo" que colocamos. Se inspecionarmos o elemento, poderemos acompanhar se algum erro acontece.

Clicando no ícone de "x" para fecharmos, nada irá acontecer, mas a base está pronta para seguirmos com o desenvolvimento.

Para isso, a seguir, criaremos o formulário e colocaremos todos os campos dentro, já que temos a Modal já configurada e instalada.

Sobre o curso React: autenticando usuários

O curso React: autenticando usuários possui 117 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

Conheça os Planos para Empresas