Тёмный

Estratégias de autenticação entre front-end e back-end com JWT (cookies storage) 

Rocketseat
Подписаться 371 тыс.
Просмотров 40 тыс.
50% 1

O JWT (JSON Web Token) é uma forma de autenticação, ele permite que um servidor verifique a identidade de um usuário sem precisar armazenar qualquer informação sobre ele.
Quando a gente fala sobre autenticações entre front-end e back-end, existem algumas estratégias que podem mudar a nossa maneira de lidar com elas.
Nesse vídeo vou te contar um pouco mais sobre as opções de estratégias, mostrando pontos positivos e negativos de cada uma delas.
-----
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

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 73   
@manuelantonio2891
@manuelantonio2891 6 месяцев назад
estou com dificuldades em assinar na platafoma da rocketseat, eu vivo em Angola e não tenho um cpf Brasileiro e o sistema não me permitir continuar com a assinatura sem inserir um cpf e um cep
@chrisdevindev
@chrisdevindev 25 дней назад
conseguiu mano?
@devcoelho
@devcoelho 3 месяца назад
CORS e cookie configurado com o SameSite: Lax já é suficiente pra mitigar o CSRF
@gabrielmesquita8704
@gabrielmesquita8704 6 месяцев назад
Perfeito!! Gostaria muito de um vídeo fazendo autenticação com nextjs 14 e nodejs no backend, lidando com toda a parte de autenticação com jwt. Tem vídeos no youtube ensinando, mas não é com a mesma qualidade da rocket.
@matheuspassos8650
@matheuspassos8650 6 месяцев назад
up!
@Mario-PWZ
@Mario-PWZ 6 месяцев назад
UP 2 !
@RafaelGomes01
@RafaelGomes01 6 месяцев назад
UP 3 😅
@DiogoMoreira0610
@DiogoMoreira0610 6 месяцев назад
up 4
@lucasdeandradeoficial
@lucasdeandradeoficial 6 месяцев назад
...com a parte do Refresh Token também esta faltando
@LuanHenrique-pc3nn
@LuanHenrique-pc3nn 6 месяцев назад
Eu amo a capacidade que a Rocket tem de lançar um vídeo 1 dia antes de acontecer o meu problema KKKKK Fiquei com duvida nisso AGORA e o primeiro video q me aparece no RU-vid é a solução do meu problema kkkkk
@vini1520
@vini1520 6 месяцев назад
Você pode usar token jwt , e quando precisar salvar algo, usar alguma estratégia de cache (como redis). E nas telas mais sensíveis , pedir uma segunda senha
@trechosdelivros4445
@trechosdelivros4445 Месяц назад
Eu estou criando um token quando o usuário se cadastra, esse token é armazenado no banco de dados, e quando ele se autentica os dados são gerados. Tem algum problema nesta abordagem ?
@filipesantos8001
@filipesantos8001 24 дня назад
@@trechosdelivros4445 Mano acho que na prática o maior problema vai ser o consumo do banco sem muita necessidade (já que isso meio que significaria pagar mais quando tivesse no ar e estivesse crescendo), o JWT funciona de uma forma que você nunca vai precisar armazenar ele, já que ele só precisa ser valido para funcionar e quando não for mais (expirou) o backend já vai conseguir invalidar aquela requisição, a única coisa que vejo sentido em armazenar é o refresh token caso você queira utilizar no seu projeto.
@trechosdelivros4445
@trechosdelivros4445 24 дня назад
@@filipesantos8001 Eu usei o JWT para autenticação e o session storage para armazenar o ID para fazer o push de dados após a autenticação… você vê algum problema nessa abordagem?
@CarlosEduardo42
@CarlosEduardo42 Месяц назад
Possuo uma aplicação do next que salva o jwt nos cookies com http only. Se eu precisar, pelo front-end, fazer uma requisição diretamente para a API do servidor, ela faz a requisição para a url /api/caminho-da-api. Ainda no Next, tenho um arquivo em /app/api/[..all]/route.ts. Este arquivo de rota pega tudo o que vier depois da /api/ e envia para a URL da API externa, junto com o jwt que só o back tem acesso, com todo o conteúdo da requisição.
@PedroHenrique-je6yu
@PedroHenrique-je6yu 6 месяцев назад
up pra fazerem um vídeo com autenticação jwt + nextjs14
@erickcabral5107
@erickcabral5107 17 дней назад
Onde ele faz live?
@edu_amr
@edu_amr 6 месяцев назад
Deveria ter um video fzd uma tela auth com React puro junto com auth de rotas publicas e privadas
@ryanpantaneiro
@ryanpantaneiro 6 месяцев назад
no meu projeto, em qualquer requisição que envio pro back-end, preciso enviar o token no cabeçalho, até aí tudo bem, a dúvida é, o projeto tem diversas roles diferentes (perfil de acesso) e cada role muda muito as permissões ou páginas que aparecem. O back-end me envia pelo cabeçalho a role do usuário logado, mas eu sinceramente estou com dúvidas de qual a melhor forma de sempre verificar e mostrar as telas que são permitidas dependendo da role. No React a melhor maneira seria usando contexto global?
@u9s0e9r
@u9s0e9r 6 месяцев назад
Vc pode proteger as paginas que vc quiser com conditional rendering.
@GustavoAlves-pf7lf
@GustavoAlves-pf7lf 6 месяцев назад
Guarda dentro do JWT a role, ou permissões, caso queira mais escalabilidade. No frontend, faz um decode do JWT e controla a renderização da tela baseada na role ou na permissão, crie um contexto global e no seu router, consuma isso e renderize as rotas condicionalmente, dá para escalar isso muito bem. No backend, crie um middleware que também faça esse decode e guarde no contexto do usuário a role ou as permissões. Com essa informação, você consegue restringir endpoints e mudar comportamentos como resposta, etc.
@ryanpantaneiro
@ryanpantaneiro 5 месяцев назад
obrigado, meus manos!!
@gilOliveira001
@gilOliveira001 6 месяцев назад
No começo eu não tava entendendo..no final parecia que eu tava no começo kkkk obs: sou iniciante
@DevEmpreender-l2w
@DevEmpreender-l2w 6 месяцев назад
Essas lives acontecem aonde?
@carlosallbertodev
@carlosallbertodev 6 месяцев назад
Diegão estou com uma dúvida no next 14 men. Qual a melhor maneira para fazer uma requisição com fetch pasando o jwt que está nos cookies pegar os valores e renderizar no lado do client?
@trechosdelivros4445
@trechosdelivros4445 Месяц назад
Tô com essa dúvida também, para quebrar o galho, eu armazeno o id do token criado no registro diretamente em um campo do banco de dados e para fazer a renderização eu puxo por esse campo.
@bonk1463
@bonk1463 6 месяцев назад
Adoraria que tivesse um lib que cuidasse disso tudo automático pra NestJS e frontend. Tivemos que implementar isso na mão com Keycloak e foi várias horas arrumando bugs e a implementação em sí.
@maykonsousa84
@maykonsousa84 6 месяцев назад
Eu uso o next-auth ou clerk que já gerencia isso tudo via cookies, inclusive com login social
@bonk1463
@bonk1463 6 месяцев назад
@@maykonsousa84 não podia usar o Clerk, regra do projeto, next-auth deu mais problema do que ajudou pq ele é pro next e não integrou tão bem com nestjs.
@julianoferrasso
@julianoferrasso 3 месяца назад
Excepcional como sempre!! Diego faz um video ensinando a autenticação com JWT com AuthContext no Nextjs 14 🙏🏼🙏🏼
@julianoferrasso
@julianoferrasso 3 месяца назад
Excepcional como sempre!! Diego faz um video ensinando a autenticação com JWT com AuthContext no Nextjs 14 🙏🏼🙏🏼
@Vitor_NnitivV
@Vitor_NnitivV 5 месяцев назад
Eae mano, blz ? Então, eu tava pensando em "reestudar" desenvolvimento web, mesmo que eu já esteja aprendendo ReactJs e TypeScript pra preenche algo que eu tenha não estudado, se você fosse recomenda um guia para estuda desse HTML até chega em ReactJs, TypeScript, nextjs pra eu chega em um nível de poder trabalhar, qual seria ?
@pedrobenicio4955
@pedrobenicio4955 6 месяцев назад
Excelente resumo. Basicamente agora é só implementar a ideia porque a lógica já está explicada
@christianrodriguesdesouza5562
@christianrodriguesdesouza5562 5 месяцев назад
Explicação muito boa man 👏🏻👏🏻👏🏻
@arozendojr
@arozendojr 6 месяцев назад
Parece que o Chrome vai cancelar alguns cookies no navegador, HttpOnly e signed serão cancelados ?
@darlleybrito4198
@darlleybrito4198 6 месяцев назад
Não
@RafaelMarquesOficial
@RafaelMarquesOficial 6 месяцев назад
Esses cortes fazem parte de alguma live na twitch ou outra plataforma?
@nearkingML
@nearkingML 6 месяцев назад
Aulao
@douglaslisboa9
@douglaslisboa9 6 месяцев назад
Interessante, mas seguindo a premissa de que se eu der um f12 eu consigo pegar o token, daria pra tentar esconder o token do front-end com a funcionalidade do cross origen que você mencionou em um de seus videos sobre autenticação?
@rafaelsantana588
@rafaelsantana588 6 месяцев назад
Ao meu ver, todos os métodos de autenticação servem apenas para assegurar que a origem da requisição está sendo de quem realmente era pra ser (do próprio usuário autenticado). Partindo do pressuposto que o próprio usuário pode abrir o dev tools e pegar o token dele (ou um terceiro invade a máquina do usuário), mesmo que o token seja usado indevidamente depois disso, a autenticação fez o que ela tinha que fazer que era assegurar que para ter um token, o usuário precisa provar que é ele: se autenticando com suas credenciais antes. Na minha opinião, daí em diante cabe outras estratégias para serem combinadas com a validação do token, como algum tipo de fingerprint básico do usuário, contendo informações como user agent, ip, e mais algumas informações que deem para de certa forma servir como uma impressão digital do usuário que se autenticou, como forma de “minimizar” o risco de uso indevido. Também caberia uma estratégia de rate-limit (seja a nível de IP ou a nível de ID de usuário, pois também seria possível um usuário mal intencionado (ou como citei, alguém que teve seu dispositivo invadido) utilizar proxies rotativos para fazer flood de requisições com IPs diferentes a cada request). Enfim, fica perceptível que quanto mais proteção, mais vão adicionando camadas extras o que envolve códigos mais complicados e cada vez mais usos de recursos para mitigar a segurança. Como o Diego falou, TUDO é um trade-off. Eu acredito que para 99% das aplicações um JWT de curto prazo (5 minutos de duração, por exemplo) aliado a um refresh token de maior duração (por exemplo, 7 dias, assim se o usuário voltar a usar a aplicação antes de 7 dias do último acesso, ele não vai precisar se autenticar novamente, pois o refresh token vai fazer o trabalho dele). Com essa estratégia, você a nível de backend tem o poder de invalidar o refresh token do usuário a hora que você quiser e ele vai ter no máximo 5 minutos antes de perder acesso total a aplicação. Aí onde tem esses 5 minutos, em uma aplicação mais delicada você pode diminuir ainda mais esse tempo.
@rafaelsantana588
@rafaelsantana588 6 месяцев назад
Se a aplicação é de alto risco (como aplicações que envolvem transações financeiras), eu adotaria a estratégia do JWT + refresh e um 2FA para todas as requisições delicadas. Mais do que isso eu acho completamente exagerado e uma aplicação que PRECISA de mais do que isso para garantir segurança, eu acho que só um reconhecimento facial muito avançado (que também é burlável se o fraudador estiver muito focado 😂😂). Se até impressão digital tem gente que usa molde de silicone pra “clonar” pra outra pessoa bater ponto no relógio com biometria em órgãos públicos, é a prova de que não existe sistema de segurança perfeito 😂😂😂
@rafaelsantana588
@rafaelsantana588 6 месяцев назад
Ah, e a resposta da sua pergunta se tem como esconder o token é não. A nível de client side, SEMPRE é possível interceptar/editar qualquer coisa que você envia ou recebe utilizando proxy (como o charles proxy).
@alexandrefernandes6086
@alexandrefernandes6086 6 месяцев назад
esse cara sabe de algo!!
@yakemsk
@yakemsk 4 месяца назад
Cursinho ótimo
@Bilz_-fd1do
@Bilz_-fd1do 6 месяцев назад
Que navegador é esse?
@diegocamara3775
@diegocamara3775 4 месяца назад
Arc
@Bilz_-fd1do
@Bilz_-fd1do 4 месяца назад
@@diegocamara3775 Vlw!
@lucascipriano3570
@lucascipriano3570 6 месяцев назад
Um caso divertido, o antigo Orkut era na base do CSRF, você conseguia roubar sessões facilmente
@rafaelsantana588
@rafaelsantana588 6 месяцев назад
😂😂😂😂 voltei no tempo agora… eu devia ter uns 11 anos, achei numa comunidade do Orkut um tutorial de como roubar os cookies de usuários que usavam mozilla firefox na época, pelo que eu me lembro, o usuário só precisava copiar uma url bem cabulosa e colar na barra de endereços e dar enter (clicar não fazia funcionar). Depois disso, não lembro como pois faz muito tempo, mas eu tinha acesso a um código (que agora, parando pra pensar, provavelmente era apenas os cookies) que eu utilizava uma extensão chamada greasemonkey (algo assim) e quando salvava esses dados da vítima na extensão (que devia injetar nos cookies do meu navegador) automaticamente eu tinha acesso ao Orkut dela, e mesmo que ela mudasse a senha, eu continuava com acesso. Felizmente usei só pra trollar alguns amigos e postar scraps falando besteira, teve até um que não gostou e me deu uns cacetes (merecido 😂😂😂). Nunca tinha parado pra pensar que isso era essa técnica de CSRF pois eu só tinha 11 anos e só sabia que simplesmente funcionava 😂😂😂
@chrisaxxwelldev
@chrisaxxwelldev 4 месяца назад
Esqueceu de uma palavra ai no meio em mano
@gabrielgoncalves6672
@gabrielgoncalves6672 6 месяцев назад
Que conteúdo top, Diegao!
@yukiritodops3
@yukiritodops3 6 месяцев назад
Que maravilha ❤❤
@chrisaxxwelldev
@chrisaxxwelldev 4 месяца назад
To vendo geral elogiando ai mais ninguem ta falando a verdade pra galera!!! Fica esperto mano
@chrisaxxwelldev
@chrisaxxwelldev 4 месяца назад
So pra constar jwt tem um macetizinho que ninguem te conta!!! e se você e senior e ainda nao chegou no seu ouvido, provavelmente você nao tem os contatos certos
@joaovitordefrancisco707
@joaovitordefrancisco707 3 месяца назад
Habla pa nois então
@gabrielnbds
@gabrielnbds 6 месяцев назад
jwt pra auth client server 🤢
@jorgeluizdutraandrade605
@jorgeluizdutraandrade605 6 месяцев назад
Qual seria uma alternativa melhor?
@gabrielnbds
@gabrielnbds 6 месяцев назад
@@jorgeluizdutraandrade605 session, opaque tokens… jwt tem um caso de uso muito específico onde ele é muito bom (auth entre apis + serviços para client). Não é o caso pra client auth. Não ter revoke já é suficiente pra não usar pra auth do client
@G4m3rSkull
@G4m3rSkull 6 месяцев назад
Também gostaria de saber, quem sabe você pode gravar um vídeo pra gente ver sua alternativa.
@chrisaxxwelldev
@chrisaxxwelldev 4 месяца назад
hahaha
Далее
КВН 2024 Встреча выпускников
2:00:41
КОТЯТА В ОПАСНОСТИ?#cat
00:36
Просмотров 1,2 млн
DAXSHAT!!! Avaz Oxun sahnada yeg'lab yubordi
10:46
Просмотров 334 тыс.
Cool Tools I’ve Been Using Lately
23:11
Просмотров 324 тыс.
Why is JWT popular?
5:14
Просмотров 319 тыс.
O que é JWT? Aprenda tudo sobre JSON Web Token
23:42
Criando UI no React na velocidade da luz! (shadcn/ui)
14:55
КВН 2024 Встреча выпускников
2:00:41