Next.js - Autenticação JWT com back-end próprio - Code/Drops #72
HTML-код
- Опубликовано: 5 окт 2024
- Hoje no universo front-end utilizando React e Next.js existem muitas estratégias para realizarmos autenticação. Podemos usar serviços de autenticação social com Next Auth ou providers como AWS Cognito e Auth0.
Nesse vídeo eu abordo como criarmos um fluxo de autenticação completo com um back-end próprio usando JWT e cookies, além de mostrar de maneira prática a validação de autenticação do usuário tanto no client-side quanto nas requisições server-side do Next.js.
Link do repositório: github.com/roc...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: www.rocketseat...
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_oficial
Nos ouça também no Spotify:
Podcast Faladev
Podcast Alumni
![KSI - Thick Of It (feat. Trippie Redd) [Official Music Video]](http://i.ytimg.com/vi/At8v_Yc044Y/mqdefault.jpg)
Mais vídeos sobre Autenticação por favor!!! Outro assunto muito interessante que vejo pouco conteúdo: SAAS e Tenants!
Massa, mas essa parte de tenant envolve muito mais back-end do que front-end em si, mas vou tentar abordar de alguma forma.
concordo plenamente! E vejo que há uma carência grande de conteúdos de qualidade neste tópico (Multi Tenants) e está intimamente ligado com autenticação/autorização. Acho que poderia ajudar muitos empreendedores e devs a alcançar o próximo nível
apoio essa ideia aí
total apoio para multi tenants e SAAS...
@@ebratz Eu também ja procurei bastante e é dificil achar conteudo em portugues sobre multi-tenant.
eu votaria por auth com backend proprio, integrando com next...vlw!!
Perfeito, José! Sugestão anotada! 💜
@@rocketseat Também Concordo!
Exato, foi o que eu sinalizei agora. Fica difícil para quem está começando, entender esses hacks com backend fake.
Cara, vc não tem noção de como uma explicação bem feita e didatica como a sua faz diferença, muito obrigado por esse conteúdo
Permissões e cargos seria sensacional!
Obrigado por todo conteúdo!
tava precisando disso
"Como eu gosto de pagar por coisas úteis", Diego Fernandes 2021 essa frase faz muito sentido depois que eu me matriculei no curso da Rocketseat!
Esse vídeo meu ajudou a fazer a autenticação da minha aplicação usando meu próprio backend que está em node/express. Tive que fazer algumas alterações pelo fato de fazer o fetch para o backend mais nada de complicado. Muito obrigada esse vídeo e outros tem me ajudado muito e se não fosse eles não saberia fazer nada por aqui. Gratidão! Sua didática é excelente.
Ah, um vídeo sobre role/permissões (admin, user, etc) seria incrível.
Poxa @Diego, depois faz a continuação dessa aula mostrando como fazer a parte do refresh token, ficou muito massinha 🚀🚀
Sugstão anotada, Tharlys! 💜
@@rocketseat teve ja?
@@rocketseat Esse vídeo foi feito?
Por favor, @Rocketseat!! A parte do refresh token e até com blacklist seria perfeito!
Estou aderindo a campanha: Faz sobre o refresh token @Diego
Quando usar autenticação Server Side e Client Side, e como fazer estratégia de refresh token. Ótimo vídeo!
Meu backend devolve o jwt com validade de 15 minutos e um refresh token. Na hora de gerar o cookie de sessão eu coloco tudo isso num abjeto, adiciona a data atual + 14 minutos (pra ter uma folga), transformo tudo numa string (precisa disso pra salvar) e guardo no cookie.
Ai dentro da função de recuperar os dados do usuário que está dentro do useEffect eu faço uma verificação se a data atual é maior que a data no cookie (lembrando que é a data que está dentro do corpo, não a data de expiração), se for, eu chamo uma função que manda meu refresh token pro backend pra ele me retornar um novo jwt.
Não sei se é a melhor solução, mas acabei de terminar o processo com o backend em Nova Yourk e tá tudo bem rápido.
Aula top! Com certeza eu gostaria de ver mais sobre autenticação no canal!!!!
Que massa que curtiu, Denis! Anotado! 💜 🚀
Esse commit pre-video foi top mano. Que ótima ideia 😮.
Excelente conteúdo Diego e é um conteúdo que estava faltando na comunidade, pois a maioria é sobre a lib next-auth e não existia uma explicação completa usando backend próprio, o que em sistemas empresariais é a forma mais comum. Eu mesmo tive que implementar a autenticação para a empresa que trabalho e não achei muita coisa, seu vídeo teria me ajudado muito antes.
Seria muito bacana se vc fizesse um vídeo abordando sobre authorização, onde o usuário logado fica limitado a acessar apenas as páginas ou funcionalidades em que ele possui acesso. E também abordar uma situação onde o backend gera o token JWT já com o tempo de expiração no token, sendo que a cada requisição ao backend, um novo token atualizado é gerado e deve ser utilizado nas novas requisições. Também seria interessante falar sobre cookie do tipo httpOnly, se é recomendado ou não a sua utilização, uma vez que o mesmo é apenas acessível do lado do servidor e não do lado do Client, mas que aumenta a segurança uma vez que código javascript não conseguiria capturar o mesmo.
Valeu abs.
Esse vídeo me ajudou muito!!!
A didática dos instrutores da Rocketseat é muito boa, a forma que o conteúdo é passado pra gente é fluida e permite que possamos aplicar o conhecimento quase que instantaneamente.
Muito obrigado Rocketseat! 🚀🚀🚀🚀
Otimo video, ate mesmo para quem está iniciando! Traz um video sobre perfis de autorização, qual nivel pode ver oq!
Faaaaala, Matheus! Que massa que curtiu o conteúdo!
Opa, sugestão anotadíssima aqui! 💜
Finally. A title I can’t read and a language I don’t understand. Thank you for not baiting with english title
Bora lançar sobre autenticações sociais com o NextAuth e sobre a melhor maneira pra não deixar o toke visível 🤟
Sugestão anotadíssima, Robson! 💜
up
Massa!! Diegão como sempre mitando na explicação, ficou show! Parabéns 💜
Que show que curtiu, Diego! 😉
Ele é fera, né? 💜
53:00 miguézin de leve kkkkk, show de bola o video aprendi mt
Nossa conteúdo top como sempre da rocketseat e do Diego, nossa escolher um vídeo tah difícil, trás todos que vai ser incrível
Faaaala, Henrique!
Que massa que ta curtindo! Sugestão anotadíssima! 😉 💜
Vídeo espetacular! Estou trabalhando em um app com React JS que utiliza tokens JWT para autenticação e, mesmo tratando-se de bibliotecas diferentes, a explicação foi pra lá de útil!
Excelente! Com certeza, voto pra pra trazer o próximo video ser sobre Autenticação social junto com servidor próprio!
Conteúdo top! Aguardando os próximos codedrops sobre autenticação mencionados no vídeo. E quem sabe algo sobre PWA.
PWA é puro amor! Vamos ter em breve sim.
@@dieegosf show!
Muito obrigado Diego. Os conhecimentos que você compartilha conosco no seu canal me ajuda muito.
Booa Diegão, obrigado pelo conteúdo! Estou no aguardo do vídeo com implementação do refresh token.
Cara eu tava procurando muito o negocio da autenticacao, eu sou da argentina porem eu nunca tentei procurar video em portugues mas esse video foi a minha salvacao viu, muito obrigrado.
Muito bom o vídeo, depois que comecei a brincar com react/next claro que susgiu algumas dúvidas de qual a melhor abordagem e desenvolver determinadas coisas.
E esse vídeo foi esclarecedor com context e as libs utilizadas e claro que a 'N' formas de fazer, mais dessa forma que mostrou qualquer um que tenho noção básica do react ao bater o olho no código vai saber como funciona e desenvolver de acordo com a necessidade.
Comecei a brincar com react/next na NLW04 e estou fazendo um site para testar tudo e essa auth é um que vou testar. Claro quando teminar API em node rs
Meu voto é para auth social e auth com api própria com permiões e cargos dentro do JWT.
Forte abraço e sucesso!
Man, muito obrigado, pena q ainda não posso fazer o ignite, enquanto isso me viro com seu conteúdo gratuito, vcs são nota mil...
Cara, esse vídeo é bom demais, ta maluco. Mais vídeos de autenticação por favor!
Diego , conteúdo fantástico , eu fiz tudo com fetch , e como eu já tinha um serviço de autenticação tive que fazer algumas adaptações , realmente estou estudando mais sobre nextjs , e fica muito legal tudo , conteúdos de autenticação e integração com outras ferramentas de autenticação são muito bons
Diego, teu canal é muito bom mesmo... O conteúdo, a didática, os exemplos, tudo simplesmente muito bem feito... Parabéns pelo trabalho
Amei a ideia sobre falar de Refresh token e padrões de segurança no jwt, me interessaria bastante
Faaaaala, Rayon!
Sugestão anotada aqui! 💜 😍
Ótimo conteúdo, parabéns!! Facilita muito o entendimento das ferramentas
Vídeo de autorização de rotas no next seria show de bola
Faaaala, Arthur! Sugestão anotadíssima! 😉 💜
Que bom que finalmente voltaram com as vídeo-aulas!
Nosso conteúdo técnico voltou com tudo! 😍
Muito bom este vídeo, gostei da abordagem que usaste ao trabalhar com o axios. Gostaria que no próximo code drops fosse sobre refresh token, acho um tópico muito importante sobre autenticação! Abraços.
Faaaala, Denilson! Que massa que curtiu! 😉
Excelente ponto mesmo! Sugestão anotada! 💜
Top mesmo, refresh token é interessante Diego para o dia a dia no trabalho de dev
Estou fazendo um projeto com Next de front e Nest de back utilizando GraphQL como API, estava bem perdido quanto à autenticação e esse vídeo me deu uma luz, apreciaria mais vídeos desse formato. Acredito que seria muito interessante abordar o funcionamento de um projeto como um todo, os freelancers agradecem hahaha
Finalmente achei esse vídeo
Oh Diegão traz mais vídeos sobre autenticação pra gente, toh aprendendo muito
Faaaaala Diego! Cara, show de bola!
Eu estou começando a minha jornada com reactJs e nextJs e com isso estou começando a desenvolver uma aplicação em que realmente vou precisar desse tipo de autenticação.
E o que iria me ajudar, claro não só a mim, mas a muita gente kkk, seria a parte das permissões e controle de tela por cargos e afins.
Como falei ainda estou na prototipagem da aplicação, mas isso já começou a me dar algumas dúvidas.
No mais é isso aí
Valeu por mais esse vídeo sensacional!!
Faaaala, Edson! Que massa que curtiu! 💜
Boa! Melhor forma de aprender é colocando a mão na massa assim! 👏🏻 👏🏻 👏🏻
Sugestão anotadíssima, Edson! Valeu demais! 🚀
Show! Ótimo conteúdo Diegao! Tô pra dizer que é um dos melhores vídeos do canal até agora 👏👏 Com certeza vale a pena trazer mais conteúdo ao redor das estratégias de segurança, fala um pouco sobre LGPD/GDPR nesse token aí e sobre user roles seria sensacional 😃
Mlk tu não tem ideia de como me ajudou com esse video! Valeu demais!
Incrível! Vou botar na prática hoje mesmo!
Em pleno 2023 isso funciona perfeitamente ❤
Faz um vídeo sobre como proteger o JWT de ser acessado via client side.
Bom ponto! Anotado! 😉 💜
Que conteúdo bom cara... S2
Excelente vídeo, me ajudou muito, como sempre... obrigado e parabéns.
caraaaaaaaai isso vai me ajudar MUITO em um projeto que to tocando
valeu galera
Que show, Bruno!
Depois conta pra gente como foi a experiência! 💜 😍
Manda mais conteúdo de Next, ele é incrível!
mais um excelente vídeo do canal!! Parabéns Diego!!!
Dá pra fazer um juntando a questão de segurança e refresh tokens via JWT
Pereito, Brunno! Sugestão anotada! 💜
@@rocketseat Também acharia massa!
eu tinha pedido quase a mesma coisa, então vai ser massa demais
Diego, sinto falta de vcs falarem de Java e spring boot... Pensa na ideia... Vcs são muito bons!
58:36 , poderia falar Diego, é um assunto que procuro a alguns dias! vlw cara, gosto demais do contúdo da comunidade!
Vi esse titulo e já vim deixando o like
E curtiu o conteúdo, Tiago!? 👀 💜
Mais vídeos sobre Autenticação por favor!!!
Sem defeitos!
Muito obrigado mano!
Que massa que curtiu, Cleyson! 💜 😍
Autenticação JWT + integração Social 🚀🚀🚀
Que massaaa! Parabéns Rocketseat e Diego!
Que bom que curtiu, Felipe! Valeu demais! 💜 🚀
Monstro. Amei
Que bom que curtiu, Tiago! 💜
Mais vídeos sobre Auth!
Faaaala, Guilherme!
Sugestão anotadíssima! 💜
Uma ideia de vídeo é o que o Diego sugeriu, a implementação do Next-auth com logins sociais integrado com a opção JWT.
Perfeito, Rodrigo! Anotadíssimo! 😍
up
trás a parte do refresh token!!!!
Faaaala, Luis!
Sugestão anotada! 👀 💜
boaaaaaa
apoiado
Diego agradeceria muito se fizesses uma aula de permissões com o next como aquela aula que a Dani fez com react app
Que video maravilhoso!!!
To precisando urgentemente, preciso autenticar um projeto freelancer que to fazendo de Java (Spring Boot) no Back-End e NextJS e PrimeReact no front-end!
Quero sim a Autenticação social, integrada com a Autenticação própria
Perfeito, Cassio! Anotado aqui! 😉
Esse tipo de autenticação eu já fiz utilizando um HOC componente para controlar todas as rotas que eu desejo que seja privada.
muito top como sempre os conteúdos do Diego
Vocês são foda demais.
Continuaria com o refreshToken visto que esse conteúdo super encaixa com o conteúdo de refreshToken da Dani na trilha de node!
Cara... isso foi lindo...
Faz um video sobre permisões, seria muito massa, valeu rocketseat
Ótimo ponto, Paulo! Sugestão anotada! 💜
muito top Diego!
Que massa que curtiu, Antonio! 💜
Já tinha usado JWT antes? 😉
Muito bom Diego!! Só faltou o HTTPOnly nos cookies...
Acho que o mais importante é trazer os padrões mais seguros com jwt, muitos do seus seguidores pode sair desenvolvendo isso de forma "não satisfatória no âmbito de segurança da informação". É muito legal o conteúdo mas trazer um conteúdo com o mais seguro que temos hoje no nextjs seria muito importante. (Por mais que tenha nos cursos) valeu!
Haha isso sim é conteúdo, parabéns
Que massa que curtiu, Carlos! Nosso conteúdo técnico voltou com tudo! 💜 😉
Mais vídeos sobre Autenticação social com verificação do token pelo backend e refresh token.
Traga SIMMMM! rsrs
Diego blz !!!. O lance de direitos dos usuários para acessar as página seria muito MASSA!!!. Monta um vídeo desse !! Abraços e parabéns ai pelos vídeos , sempre trazendo coisas novas e evoluindo ainda mais...
Sugestão anotadíssima... 👀
Valeu demais pelo carinho! 💜
Muito bom seria bom fazer junto com backend
sensacional!
Valeu demais! 💜 🚀
Diego, parabéns, um vídeo ( (reduxtoolkit/saga) + typescript + next.js) será fantástico.
Faaaaala, Edson! Show que curtiu! 💜
Opa, anotei sua sugestão aqui! 😉
Calma aí Rocketseat que tem muito conteúdo massa e nós não conseguimos acompanhar assim! ;)
Faz sobre permissoes :-) video muito bom!!
11:00 E pra quem quer vídeo de todas essas sugestões? kkkkk
DIgo o mesmo ahahah não tem como escolher uma só
Ops... 👀
HAHAHAHAHA
Vamos anotando aqui! 💜
Também gostaria de saber um pouco mais sobre os temas que o Diego comentou.
Muito obg pelo vídeo, me ajudou mto✋👊
Que massa! 💜
Traz algo sobre permissões/cargos
Faaaala, Alex!
Bom ponto! Sugestão anotada aqui! 💜
Putz seria massa
faz sim um vídeo de formulario.
Achei massa.... a última vez que usei autenticação acabei usando HOC nas páginas privadas. Seria massa um conteúdo se autorização e refresh token...
Conteúdo muito massa!
Que massa que curtiu! 💜
Muiiiito bom
Diego poderia criar um vídeo explicando como desacoplar a parte de API do Next e o login com providers do NextAuth para uma API NodeJS
#PR Isso de ter um video explicando como fazer a autorizacao seria muito bom, pois o next ate onde sei nao trabalha como o express trabalha, entao bem legal
poderia ser feito um vídeo novo explicando o processo de autenticação no novo modelo de roteamento com a pasta app, já que agora por padrão todos os componentes são server-side
Diego faz um vídeo implementando um Loading de verificação toda vez que o usuário tenta acessar a aplicação.
O Token do usuário ficando salvo no cookies / localstorage, será que pode ser algo que afeta a segurança da aplicação?
Porque qualquer pessoa que já esteja logada vai poder ver o token. Basta ela da um f12.
Rocket, traz mais vídeo sobre autenticação pfv.
Deixa com a gente, Victor! 👀 💜
Como que ficou essa estratégia de autenticação no next13?
Video massa demais valeu, sobre o package da rocket "unform" vale a pena usa-ló ainda para o Next js ? abraço
Permissões e Cargos pleaaase 🙏🥺
Sugestão anotadíssima, Douglas! É um excelente ponto! 💜
Adorei todos os temas sugeridos! Queria sugerir outro tema que é como configurar esse KDE bonitão aí :P
Ta em mãos, Giu! 👀 💜
*Customizando KDE Plasma (Kubuntu, Manjaro, etc) | Guilherme Rodz*
ruclips.net/video/h-FsG-QpgfI/видео.html
por favor entre mais hard nas autenticações com next, é delicinha!
Faaaala, Willian!
Sugestão anotadíssima... 👀 💜