Controlando autenticação em rotas no ReactJS | Diego Fernandes

[@DanielOliveira-xn8mg]

As vezes é difícil acreditar que a rocketseat existe mesmo!

[@alenetpt]

Séria interessante fazeres um vídeo a explicar o back end em node com sistema de autenticação 👍

[@MrCristianfavaro]

Vídeo ótimo. Apenas um detalhe: Para conseguir passar props aos componentes pelo PrivateRoute é preciso por, além do ...props, o ...rest. Desta forma deu certo para mim. Ficaria assim:

[@cpuchosen8917]

AHHHHHHH QUE DELICIA DE AULA CARA. explicação simples, vídeo curto, e uma voz deliciosa.

[@wesleiasouza2875]

Cara, a galera por aqui no youtube faz uma baita volta pra dizer simplesmente isto, e você simplificou de uma maneira fabulosa. Parabéns, muito bom o vídeo.

[@wagnerfreitas9158]

Excelente treinamento meu caro.... ótima didática, segurança no conhecimento, bom exemplo... Parabens mesmo....

[@rocketseat]

Faaaala, Wagner! Que feedback maravilhoso! Valeu demais! 💜 💜

[@vagnerazevedo2014]

Excelente, Diego!!! Rocketseat sempre nos ajudando com conteúdo importante e de qualidade.

[@muldon2]

Já comecei dando meu like. Seus vídeos sao ótimos e cheio de detalhes técnicos pra bons observadores. Valeu !!

[@lukasoliveira73]

Muito bem explicado!!! Quando estava definindo rotas do meu web app nenhuma delas explicaram a importância de cada componente do react-router

[@DenisForigo]

Cara, muito massa! Seria muito legal também um vídeo falando mais sobre a lógica de autenticação. Sua didática é bem massa, seus vídeos estão bem claros e objetivos.

[@pcfmello]

Tu é um santo cara! Parabéns por mais um vídeo! 👏👏👏👏

[@rafael_mugnol]

Gostei bastante do vídeo, era bem o que eu precisava. Agora para completar Diego, você poderia fazer um demonstrando como manipular o Token (busca no servidor, armazenar no localStorage e enviar junto com as requisições). Valeu!!

[@rocketseat]

Em breve adicionarei um vídeo sobre... :)

[@sergioddh]

Aproveita e ensina a criar nested routes no vídeo...

[@andy.n3]

Muito obrigado pelo conteúdo meu amigo! Suas aulas tem me ajudado muito a entrar no Mundo React. Continue assim!

[@matheusserafim1650]

Aula top, poderia refazer ela para a nova versão do v6.23.0 do router-dom

[@lucasguima]

show! massa demais! poderia abordar o cenário de uma página que é visível tanto para anônimo, quando para usuário logado, como tratar a diferença de conteúdo

[@tarcisiopaisdesouzajunior5854]

Muito obrigado. Fazem um trabalho excepcional com o canal.

[@rocketseat]

Valeu demais pelo feedback, Tarcisio! 💜 😍

[@e.clediano]

Fala Diego... ótimo vídeo! Parabéns! Gostaria de ver um vídeo seu tratando de níveis de usuário. Por exemplo, como renderizar dinamicamente o que cada usuário poderá acessar numa navbar ou side-menu etc...

[@TheDW0rd]

De fato seria excelente se pudesse falar de ACL

[@carlobatera]

Show Diego. Como sempre nos ajudando com conteúdo de qualidade.

[@douglasoliveira8789]

Muito bom, parabéns Rocketseat!!!

[@rocketseat]

Valeu demais, Douglas! 💜

[@brunorafael9400]

Ótimo conteudo, parabéns! Seria bacana também mostrar como é o funcionamento utilizando o React Navigation no RN.

[@rocketseat]

Fala Bruno, beleza? Falo sobre isso nesse post do nosso blog: blog.rocketseat.com.br/fluxo-de-autenticacao-com-react-native/

