Autenticação JWT com Context API e React Router

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ม.ค. 2025

ความคิดเห็น • 141

  • @redizeoficial
    @redizeoficial 17 วันที่ผ่านมา

    O cara simplesmente resumiu o React em 30min. haha, valeu!!

  • @kayroravel6705
    @kayroravel6705 2 ปีที่แล้ว +7

    Mesmo o vídeo tendo 2 anos. Hj, em 2022. Foi o melhor vídeo que explica Context Api que eu achei. Sem TS, simples, direto. Aquela explicação de Props D… porra. Deveria fazer mais vídeos.

  • @artur-bb6js
    @artur-bb6js 18 วันที่ผ่านมา

    Vai me ajudar muito seu video, estou criando isso num projeto da empresa, mas estamos usando c# no backend vai me auxiliar demais a lógica do jwt

  • @dbtrnl
    @dbtrnl 4 ปีที่แล้ว

    Eu aqui sofrendo pra achar algo que explique de forma rápida e fácil e Context API e encotrei isso.
    Toma meu subscribe, explicou de uma forma mto simples!

  • @cerberusdarck
    @cerberusdarck 2 ปีที่แล้ว +1

    Cara, que massa o seu vídeo, foi a melhor explicação sobre contextAPI que já vi, simples, e direto

  • @Glauberjds
    @Glauberjds 2 ปีที่แล้ว

    Melhor explicação que eu vi até hoje. Parabéns

  • @codigolimpo.
    @codigolimpo. 4 ปีที่แล้ว +9

    Código limpo, excelente didática e todas as pontas bem amarradinhas. Parabéns e muitíssimo obrigado! 👊👊

    • @imateussilva
      @imateussilva  4 ปีที่แล้ว

      Valeeeeeu!! 🔥🔥🙏

  • @adrianobiolchi930
    @adrianobiolchi930 4 ปีที่แล้ว +1

    Mateus, muito obrigado. Estou desde as 9 da manhã de sexta (12) tentando fazer entender o context e fazer o login no RN com o react-navigation 5. E depois de tantos vídeos esse seu me fez abrir a cabeça.
    Muito obrigado. Está de parabéns.

  • @elsonmendes3500
    @elsonmendes3500 4 ปีที่แล้ว

    a tua didática é muito boa, nunca tinha visto nenhum video explicar o contexto api em 7 min tao bem claro assim, a unica ressalva fica por conta da fonte, ou zoom, ta ruim pra quem nao tem um monitor full hd, mas no demais, parabéns!

  • @VagnerMachado87
    @VagnerMachado87 ปีที่แล้ว

    Valeu Fera! Matou uma charada aqui com o esquema do loading!

  • @debora468
    @debora468 3 ปีที่แล้ว

    Excelente haha quando eu dava f5 minha aplicação perdia o login haha assistindo o video resolveu obrigada :D

  • @fmaciel2
    @fmaciel2 3 ปีที่แล้ว

    Ganhou um assinante para o seu canal no primeiro vídeo a que assisti. Excelente didática!

  • @DiogoLScarmagnani
    @DiogoLScarmagnani 9 หลายเดือนก่อน +1

    Mateus, é uma pena q vc tenha desistido do canal. Mas espero q vc esteja bem. Me ajudou muito com esse vídeo, mesmo sendo de 2020. Me inscrevi no canal.

  • @MrYuriSalgado
    @MrYuriSalgado 3 ปีที่แล้ว

    Parabéns pelo conteúdo Mateus! Prático e didático.
    Aproveitei para criar um fork. Sucesso.

  • @elfismorb
    @elfismorb 3 ปีที่แล้ว

    Muito didático Mateus Parabens

  • @anglesson
    @anglesson 4 ปีที่แล้ว +1

    Finalmente uma explicação objetiva sobre este assunto!!! Obrigado! Mais um inscrito.

  • @tarikchuery3261
    @tarikchuery3261 3 ปีที่แล้ว

    Me salvou, mano! Valeeu!
    O lance do Loading, eu nem me liguei!

  • @mauriciolsfilho
    @mauriciolsfilho 3 ปีที่แล้ว

    Simplesmente sensacional. Estava com esse problema chato ao dar refresh na pagina. Video ajudou bastante.

  • @ricardooliveira1307
    @ricardooliveira1307 3 ปีที่แล้ว +2

    Simplesmente incrível! Há tempos estou atrás de um tutorial tão sucinto, direto e simples como esse! *.*

  • @alexandrepellegrino2699
    @alexandrepellegrino2699 4 ปีที่แล้ว

    unico canal q consegui entender context com autenticacao, vlw monstro

    • @imateussilva
      @imateussilva  4 ปีที่แล้ว

      🙏🙏🙏🔥🔥🔥

  • @ana_carol89
    @ana_carol89 3 ปีที่แล้ว

    Cara, muito bom! Eu tava precisando aprender isso pra ontem aqui. Acho que esse foi o melhor vídeo do assunto que achei

  • @yasminbragateixeira906
    @yasminbragateixeira906 3 ปีที่แล้ว

    Muito bom! Estava cheia de dúvidas e você conseguiu simplificar demais o conteúdo. Valeu!

  • @andrebisewski5596
    @andrebisewski5596 4 ปีที่แล้ว +1

    Dale Mateus!
    Ótima didática, meu bom!
    Essa semana mesmo tava procurando algum conteúdo a respeito 🤘🏻

  • @devreis8516
    @devreis8516 4 ปีที่แล้ว

    Cara, muito bom o vídeo! Explicou de forma bem didática algo que as vezes parece ser complexo. Parabéns!

  • @l.sdev29
    @l.sdev29 3 ปีที่แล้ว

    Foda demais esse conteúdo mano, parabéns.

  • @enoquebelmiro9720
    @enoquebelmiro9720 4 ปีที่แล้ว +2

    Que conteúdo show, pensava que só conseguiria fazer a proteção com o Redux, sensacional, ótimo conteúdo.

  • @andreyaraujo836
    @andreyaraujo836 4 ปีที่แล้ว +2

    Muito bom, estava procurando videos sobre isso esta semana para estudar. Ótima didática, consegui entender sem dificuldades.

  • @maiconwpassos
    @maiconwpassos 4 ปีที่แล้ว +1

    Conteúdo excelente, parabéns didática simples e objetiva, continue trazendo conteúdos como este!

  • @pedromartins5512
    @pedromartins5512 3 ปีที่แล้ว

    Difícil encontrar conteúdo tão bem explicado. parabéns

  • @GamesNeverEndsGNE
    @GamesNeverEndsGNE 3 ปีที่แล้ว

    que isso, kkk SURREAL ESSA AULA VELHO! parabéns!

  • @fabiobaziota5919
    @fabiobaziota5919 3 ปีที่แล้ว

    Incrível, era exatamente isso que eu estava a procura.

  • @pablohenrique2537
    @pablohenrique2537 4 ปีที่แล้ว

    Que vídeo perfeito, parabéns! Sua didática é excelente

  • @LuizGustavo-ph2pe
    @LuizGustavo-ph2pe 3 ปีที่แล้ว

    KKKKKKKKKKKKKKKK
    PERDI "BORA VÉI RESOLVE ESSA COISINHA CHATA" KKKKKKKKKKKKKKKK
    Conheci agora teu canal já dei logo AQUELE LIKE maroto.

  • @porto_dev
    @porto_dev 3 ปีที่แล้ว

    Muito Bom, tua didática é muito boa!

  • @MateusPereira-os7fh
    @MateusPereira-os7fh 4 ปีที่แล้ว

    Ótimo vídeo mano, ótima didática também.
    Só fui baitado pelo titulo do vídeo achando que seria a validação do token JWT e tal kkkk
    Mas mandou muito!

  • @viniciusmargotti5636
    @viniciusmargotti5636 3 ปีที่แล้ว

    Muito bom, conteúdo claro e objetivo, parabéns !!!

  • @fabiolira5806
    @fabiolira5806 4 ปีที่แล้ว +22

    Muito bom, matou dois coelhos com uma cajadada, Context API e autenticação

  • @caradebreno
    @caradebreno ปีที่แล้ว

    Muito bom cara, me salvou!

  • @matheussjusttino
    @matheussjusttino 4 ปีที่แล้ว

    Muito bom o vídeo! Simplificou bastante as coisas.

  • @caiocesarlacerda9696
    @caiocesarlacerda9696 3 ปีที่แล้ว

    muito bem meu caro! vc é muito bom, vlw pelo vídeo!

  • @renanalves5687
    @renanalves5687 4 ปีที่แล้ว

    Maravilha. Baita qualidade. Mais um inscrito.

  • @danielnascimento6414
    @danielnascimento6414 2 ปีที่แล้ว

    Caraa voçe e muuuuuuuto top, muito obrigado por nos ajudar.

  • @caetanog_
    @caetanog_ 3 ปีที่แล้ว

    Monstro sagrado

  • @TheSetti
    @TheSetti 3 ปีที่แล้ว +1

    Como que faço na parte do login em vez dos dados serem estáticos eu enviar os dados email e password pra API ai ela retornar o token e etc

  • @williammendonca9975
    @williammendonca9975 4 ปีที่แล้ว

    Material top. Vou usar Context API nos projetos menores

    • @imateussilva
      @imateussilva  4 ปีที่แล้ว

      Boooa Will! Context é lindo 😂

  • @patricksegantine
    @patricksegantine 4 ปีที่แล้ว

    boa Mateus!!! muito bom mano

  • @amfcesar
    @amfcesar 4 ปีที่แล้ว

    Mateus, parabéns pelo conteúdo, gostei demais, muito bom. Só uma observação, você poderia deixar a letra do código um pouco maior, a letra e pequena e em alguns momentos fica difícil acompanhar o vídeo. Mas parabéns, novamente pelo conteúdo e continue produzindo.

  • @diegorodrigues244
    @diegorodrigues244 4 ปีที่แล้ว

    Muito bom, muito obrigado pela ajuda. Forte abraço.

  • @heitormbonfim
    @heitormbonfim ปีที่แล้ว

    show, velho. Seria mt massa se vc fizesse isso com typescript

  • @arthurdantas7819
    @arthurdantas7819 3 ปีที่แล้ว

    Valeu Mano! ajudou muito aqui no meu aprendizado e ta ajudando a concluir meu projeto de férias! Obrigado pelo conteúdo!

  • @cristianolima7296
    @cristianolima7296 3 ปีที่แล้ว

    Vlw bro, Seu vídeo me ajudou demais ❤

  • @JohannyLS
    @JohannyLS 4 ปีที่แล้ว

    Show. Ótima didática, aprendi bastante com esse exemplo bem simples

  • @carlosgizbert7606
    @carlosgizbert7606 3 ปีที่แล้ว

    Muito bom!!!! Obrigado!

  • @eduardofleck2743
    @eduardofleck2743 4 ปีที่แล้ว

    Top, me ajudou muito a melhorar meu código, obrigado!

  • @ManoelCarvalho
    @ManoelCarvalho 4 ปีที่แล้ว

    Show Mateus! Excecional!
    Mais um inscrito!

  • @rafaellucaspereira5758
    @rafaellucaspereira5758 4 ปีที่แล้ว +4

    Caso alguém esteja vendo esse vídeo no fim de 2020, tive problemas com a versão do history que não renderizava componentes, tente utilizar a versão 4.10.1

    • @leandrolima7715
      @leandrolima7715 4 ปีที่แล้ว

      Valeu, Rafael! Tava quebrando a cabeça aqui

    • @carolinepandolfe
      @carolinepandolfe 4 ปีที่แล้ว

      Esse erro?
      Attempted import error: 'history' does not contain a default export (imported as 'history')
      Se for, não consegui resolver...

    • @yuguui
      @yuguui 3 ปีที่แล้ว

      Valeu aqui consertou tbm, depois de uma tarde procurando o problema, achei nos comentários kkkk

  • @PedroPortela_oficial
    @PedroPortela_oficial ปีที่แล้ว

    QUE CONTEÚDO BOMM

  • @carloseduardomonteirodeand9704
    @carloseduardomonteirodeand9704 4 ปีที่แล้ว

    Obrigado pelo seu conteudo, me ajudou a entregar um freela hehe

  • @RenanCarneiroOliveira
    @RenanCarneiroOliveira 4 ปีที่แล้ว

    Ótimo video! Parabéns!

  • @lglf77
    @lglf77 4 ปีที่แล้ว +1

    Suas aulas são boas, você dá aula particular por vídeo de react-native? Gostei da sua gentileza e calma na hora de explicar

  • @LucasSilva-oy7fq
    @LucasSilva-oy7fq 4 ปีที่แล้ว +2

    Se o seu history.push( ) não estiver funcionando, verifique se vc não está usando o BrowserRouter do react-router-dom por volta do router que está por volta do seu App.js

  • @anavitoriaviana1572
    @anavitoriaviana1572 3 ปีที่แล้ว

    Nossa, salvou demais! valeu kkk

  • @mauriciocarrion6205
    @mauriciocarrion6205 2 ปีที่แล้ว

    Cara curti muito sua didatica e a maneira clara de explicar por acaso você possui algum curso de react em alguma plataforma!

  • @brunogustavo3502
    @brunogustavo3502 4 ปีที่แล้ว

    Mano, qual é o nome dessa extensão que cria uma linha amarela entre as { }?? 9:28 aparece

  • @marciliounirio
    @marciliounirio 3 ปีที่แล้ว

    Em 2021, me salvou!!!

  • @lemaochaveiro8804
    @lemaochaveiro8804 4 ปีที่แล้ว

    Valeu! Vou usar em meu projeto.

  • @caiohenrique1624
    @caiohenrique1624 4 ปีที่แล้ว

    Cara!!! Continue com os videos, tenta trazer conteudo de React com TS que vc vai voar demais!!!

  • @ulissesalbuquerque3273
    @ulissesalbuquerque3273 3 ปีที่แล้ว +1

    Fiquei com a seguinte dúvida: a forma como está buscando os usuários impede a página de carregar até que os dados cheguem?
    Costumo fazer assim:
    useEffect( () => {
    api.get(`/users`)
    .then((res) => {setUsers(res.data)})
    }, [])
    Vídeo muito bom, parabéns!

  • @TankerEsp4nt4lho
    @TankerEsp4nt4lho 2 ปีที่แล้ว

    Just saved me! hahaha vlw cara

  • @acm.marques
    @acm.marques 4 ปีที่แล้ว

    Muito boa a aula

  • @publicons
    @publicons 6 หลายเดือนก่อน

    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.

  • @RafaelSantos-pp1iz
    @RafaelSantos-pp1iz 3 ปีที่แล้ว

    Muito dahora

  • @guinhog2011
    @guinhog2011 2 ปีที่แล้ว

    Olá, o localStorage seria o lugar mais indicado de guardar o token?

  • @williamparanhos6854
    @williamparanhos6854 3 ปีที่แล้ว

    Mano curti muito sua aula, me ajudou muito e estou usando sua metodologia. Porem tenho uma duvida e vou dar exemplo como se fosee um app ja em andamento. Ex: Loguei no app de boa, fiz tudo oq tinha de fazer e n cliquei no sair, eu simplesmente mudei a url pra bater no /login, o certo seria Deslogar o cara logado ?

  • @ps5trajano
    @ps5trajano 2 ปีที่แล้ว

    Muito bom

  • @edu_amr
    @edu_amr ปีที่แล้ว

    PERGUNTA: Seria interresante colocar interceptors? E quando o usuario limpar o localhost sem fazer logou? E se ele mesmo invalidar o proprio token alterando ele?

  • @sillasemanoel6215
    @sillasemanoel6215 ปีที่แล้ว

    to com problema em relação ao token expirar, defino 1min por exemplo, só pra testar, apôs 1min, o token esta expirando e realmente não envia mais os dados do server pra mim, mas o infeliz ainda continua no "/home", ele não da um location pro "/" porque o diabo aidna continua cadastrado na minha storage

  • @rafaelcarvalho7542
    @rafaelcarvalho7542 4 ปีที่แล้ว

    brigado

  • @DanielRios549
    @DanielRios549 3 ปีที่แล้ว

    Uma coisa que eu não entendi, é que usando next, eu não consigo usar o contexto dentro de um getServeSideProps, ainda tenho que acostumar com esse lance de front e back ainda, como é tudo Javascript e as vezes até no mesmo arquivo, eu fico um pouco perdido as vezes

  • @taynanbreno
    @taynanbreno 4 ปีที่แล้ว +1

    Uma dúvida que eu tenho é que, eu tenho que criar um provider pra cada contexto que eu tiver e ficar envolvendo o App com esses providers. Teria alguma forma de ter um provider global, digamos, e aí esse provider receber os contextos?

  • @cleytonr
    @cleytonr 4 ปีที่แล้ว

    Muito bom, mano

  • @limaand2009
    @limaand2009 3 ปีที่แล้ว

    Muito bom, como faço para proteger a rotas no Nextjs usando esse processo do vídeo?

  • @lukaswhite9397
    @lukaswhite9397 3 ปีที่แล้ว

    Uma dúvida. E sé a Api precisar pega os dados do Form no login invés de ser static ? poderia explicar ?

  • @HCLima-lz6jx
    @HCLima-lz6jx 4 ปีที่แล้ว +17

    Eu fico muito triste quando encontro um tutorial legal e vejo que o TH-camr tem menos de mil vídeos. Vamo concertar isso aí?

  • @wendelsantos3399
    @wendelsantos3399 3 ปีที่แล้ว

    Muito bom mano.
    Mas em questão específica de autenticação, tudo o que foi feito aí eu consigo fazer usando só o axios, por exemplo, no armazenamento ou deleção do token no header eu uso o interceptor do axios, assim como também o armazenamento no localStorage.
    Então meu questionamento é: Se existe, qual a vantagem em usar o Context para autenticação ?

  • @f.aliceb.rangel9572
    @f.aliceb.rangel9572 4 ปีที่แล้ว

    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 th-cam.com/video/zDmNNvLCKHo/w-d-xo.html, 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!

  • @gabrielrizzo13
    @gabrielrizzo13 3 ปีที่แล้ว +1

    Como consigo manter o login após o reload da pagina? Tenho q armazenar o estado de "authenticated" no storage?

  • @GABRIELR798
    @GABRIELR798 4 ปีที่แล้ว

    Mateus estou com uma dúvida, quando tento acessar pelo celular e coloco o username e a senha pressiono entrar nada acontece no browser do celular existe o localstorage? pq nada acontece

  • @rudinhok
    @rudinhok 4 ปีที่แล้ว

    +1 Inscrito, ajudou d+

  • @arthurteodoro6586
    @arthurteodoro6586 4 ปีที่แล้ว

    e como fariamos para receber os dados do formulario no handleLogin ? sendo que ele está em outro arquivo e geralmente usamos o state pra fazer o envio das informações e etc ...

    • @brunopapait7657
      @brunopapait7657 4 ปีที่แล้ว

      Passa os dados por parametro para a funcao handleLogin

  • @eduardopedro5275
    @eduardopedro5275 4 ปีที่แล้ว

    Muito bom!

    • @imateussilva
      @imateussilva  4 ปีที่แล้ว

      Que bom que curtiu Edu! 🔥🔥

  • @caduolivera349
    @caduolivera349 4 ปีที่แล้ว

    muito bom!

  • @suelenbraga2006
    @suelenbraga2006 4 ปีที่แล้ว +1

    Alguém me socorre? Preciso de uma ideia como fazer um login com a opção de "remember me" no login. Eu sei que o localstorage serve pra isso o problema e qdo a opção tá desmarcada. Eu guardo as informações onde?

    • @gamesantosbr
      @gamesantosbr 4 ปีที่แล้ว

      Existe uma alternativa ao localstorage chamada sessionStorage que apaga os dados assim que o usuário sair da página, veja mais nesse link: developer.mozilla.org/pt-BR/docs/Web/API/Window/sessionStorage
      Espero ter ajudado!

  • @theguiller8455
    @theguiller8455 3 ปีที่แล้ว

    Ficou bom, porém salvar o token no local storage não é seguro, é uma forma de entender como funciona e talz, porém não é seguro, vejo muitos com essa dúvida, estou pensando em criar um artigo abordando todo esse tema complexo...

  • @julysmartins5288
    @julysmartins5288 4 ปีที่แล้ว

    professor se eu tivesse a senha e o email(usestate),ele ficaria no context ou ficaria no componente????

  • @信者の男
    @信者の男 3 ปีที่แล้ว

    13:20 context

  • @michaellesley2146
    @michaellesley2146 3 ปีที่แล้ว

    Cara, como eu faria para ele não mostrar o "/" se o cara já estiver logado?

  • @Hijaziia
    @Hijaziia 4 ปีที่แล้ว

    Valeu!!

  • @nathansantos4197
    @nathansantos4197 3 ปีที่แล้ว

    Cara ja to estudando o context api por um bom tempo, e uma coisa que não entendi até agora é o motivo de seu uso, porque se ao atualizar a pagina basicamente perde o acesso as informações diretamente do context api, entao pra solucionar isso usamos o localstorage ou qualquer outra forma de store secundário. Entao eu me pergunto porque não salvar diretamente ja no localstorage esses dados se oq vai funcionar no fim das contas é apenas isso mesmo. Eu até agora não consegui entender o real motivo ou necessidade desse context api funcionar se temos que faze-lo com auxilio de outras funcionalidades externas

  • @Guyraroká
    @Guyraroká 4 ปีที่แล้ว

    Ótima dica, tenho uma dúvida: posso usar o context api para aplicações grandes também ou uso o redux para isso? Por que acho que aprender algo que acho complexo como o redux e aprender também o context que é mais tranquilo, parece ser meio estranho. Mas apenas uma duvida de iniciante nesse mundo react mesmo. Valeu grande abraço e parabéns pelo vídeo.