Criando um sistema de Login com React, Context API e REST

[@juanlucas2013]

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

[@brenocarvalho9008]

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!

[@Baronetee]

valeu, eu já estava perdido aqui kkkkkkk

[@gabrielsampaio1125]

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.

[@izaelgomes1457]

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 ?

[@raniererodriguesgomes7182]

@@izaelgomes1457

[@raimundoneto4557]

@@raniererodriguesgomes7182 nice

[@brunocotto]

@@raniererodriguesgomes7182 valeu mano

[@ONobreRei]

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 👍

[@joaobibiano]

Valeu!!! se alguém tiver mais dúvidas manda la na comunidade joaobibiano.com/discord

[@fabioportela-c2o]

Obrigado, isso já estava me travando há horas.

[@lucasmauricioalves8151]

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 !

[@hebert2s]

Prezado Joao, eu ja assisti muitas aulas na vida, mas essa sua aqui foi demais. Sensacional. Parabens ! Continue compartilhando seu conhecimento.

[@joaobibiano]

Fala Hebert! Obrigado pelo feedback, abraço

[@channeldel]

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!

[@tiagoborges7297]

Didática de explicação incrivelemente incrível! Valeu pela grande ajuda João

[@joaobibiano]

Valeu pelo feedback Tiago!

[@darlanvieira6814]

Muito bom! gostei do modo que vc tratou as typagens. Parabéns João.

[@joaobibiano]

Opa! Que bom Darlan. Typescript é realmente muito importante.

[@juniormelo26]

Parabéns pelos seus vídeos, muito bem explicado. 👏👏👏👏👏👏👏👏👏

[@annakarolinafranz5946]

esse video ajudou muito numa estrutura que eu precisava montar de contextApi, parabéns ai pelo conteúdo e só voaaa :D

[@joaobibiano]

Obrigado pelo comentário Anna!

[@GabrielFerreira-mi2xx]

Cara, te conheci hoje e já te amo kkkkkk

[@digitalhdr7768]

legal colega, deixei salvo aqui amanhã cedo vou tentar fazer esse projeto.

[@sinhuu.s2]

muito top, obrigado pela aula e o humor!!

[@joaobibiano]

valeu pelo feedback Márcio!

[@rafaelcaixeta3970]

CARA como eu demorei pra achar esse canal? otimo conteudo bem profissional traga mais pfvr vou maratonar seus codigos skskks

[@joaobibiano]

Valeu pelo comentário Rafael! Obrigado

[@confusosk8]

MUITO OBRIGADO POR ESSA AULA!

[@SLZGAM3R]

Aula INSANA !!!!!!!!!!!!!!!!!!!

[@bobtekilatizidiones3346]

Top. Cheguei atrasado pra live, mais ainda bem que está grávida. Valeu 👍👍👍

[@pedrocarvalho4146]

Parabéns pelo filho, kkkkk

[@kaiksilva5422]

Sensacional ! parabéns pela didática !

[@joaobibiano]

Valeu Kaik, já aproveita e se inscreve no canal

[@RiltonFilho]

Parabéns ,

[@brunanunes6987]

muito bom!

[@joaobibiano]

obrigado pelo comentário bruna :)

[@antonioedinadson]

esse cara é sensacional, parabéns.

[@pedrolsp2]

Aula sensacional!!! Muito obrigado

[@joaobibiano]

Fala @catetoscraft! fico feliz que gosto...

[@matheusfranco3331]

muito bom

[@junior1992a]

Meu deus aprendi muito, aquele operador ?? nunca tinha visto

[@joaobibiano]

Fala Júnior! Valeu pelo feedback ;) É só o começo...

[@AlexSilva-mk6ls]

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?

[@joaobibiano]

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.

[@debora468]

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

[@debora468]

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.

[@joaobibiano]

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!

[@izaelgomes1457]

O meu também ta dando esse erro, você conseguiu resolver

[@wanderfernandes9434]

Ótima didática.

[@joaobibiano]

Valeu Wander! Que bom que curtiu, não deixa de acompanhar!

[@victorSantos05]

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

[@juanlucas2013]

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

[@joaobibiano]

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

[@lucrod123]

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.

[@joaobibiano]

Ops, verdade! Eu fiz o código certo, mas falei errado. Valeu pelo heads up.

[@lukinhas42807]

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...

[@lucianoferreira8620]

Valeu!

[@joaobibiano]

Olá Luciano! Eu que agradeço por seu apoio! E apoio de verdade :) obrigado

[@viniciusm.m.7822]

Show!!! Thanks!

[@ipdmartins]

Muito bom.

[@raphaelcordeiro4798]

To tentando desenvolver um projeto parecido sem usar o antd e até agr n entendi como vc captura os valores dos inputs

[@carlosoliveira7357]