[@felipesartor3548]

Muito bom. Sempre didático e simples de entender.

[@brunoaderaldo7490]

Show, tava precisando de algumas respostas sobre esse tema, ajudou muito!!

[@braddoidao8818]

Muito bom mesmo, ótima explicação. Seria fera de mais se tu fizesse uma mini app e usasse o conceito do "Lembre-me", dando um refresh token caso o usuário tenha marcado essa opção após o tempo de expiração do token.

Muito bacana Diego Fernandes e equipe da Rocketseat. Como o Diego comenta no final do vídeo, mando aqui minha observação. Gostaria de aprofundar mais nesta questão de autenticação, principalmente com relação a perfis de usuários, ou seja, a aplicação tem comportamento diferente para cada tipo de usuário, o administrador vê tudo, o usuário comum só acessa e acompanha, etc. O vídeo é de 2018, caso tenham algum material sobre isso e puderem compartilhar, agradeço. Grande abraço e parabéns pelo material de qualidade. Sávio Bueno Brasília/DF

[@rocketseat]

Faala Sávio! Na verdade está na lista de sugestões para fazermos um novo! Quem sabe em breve sai sim! 💜

[@GabrielNascimentoSouza]

Tô curtindo bastante as aulas, continue falando mais sobre react native, ta super Massa 🤘

[@jorgevaldemardasilva2206]

Parabéns, estou amando aprender tudo isso!!! esse conteúdo é maravilhoso!!!

[@bodon777]

BRABO DEMAIS DIEGO COMO SEMPRE

[@marceloolate8192]

Top!! Diego!! parabéns!! exemplo top... me incentivou nas ideias... vlw guri..

[@guifeliper]

Como sempre RocketSeat sendo genial no conteúdo!!! Vocês podem exemplificar mais com um exemplo no Backend? Talvez na semana Oministack por ser algo mais longo? Muito obrigado Rocketseat!

[@paulinhosupriano]

Muito interessante. Poderia fazer um vídeo efetuando uma build da aplicação em React em uma hospedagem real, exemplo hostinger, hostgator algo do tipo.

[@lucasousi]

Olá Diego, obrigado pelo vídeo . Seria possível fazer um tutorial com a melhor prática para de aplicar tratativas de roles, controle de acesso a rotas específicas, etc...? Obrigado

[@josimarjr.16]

Excelente trabalho, assisto todos seus videos, seria bom criar um video completo, com JWT, back-end, redux, navegação com autorização, tanto para web quanto para mobile..

[@carlosalexandrerramos106]

Meu amigo, desde já gostaria de parabenizá-lo pela série e gostaria que se possível, fizesse uma série mostrando isso na íntegra, com token, enviado token na requisição e etc... Abraços

Opa, esse vídeo vai me ajudar bastante quando somado ao conteúdo da 11ª Semana OmniStack

[@rocketseat]

💜💜💜

[@felipemiotto5409]

Muito bom, Diego! Valeu, TMJ!

[@souzaramon1348]

Muito bom essa possibilidade de redefinir o nome de um parametro :O

[@fellipegeraldopereirabotel4009]

Ótima aula! Seria ótimo você falar sobre autenticação no RN e o uso do React Navigation com essa autenticação.

[@rocketseat]

Fala Fellipe, falo sobre isso nesse post: blog.rocketseat.com.br/fluxo-de-autenticacao-com-react-native/

[@willianfelipelemes4327]

Gostei da explicação, o conteúdo é muito útil, obrigado e parabéns!

[@rocketseat]

Valeeeu pelo feedback, Willian! 💜

[@naldiocj8054]

Olá Diego Aula Muito Boa Gostaria que fosses mais a fundo usando um back end e fazendo as devidas validações

[@allefdouglas9693]

Mas e pra requisição assyncrona?

[@PauloHenrique-qh3li]

Diego gravando vídeo: a... Eu: Detalhes => Velocidade de reprodução = '0,75' kkkkkkkkkk Obrigado pelo conteúdo

