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

[@ebratz]

Mais vídeos sobre Autenticação por favor!!! Outro assunto muito interessante que vejo pouco conteúdo: SAAS e Tenants!

[@dieegosf]

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]

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]

apoio essa ideia aí

[@guilhermemoreira444]

total apoio para multi tenants e SAAS...

[@debora468]

@@ebratz Eu também ja procurei bastante e é dificil achar conteudo em portugues sobre multi-tenant.

[@rfigueiredo]

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

[@HerbertonCandidoSouza]

Diego, teu canal é muito bom mesmo... O conteúdo, a didática, os exemplos, tudo simplesmente muito bem feito... Parabéns pelo trabalho

[@diegoveigass]

Massa!! Diegão como sempre mitando na explicação, ficou show! Parabéns 💜

[@rocketseat]

Que show que curtiu, Diego! 😉 Ele é fera, né? 💜

[@viniguerrero]

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 😃

[@thgmgn]

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! 🚀🚀🚀🚀

[@LucasFerronato]

Excelente! Com certeza, voto pra pra trazer o próximo video ser sobre Autenticação social junto com servidor próprio!

[@AndreOlive]

Muito obrigado Diego. Os conhecimentos que você compartilha conosco no seu canal me ajuda muito.

[@fmaciel2]

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!

[@liderhenrique1140]

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]

Faaaala, Henrique! Que massa que ta curtindo! Sugestão anotadíssima! 😉 💜

[@emeci430]

Permissões e cargos seria sensacional! Obrigado por todo conteúdo!

[@pedrolucas55]

tava precisando disso

[@KevinMadalossoVeiga]

mais um excelente vídeo do canal!! Parabéns Diego!!!

[@pedroaguiar6665]

Cara, esse vídeo é bom demais, ta maluco. Mais vídeos de autenticação por favor!

[@matheusrotta1589]

Ótimo conteúdo, parabéns!! Facilita muito o entendimento das ferramentas

[@pacalexandre]

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

[@welltonquirino1633]

Booa Diegão, obrigado pelo conteúdo! Estou no aguardo do vídeo com implementação do refresh token.

[@paulinha-19]

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.

[@reicaio6345]

Que bom que finalmente voltaram com as vídeo-aulas!

[@rocketseat]

Nosso conteúdo técnico voltou com tudo! 😍

[@marcosantoniocerqueira126]

"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!

[@AlefyPimentel]

Excelente vídeo, me ajudou muito, como sempre... obrigado e parabéns.

[@denislevy176]

Aula top! Com certeza eu gostaria de ver mais sobre autenticação no canal!!!!

[@rocketseat]

Que massa que curtiu, Denis! Anotado! 💜 🚀

[@maykelesser]

Incrível! Vou botar na prática hoje mesmo!

[@Felipe-dd8sh]

Que massaaa! Parabéns Rocketseat e Diego!

[@rocketseat]

Que bom que curtiu, Felipe! Valeu demais! 💜 🚀

[@leonardojdas]

Mlk tu não tem ideia de como me ajudou com esse video! Valeu demais!

[@josevanderlleegs299]

eu votaria por auth com backend proprio, integrando com next...vlw!!

[@rocketseat]

Perfeito, José! Sugestão anotada! 💜

[@agnaldopereiradasilva6007]

@@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.

[@luanpablo3750]

Manda mais conteúdo de Next, ele é incrível!

[@elsonaraujojr]

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!

[@ricardo-emerson]

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.

[@ShOcKDir]

53:00 miguézin de leve kkkkk, show de bola o video aprendi mt

[@felipefreire5245]

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

[@tbass.p3480]

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...

[@eknath3813]

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.

[@cleberlopes5875]

Que conteúdo bom cara... S2

[@luancampos5186]

Oh Diegão traz mais vídeos sobre autenticação pra gente, toh aprendendo muito

[@cleysonsilva1828]

Sem defeitos! Muito obrigado mano!

[@rocketseat]

Que massa que curtiu, Cleyson! 💜 😍

[@alanvidal7155]

muito top como sempre os conteúdos do Diego

[@tharlysalves5630]

Poxa @Diego, depois faz a continuação dessa aula mostrando como fazer a parte do refresh token, ficou muito massinha 🚀🚀

[@rocketseat]

Sugstão anotada, Tharlys! 💜

[@rafaelreale8848]

@@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

[@elvesbrito9633]

