A melhor forma de salvar o JWT no front-end (sem localstorage)

Поделиться
HTML-код
  • Опубликовано: 5 окт 2024
  • Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
    Cadastre-se na nossa plataforma: app.rocketseat...
    Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
    Acompanhe a Rocketseat nas redes sociais:
    Twitter: @rocketseat
    Facebook: @rocketseat
    Instagram: @rocketseat

Комментарии • 81

  • @williamroger9375
    @williamroger9375 9 месяцев назад +23

    Muito bom esse novo formato de vídeos rápidos, mas não tão rápidos assim! Conteúdo sensacional, valeu Rocket!

  • @douglasneves4804
    @douglasneves4804 9 месяцев назад +74

    Boa tarde, uma sugestão seria algum vídeo com jwt token e refresh token, onde armazena o refresh-token, com exemplo de utilização na prática.

    • @edu_amr
      @edu_amr 9 месяцев назад +9

      Acho que um video de autenticação/autorização em si, junto com axios e os interceptors... seria interessante.

    • @me.dwesley
      @me.dwesley 9 месяцев назад

      @@edu_amr Já existe. É só procurar "refresh token rocketseat daniele leao"

    • @leonardoreis674
      @leonardoreis674 9 месяцев назад +1

      Concordo seria bem legal

    • @zevdvlpr
      @zevdvlpr 9 месяцев назад +1

      Up

    • @imartytk
      @imartytk 9 месяцев назад

      Esse eh um trabalho pro devdoido 😂

  • @noowz
    @noowz 9 месяцев назад +2

    Interessante esse formato de video curto explicando certas coisas, curti.

  • @wollyverkk2263
    @wollyverkk2263 9 месяцев назад +8

    conteudo completo sobre autenticação e controle de acesso com nextjs seria perfeito.

    • @mrflacks2243
      @mrflacks2243 8 месяцев назад

      ele pode até fazer mas vai fazer com biblioteca atrás de biblioteca, ele não sabe fazer de forma resumida e sim usando lib como bengala e no final nem ele mesmo sabe o que fazer da lib

    • @darlleybrito4198
      @darlleybrito4198 7 месяцев назад

      ​@@mrflacks2243 Que isso jovem kk tem algum artigo pra indicar aí? Sem zuera tô precisando

  • @ClashRoyale-pt9zj
    @ClashRoyale-pt9zj 9 месяцев назад +8

    Um vídeo aprofundado sobre autenticação/autorização envolvendo JWT/cookies seria massa

    • @dieegosf
      @dieegosf 9 месяцев назад +2

      Já tem alguns guias completos aqui no RUclips de autenticação com React e Node, inclusive no Next.js, basta dar uma procuradinha :)

  • @alexandrejosevieiramuniz4114
    @alexandrejosevieiramuniz4114 9 месяцев назад

    Excelente explicação e bem objetivado. Parabéns pela didática e dinamica de apresentação

  • @carlosceagah
    @carlosceagah 9 месяцев назад +3

    Não sei se é a mesma live, mas o KolossoBR quer muito saber se vai ter trilha de games kkkkkk terceira vez que eu vejo um vídeo do Diego, e esse cara tá falando isso kkkkk

  • @PedrotMX
    @PedrotMX 6 месяцев назад

    Caraca, é isso q eu precisava, thank y

  • @Öyster_Boy
    @Öyster_Boy 9 месяцев назад +2

    Ainda não vi o vídeo, mas presumo "Cookies".

  • @leandromoraes1862
    @leandromoraes1862 9 месяцев назад +4

    No mobile, teria uma estratégia semelhante, ou outra estratégia que você refomendaria?

  • @antoniothomacelli
    @antoniothomacelli 9 месяцев назад

    Obrigado por compartilhar

  • @xbozo.
    @xbozo. 9 месяцев назад +4

    quando vai sair esse projeto no ignite?

  • @mauriciomontesmaletta6780
    @mauriciomontesmaletta6780 6 месяцев назад

    booom conteúudo ROCKET

  • @dhssaouda
    @dhssaouda 9 месяцев назад +7

    Nesse formato de armazenamento do token de acesso você fica vulnerável contra csrf. Você está se protegento contra esse ataque?

    • @PelpsRoxXx
      @PelpsRoxXx 9 месяцев назад +1

      Ele salva o cookie pro domínio da aplicação. Não sei se é isso a que vc se refere ao citar csrf como vulnerabilidade.

    • @gbalestrin9
      @gbalestrin9 9 месяцев назад +1

      @@PelpsRoxXx É q no caso o ataque de csrf te direciona para o dominio original da aplicação porém enviando parâmetros controlados pelo atacante

  • @LorhanSohaky
    @LorhanSohaky 8 месяцев назад +1

    Isso não é afetado pela mudança proposta pelo Google Chrome sobre a utilização de cookies?

  • @rafaelfortunato5159
    @rafaelfortunato5159 9 месяцев назад +5

    E como o back sabe que é o cookie nomeado como 'auth' ?

    • @la_treta
      @la_treta 9 месяцев назад

      0:40 tem o método signUser responsável pela lógica de login, ele define no backend, o cookie Http que será devolvido na response da requisição do frontend.

    • @crowrvoblackfeather4851
      @crowrvoblackfeather4851 9 месяцев назад

      da mesma forma que vc consegue pegar o Header autorization no backend, vc pode pegar valores de cookies

  • @alitonoliveira1700
    @alitonoliveira1700 9 месяцев назад +3

    E no caso de autenticação com firebase, onde geralmente usamos a api deles e fazemos a requisição do próprio frontend?

    • @iuritorres
      @iuritorres 9 месяцев назад +1

      tbm tou precisando saber 😆

  • @ezequielalves6391
    @ezequielalves6391 8 месяцев назад +1

    Mas como eu consigo tratar casos onde o domínio do meu backend é diferente do meu frontend? Nesses casos, há um bloqueio do set-cookie por parte do browser

  • @LuisFernandoGaido
    @LuisFernandoGaido 9 месяцев назад +6

    Cookie é bom e eu gosto.

    • @devcoelho
      @devcoelho 9 месяцев назад +1

      essa é boa ksks

  • @DarlissonLimeira
    @DarlissonLimeira 9 месяцев назад +2

    Eu utilizo acess e refresh token. O access token vai no body mas não é salvo em lugar nenhum no navegador, fica só em memória e o refresh token vai num cookie http only pro front. O usuário só precisa fazer login novamente quando o refresh token expirar, mas só permitido o acesso aos endpoints protegidos usando o accesd token. O refresh token é usado apenas para pegar um novo access token.

    • @DarlissonLimeira
      @DarlissonLimeira 9 месяцев назад +1

      A spa precisa pegar o access token automaticamente quando o usuário voltar a acessar aplicação

    • @DarlissonLimeira
      @DarlissonLimeira 9 месяцев назад +1

      E o backend deve verificar se o refresh token é valido pra só assim liberar um novo access token

  • @wardevley
    @wardevley 9 месяцев назад +1

    Boa, eu ja faço assim.

  • @hokageofc774
    @hokageofc774 9 месяцев назад +1

    isso resolve a questão de fazer um Bearer {TOKEN}? Ele envia na requisição, mas de que forma é enviado?

  • @LeooHenrrique
    @LeooHenrrique 9 месяцев назад

    Muito bom.

  • @ojoaoalexandre
    @ojoaoalexandre 9 месяцев назад +2

    Como encontro esse projeto na plataforma da Rocket? Qual Ignite?

    • @dieegosf
      @dieegosf 9 месяцев назад +2

      Vai entrar em breve no Ignite, entra primeiro o front-end (já essa semana) e depois o back-end.

  • @NeuraVlogdolfim
    @NeuraVlogdolfim 9 месяцев назад

    Desculpa irmão mas concordo um vídeo na explicativa seria ótimo, pq pelo que eu entendi vc tem o domínio da pessoa que tá acessando mas dentro do ip no caso (domínio) podem ter mais de uma pessoa na mesma rede não tem como vc diferenciar.. mas posso estar enganado, um vídeo explicando seria maravilhoso!

  • @genemes
    @genemes 4 месяца назад

    E quando o backend está configurado para não receber cookies?

  • @ectorcunha
    @ectorcunha 9 месяцев назад +1

    Alguém me recomenda um curso / playlist que mostre como desenvolver códigos que evitem ataques nas aplicações. Vídeos como este aqui são raríssimos, praticamente todos que eu já vi são teóricos.

  • @bcr1532
    @bcr1532 9 месяцев назад

    Essa é uma solução bacana quando o back pertence ao mesmo domínio que o front (cookie 'same-site: strict'). No entanto, a maioria dos navegadores já bloqueiam essa prática entre servidores de origem diferente.
    Qual prática vc recomenda nesses casos??
    Grande abs! Sou seu fã!

    • @GMP93
      @GMP93 9 месяцев назад +1

      Nesse caso você configura o CORS pra ter controle de diferentes domínios. Bem comum nas aplicações modernas que o front está num CDN e o back está em algum serviço diferente

    • @ezequielalves6391
      @ezequielalves6391 8 месяцев назад

      @@GMP93 Isso é possível de que maneira?

  • @manaurevasconcelos5381
    @manaurevasconcelos5381 2 месяца назад

    Fala galera, to com uma duvida se alguem souber ajudaria bastante.
    No video ele salva o jwt no frontend e entao faz as solicitações para o backend com o httponly?

  • @nichi785
    @nichi785 6 месяцев назад

    Você ainda consegue acessar os Cookies dentro da aplicação por meio do parsedCookies?

  • @sweydabdul8090
    @sweydabdul8090 6 месяцев назад

    como saberei se ele tem uma sessao ativa, para o redicionar para tela de login por exemplo?

  • @CarlosSilva-hy8xt
    @CarlosSilva-hy8xt 9 месяцев назад +1

    muito bom, mas no next 14 ta uma mrd essa feature dos cookies junto com o server components

    • @Valentim_Gab
      @Valentim_Gab 7 месяцев назад +1

      Tá bem complicado utilizar Refresh Token com SSR e Cookies

  • @thiagosousa6596
    @thiagosousa6596 9 месяцев назад +1

    Boa noite. Esse projeto já está disponível no ignite?

    • @fadoricagames2031
      @fadoricagames2031 9 месяцев назад +1

      Opa. acho que é no Ignite de nodejs

    • @thiagosousa6596
      @thiagosousa6596 9 месяцев назад

      @@fadoricagames2031 não tem lá não, amigo

    • @1LY4x8s96r
      @1LY4x8s96r 9 месяцев назад

      Vai ser colocado ainda lá.

  • @pedrobenicio4955
    @pedrobenicio4955 9 месяцев назад +1

    é a mesma estratégia que também utilizo. Eu gero todo o token JWT no backend e envio para o frontend com a sua respectiva data de expiração do cookie. Basicamente nao faço nada no frontend...

    • @eduardoribeiro9497
      @eduardoribeiro9497 9 месяцев назад

      Mas no frontend é preciso salvar o token não é?

    • @pedrobenicio4955
      @pedrobenicio4955 9 месяцев назад +2

      @@eduardoribeiro9497eu faço isso pelo backend mesmo. O token jwt já chega no front salvo e ele é enviado automaticamente em toda requisição. Então basicamente não é feito nada no frontend. Prefiro deixar este trabalho de autenticação e verificação do token para o backend do que para o frontend. No front eu faço outras coisas na qual é responsabilidade dela fazer. Mas autenticação eu deixo toda pro Back

    • @eduardoribeiro9497
      @eduardoribeiro9497 9 месяцев назад

      @@pedrobenicio4955 Interessante, bom trabalho 💪

    • @karlmalone3603
      @karlmalone3603 9 месяцев назад

      @@pedrobenicio4955 Mas como esse token é salvo no front?

    • @LuizNicolak
      @LuizNicolak 9 месяцев назад

      Mas e no caso do usuário fechar a aba ou apertar um F5, como vou recuperar o token - que ainda estava válido.? Será necessário uma nova autenticação?

  • @lulucatioro
    @lulucatioro 8 месяцев назад

    Mas esse cookie que é httpOnly fica persistido no navegador?

  • @arozendojr
    @arozendojr 9 месяцев назад

    Douglas, rato borrachudo, falou que os JavaScript pode acessar os Cookie, chega a fazer buff Over cookie, meio que colocar o cookie de filiado, fazendo a comissão ira para quem fez esse ataque, lógico que não sei os detalhes, parece os cookie uma boa ideia, porém tenho que testar

  • @joaovitor1471
    @joaovitor1471 9 месяцев назад

    Qual seria o tema do github para ficar com essas cores, ou foi personalização do Arc ?

    • @dieegosf
      @dieegosf 9 месяцев назад

      Personalizei o meu mesmo.

  • @rafael_tg
    @rafael_tg 9 месяцев назад

    mas da pra ver o token pelo developer tools na aba network ?

    • @rafael_tg
      @rafael_tg 9 месяцев назад

      @@Shinodinho obrigado

  • @dev_miguel
    @dev_miguel 9 месяцев назад

    Funciona com aplicações mobile nativas?

    • @dieegosf
      @dieegosf 9 месяцев назад +1

      Acho que no mobile não rola com cookies (eu acho), não conheço muito sobre Swift ou Kotlin (se foi o que você quis dizer com nativas).

    • @dev_miguel
      @dev_miguel 9 месяцев назад

      @@dieegosf então, embora fale sobre cookies, a única regra adicionada é informando pra usar com credenciais. Pelo menos as libs não especificam que o backend vai procurar unicamente no cookie. Depois vou dar uma estudada, possa ser que exista um campo ou propriedade que seja suportada no nativo

  • @icaroteles2773
    @icaroteles2773 9 месяцев назад +1

    Esses vídeos muito curtos são decepcionantes... A Rocketseat de qualidade se foi