[@carloscalixto9606]

kkkkkkkkkk né

[@josiclerlemesilva4062]

Muito bom eu adorei a vídeo aula!!!

[@fernando.graciano]

Tem algum video sobre Roles ? Tipo menu tal não vai aparecer para quem não é administrador

[@publicons]

meu nobre boa tarde! estou começando agora nesse mundo... vim do clipper kkk já tentei vários tutorias semelhantes. Se pressiona F5 perde tudo e precisa logar novamente. Se a gente usa o localStorage, qq um pode criar uma variável... como q a gente protege o acesso ao servidor toda vez q a pessoa tentar acessar qq endpoint, mesmo se ele (usuário mau intencionado) tiver burlado o localStorage?

[@principe.borodin]

Sem duvida, seria interessante falar sobre roles e permissions no react native, de preferencia kkk

[@lucascoelho7558]

Seria interessante mesmo, como a forma da implementação no back, mas acredito que a lógica da tratativa no front seja dessa forma.

[@rodrigolanes]

Eu gostaria que você falasse sobre evoluir essa implementação com controle por jwt, autenticação no frontend por alguma rede social e autorização no backend validando na mesma rede social se o token é válido.

[@lucascaires5003]

Acabei de fazer esse mesmo comentário, acho super válido essa abordagem!

[@carlosmatos1442]

Não muda nada se essa pratica for segura, todo segredo ta ali na função do isAuthenticated, é lá que você implementa por ex o cognito (Estou respondendo em 2021 pois essa duvida pode ser a mesma de varias pessoas)

[@marcospaulosilvaviana3160]

Excelente vídeo. Tenho uma pergunta: aproximadamente t=396 do vídeo vc fala em guardar as informações do token em localstorage, mas esta prática não é insegura? Obrigado.

[@pedrobatista370]

Tem as suas controvérsias, mas de forma geral é seguro fazê-lo. Enquanto um token armazenado no localstorage está sujeito a ataques XSS (Cross Site Scripting), um token armazenado em cookies está sujeito a ataques CSRF (Cross-site Request Forgery). Pessoalmente uso cookies visto que ataques CSRF são mais complexos de serem executados e, normalmente, menos sérios.

[@fjacyntho]

Diego, hj com Next continua assim a guarda de rotas com a autenticação?

[@Filhote24022012]

Simples rápido e prático. Muito bom.

[@cristhofermagno6258]

show demais! abre muitas idéias

[@bizil]

Muito bem explicado. Parabéns!

[@ramone09]

7:20 eu tenho já o backend criado retornando um token. Tem uma forma mais segura de fazer essa lógica de verificação além de usar apenas localStorage.getItem() e se fosse diferente de null prosseguiríamos pra dentro da aplicação?

[@Leo-fo3ur]

Conseguiu ai?

[@ramone09]

Opa... ainda não..me envolvi em outro projeto. Se conseguir te aviso 👍

[@ThiagoBrunet]

Como persistir o login por todas as abas do navegador, usando o sessionStorage em vez do LocalStorage??? existe uma maneira de fazer isso, ou o session não tem como sync as infos do login entre as abas... pois se abro uma nova aba ele pede o login novamente

[@fffeliciano]

Eu sei que o vídeo é meio velhinho, mas Diego, teria um equivalente para o TypeScript. Vários erros ocorreram comigo no TS.

[@rocketseat]

Faala, Fabrício! Não temos um conteúdo assim, mas podemos colocar na lista de sugestões! Valeeu 💜💜

[@whowhatwhyhow]

Se alguém passar por aqui e precisar, tem esse post no stack overflow stackoverflow.com/questions/53104165/implement-react-router-privateroute-in-typescript-project

[@lucascaires5003]

Opa Diego, e aí blz? Acho que nos dias atuais esta cada vez mais comum logarmos em sistemas web com o facebook login, criar uma api salvando o nome e email do usuário no banco e utilizando o próprio token do facebook para ter permissão de acesso. Acho que um video com abordando essa funcionalidade seria muito válido. Vlw.

