Next.js - Autenticação JWT com back-end próprio - Code/Drops #72
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 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
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.
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
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.
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.
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
"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!
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.
Aula top! Com certeza eu gostaria de ver mais sobre autenticação no canal!!!!
Que massa que curtiu, Denis! Anotado! 💜 🚀
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! 💜
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.
Esse commit pre-video foi top mano. Que ótima ideia 😮.
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! 🚀🚀🚀🚀
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
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 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!
Massa!! Diegão como sempre mitando na explicação, ficou show! Parabéns 💜
Que show que curtiu, Diego! 😉
Ele é fera, né? 💜
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! 😉 💜
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
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!
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! 💜
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
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! 🚀
Faz um vídeo sobre como proteger o JWT de ser acessado via client side.
Bom ponto! Anotado! 😉 💜
Muito obrigado Diego. Os conhecimentos que você compartilha conosco no seu canal me ajuda muito.
53:00 miguézin de leve kkkkk, show de bola o video aprendi mt
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.
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 😃
Excelente! Com certeza, voto pra pra trazer o próximo video ser sobre Autenticação social junto com servidor próprio!
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...
Booa Diegão, obrigado pelo conteúdo! Estou no aguardo do vídeo com implementação do refresh token.
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! 💜 😍
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, esse vídeo é bom demais, ta maluco. Mais vídeos de autenticação por favor!
Vídeo de autorização de rotas no next seria show de bola
Faaaala, Arthur! Sugestão anotadíssima! 😉 💜
trás a parte do refresh token!!!!
Faaaala, Luis!
Sugestão anotada! 👀 💜
boaaaaaa
apoiado
mais um excelente vídeo do canal!! Parabéns Diego!!!
Oh Diegão traz mais vídeos sobre autenticação pra gente, toh aprendendo muito
Ótimo conteúdo, parabéns!! Facilita muito o entendimento das ferramentas
Finally. A title I can’t read and a language I don’t understand. Thank you for not baiting with english title
58:36 , poderia falar Diego, é um assunto que procuro a alguns dias! vlw cara, gosto demais do contúdo da comunidade!
Que bom que finalmente voltaram com as vídeo-aulas!
Nosso conteúdo técnico voltou com tudo! 😍
Diego agradeceria muito se fizesses uma aula de permissões com o next como aquela aula que a Dani fez com react app
Top mesmo, refresh token é interessante Diego para o dia a dia no trabalho de dev
Esse tipo de autenticação eu já fiz utilizando um HOC componente para controlar todas as rotas que eu desejo que seja privada.
Diego, sinto falta de vcs falarem de Java e spring boot... Pensa na ideia... Vcs são muito bons!
Como que ficou essa estratégia de autenticação no next13?
Mlk tu não tem ideia de como me ajudou com esse video! Valeu demais!
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.
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!
Autenticação JWT + integração Social 🚀🚀🚀
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
Excelente vídeo, me ajudou muito, como sempre... obrigado e parabéns.
Mais vídeos sobre Autenticação por favor!!!
Mais vídeos sobre Autenticação social com verificação do token pelo backend e refresh token.
Manda mais conteúdo de Next, ele é incrível!
Mais vídeos sobre Auth!
Faaaala, Guilherme!
Sugestão anotadíssima! 💜
Video massa demais valeu, sobre o package da rocket "unform" vale a pena usa-ló ainda para o Next js ? abraço
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
Incrível! Vou botar na prática hoje mesmo!
Que conteúdo bom cara... S2
Continuaria com o refreshToken visto que esse conteúdo super encaixa com o conteúdo de refreshToken da Dani na trilha de node!
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.
Que massaaa! Parabéns Rocketseat e Diego!
Que bom que curtiu, Felipe! Valeu demais! 💜 🚀
Finalmente achei esse vídeo
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! 💜 😍
Faz um video sobre permisões, seria muito massa, valeu rocketseat
Ótimo ponto, Paulo! Sugestão anotada! 💜
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!
Monstro. Amei
Que bom que curtiu, Tiago! 💜
Em pleno 2023 isso funciona perfeitamente ❤
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!
No caso foi usado a verificação na página da Dashboard, e se existir mais páginas, precisa ser feito esse mesmo procedimento em casa uma ou existe uma forma mais simples e correta?
Estou com essa mesma dúvida!
mesma dúvida !
Geralmente eu uso um componente Layout que vai por volta de todas as páginas autenticadas e nele coloco essa verificação de usuário autenticado. Assim caso não esteja logado não acessará nenhuma delas. Porém há páginas públicas que podem ser acessadas por todos, mas que quando vc está logado, pode ver, por exemplo sua foto no header, nesse caso a validação tem q ser feita em cada página onde a informação difere quando o usuário está logado ou não.
Se eu soubesse falar bem igual ao Diegão faria um vídeo explicando, mas é melhor deixar essa parte pra ele ;)
Caso o único requisito dessas páginas seja o usuário estar autenticado, você pode criar um component que esteja presente em todas elas, assim, sempre que o mesmo for renderizado, ele poderá autenticar o token e caso seja necessário redirecionar o usuário para uma página específica. Agora se for necessário fazer um controle de permissões/cargos, o ideal seria que você re-fizesse a autenticação a cada página, pois, provavelmente cada uma delas teria seus próprios requisitos/regras de negócios.
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
Muito bom Diego!! Só faltou o HTTPOnly nos cookies...
Sem defeitos!
Muito obrigado mano!
Que massa que curtiu, Cleyson! 💜 😍
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! 💜
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...
Permissões e Cargos pleaaase 🙏🥺
Sugestão anotadíssima, Douglas! É um excelente ponto! 💜
1:01:48 ctx?: Parameters[0] 😁
Vi esse titulo e já vim deixando o like
E curtiu o conteúdo, Tiago!? 👀 💜
Quero sim a Autenticação social, integrada com a Autenticação própria
Perfeito, Cassio! Anotado aqui! 😉
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?
Diego faz um vídeo implementando um Loading de verificação toda vez que o usuário tenta acessar a aplicação.
Traz algo sobre permissões/cargos
Faaaala, Alex!
Bom ponto! Sugestão anotada aqui! 💜
Putz seria massa
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 :)
existe também o tailwindcomponents.com que tem componentes feitos por outras pessoas usando tailwind
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.
muito top Diego!
Que massa que curtiu, Antonio! 💜
Já tinha usado JWT antes? 😉
faz sim um vídeo de formulario.
muito top como sempre os conteúdos do Diego
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! 😉
#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
Rocket, traz mais vídeo sobre autenticação pfv.
Deixa com a gente, Victor! 👀 💜
Faz sobre permissoes :-) video muito bom!!
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.
Vocês são foda demais.
sensacional!
Valeu 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?
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*
th-cam.com/video/h-FsG-QpgfI/w-d-xo.html