Top mesmo, refresh token é interessante Diego para o dia a dia no trabalho de dev

[@brunomello7499]

caraaaaaaaai isso vai me ajudar MUITO em um projeto que to tocando valeu galera

[@rocketseat]

Que show, Bruno! Depois conta pra gente como foi a experiência! 💜 😍

[@josuebarros-desenvolvedorw2490]

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!

[@lorddrumond3937]

Vocês são foda demais.

[@tiagoferland]

Monstro. Amei

[@rocketseat]

Que bom que curtiu, Tiago! 💜

[@gersondantas6956]

58:36 , poderia falar Diego, é um assunto que procuro a alguns dias! vlw cara, gosto demais do contúdo da comunidade!

[@educode_]

Haha isso sim é conteúdo, parabéns

[@rocketseat]

Que massa que curtiu, Carlos! Nosso conteúdo técnico voltou com tudo! 💜 😉

[@antonioulundo5765]

muito top Diego!

[@rocketseat]

Que massa que curtiu, Antonio! 💜 Já tinha usado JWT antes? 😉

[@brunocarneiro7754]

Cara... isso foi lindo...

[@denilsoncosta9837]

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]

Faaaala, Denilson! Que massa que curtiu! 😉 Excelente ponto mesmo! Sugestão anotada! 💜

[@matheuslima9005]

Otimo video, ate mesmo para quem está iniciando! Traz um video sobre perfis de autorização, qual nivel pode ver oq!

[@rocketseat]

Faaaaala, Matheus! Que massa que curtiu o conteúdo! Opa, sugestão anotadíssima aqui! 💜

[@revolutionary_tower]

Amei a ideia sobre falar de Refresh token e padrões de segurança no jwt, me interessaria bastante

[@rocketseat]

Faaaaala, Rayon! Sugestão anotada aqui! 💜 😍

[@eduardothieves1]

Quando usar autenticação Server Side e Client Side, e como fazer estratégia de refresh token. Ótimo vídeo!

[@danielsoares1608]

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.

[@icodemobile]

Muito obg pelo vídeo, me ajudou mto✋👊

[@rocketseat]

Que massa! 💜

[@Julie-ye1my]

Diego, sinto falta de vcs falarem de Java e spring boot... Pensa na ideia... Vcs são muito bons!

[@eunos9396]

Conteúdo muito massa!

[@rocketseat]

Que massa que curtiu! 💜

[@fernandocardenas657]

Mais vídeos sobre Autenticação por favor!!!

[@andredeoliveira8986]

Finalmente achei esse vídeo

[@felippeDev]

Continuaria com o refreshToken visto que esse conteúdo super encaixa com o conteúdo de refreshToken da Dani na trilha de node!

[@mohamedshuaau632]

Finally. A title I can’t read and a language I don’t understand. Thank you for not baiting with english title

[@alexandrehansen3419]

Muito bom Diego!! Só faltou o HTTPOnly nos cookies...

[@robsonlocatelli8126]

Bora lançar sobre autenticações sociais com o NextAuth e sobre a melhor maneira pra não deixar o toke visível 🤟

[@rocketseat]

Sugestão anotadíssima, Robson! 💜

[@zaujulio]

up

[@edsonramosti]

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]

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! 🚀

[@leticiarodriguescordeiro9191]

Faz sobre permissoes :-) video muito bom!!

[@albertokambaia1722]

Diego agradeceria muito se fizesses uma aula de permissões com o next como aquela aula que a Dani fez com react app

[@tiagomaciel2488]

Vi esse titulo e já vim deixando o like

[@rocketseat]

E curtiu o conteúdo, Tiago!? 👀 💜

[@PequenosExploradoresdaFe]

Muito bom seria bom fazer junto com backend

[@RafaelGomes01]

Conteúdo top! Aguardando os próximos codedrops sobre autenticação mencionados no vídeo. E quem sabe algo sobre PWA.

[@dieegosf]

PWA é puro amor! Vamos ter em breve sim.

[@RafaelGomes01]

@@dieegosf show!

[@arthur__er]

Vídeo de autorização de rotas no next seria show de bola

[@rocketseat]

Faaaala, Arthur! Sugestão anotadíssima! 😉 💜

[@diegoloop]

Em pleno 2023 isso funciona perfeitamente ❤

[@rbltv]

sensacional!

[@rocketseat]