[@tiagociceri]

Ótimo tema, uma sugestão seria fazer uma sequencia desse vídeo mostrando a construção do back-end para consumir dados de atutenticação e melhorar o front-end com o login. Parabéns pela sua didática, show de bola!!!

[@rocketseat]

Valeeeu pela sugestão, Anderson! 💜

[@robsondasilva9366]

Existe um vídeo sobre api que pode ser consumido por essa front... Mas o caso te manipular o token será muito bem vindo!

[@fagnerroberto5265]

Eu gostaria de prender tudo sobre o acl. Tem algum curso sobre isso?

[@thimor]

Se no meu sistema de login eu precise guardar os dados do usuario para envia-los em requisicoes ao back-end para suas acoes serem gravadas, alem de executar as consultas necessarias com informacoes do usuario, por exemplo: esse usuario é um cliente, é um fornecedor, é um funcionario... eu coloco essas recupero o usuario, alem do token, e coloco no local storage? é assim?

[@lourencorodrigo]

Seria legal você mostrar alguma coisa de Jest, por exemplo, testes de snapshots.

[@dimasdevspro9467]

Fala Diego! Codei aqui e lança um erro acusando que o PrivateRoute não é um Route componet. O que é recomendado fazer, neste caso?

[@MizaelClistion]

essa parte de ACL muito me interessa!! :)

[@f.aliceb.rangel9572]

O jeito que vc ensina faz coisa dificeis parecer facil e ate hoje so vi nesse youtube dois canais esse teu e o desse cara aqui kzbin.info/www/bejne/sHXQf4Gsgah-ftE, muitos sabem das coisa mas poucos sabem transmitir e vc e ele sao duas pessoas que SABEM MUITO! mais um inscrito pro seu canal sucesso ai!

[@jarodcavalcante]

E se eu precisar proteger uma rota, porem só se ela tiver protegida?. Tipo, ele verifica no banco de dados se é protegido ou não, ai caso seja, ele faz a autenticação..

[@RicardoCamisa]

Seria muito interessante fazeres um vídeo de permissões de usuário de acordo as suas roles

[@rocketseat]

Opa, sugestão anotadíssima, Ricardo! 💜

[@RicardoBarbosaSousa]

Se puder explica sobre papéis e permissões nesse mesmo.contexto. obrigado

[@AndersonLima40]

Fala Diego blz! Sujestão do próximo vídeo ACL no react js , ou então poderia acrescentar esse módulo no Goreact ficaria show parabéns pela didática abraço

[@rocketseat]

Fala Anderson, beleza? Estou vendo pra incluir isso ainda no curso assim como ACL, mas de qualquer forma posso tratar isso no KZbin também em breve. Valeu!

[@lucasousi]

Ótimo vídeo, ajudou bastante.

[@MaikBraga]

Diego, você poderia fazer um novo vídeo utilizando o useReducer ou useContext do HoC. Se tiver alguma coisa já com autorização e permissões seria legal! Abraços!

[@devborges]

Gostaria de videos seu sobre auth em react native banco sql

[@silviocardoso3943]

Tem como usar o react offline

[@limaand2009]

Teria algum exemplo com Sequelize + React + NodeJs usando autenticação ?

[@CalebeMachado]

Diego, boa tarde! Sei que o vídeo é antigo mas me bateu uma dúvida: O que seria mais interessante na aplicação, controlar as informações de quem está logado apenas pelo token na store, ter um contexto de autenticação ou usar o redux para armazenar essas informações. Estou implementando um app que se autentica pelo github com firebase, e não sei qual seria a melhor opção para a aplicação.

[@mario-cu6gq]

Excelente explicação !!

[@fjsilva3813]

