Pra quem viu o vídeo recentemente (26/09), alterar o Switch para Routes e no Router, existe uma propriedade Element para poder renderizar o componente ali dentro.
ei man o meu da um erro no Protectedlayout na rota , ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or acho que é por causa da atualização do react-router-dom , saberia como me ajudar ?
Conheci você dentro do curso da Rocketseat, e comecei a consumir seus conteúdos que são ótimos, principalmente pelo fato de se aproximar mais aos problemas reais de um dia a dia de um dev !! Muito obrigado por compartilhar seu conhecimento !
Para aqueles que estiverem com o problema da proteção de tela "ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or " Isso aqui deu certo pra mim *(Usando versões do react e typescript de HOJE em 02/02/2023 caso futuramente algo mude e não de mais certo)* 👇
Basicamente é envolver o elemento com o ProtectedLayout 👍
Pra quem está com problemas com o useHistory, ele foi substituido no react-router-dom v6, agora deve ser usado o useNavigate(). Ex: import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/profile'); Não precisa mais do "push". Espero ter ajudado!
João, muito obrigado por essa aula tão didática, você me ajudou bastante, nunca conseguir criar um sistema de login, através de sua aula conseguir, muito obrigado mesmo!
Achei muito bom a abordagem, eu sou novo no react mas cara, o unico problema é que meu componente que controla as rotas protegidas após logado ele sai pós dar reload na pagina, por conta do hook do auth demorar para retornar os email ai ele vem undefined nos primeiros carregamentos
Parabéns pela aula! Excelente. Fiz o passo a passo e funcionou certinho! Percebi que quando dou um F5 ainda não deu tempo do contexto buscar o usuário na LocalStorage, ai o site vai pra pagina de login e já volta pra rota protegida, coisa de fração de segundo. Alguma ideia de como tratar isso?
Você pode adicionar um novo state chamado "isLoading", que começa a true... e só fica a false após verificar a local storage. Dessa forma, enquanto o loading for true, você mostra um spinner, ou a tela em branco e só depois redireciona.
Olá João, gostei muito da aula, so na parte de form que me confundi um pouco, eu uso styled-components e pra pegar o valor da area digite pelo usario uso o hook do useState usando um value no input tambem, com faco pra trazer isso nessa parte
Que video mais maravilhoso do universo...quanta organização...amei era exatamente o que eu procurava há dias e não encontrava....se tiver cursos na udemy ou outro local me marca por favor... só estou com uma dúvida agora o Switch do react-router-dom virou o Routes, e da erro no ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or como posso fazer ? obrigada Amei demais esse video, excelente didatica
Olá Débora! Primeiramente muito obrigado pelo comentário! Se quiser ver esse erro com mais detalhes, entra no grupo do telegram abaixo, e faz a pergunta lá que posso te ajudar :) new.joaobibiano.com.br/links No mesmo site você irá encontrar o link para a turma do meu curso que abrirá na segunda-feira. Seja bem vinda!
Manja muito. Porém pra iniciante como eu ficou muito termo e informação que desconheço. Se tiver um outro vídeo que seja para um iniciante no react, agradeço...
meu nobre! estou começando neste mudno de reactjs/nodejs há menos de 1 mês. eu vim do clipper e não sabia nada. primeiro fui pro delphi q é semelhante ao q já estou acostuamdo. consegui fazer um servidor q responde requisições usando o firebird 3.0 e o meu front-end (mobile/desktop), já até está em produção na google play console (play store). Daí vi a necessidade de se entrar dentro do iphone com meu app e a forma mais econômica q encontrei fui fazendo uma versão web do meu app. Enquanto q no app nenhum usuário vê as rotas, diferentemente no navegador, apesar de a gente personalizar, mas, elas ficam visíveis. Não uso JWT, mas, somente Basic Auth q está no servidor e dentro do mobile/desktop. Pergunto: como q protejo minhas rotas, mesmo se o usuário conseguir burlar o localStorage com o mínimo de intervenção em meu servidor e consequentemente não atrapalhar o mobile/android já publicados? gratidão antecipadamente, se vc ou alguém puder me ajudar.
Fala João! Vc é muito fera cara. Eu estou desesperado para encontrar uma solução para passar parâmetros entre as telas que estão dentro das rotas protegidas. Não tem nada a respeito na documentação oficial do 'react-router-dom' e nenhum conteúdo sobre isso aqui no TH-cam. Consigo fazer a passagem de parâmetros se o componente da tela estiver direto no , mas não sei como fazer essa passagem com o componente Protected encapsulando a tela
LocalStorage armazena os valores das chaves em string, vc se equivocou quando disse que estava convertendo para json no minuto 29:40, mas ótimo vídeo e didática.
Fala João Bibiano, tranquilo ? fique meio confuso, acredito que seja uma coisa simples a minha dúvida. Mas fiquei confuso na hr que foi feita a autenticação, utilizando o método POST. No caso, este post para "/login" é um método da API adaptada para autenticação, visto que o método get tornariam visíveis na URL as informações do usuário ? Caso, nesta API, houvesse um método POST para "/products", funcionaria normalmente, sendo o POST usado para armazenar no banco de dados? Sendo este POST "/login" para autenticação e um POST "register" para registro do usuário?
Parabéns pela aula João! Mas proteger a rota caso tenha um dado no localStorage, que é o que está sendo feito não muito seguro, o que recomendaria para isso?
Se está no frontend, está exposto. Não há alternativa. A segurança deve ser feita dos dois lados, mas principalmente no backend e no business garantindo que cada token tenha a quantidade de permissões corretas.
Eae man , conteúdo incrível. eu to tento um erro que é ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or na rota , poderia me ajudar
Parabéns João pela didatica, fantastico! Só queria lhe fazer uma pergunta, após realizar o login como faço para o usuáro não retornar para tela de login caso ele mude a url para "/login"? Somente ir para a tela de login se clicar em um botão logout/sair? Obrigado :)
Acho que poderia gerar um bug, e se os dados do localStorage estiverem prenchidos com dados falsos... Voce acha que seria melhor fazer com nextjs usando o middleware da versão 13 e verificando o token com o jwt verify a cada mudança de rota?
Aparentemente tem um problema com autenticação de múltiplas rotas com o código. Usei exatamente o mesmo código de contexto pra autenticar aqui, e mesmo com todas as variáveis do contexto corretas, quando eu tento acessar uma segunda rota autenticada a partir de uma já autenticada, a rota não renderiza.
Pedro, isso provavelmente tem a ver com a configuração do react router que tu usaste. Caso não consiga resolver, entra no grupo do telegram, tento te ajudar por lá.
Alguém tem o link do vídeo atualizado do react-router-dom? estou empancado, não consigo avançar pq to com problema de CORS ao fazer a requisição. Tentei atualizando o código pra nova versão do router dom mas meu conhecimento é limitado em apis pra resolver a rejeição da chamada.
Eai Nikolas! Muito obrigado pelo feedback! Tenho um curso sim, as inscrições vão abrir em breve Se cadastra nesse site aqui www.joaobibiano.com.br/inscricao-desafio
Joao eu tenho uma duvida que seria mais pro backend, essa questao do logout é realmente feita dessa forma em grandes empresas so setando o token para vazio ?, queria fazer minha auth da forma mais correta possível e me surgiu essa duvida porque o token ira continuar válido para a api.
Boa noite joão, eu segui seu tutorial e deu certo, mas quando chegou na config.headers.Authorization = user?.token; ele da erro e fala que o Object is "possibly" undefined
Tive problema com o antd comentei a linha //import "antd/dist/antd.css", mas não faço idéia o que ocorre, o arquivo não existe na past dist em node_modules, após comentar rodou normal
Fala Romi! A primeira impressão é essa, mas depois de um tempo, você percebe que fica super produtivo, e te evita aqueles erros bobos que só encontras em produção. Além disso, quando trabalhamos em equipe, o typescript documenta muito melhor o código, fazendo com que, a produtividade da equipe também cresça.
@@joaobibiano sim, eu te entendo, mas ainda estou naquela fase do "eu odeio Typescript", kkkkkkk, mas de qualquer jeito, eu tenho fazer esse typescript entrar no meu cérebro !!, porque talvez no meio do ano, estarei mudando para Portugal ou Holanda para trabalhar como Frontend, mas valeu pelo feedback. 😎👍
Galera, a versão do React Router mudou, vou tentar gravar um novo vídeo! Até lá, caso tenham problemas, entrem na comunidade do discord que ajudo vocês joaobibiano.com.br/discord
agora no react-router-dom não se usa mais switch ne e sim o routes, um pequeno adento pra quem ta vendo a aula e ta gostando como eu
Pra quem viu o vídeo recentemente (26/09), alterar o Switch para Routes e no Router, existe uma propriedade Element para poder renderizar o componente ali dentro.
ei man o meu da um erro no Protectedlayout na rota , ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or acho que é por causa da atualização do react-router-dom , saberia como me ajudar ?
@@izaelgomes1457
@@raniererodriguesgomes7182 nice
@@raniererodriguesgomes7182 valeu mano
Conheci você dentro do curso da Rocketseat, e comecei a consumir seus conteúdos que são ótimos, principalmente pelo fato de se aproximar mais aos problemas reais de um dia a dia de um dev !! Muito obrigado por compartilhar seu conhecimento !
Para aqueles que estiverem com o problema da proteção de tela "ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or "
Isso aqui deu certo pra mim *(Usando versões do react e typescript de HOJE em 02/02/2023 caso futuramente algo mude e não de mais certo)* 👇
Basicamente é envolver o elemento com o ProtectedLayout 👍
Valeu!!! se alguém tiver mais dúvidas manda la na comunidade joaobibiano.com/discord
Obrigado, isso já estava me travando há horas.
Pra quem está com problemas com o useHistory, ele foi substituido no react-router-dom v6, agora deve ser usado o useNavigate().
Ex:
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/profile');
Não precisa mais do "push".
Espero ter ajudado!
valeu, eu já estava perdido aqui kkkkkkk
João, muito obrigado por essa aula tão didática, você me ajudou bastante, nunca conseguir criar um sistema de login, através de sua aula conseguir, muito obrigado mesmo!
Prezado Joao, eu ja assisti muitas aulas na vida, mas essa sua aqui foi demais. Sensacional. Parabens ! Continue compartilhando seu conhecimento.
Fala Hebert! Obrigado pelo feedback, abraço
Didática de explicação incrivelemente incrível! Valeu pela grande ajuda João
Valeu pelo feedback Tiago!
Parabéns pelos seus vídeos, muito bem explicado. 👏👏👏👏👏👏👏👏👏
MUITO OBRIGADO POR ESSA AULA!
muito top, obrigado pela aula e o humor!!
valeu pelo feedback Márcio!
Muito bom! gostei do modo que vc tratou as typagens. Parabéns João.
Opa! Que bom Darlan. Typescript é realmente muito importante.
legal colega, deixei salvo aqui amanhã cedo vou tentar fazer esse projeto.
Aula INSANA !!!!!!!!!!!!!!!!!!!
Cara, te conheci hoje e já te amo kkkkkk
Aula sensacional!!! Muito obrigado
Fala @catetoscraft! fico feliz que gosto...
Sensacional ! parabéns pela didática !
Valeu Kaik, já aproveita e se inscreve no canal
Achei muito bom a abordagem, eu sou novo no react mas cara, o unico problema é que meu componente que controla as rotas protegidas após logado ele sai pós dar reload na pagina, por conta do hook do auth demorar para retornar os email ai ele vem undefined nos primeiros carregamentos
esse cara é sensacional, parabéns.
esse video ajudou muito numa estrutura que eu precisava montar de contextApi, parabéns ai pelo conteúdo e só voaaa :D
Obrigado pelo comentário Anna!
Parabéns pela aula! Excelente. Fiz o passo a passo e funcionou certinho!
Percebi que quando dou um F5 ainda não deu tempo do contexto buscar o usuário na LocalStorage, ai o site vai pra pagina de login e já volta pra rota protegida, coisa de fração de segundo. Alguma ideia de como tratar isso?
Você pode adicionar um novo state chamado "isLoading", que começa a true... e só fica a false após verificar a local storage.
Dessa forma, enquanto o loading for true, você mostra um spinner, ou a tela em branco e só depois redireciona.
Parabéns ,
CARA como eu demorei pra achar esse canal? otimo conteudo bem profissional traga mais pfvr vou maratonar seus codigos skskks
Valeu pelo comentário Rafael! Obrigado
Ótima didática.
Valeu Wander! Que bom que curtiu, não deixa de acompanhar!
Olá João, gostei muito da aula, so na parte de form que me confundi um pouco, eu uso styled-components e pra pegar o valor da area digite pelo usario uso o hook do useState usando um value no input tambem, com faco pra trazer isso nessa parte
Obrigado!
Aproveita e se inscreve no canal para não perder os próximos!
Entra no grupo do discord que te ajudo por lá!
joaobibiano.com.br/discord
Top. Cheguei atrasado pra live, mais ainda bem que está grávida. Valeu 👍👍👍
Parabéns pelo filho, kkkkk
Que video mais maravilhoso do universo...quanta organização...amei era exatamente o que eu procurava há dias e não encontrava....se tiver cursos na udemy ou outro local me marca por favor...
só estou com uma dúvida agora o Switch do react-router-dom virou o Routes, e da erro no ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or como posso fazer ? obrigada
Amei demais esse video, excelente didatica
e como fala no inicio do video, isso sim foi feito com muito profisionalismo, tem uns videos que parece que nunca fizeram um grande sistema.
Olá Débora!
Primeiramente muito obrigado pelo comentário!
Se quiser ver esse erro com mais detalhes, entra no grupo do telegram abaixo, e faz a pergunta lá que posso te ajudar :)
new.joaobibiano.com.br/links
No mesmo site você irá encontrar o link para a turma do meu curso que abrirá na segunda-feira. Seja bem vinda!
O meu também ta dando esse erro, você conseguiu resolver
muito bom
Manja muito. Porém pra iniciante como eu ficou muito termo e informação que desconheço. Se tiver um outro vídeo que seja para um iniciante no react, agradeço...
meu nobre! estou começando neste mudno de reactjs/nodejs há menos de 1 mês. eu vim do clipper e não sabia nada. primeiro fui pro delphi q é semelhante ao q já estou acostuamdo. consegui fazer um servidor q responde requisições usando o firebird 3.0 e o meu front-end (mobile/desktop), já até está em produção na google play console (play store).
Daí vi a necessidade de se entrar dentro do iphone com meu app e a forma mais econômica q encontrei fui fazendo uma versão web do meu app. Enquanto q no app nenhum usuário vê as rotas, diferentemente no navegador, apesar de a gente personalizar, mas, elas ficam visíveis. Não uso JWT, mas, somente Basic Auth q está no servidor e dentro do mobile/desktop.
Pergunto: como q protejo minhas rotas, mesmo se o usuário conseguir burlar o localStorage com o mínimo de intervenção em meu servidor e consequentemente não atrapalhar o mobile/android já publicados?
gratidão antecipadamente, se vc ou alguém puder me ajudar.
ah! isso funciona no JSX (JavaScript)? vc tá usando TSX (TypeScript)
Meu deus aprendi muito, aquele operador ?? nunca tinha visto
Fala Júnior! Valeu pelo feedback ;) É só o começo...
a parte do authprovider e o browser router podemos colcar no index.tsx ja englobando tudo não teria problema certo?
Fala João! Vc é muito fera cara. Eu estou desesperado para encontrar uma solução para passar parâmetros entre as telas que estão dentro das rotas protegidas. Não tem nada a respeito na documentação oficial do 'react-router-dom' e nenhum conteúdo sobre isso aqui no TH-cam. Consigo fazer a passagem de parâmetros se o componente da tela estiver direto no , mas não sei como fazer essa passagem com o componente Protected encapsulando a tela
Entra no discord que te ajudo lá
Https://joaobibiano.com/discord
Muito bom.
Quais extensões vc usa? Quando vc salva o editor colocar ponto e vírgula e identa.
Essa é o prettier!
LocalStorage armazena os valores das chaves em string, vc se equivocou quando disse que estava convertendo para json no minuto 29:40, mas ótimo vídeo e didática.
Ops, verdade! Eu fiz o código certo, mas falei errado. Valeu pelo heads up.
Fala João Bibiano, tranquilo ? fique meio confuso, acredito que seja uma coisa simples a minha dúvida. Mas fiquei confuso na hr que foi feita a autenticação, utilizando o método POST. No caso, este post para "/login" é um método da API adaptada para autenticação, visto que o método get tornariam visíveis na URL as informações do usuário ? Caso, nesta API, houvesse um método POST para "/products", funcionaria normalmente, sendo o POST usado para armazenar no banco de dados? Sendo este POST "/login" para autenticação e um POST "register" para registro do usuário?
isso mesmo
Parabéns pela aula João!
Mas proteger a rota caso tenha um dado no localStorage, que é o que está sendo feito não muito seguro, o que recomendaria para isso?
Se está no frontend, está exposto. Não há alternativa. A segurança deve ser feita dos dois lados, mas principalmente no backend e no business garantindo que cada token tenha a quantidade de permissões corretas.
muito bom!
obrigado pelo comentário bruna :)
Show!!!
Thanks!
To tentando desenvolver um projeto parecido sem usar o antd e até agr n entendi como vc captura os valores dos inputs
Também queria saber essa parte, talvez essa biblioteca que ele utilizar já trata isso.
Entra no grupo do discord que eu te ajudo por lá ;) joaobibiano.com.br/discord
Eae man , conteúdo incrível. eu to tento um erro que é ProtectedLayout [ProtectedLayout] is not a component. All component children of must be a or na rota , poderia me ajudar
Olá! Entra na nossa comunidade para tentarmos te ajudar por lá joaobibiano.com/discord
Um tutorial de react que ja começa com TypeScript: Like & Subscribe imediato.
Parabéns João pela didatica, fantastico! Só queria lhe fazer uma pergunta, após realizar o login como faço para o usuáro não retornar para tela de login caso ele mude a url para "/login"? Somente ir para a tela de login se clicar em um botão logout/sair?
Obrigado :)
Coloca um useEffect com redirect no login
Cheguei no canal agora. Tem os vídeos 006 e 005...?
Olá! Está dividido aleatoriamente, se tiver alguma dúvida específica manda lá no grupo do discord ! www.joaobibiano.com.br/discord
Acho que poderia gerar um bug, e se os dados do localStorage estiverem prenchidos com dados falsos... Voce acha que seria melhor fazer com nextjs usando o middleware da versão 13 e verificando o token com o jwt verify a cada mudança de rota?
Sim
Aparentemente tem um problema com autenticação de múltiplas rotas com o código.
Usei exatamente o mesmo código de contexto pra autenticar aqui, e mesmo com todas as variáveis do contexto corretas, quando eu tento acessar uma segunda rota autenticada a partir de uma já autenticada, a rota não renderiza.
Pedro, isso provavelmente tem a ver com a configuração do react router que tu usaste.
Caso não consiga resolver, entra no grupo do telegram, tento te ajudar por lá.
assistindo do futuro aqui aeee heheh
Alguém tem o link do vídeo atualizado do react-router-dom? estou empancado, não consigo avançar pq to com problema de CORS ao fazer a requisição. Tentei atualizando o código pra nova versão do router dom mas meu conhecimento é limitado em apis pra resolver a rejeição da chamada.
Excelente vídeo, salvou a sprint hueheuehe. Você teria algum curso? Se sim, pode me mandar o link que gostaria de ser aluno :)
Eai Nikolas!
Muito obrigado pelo feedback!
Tenho um curso sim, as inscrições vão abrir em breve
Se cadastra nesse site aqui www.joaobibiano.com.br/inscricao-desafio
Valeu!
Olá Luciano! Eu que agradeço por seu apoio! E apoio de verdade :) obrigado
É possível faz a mesma coisa com o Next.js?
e se eu quiser usar os cookies do que o localStorage, da para fazer?
Dá sim Jackson! Vou ver se trago um vídeo sobre para o Canal
Joao eu tenho uma duvida que seria mais pro backend, essa questao do logout é realmente feita dessa forma em grandes empresas so setando o token para vazio ?, queria fazer minha auth da forma mais correta possível e me surgiu essa duvida porque o token ira continuar válido para a api.
Não, na vida real é muito muito mais complexo, dá uma olhada nessa solução auth0.com/
Boa noite joão, eu segui seu tutorial e deu certo, mas quando chegou na config.headers.Authorization = user?.token; ele da erro e fala que o Object is "possibly" undefined
Olá! Entra no grupo do discord e eu te ajudo por lá
Tive o mesmo problema
Tive problema com o antd comentei a linha //import "antd/dist/antd.css", mas não faço idéia o que ocorre, o arquivo não existe na past dist em node_modules, após comentar rodou normal
Deve ser por causa da versão do antd que mudou, experimenta usar a mesma que eu usei
faz um com refresh token
+1 inscrito.
✌
qual a o hock a se ultilizar no router dom v6 ja que nao tem o usehistory ?
useLocation
Professor, muito bom! Como faço pra quando tem 3 cargos diferentes?
Dá uma olhada na lib casl. Se tiver alguma dúvida manda no discord www.joaobibiano.com.br/discord
Esse mesmo processo funciona pro React Native? pra criar um App
Mesma coisa !
Obrigado, mas cadê o código meu jovem?
Olá Pedro! Provavelmente o código foi enviado no grupo do telegram. Como não é muito, fique a vontade para copiar.
Opa joao tem link no github com o projeto?
Desse projeto não salvei matheus, mas como não é muito código, acho que tá tranquilo :)
No meu deu o seguinte erro:
TypeError: auth.authenticate is not a function
To com o mesmo problema, não consegui descobrir ainda o que tá errado D:
@@marcelafeldens2603 Eu consegui, só não lembro como, vou olhar no meu código
@@marcelafeldens2603 consegui resolver, vou ver no meu código e te passar como resolvi
39:26
Esse Typescript , faz um bagunça e complica demais o código !! 🙄
Fala Romi!
A primeira impressão é essa, mas depois de um tempo, você percebe que fica super produtivo, e te evita aqueles erros bobos que só encontras em produção.
Além disso, quando trabalhamos em equipe, o typescript documenta muito melhor o código, fazendo com que, a produtividade da equipe também cresça.
@@joaobibiano sim, eu te entendo, mas ainda estou naquela fase do "eu odeio Typescript", kkkkkkk, mas de qualquer jeito, eu tenho fazer esse typescript entrar no meu cérebro !!, porque talvez no meio do ano, estarei mudando para Portugal ou Holanda para trabalhar como Frontend, mas valeu pelo feedback. 😎👍
tive um erro no post da Api
Opa, entra na comunidade que a gente te ajuda por lá joaobibiano.com/discord
na verdade ele só queria usar a carinha: ( ' u ' )
Nice!
Galera, a versão do React Router mudou, vou tentar gravar um novo vídeo! Até lá, caso tenham problemas, entrem na comunidade do discord que ajudo vocês
joaobibiano.com.br/discord
muito bom!