Valeu demais! 💜 🚀

[@nan-code]

Esse tipo de autenticação eu já fiz utilizando um HOC componente para controlar todas as rotas que eu desejo que seja privada.

[@mathws1]

Calma aí Rocketseat que tem muito conteúdo massa e nós não conseguimos acompanhar assim! ;)

[@GabrielSestrem]

Faz um vídeo sobre como proteger o JWT de ser acessado via client side.

[@rocketseat]

Bom ponto! Anotado! 😉 💜

[@Piipos]

Daaaale 💜

[@rocketseat]

Daaaale! 💜

[@wellingtonsilva2669]

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!

[@douglasrafael9989]

Muiiiito bom

[@cassiojosejesus]

Quero sim a Autenticação social, integrada com a Autenticação própria

[@rocketseat]

Perfeito, Cassio! Anotado aqui! 😉

[@felipebatista7469]

Traga SIMMMM! rsrs

[@andrebarbosaone]

faz sim um vídeo de formulario.

[@paulospiguel]

Faz um video sobre permisões, seria muito massa, valeu rocketseat

[@rocketseat]

Ótimo ponto, Paulo! Sugestão anotada! 💜

[@luishrodg]

trás a parte do refresh token!!!!

[@rocketseat]

Faaaala, Luis! Sugestão anotada! 👀 💜

[@matheuslima9005]

boaaaaaa apoiado

[@brunnoguimaraes3196]

Dá pra fazer um juntando a questão de segurança e refresh tokens via JWT

[@rocketseat]

Pereito, Brunno! Sugestão anotada! 💜

[@agnaldopereiradasilva6007]

@@rocketseat Também acharia massa!

[@gersondantas6956]

eu tinha pedido quase a mesma coisa, então vai ser massa demais

[@labGeek]

Autenticação JWT + integração Social 🚀🚀🚀

[@fabioteixeira2037]

#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

[@Teuopoty]

Muito legal!

[@rocketseat]

Que bom que curtiu! 💜

[@guilhermedatilio9546]

Mais vídeos sobre Auth!

[@rocketseat]

Faaaala, Guilherme! Sugestão anotadíssima! 💜

[@giulianabezerra]

Adorei todos os temas sugeridos! Queria sugerir outro tema que é como configurar esse KDE bonitão aí :P

[@rocketseat]

Ta em mãos, Giu! 👀 💜 *Customizando KDE Plasma (Kubuntu, Manjaro, etc) | Guilherme Rodz* kzbin.info/www/bejne/nl6ppHpjhtWanKs

[@NetoHeitor]

Mais vídeos sobre Autenticação social com verificação do token pelo backend e refresh token.

[@minibanex031]

Seria legal algo relacionado com SEO também, usando o Next! :D

[@rocketseat]

Sugestão anotada... 👀 💜

[@CleytonChagas]

Video massa demais valeu, sobre o package da rocket "unform" vale a pena usa-ló ainda para o Next js ? abraço

[@samuelrodrigues9218]

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...

[@edymbhify]

Diego, parabéns, um vídeo ( (reduxtoolkit/saga) + typescript + next.js) será fantástico.

[@rocketseat]

Faaaaala, Edson! Show que curtiu! 💜 Opa, anotei sua sugestão aqui! 😉

[@matiaspalheiro]

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.

[@rocketseat]

Perfeito, Rodrigo! Anotadíssimo! 😍

[@zaujulio]

up

[@amirawebsystems5217]

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]

Sugestão anotadíssima... 👀 Valeu demais pelo carinho! 💜

[@lucasperes9156]

Diego faz um vídeo implementando um Loading de verificação toda vez que o usuário tenta acessar a aplicação.

[@wictortec5627]

Fantástico ! Fala sobre refresh token por favor

[@rocketseat]

Faaaaala, Wictor! Opa, bom ponto! Vou anotar aqui! 💜

[@rafaelmrantunes]

1:01:48 ctx?: Parameters[0] 😁

[@kimfrana6873]

Como sempre conteúdo incrível. Sempre fico besta com sua didática =O

[@carlosvinicius9767]

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?

[@emersonnakahara9694]

U BEST!!!

[@hitterobr]

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

[@trasher5431]

Primeiro ❤️

[@rocketseat]

Booooa! 💜 Curtiu o conteúdo? 👀

[@trasher5431]

@@rocketseat Demais, gosto muito da didática de vocês!