Primeiro obrigado pelo video. Começando no mundo React agora, vindo do Angular e lá usar o authGuard com a opção CanActivate! Estava curioso pra saber com funciona aqui no ReactJS Diego tem algum exemplo com nextjs, teve mudança pra esse conceito de autenticação?

[@caixadelapismagico]

Como eu posso fazer para o usuário logar em account.exemplo.com e ser direcionado para outro.exemplo.com. Há como as informações (cookies, storage) conversarem entre os dois domínios? Grato, Bruno

[@ygorcruz1482]

Uma dúvida: o caminho /app seria um end point?

[@EvertonBattini]

Muito bom! Onde ficaria um componente de layout, com menu, topo e rodapé? (Que só poderia aparecer na parte privada da aplicação)

[@PedroHenrique-nc4zv]

na parte do h1 de quando ta autenticado. vc trocaria o h1 pelo jsx contendo td o menu, topo etc. serial legal exportar para outro arquivo e importar somente a funcao

[@Goj10001]

Como ficaria se essas funções fossem criadas em um componente statefull? Todos os exemplos de fluxo de autenticação que encontro são em stateless.

[@Anonimousxz]

Front-End fazendo autenticação?..será que isso da certo?

[@luisjb2]

Muito Obrigado! Ajudou muito!!!!

[@AnselmoLimamil]

Diego, haveria muitas modificações para implementar isso na renderização pelo servidor? Seria interessante também um vídeo ou mais vídeos de React renderizando no servidor! Seus conteúdos são ótimos... parabéns!

[@ribeiro.evandro]

Anselmo Lima seria irado mesmo ver isso com SSR... NextJS talvez fosse uma solução bem boa pra isso...

[@rocketseat]

Fala Anselmo, pretendo em breve pegar forte no NextJS assim como o Evandro falou :) E com certeza veremos sobre autenticação e autorização nesse conteúdo. Valeu!!

[@wesleybruno4241]

Se tiver mais de uma rota privada, tem que criar um componente privado para cada uma dessas rotas?

[@brunooliveira530]

Sim, o que vc pode fazer é criar lógicas que automatize isso. o coreui template faz um pouco isso, não chega a ser tão automatico assim porque ele tem as rotas todas no routes.js, mas talvez ajude. github.com/coreui/coreui-free-react-admin-template ele gerencia isso no App.js enviando para o DefaultLayout e o routes.js esta todas as rotas existes. você pode substituir por exemplo o Route do component Default laout de Route para o PrivateRoute que ele passou e todas rotas exceto as de login, cadastro e erro passaram pela autenticação.

[@lucasdias9503]

Tenho três páginas na minha aplicação, sendo que uma delas tem tamanho maior que as demais (feito com css). Quando utilizo o sistema de rotas, as demais páginas perdem a altura declarada no CSS e ficam, meio que "fixas" com a altura da página maior. Alguém passou pelo mesmo? Qual a solução?

[@Anonimousxz]

Seria legal fazer uma pagina simples usando bootstrap e essa parte de navegação, tendo por exemplo uma navbar com alguns botões de navegação, ficaria interessante e também daria para colocar um botão de login para poder se logar no sistema. Ou também uma integração básica com o front-end usando php com autenticação dos tokens. :D

[@joaooliveira8601]

Importante demais

[@rocketseat]

Valeeu pelo feedback João! 💜

[@HenriqueWeiand]

Ficou muito bom!

[@ariel_alves_dutra]

Valeu Diego!!

[@matheuscondini4457]

Dahoooooora Diego!!! Cara, qual tema que você usa no vscode?

[@rocketseat]

Fala Matheus, tema Dracula. Segue todo meu ambiente: rocketseat.com.br/blog/ambiente-desenvolvimento-javascript/

quando gero o build pro deploy ele não encontra a rota /app

[@luca0898]

Cara, tem como fazer um vídeo mostrando testes em react native? mock de serviços e teste de classes?

[@rocketseat]

Fala Luca, beleza? Posso dar uma introdução pra isso sim, mas temos esse conteúdo completo no nosso bootcamp online de React Native: rocketseat.com.br/gonative