Também queria saber essa parte, talvez essa biblioteca que ele utilizar já trata isso.

[@joaobibiano]

Entra no grupo do discord que eu te ajudo por lá ;) joaobibiano.com.br/discord

[@nicks_me]

Excelente vídeo, salvou a sprint hueheuehe. Você teria algum curso? Se sim, pode me mandar o link que gostaria de ser aluno :)

[@joaobibiano]

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

[@juanlucas2013]

a parte do authprovider e o browser router podemos colcar no index.tsx ja englobando tudo não teria problema certo?

[@ninjaayy]

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?

[@joaobibiano]

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.

[@publicons]

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.

[@publicons]

ah! isso funciona no JSX (JavaScript)? vc tá usando TSX (TypeScript)

[@izaelgomes1457]

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

[@joaobibiano]

Olá! Entra na nossa comunidade para tentarmos te ajudar por lá joaobibiano.com/discord

[@DeyvsonAguiar]

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.

[@wallacepassos6308]

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?

[@joaobibiano]

isso mesmo

[@kleydsonpessanha9023]

39:26

[@WillianMattos]

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 KZbin. 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

[@joaobibiano]

Entra no discord que te ajudo lá Https://joaobibiano.com/discord

[@youreale]

Um tutorial de react que ja começa com TypeScript: Like & Subscribe imediato.

[@joaomateus2634]

faz um com refresh token

[@LEO0000036666]

Quais extensões vc usa? Quando vc salva o editor colocar ponto e vírgula e identa.

[@joaobibiano]

Essa é o prettier!

[@feldevmoura]

Cheguei no canal agora. Tem os vídeos 006 e 005...?

[@joaobibiano]

Olá! Está dividido aleatoriamente, se tiver alguma dúvida específica manda lá no grupo do discord ! www.joaobibiano.com.br/discord

[@pedrobrun8075]

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.

[@joaobibiano]

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á.

[@joaquimucolore3230]

+1 inscrito.

[@joaobibiano]

✌

[@eemr2]

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 :)

[@joaobibiano]

Coloca um useEffect com redirect no login

[@FabianTecBR]

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

[@joaobibiano]

Deve ser por causa da versão do antd que mudou, experimenta usar a mesma que eu usei

[@jacksonteruya1032]

É possível faz a mesma coisa com o Next.js? e se eu quiser usar os cookies do que o localStorage, da para fazer?

[@joaobibiano]

Dá sim Jackson! Vou ver se trago um vídeo sobre para o Canal

[@tritnvmuinstrio5048]

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

[@joaobibiano]

Olá! Entra no grupo do discord e eu te ajudo por lá

[@EuSouOTelmo]

Tive o mesmo problema

[@edu_amr]

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?

[@joaobibiano]

Sim

[@gremioagrin]

Esse mesmo processo funciona pro React Native? pra criar um App

[@joaobibiano]

Mesma coisa !

[@mtfevlr]

Professor, muito bom! Como faço pra quando tem 3 cargos diferentes?

[@joaobibiano]

Dá uma olhada na lib casl. Se tiver alguma dúvida manda no discord www.joaobibiano.com.br/discord

[@joaomateus2634]

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.

[@joaobibiano]

Não, na vida real é muito muito mais complexo, dá uma olhada nessa solução auth0.com/

[@gustavogudden778]

qual a o hock a se ultilizar no router dom v6 ja que nao tem o usehistory ?

[@joaobibiano]

useLocation

[@pedrocosta9769]

Obrigado, mas cadê o código meu jovem?

[@joaobibiano]

Olá Pedro! Provavelmente o código foi enviado no grupo do telegram. Como não é muito, fique a vontade para copiar.

[@silvaneto_]

No meu deu o seguinte erro: TypeError: auth.authenticate is not a function

[@marcelafeldens2603]

To com o mesmo problema, não consegui descobrir ainda o que tá errado D:

[@silvaneto_]

@@marcelafeldens2603 Eu consegui, só não lembro como, vou olhar no meu código

[@silvaneto_]

@@marcelafeldens2603 consegui resolver, vou ver no meu código e te passar como resolvi

[@romimaximus]

Esse Typescript , faz um bagunça e complica demais o código !! 🙄

[@joaobibiano]

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.

[@romimaximus]

@@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. 😎👍

[@reynaldo_Costa]

tive um erro no post da Api

[@joaobibiano]

Opa, entra na comunidade que a gente te ajuda por lá joaobibiano.com/discord

[@Holicax]

Opa joao tem link no github com o projeto?

[@joaobibiano]

Desse projeto não salvei matheus, mas como não é muito código, acho que tá tranquilo :)

[@alexpassospro8504]

na verdade ele só queria usar a carinha: ( ' u ' )

[@joaobibiano]

Nice!

[@joaobibiano]

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

[@mo.olivr_]

muito bom!