Next.js - Autenticação JWT com back-end próprio - Code/Drops #72

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

[@emeci430]

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

[@pedrolucas55]

tava precisando disso

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

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

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

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

[@ShOcKDir]

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

[@denislevy176]

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

[@rocketseat]

Que massa que curtiu, Denis! Anotado! 💜 🚀

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

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

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

[@AndreOlive]

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

[@Krypto_sc]

conteúdo do diego e outro nivel, parabens mano vc e fera demais

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

[@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é? 💜

[@fdacio]

Muito Show. Ajudou no meus estudos aqui. Não sei já tem, mas seria interessante complementar esse vídeo com a parte de pemissões dentro do sistema. o que cada usuário autenticado pode acessar com base em suas rules.

[@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! 💜

[@mohamedshuaau632]

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

[@saulotarsobc]

Esse commit pre-video foi top mano. Que ótima ideia 😮.

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

[@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! 😉 💜

[@welltonquirino]

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

[@LucasFerronato]

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

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

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

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

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

[@pedroaguiar6665]

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

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

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

[@gersondantas6956]

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

[@reicaio6345]

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

[@rocketseat]

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

[@matheusrotta1589]

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

[@leonardojdas]

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

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

[@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! 💜 😍

[@labGeek]

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

[@KevinMadalossoVeiga]

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

[@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! 💜

[@elvesbrito9633]

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

[@arthur__er]

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

[@rocketseat]

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

[@alanvidal7155]

muito top como sempre os conteúdos do Diego

[@fernandocardenas657]

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

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

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

[@maykelesser]

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

[@diegoloop]

Em pleno 2023 isso funciona perfeitamente ❤

[@AlefyPimentel]

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

[@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! 💜 😍

[@luancampos5186]

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

[@luanpablo3750]

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

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

[@abnerwillys]

11:00 E pra quem quer vídeo de todas essas sugestões? kkkkk

[@pedrohenriquegomesbarbosa7098]

DIgo o mesmo ahahah não tem como escolher uma só

[@rocketseat]

Ops... 👀 HAHAHAHAHA Vamos anotando aqui! 💜

[@alitonoliveira1700]

Também gostaria de saber um pouco mais sobre os temas que o Diego comentou.

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

[@Felipe-dd8sh]

Que massaaa! Parabéns Rocketseat e Diego!

[@rocketseat]

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

[@cleysonsilva1828]

Sem defeitos! Muito obrigado mano!

[@rocketseat]

Que massa que curtiu, Cleyson! 💜 😍

[@rafaelmrantunes]

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

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

[@eemr2]

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 :)

[@Julie-ye1my]

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

[@cassiojosejesus]

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

[@rocketseat]

Perfeito, Cassio! Anotado aqui! 😉

[@tiagomaciel2488]

Vi esse titulo e já vim deixando o like

[@rocketseat]

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

[@tiagoferland]

Monstro. Amei

[@rocketseat]

Que bom que curtiu, Tiago! 💜

[@felippeDev]

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

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

[@GabrielSestrem]

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

[@rocketseat]

Bom ponto! Anotado! 😉 💜

[@DanielRios549]

32:30 E porque não tem essa propriedade req no contexto do getStaticProps? Eu não consigo usar ISR numa página que precisa de autenticação?

[@leticiarodriguescordeiro9191]

Faz sobre permissoes :-) video muito bom!!

[@cleberlopes5875]

Que conteúdo bom cara... S2

[@CleytonChagas]

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

[@alexandrehansen3419]

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

[@albertokambaia1722]

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

[@lorddrumond3937]

Vocês são foda demais.

[@NetoHeitor]

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

[@brunocarneiro7754]

Cara... isso foi lindo...

[@luishrodg]

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

[@rocketseat]

Faaaala, Luis! Sugestão anotada! 👀 💜

[@matheuslima9005]

boaaaaaa apoiado

[@paulospiguel]

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

[@rocketseat]

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

[@andregoncalvesdasilva4763]

Tive alguns problemas entre server side e o client side do next, na questão de pegar o cookie, para resolver adicionei a configuração do path no set e no get cookie setCookie(undefined, 'xxxx.token', token, { maxAge: 24 * 60 * 60 * 1, // 1 day, path: '/', }); e setCookie(undefined, 'xxxx.token', '', { maxAge: -1, path: '/', }); isso resolveu para mim.

[@renanpassos4607]

Diego, segui o que você estava fazendo mas no meu caso estou fazendo a api no Next também. Não consegui usar a nookies no lado do servidor de jeito nenhum. Precisava passar um context, tentei e não funcionou, e também não achei nenhum exemplo bom disso na documentação. Como ele se propoe a lidar com cookies no next não gostei da lib. Mas resolvi ate melhor o problema usando a propriedade cookies do NextResponse e NextRequest. Assim eu não vou usar a nookies, apenas o next e se precisar setar algum no cliente eu faço com javascript puro. Valeu pelo conteúdo!

[@FelipeFardoProspera]

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

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

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

[@josealexsandro9768]

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.

[@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? 😉

[@wagnerperin9455]

Como que ficou essa estratégia de autenticação no next13?

[@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! 💜

[@icodemobile]

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

[@rocketseat]

Que massa! 💜

[@DhenysonJhean]

Agora estou repensando se mudo minha aplicação para armazenar os dados em cookies. Estou usando o local storage e sempre que preciso verificar autenticação faço um if verificando se window and localstorage existem. Dessa forma algumas paginas (server side) entregam a pagina como se não tivesse autenticado porque não há esses dois itens no server side, mas assim que a pagina chega no client side, essa mesma função é chamada novamente, verifica que agora há window e localstorage e atualiza o context de autenticação como true. Será que essa minha abordagem é boa e posso continuar assim, pois funciona bem, o unico problema é que preciso colocar um loading full page, para evitar flash de atualização, por exemplo, o menu mudar a foto de perfil unauthenticated(default) para authenticated (foto do usuario) quando a pagina é atualizada... mas ainda assim, me recomenda continuar com essa abordagem ou realmente é melhor mudar para cookies? Pois não usei por alguns blogs sitarem algumas devantagens de cookies, não lembro especificamente quais.

[@Gabriel-ub1ic]

No 27:00 é uma boa pratica criar um arquivo SignInDataType.ts que tem um interface em vez declarar ele duas vezes?

[@andredeoliveira8986]

Finalmente achei esse vídeo

[@JunioralvesMend]

Muito bom seria bom fazer junto com backend

[@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! 😉

[@gabrielalmeida7890]

existe também o tailwindcomponents.com que tem componentes feitos por outras pessoas usando tailwind

[@andrebarbosa-marca]

faz sim um vídeo de formulario.

[@alexborelli9159]

Traz algo sobre permissões/cargos

[@rocketseat]

Faaaala, Alex! Bom ponto! Sugestão anotada aqui! 💜

[@samuelmanoel1046]

Putz seria massa

[@mathws1]

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

[@werikrodrigues790]

eu tenho um pouco de dificuldade quando e essas aulas onde ele tem todo um ambiente que já está pronto para fazer a demonstração.