[@jogatinandodevs]

qual a diferença entre as funções = () => () e = () => {} ?

[@rocketseat]

A primeira função com () serve pra você retornar um conteúdo JSX (HTML) diretamente, a segunda forma é quando você quer que a função tenha código Javascript dentro do corpo e não apenas um retorno JSX.

[@jogatinandodevs]

@@rocketseat vlw, mais uma que aprendi =) teria um curso de React do zero a produção? (tanto da parte front quanto o back end)

[@maximosdrr]

lanso a braba

[@rennovagenciadigital5913]

Qual é o terminal tema e configurações que está a usar adorei

[@rocketseat]

Explico aqui: blog.rocketseat.com.br/ambiente-desenvolvimento-javascript/

[@GustavoVianna]

Fala meu amigo, quero me especializar nessa linguagem, muito obrigado pelos vídeos são esclarecedores, gostaria de saber se teria como você gravar uma aula falando a respeito de notificações de Push, se é possível fazer isso através do react e como seria. Obrigado amigo.

[@rocketseat]

Fala Gustavo, notificações push web com ReactJS ou você se refere a mobile? Abração!

[@gabriel-sodre]

Primeiramente parabéns pelo conteúdo, só uma duvida, como ficaria as rotas aninhadas nesse modelo, usando um template com menu fixo sendo renderizado apenas o conteúdo central?

[@lucasousi]

Encontrou a resposta ?

[@didamendes]

O curso GoStack está nesse nível de rapidez ? Pois achei a velocidade rápida demais. Vc vai explicando executando o codigo, o legal seria explicar para que funciona e depois executar o codigo.

[@rocketseat]

Fala Diogo, esse vídeo descarta o conhecimento inicial de quem está visualizando. Nos bootcamps nós fazemos desde o básico para entender todo funcionamento. Abraço!

[@josiasalmeida2981]

Se alguem esta tendo problema ao acessar a rota privada mesmo estando "true" É só adicionar o path junto as props

[@giangamer1000]

Alguém ai sabe como verifico se o token é válido? Tipo, pego ele com o get item no local storage e depois como vejo se ele é verdadeiro? Uso laravel passport!

[@HaboFilme]

Diego, se você tivesse que escolher uma alternativa de backend pra uma Startup, usaria o Firebase ou preferiria criar o próprio backend com NodeJS?

[@rocketseat]

Pra uma startup? A que você conhece. Geralmente no caso de uma startup você vai estar criando seu MVP e precisa tirar rápido do papel, ficar tentando pensar em uma ferramenta para escalar o projeto é ruim nesse estágio. Utilize a ferramenta que você conhece e deixe pra se preocupar com isso quando já tiver gente comprando seu produto :)

[@JohnEsrom]

Sempre tive uma dúvida quanto a autenticação no Front End entre outras coisas que envolvem segurança. É realmente viável fazer isso no front end, controle de autenticação, ACL.., pois se torna muito veraneável a burlar o sistema. Sempre fiz ACL e controle de autenticação no Backend com Laravel ou Spring Boot. Se numa aplicação ReactJs eu utilizar JWT, e se alguém conseguir capturar meu token, ele conseguirá realizar requisições no meu usuário. Pelo amor de Deus não estou desmerecendo o ReactJs, até porque eu estava aprendendo angular e desistir pra aprender React, queria só entender como seria essa parte de segurança no react.

[@augustomentz1802]

Sim, o token pode ser utilizado por outra pessoa, mas para isso existem outras práticas, utilizar servidores https para dificultar a captura do token, tokens com validade curta, por mais que algum terceiro capture o token não terá muito tempo para utilizá-lo, por exemplo se o token estiver sendo transmitido através de um protocolo https, até o token ser encontrado ele pode já ter expirado. Ou até mesmo controlar do backend se as requisições estão sendo utilizadas de múltiplos devices.