Next.js - Autenticação JWT com back-end próprio - Code/Drops #72
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/rocketseat-content...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: www.rocketseat.com.br
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
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
Пікірлер: 370
Mais vídeos sobre Autenticação por favor!!! Outro assunto muito interessante que vejo pouco conteúdo: SAAS e Tenants!
@dieegosf
3 жыл бұрын
Massa, mas essa parte de tenant envolve muito mais back-end do que front-end em si, mas vou tentar abordar de alguma forma.
@ebratz
3 жыл бұрын
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
@flavioneto1081
3 жыл бұрын
apoio essa ideia aí
@guilhermemoreira444
3 жыл бұрын
total apoio para multi tenants e SAAS...
@debora468
2 жыл бұрын
@@ebratz Eu também ja procurei bastante e é dificil achar conteudo em portugues sobre multi-tenant.
Diego, teu canal é muito bom mesmo... O conteúdo, a didática, os exemplos, tudo simplesmente muito bem feito... Parabéns pelo trabalho
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
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 😃
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! 🚀🚀🚀🚀
Muito obrigado Diego. Os conhecimentos que você compartilha conosco no seu canal me ajuda muito.
Ótimo conteúdo, parabéns!! Facilita muito o entendimento das ferramentas
Excelente vídeo, me ajudou muito, como sempre... obrigado e parabéns.
mais um excelente vídeo do canal!! Parabéns Diego!!!
Massa!! Diegão como sempre mitando na explicação, ficou show! Parabéns 💜
@rocketseat
3 жыл бұрын
Que show que curtiu, Diego! 😉 Ele é fera, né? 💜
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!
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.
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
Permissões e cargos seria sensacional! Obrigado por todo conteúdo!
@pedrolucas55
Жыл бұрын
tava precisando disso
Excelente! Com certeza, voto pra pra trazer o próximo video ser sobre Autenticação social junto com servidor próprio!
Incrível! Vou botar na prática hoje mesmo!
Cara, esse vídeo é bom demais, ta maluco. Mais vídeos de autenticação por favor!
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
@rocketseat
3 жыл бұрын
Faaaala, Henrique! Que massa que ta curtindo! Sugestão anotadíssima! 😉 💜
eu votaria por auth com backend proprio, integrando com next...vlw!!
@rocketseat
3 жыл бұрын
Perfeito, José! Sugestão anotada! 💜
@agnaldopereiradasilva6007
3 жыл бұрын
@@rocketseat Também Concordo!
@hayttlesds
Жыл бұрын
Exato, foi o que eu sinalizei agora. Fica difícil para quem está começando, entender esses hacks com backend fake.
Que conteúdo bom cara... S2
Booa Diegão, obrigado pelo conteúdo! Estou no aguardo do vídeo com implementação do refresh token.
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.
Mlk tu não tem ideia de como me ajudou com esse video! Valeu demais!
Que bom que finalmente voltaram com as vídeo-aulas!
@rocketseat
3 жыл бұрын
Nosso conteúdo técnico voltou com tudo! 😍
Que massaaa! Parabéns Rocketseat e Diego!
@rocketseat
3 жыл бұрын
Que bom que curtiu, Felipe! Valeu demais! 💜 🚀
"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!
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!
muito top como sempre os conteúdos do Diego
Manda mais conteúdo de Next, ele é incrível!
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...
Aula top! Com certeza eu gostaria de ver mais sobre autenticação no canal!!!!
@rocketseat
3 жыл бұрын
Que massa que curtiu, Denis! Anotado! 💜 🚀
Sem defeitos! Muito obrigado mano!
@rocketseat
3 жыл бұрын
Que massa que curtiu, Cleyson! 💜 😍
53:00 miguézin de leve kkkkk, show de bola o video aprendi mt
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
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.
Oh Diegão traz mais vídeos sobre autenticação pra gente, toh aprendendo muito
Finalmente achei esse vídeo
Cara... isso foi lindo...
Vocês são foda demais.
Top mesmo, refresh token é interessante Diego para o dia a dia no trabalho de dev
Poxa @Diego, depois faz a continuação dessa aula mostrando como fazer a parte do refresh token, ficou muito massinha 🚀🚀
@rocketseat
3 жыл бұрын
Sugstão anotada, Tharlys! 💜
@rafaelreale8848
2 жыл бұрын
@@rocketseat teve ja?
@alissonalves3304
Жыл бұрын
@@rocketseat Esse vídeo foi feito?
@andrebnogueira
Жыл бұрын
Por favor, @Rocketseat!! A parte do refresh token e até com blacklist seria perfeito!
@katmandumaldonado
Жыл бұрын
Estou aderindo a campanha: Faz sobre o refresh token @Diego
caraaaaaaaai isso vai me ajudar MUITO em um projeto que to tocando valeu galera
@rocketseat
3 жыл бұрын
Que show, Bruno! Depois conta pra gente como foi a experiência! 💜 😍
muito top Diego!
@rocketseat
3 жыл бұрын
Que massa que curtiu, Antonio! 💜 Já tinha usado JWT antes? 😉
Monstro. Amei
@rocketseat
3 жыл бұрын
Que bom que curtiu, Tiago! 💜
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!
Muito obg pelo vídeo, me ajudou mto✋👊
@rocketseat
3 жыл бұрын
Que massa! 💜
Muiiiito bom
Haha isso sim é conteúdo, parabéns
@rocketseat
3 жыл бұрын
Que massa que curtiu, Carlos! Nosso conteúdo técnico voltou com tudo! 💜 😉
sensacional!
@rocketseat
2 жыл бұрын
Valeu demais! 💜 🚀
58:36 , poderia falar Diego, é um assunto que procuro a alguns dias! vlw cara, gosto demais do contúdo da comunidade!
Conteúdo muito massa!
@rocketseat
3 жыл бұрын
Que massa que curtiu! 💜
Finally. A title I can’t read and a language I don’t understand. Thank you for not baiting with english title
Otimo video, ate mesmo para quem está iniciando! Traz um video sobre perfis de autorização, qual nivel pode ver oq!
@rocketseat
3 жыл бұрын
Faaaaala, Matheus! Que massa que curtiu o conteúdo! Opa, sugestão anotadíssima aqui! 💜
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.
@rocketseat
3 жыл бұрын
Faaaala, Denilson! Que massa que curtiu! 😉 Excelente ponto mesmo! Sugestão anotada! 💜
Quando usar autenticação Server Side e Client Side, e como fazer estratégia de refresh token. Ótimo vídeo!
@danielsoares1608
3 жыл бұрын
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.
Diego, sinto falta de vcs falarem de Java e spring boot... Pensa na ideia... Vcs são muito bons!
Mais vídeos sobre Autenticação por favor!!!
Traga SIMMMM! rsrs
Muito bom Diego!! Só faltou o HTTPOnly nos cookies...
U BEST!!!
Autenticação JWT + integração Social 🚀🚀🚀
Continuaria com o refreshToken visto que esse conteúdo super encaixa com o conteúdo de refreshToken da Dani na trilha de node!
Diego agradeceria muito se fizesses uma aula de permissões com o next como aquela aula que a Dani fez com react app
Amei a ideia sobre falar de Refresh token e padrões de segurança no jwt, me interessaria bastante
@rocketseat
3 жыл бұрын
Faaaaala, Rayon! Sugestão anotada aqui! 💜 😍
Faz sobre permissoes :-) video muito bom!!
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!!
@rocketseat
3 жыл бұрын
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! 🚀
Em pleno 2023 isso funciona perfeitamente ❤
Muito bom seria bom fazer junto com backend
Muito legal!
@rocketseat
3 жыл бұрын
Que bom que curtiu! 💜
Daaaale 💜
@rocketseat
3 жыл бұрын
Daaaale! 💜
faz sim um vídeo de formulario.
Esse tipo de autenticação eu já fiz utilizando um HOC componente para controlar todas as rotas que eu desejo que seja privada.
Conteúdo top! Aguardando os próximos codedrops sobre autenticação mencionados no vídeo. E quem sabe algo sobre PWA.
@dieegosf
3 жыл бұрын
PWA é puro amor! Vamos ter em breve sim.
@RafaelGomes01
3 жыл бұрын
@@dieegosf show!
Bora lançar sobre autenticações sociais com o NextAuth e sobre a melhor maneira pra não deixar o toke visível 🤟
@rocketseat
3 жыл бұрын
Sugestão anotadíssima, Robson! 💜
@zaujulio
3 жыл бұрын
up
Vi esse titulo e já vim deixando o like
@rocketseat
3 жыл бұрын
E curtiu o conteúdo, Tiago!? 👀 💜
Show
@rocketseat
3 жыл бұрын
Que massa que curtiu! 💜 😍
Faz um vídeo sobre como proteger o JWT de ser acessado via client side.
@rocketseat
3 жыл бұрын
Bom ponto! Anotado! 😉 💜
Calma aí Rocketseat que tem muito conteúdo massa e nós não conseguimos acompanhar assim! ;)
Vídeo de autorização de rotas no next seria show de bola
@rocketseat
3 жыл бұрын
Faaaala, Arthur! Sugestão anotadíssima! 😉 💜
Mais vídeos sobre Auth!
@rocketseat
3 жыл бұрын
Faaaala, Guilherme! Sugestão anotadíssima! 💜
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!
Video massa demais valeu, sobre o package da rocket "unform" vale a pena usa-ló ainda para o Next js ? abraço
Mais vídeos sobre Autenticação social com verificação do token pelo backend e refresh token.
#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
trás a parte do refresh token!!!!
@rocketseat
3 жыл бұрын
Faaaala, Luis! Sugestão anotada! 👀 💜
@matheuslima9005
3 жыл бұрын
boaaaaaa apoiado
Diego faz um vídeo implementando um Loading de verificação toda vez que o usuário tenta acessar a aplicação.
Faz um video sobre permisões, seria muito massa, valeu rocketseat
@rocketseat
3 жыл бұрын
Ótimo ponto, Paulo! Sugestão anotada! 💜
Quero sim a Autenticação social, integrada com a Autenticação própria
@rocketseat
3 жыл бұрын
Perfeito, Cassio! Anotado aqui! 😉
Top
@rocketseat
3 жыл бұрын
Que massa que curtiu, Wanderson! 💜 🚀
Adorei todos os temas sugeridos! Queria sugerir outro tema que é como configurar esse KDE bonitão aí :P
@rocketseat
3 жыл бұрын
Ta em mãos, Giu! 👀 💜 *Customizando KDE Plasma (Kubuntu, Manjaro, etc) | Guilherme Rodz* kzread.info/dash/bejne/mmF61almgdPNlqw.html
Seria legal algo relacionado com SEO também, usando o Next! :D
@rocketseat
3 жыл бұрын
Sugestão anotada... 👀 💜
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...
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
1:01:48 ctx?: Parameters[0] 😁
Dá pra fazer um juntando a questão de segurança e refresh tokens via JWT
@rocketseat
3 жыл бұрын
Pereito, Brunno! Sugestão anotada! 💜
@agnaldopereiradasilva6007
3 жыл бұрын
@@rocketseat Também acharia massa!
@gersondantas6956
3 жыл бұрын
eu tinha pedido quase a mesma coisa, então vai ser massa demais
mais conteúdos sobre auth, pfvr. esse conteúdo ajuda demais Edit: toda vez que eu quiser proteger uma rota vou ter que implementar no getserversideprops a verificação do token e tudo mais?
Diego, parabéns, um vídeo ( (reduxtoolkit/saga) + typescript + next.js) será fantástico.
@rocketseat
3 жыл бұрын
Faaaaala, Edson! Show que curtiu! 💜 Opa, anotei sua sugestão aqui! 😉
Boa noite @Diego tudo bem? Maravilhosa sua aula, muito obrigado por compartilhar seus conhecimentos. Gostaria de saber com posso fazer para o usuário não sai da aplicação (dashboard) se ele alterar a url por exemplo digitando "/login"? Desde já agradeço :)
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...
@rocketseat
3 жыл бұрын
Sugestão anotadíssima... 👀 Valeu demais pelo carinho! 💜
your ti to explain sotNice tutorialng