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

e até agora é seu salve só que legal a gente volta aqui no dashboard seu dom F5 aqui agora como tô que está presente no ficou que ele me mantém na página 10 por Se Eu deleto o Tom que aqueles que eu fiz 1.5 ele automaticamente envia a gente de volta para a página de login isso aqui é muito legal porque essa esse redirecionamento e essa avaliação do toque aqui no next ela tá acontecendo server-side Então diferente uma aplicação que a gente constrói com um cliente me Aqui É que geralmente a gente válida a autenticação

ali com o iOS effect ou ali na hora de componente já tá sendo criado em tela nesse caso aqui o usuário nunca vai conseguir ver o conteúdo da página 10 porque se ele não estiver autenticado nem a interface o layout nada pois aqui no client wi-fi ou e uma aplicação se não tá utilizando de servers are render Isso vai acontecer é E aí E aí a fala de beleza mais um cochilo aqui para o canal da vaca City e hoje a gente vai falar sobre um dos temas que mais pedem para a gente aqui nos

comentários do YouTube quando sai vídeo sobre o iett junto com o Next que é sobre autenticação Quais são os modelos de autenticação que a gente pode utilizar uma aplicação nexo e qual o modelo utilizar e é que eu vou mostrar também um exemplo prático uma demonstração prática de como fazer autenticação do nexo de uma maneira simples quando você tem um backhand próprio seja quando você já tem uma ipiae e fornece a autenticação baseado em você enviar algumas presenciais como usuário e senha o e-mail e senha e esse daqui a gente devolveu um pouquinho ali um

jwt ou até uma sessão mesmo né um token de sessão da maneira que a gente já conhece são dia cookies ou qualquer coisa assim então a gente vai entender como fazer isso mas eu vou explicar um pouquinho também sobre os outros modelos de autenticação que a gente pode utilizar hoje em aplicações web para você escolher realmente aquela que faz mais sentido para você então bora lá antes de mais nada antes da gente entrar aqui na parte prática da nós me deixa até o colocar tinha por cima pro lado aqui dentro da documentação do nest do

Next a gente consegue ter uma visão muito clara de quais são os modelos de autenticação que a gente pode utilizar na nossa aplicação e aqui é muito legal ver essa documentação porque o Next ele tem várias maneiras diferentes de realizar a autenticação diferente de uma de uma aplicação iett tradicional porque se a gente lembrar muito bem o Next ele traz junto com uma aplicação front tradicional mais pa que a gente já conhece a possibilidade de a gente tem algumas rotas ali dentro de funcionam como um servidor da Candy ou seja como algo sendo executado do

Servidor né então a gente tem um servidor node rodando junto com a nossa aplicação front-end que nos permite fazer algumas coisas que a gente não conseguiria fazer em uma aplicação tradicional Riachão uma aplicação tradicional utilizando qualquer outra biblioteca então Isso facilita pra gente lidar com algumas coisas por exemplo a autenticação social que é uma das coisas que é muito fácil fazer dentro do Next e sem precisar fazer qualquer tipo de alteração no nosso pé quente né então vamos entender um pouquinho Quais são as alternativas que a gente tem de autenticação atendendo next e depois Bora

por exemplo prático então o Next aqui ele traz duas principais é dois principais provedores de autenticação que ele recomenda o primeiro deles next ao que já é bem conhecido por quem trabalha com next quem já utiliza autenticação o Next ao ele é basicamente um sistema de autenticação extremamente pronto para você sair utilizando que tem integração com agulha ficar branco com a grande maioria dos provedores de autenticação atuais por exemplo autenticação e sociais ele integra também com auxílio ou com a WS cobre tu o outros provedores de autenticação específicos para autenticação então a pessoa consegue fazer

autenticação convite Rubi Twitter Google com esses providers prontos digamos assim de uma maneira muito fácil sem necessariamente a gente precisar armazenar informações do usuário Então como a gente consegue utilizar para e a o digamos o padrão o álcool né que a gente consegue fazer uma autenticação com o serviço terceiro e esse serviço terceiro é que detém as informações de senha do usuário e tudo mais quando os olhos são tente na nossa aplicação é serviço terceiro devolve um pouquin e tem uma validade de tempo e esse tom que ele persiste ali na nossa aplicação e a

gente consegue dizer se o usuário foi autenticado ou não então isso é uma das estratégias mas não conecta muito bem quando a gente já tem um pé quente Pronto né que a gente já tem aquele que fornece um jwt um pouco em que é a realidade de uma boa parte das aplicações que a gente tem aí no mercado Unix Direction ele é mais recomendado quando a gente precisa é de uma alta indicação que não necessariamente é a autenticação social então aqui ó ele tem até aqui dentro da própria documentação se eu não me engano tem

um trechinho que fica muito claro quando a gente utilizar cada uma dessas o tipos aqui eu acho que é não deve não treme treme treme treme treme durante Tinha Um textinho talvez eles envolveram que falava quando a gente usava cada um desses aqui mas assim Conecte ao ele é o mais utilizado E aí eu vou falar sobre algumas alternativas que a gente tem algumas coisas que a gente consegue utilizar inclusive é em conjunto conexo ao quando a gente quer fazer autenticação do nosso ef-nex de uma maneira simples sem necessariamente ter o pé quente Então como

a gente tá muito nessa pegada hoje em dia de aplicações que são as famosas James técnica é que o front-end ele acaba trazendo muitas responsabilidades e a gente consegue colocar a responsabilidade de autenticação também no nosso front-end nesses casos o Next alta ele encaixa muito bem porque ele é uma um sistema de autenticação o biotechtown de autenticação completa independe da gente precisar ter um beck and né ele vai usar para o pai dele já conhecidos como eu falei antes como falei Beijo e autenticações sociais o cognitivo o alvirrubro E por aí vai além disso a

se eu entrar aqui na própria documentação do e não vai ser o foco aqui da nossa do nosso vídeo A gente não vai entrar muito disso eu consigo ver aqui que todos authentication providers que ele tem aqui uma dos tipos de autenticação que o pessoal acaba utilizando muito também hoje em dia em aplicações nas aplicações fonte é uma aplica a autenticação com link mágico via e-mail né Então hoje tem um serviço que se chama médico nem existem outros inclusive que são gratuitos esse aqui é pago mas o médico Limpo basicamente é um tipo de autenticação

a que muitas empresas estão usando principalmente esses softwares inglês né se softwares que são aqueles só ter sass mais feitos para consumidores finais e não para empresas diretamente que é muito fácil você sair criando uma conta ali como é só pensam querem lidar com autenticação tudo do Zero eles acabam utilizando o médico e nem né os médicos em que são basicamente a pessoa bota só o e-mail dela a a gente Envia um e-mail para a pessoa com um pouco e gerada pela nossa aplicação pessoa clica nesse link né Desse e-mail e esse toque e essa

pessoa é direcionada para nossa aplicação E assim a gente sabe que ela tá autenticada porque se ela conseguiu botar o e-mail e lá dentro do Meio dela de clicar no link quer dizer que ela tem acesso a esse meio quer dizer que a gente consegue verificar que esse meio é dela e dizer que ela está autenticada Ou seja que ela tem permissão para fazer coisas dentro da nossa aplicação em nome desse usuário que tem tá o e-mail então médico link leva em utilizado se em algumas aplicações não necessariamente em serviço mas o conceito por baixo

dos panos que ao conceito de autenticação via link por e-mail então a gente já falou sobre autenticação social principalmente no next aos sobre médico link e tem os problemas de autenticação que inclusive integram next altos são muito famosos famosos que é o a WS cognito ele é muito bacana né para a um sistema de autenticação completo da WS o altos e o que seria mais ou menos o código do por eles porém não da WS numa empresa privada todos eles têm um custo né então se você dá uma olhadinha aqui na parte de a definição

de preço você vai ver né Tchau até sete mil usuários ativos mensais você não paga nada e nem precisa colocar cartão de crédito a partir disso você começa a ter um custo né esse custo vai elevando a baseado em número de usuários ativos mensais nada abrir a escola que você também tem alguma coisa bem parecida com isso né Você tem um nível gratuito de 50 mil usuários ativos então aqui já é um pouquinho maior a gente mais legal e passando disso você vai pagando também para o número de usuários ativos né que chama aqui de

e-mail Eo que é monthly active users Aí você paga um número para para isso então se fosse fazer um cálculo aqui por exemplo a uma plataforma aí você tem 200 mil usuários ativos e claro que não vou conseguir fazer exatamente por isso aqui mas vamos pegar tudo nessa faixa de preço então 0,004 seis você pagaria 920 dólares mensais é para controlar a autenticação então isso aqui pode ser muito legal principalmente para o hospital vez tem um pouco usuários ativos o que você consiga é manter esse curso da realmente ter é custear esse preço da autenticação

mas caso você esteja controlando autenticação tudo por si só que a gente vê como realidade de várias aplicações Você tem o próprio é que a gente que gera JW ter que entrega para front-end front-end determina que isso é o que usuários aos indicado é tudo mais a gente vai ver então nesse vídeo como fazer essa autenticação completa como fazer isso por dentro do Next sem utilizar nenhuma dessas bibliotecas aqui fazendo tudo do zero mas se você gostaria que eu trouxesse mais vídeos mais avançado sobre autenticação dentro do Next gostaria muito de trazer então tem alguns

vídeos que dá para trazer aqui para dentro primeira delas é como a gente consegue trazer autenticação social para dentro do Next use integrada com o backend próprio Então a gente tem um pé quente que provemos jwp como que eu consigo anexar isso a autenticação social e inclusive utilizando o próprio next Austrália que facilita bastante autenticação social a letra C vídeo que também sobre permissões dentro do nexo Então como lidar com autorização e que o usuário pode fazer o quê que ele não pode fazer se ele pode acessar tal pajens não pode acessar tal página baseado

em permissões e cargos né a gente poderia trazer um vídeo também sobre como lidar um refresh token dentro na parte de dentro do Sul não é algo necessariamente específico do Next né som é algo realmente Dori é com todo né como que a gente consegue rivalizar um toque quais são as melhores estratégias de segurança do toque em quanto tempo quanto tempo deixar o Tocantins é válido se eu faço algum tipo de variação se eu tô quem tem que ser salvo no banco não né se tem que ser Estreito então a gente pode trazer sobre isso

também e eu poderia também e trazer um vídeo um pouquinho sobre alguns padrões de arquitetura de autenticação mais seguros para quem está lidando com jwb para não deixar o que jwt né o exterior um pleonasmo eu já tô te já é Jason laptop né então token jwt seria repetitivo mais é como a gente faz para o que não ficar disponível no front and dentro de aplicações e eu só não consigo A copiar esse tom que tem acesso a ele e tudo mais então a gente consegue falar um pouquinho mais sobre isso no futuro então deixa

aí nos comentários caso você tem interesse em qualquer tipo desse vídeo bota embaixo que eu voltar super feliz em trazer aqui para vocês então bora lá agora a gente vai realmente para aplicação prática aqui pra gente entender como fazer autenticação então o que que eu fiz aqui agora eu deixei uma aplicação bem simples montada né algo que você consegue deixar pronto eu vou deixar o link dessa aplicação aqui do bicho tiver aqui na descrição desse vídeo caso você queria também ter esse layout tudo mais eu tô usando tenho aqui para criar esse layout da maneira

mais rápida possível para quem não conhece o teu eles têm um produto que se chama telões e uai é uma série de componentes prontos eh eh feitos inteiro em que facilitam a criação de sistemas principalmente e se você não quer perder muito tempo layout então aqui por exemplo eu vim aqui na parte de saírem resistirei chão e copia esse layout Zinho aqui só tirei as coisas que eu não ia usar esse é um serviço que ele tem um custo né Por mais que tenha O componente que são gratuitos por exemplo esse aqui é gratuito Se

não me engano mas como eu pago aqui né Eu gosto de pagar pelas coisas que são úteis então como eu pago aqui o meio do ai eu tenho acesso a todos os componentes que ele tem aqui então provavelmente em vários vídeos aí da rack City voltar utilizar desses componentes para gente não perder muito tempo com a estilização mas eu vou deixar tudo isso para vocês Núbia aí então Vocês conseguem baixar aplicação e sair utilizando eu deixo uma a tela de login vez simples é meio e senha né que é o que geralmente a gente tem

nas aplicações pronto and aí e deixei uma página de 10 por também que a gente vai utilizar como a página que não pode ser acessado acaso usuário não esteja altenticado a e aqui é uma página bem simples ela não tem nenhum tipo de funcionalidade só mostrando aqui algumas informações Mas como eu tô usando aqui eu tenho yuuyo mais legal é que isso aqui já fica responsivo na então se eu vier aqui e colocar na versão do celular a volta que o iPhone x eu posso ver que já tá responsivo aqui ó Isso aqui é muito

legal para te desejar tem a opção de medo aqui eu já tenho todas as informações e a isso vale também para autenticação Aqui também tá responsiva porque eu tô usando o teu ID vai lá ele já me entrega tudo prontinho então Maravilha e agora a gente vai começar a pegar essa aplicação aqui transformando ela é acionando a parte de autenticação dentro dela então tá aqui no meu vs Couto com toda a aplicação já pronta o que eu vou facilitar para vocês é dar um convite nesse primeiro ponto da aplicação então eu vou botar aqui pra

vídeo assim você já sabem que caso vocês queiram pegar essa aplicação antes da finalização do vídeo do momento que eu tô aqui agora é só acessar o convite pré vídeo que vocês vão ter aplicação com ela tá agora sem autenticação E aí depois eu faço um novo convite com autenticação finalizada vamos lá primeira coisa que eu preciso fazer é pegar os as credenciais do usuário aqui dentro nesse vídeo eu não vou utilizar um beck and então eu não desenvolviam é que a gente eu não tô com um beck a gente rodando então todas as funcionalidades

de geral tolkki tudo isso eu vou fazer de uma mulher é fictícia mas uma maneira muito clara de como você integrar com um beck o forno truque retorna as informações do usuário vai ficar muito claro então fica bem tranquilo ou tranquilo nisso Beleza eu vou começar utilizando aqui uma forma da gente pegar os dados do meu celular ou então eu vou instalar uma biblioteca para formular eu vou usar o iett Hulk forma aqui que é simples da gente integrar com o iett direito aqui do riacho conforme eu vou pegar a função e uniforme ó e

aqui como ele é um Hulk eu vou simplesmente declarar que uniforme e ela devolve para gente algumas informações né a principal informação que eu preciso de cílios forma aqui é o raster raster basicamente o registro simples eu não vou focar tanto em falar sobre formulários aqui mas se vocês gostaram do vídeo mais completo da gente falando sobre formulários Com certeza eu posso trazer aqui do canal então aqui eu tenho dois Campos e-mail e password e a gente vai simplesmente o jogar que conforme a documentação do veículo conforme a um spread operator passando a função Western

e falando qual que é o nome do Campo né então aqui o nome do campo é meio eu só passo o e-mail aqui a gente vai fazer a mesma coisa com o password on a e agora aqui desse uniforme eu vou pegar o nosso rendou são ide e vou criar também uma função aqui chamada redouça em mim e aqui doença o nosso farmina techform quando o usuário realizar um sorvete eu vou chamar a função renda alça vídeo e vem lado e os forma aqui ó e passar para ela como parâmetro a minha função de seu

limite que essa renal saindo então só vou encapsula a nossa função com essa função renal sumido que vem do uniforme que ele vai fazer algumas tratativas automaticamente pra gente e aqui em basicamente eu vou ter acesso aos dados enviados pelo formulário né então eu vou simplesmente vir aqui abro isso aqui nesse precisar alimentos Deixa eu tirar o responsivo abra Consul vou dar uns um pouco aqui deixa eu dar um sai nem já tá lá Diego Michel Fernandes chegou a ponte ao ponto f@gmail.com meu e-mail pessoal E tem também aqui é sério já pronto para gente

utilizar que são os campos que estão informados aqui dentro ah e aí agora você precisa é fazer algumas coisas para conseguir lidar com a autenticação aqui dentro né primeira coisa que a gente precisa fazer é a autenticação ela é algo que ela faz parte da aplicação como todo então quando a gente fala de autenticação autenticação ela precisa estar presente em várias páginas em vários componentes do nosso ep porque dentro do contexto de autenticação se a gente for pensar em autenticação e o armazeno não saltou quem ou a informação se o usuário está logado ou não

geralmente dentro da autenticação Eu armazeno também qual usuário está logado na nossa aplicação às vezes até quais permissões ele tem quais cargos ele tem Então nesse caso como é uma informação que vários componentes da nossa aplicação devem ter acesso a essa informação por exemplo cabeçalho preciso informar mostrar lá o Avatar do usuário a outro componente Nossa aplicação precisa se comportar de forma diferente o usuário tem acesso ao não as páginas da nossa aplicação precisam determinar se o usuário pode acessar elas ou não E você tá autenticada ou não seja como é uma informação Global na

grande maioria das vezes é muito legal a gente criar um texto para autenticação para a gente ter acesso a essa informação de uma maneira mais simples então aqui dentro do nosso ep que eu vou fazer é criar uma pastinha de conta que não era a gente vai usar conta enfiaria aqui e eu vou criar que o alto contexto. Que é sexo eu vou criar ele como tsx é o prezão tá escrito aqui vou criar como quer assistir porque aqui dentro também vou ter um componente já vou mostrar o porquê de eu gosto de criar os

meus um texto sempre de uma maneira a diferente aqui então vou começar canela aqui o Meu Alvo que ontem usando eu criei de contas que vem de dentro do riacho aqui eu vou agora a Sportage contexto aqui de dentro e aí o que eu gosto de fazer aqui é o motivo de utilizar o tsx aqui dentro do contexto eu gosto de puxar o por vai ter do contexto né a gente tem ali o componente ao qual três. Por vai dar né que a gente coloca geralmente por volta dos componentes que a gente quer que tenham

acesso a esse contexto se você ainda não sabe como utilizar conta E ai doí aqui volta em alguns vídeos do canal dá uma procurada em nosso canal tem um post no nosso blog também que explica muito bem do zero como que é utilizada para que que serve aqui no focus aqui a gente não vai dar foco explicar acontecer enviai esse explicar a parte de autenticação então eu não gosto de deixar esse por vai ver como responsabilidade a gente deixar ele aqui no ERP né puxar aqui oh well of aqui para dentro dessa forma In a

World of Tanks né ponto provaider porque daí nesse caso a gente vai ter que informar o velho do pro vai vir aqui dentro e é por isso que eu não gosto de trazer o provar daqui para o f-list o jogo essa parte aqui para ver se tem um componente que fica aqui dentro de si próprio componente que eu chamo de autor vai ler e aqui basicamente o que ele vai retornar é isso aqui que eu tinha colocado dentro do ERP essa esse código aqui a única diferença é que eu não coloquei o componente que eu

tenho aqui na verdade é um Thriller que eu vou pegar as provas desse componente e aí como esse componente autor vai ler tá sendo exportado aqui de dentro basta o importar ele aqui ó alto por vai ler e agora o jogo ele aqui por volta e assim eu mantenho a responsabilidade de passar um valor para esse contexto para o próprio aconteça então aqui nesse velho eu vou passar as informações que eu quero manter Nesse contexto então por exemplo uma das principais informações que a gente vai precisar ter aqui no contexto é a informação se o

usuário está autenticada ou não só a gente pode criar que por enquanto um a variável simples authenticated eu vou começar lá como falso e passar aqui para dentro do velho desse contexto como a gente tá usando typescript aqui é legal a gente sempre te passar as informações para na hora que a gente for utilizar desse contexto a gente sabe quais informações estão presentes ali dentro se eu não fizesse a tipagem na hora que o furo da lá o Wilson tanques né usar os dados desse contexto eu não vou ter uma inteligência dá ideia para mim

mostrar Quais são os dados que eu tenho ele dente então eu sempre gosto de criar um site aqui uma interface tanto faz chamada authcontext esteira ou ao que não tem que sai para uma coisa assim falando Quais são as informações que eu botar ele dentro por exemplo a primeira informação que eu vou ter é um PIS autenticar e eu vou falar que o tipo aqui o tipo dele é um booleano né ele só vai me retornar sim ou não é show falso e aqui agora até seguindo a própria documentação do vi aqui a maneira mais

fácil de eu falar para esse contexto aqui que ele vai ter esse formato Aqui é aqui nesse objeto que eu inicializo o contexto que a mão objeto inicial do valor do fundo e eu coloco com s e falo que ele vai ter esse formato aqui né então eu tô basicamente instruindo All types with ao meu código e o objeto de valores do contexto precisa ter esse formato aqui na então é basicamente isso que a gente vai fazer então a nossa estrutura do contexto de autenticação ela tá pronta né a gente tem uma estrutura básica que

lhe contei autenticação o que que não tá sendo feito ainda é a funcionalidade de autenticação que é o que a gente vai começar a fazer a partir de agora então bora lá primeira coisa que eu vou precisar aqui na nossa aplicação é a função de autenticação esse e por mais que essa função de autenticação ela seja acessada somente pela página de login do nosso ep Pode ser que é a funcionalidade de autenticação Em algum momento ela precisa ser acessada por mais de uma página Nossa aplicação é isso pode acontecer esse e às vezes até por

100 usuário informar alguma coisa necessariamente a gente pode autenticar ele por um link mágico que veio e tudo mais e a funcionalidade de autenticação a função de autenticação eu vou trazê-la aqui para dentro do nosso contexto então aqui dentro eu vou declarar uma função a simples né chamada sem aqui dentro dessa função basicamente o que que eu vou fazer seria lugar correto da gente fazer a chamada para não servir ai enviar os dados de e-mail e senha do usuário trazer o toque né o jwt e salvar esse Tom em algum lugar para gente ter acesso

a esse topo e mesmo que o usuário de um refresh na página ou qualquer coisa assim e também falar que o usuário enfim tá autenticada na nossa aplicação Então agora que a gente vai fazer aqui dentro eu vou criar uma função dentro aqui do nosso ep que simula essa chamada aí piá Mas se você tiver realmente com acesso ao seu backhand aqui você faria o frete né para os dados ali do seu backhand usarem Whats para fazer a chamada para sua equipe a aqui como eu não tenho essa aqui ai eu vou criar aqui uma

pastinha Services e eu vou criar um arquivo chamado falta de S para simular esse back-end digamos assim aqui teria esses que o quinto demais aqui de dentro que tem um desse serviço de autenticação eu vou retornar uma função chamada sign your quest ela precisa receber alguns dados eu vou te passar esses dados aqui é para gente ter uma inteligência um pouquinho mais aprimorada então eu preciso receber e-mail e senha isso aqui seria como se fosse uma requisição né o bar e da nossa a da nossa requisição lá no backend a aqui só pra ficar um

pouquinho mais real eu vou fazer o seguinte também eu vou declarar aqui em cima uma constante chamada dele aí que é uma função a que que recebe o número de tempo que eu quero que ele de um delay oi e ela devolve uma Promise You O que é resolvida depois desse tempo de delay então o que que eu tô fazendo aqui basicamente como eu quero que você que deu uma sensação um pouquinho mais real que a gente foi no backend demorou um pouquinho ali para retornar os dados e daí voltou eu tô fazendo automaticamente com

que todas essas funções que simulam ações do backend elas demorem 720/740 segundos para executar né então transforma esse aqui na função assíncrona e essa função sempre foi chamar ela vai demorar 750 ml de segundos para devolver o resultado eu poderia aumentar que esse tempo simplesmente passando novo tempo por isso eu botei esse a mal aqui não devolvi diretamente a cor Alice né Isso aqui é só um rack Zinho bem legal da gente utilizar e principalmente quando está em local host para gente colocar uma demora em alguma coisa para ver como que tá o load que

está toda essa essa parte da nossa aplicação quando ela ficar online né a e aqui outra coisa que eu vou colocar daí eu vou basicamente retornar os dados para eu gerar um toque em aleatório há mais ou menos o que já deve ter faz nele mas não é aleatório na verdade né mas ele gera e arruma um resto muito doido o que eu vou utilizar é basicamente a biblioteca o ID né que é o único e Universal Raid que ela gera um e de único Universal como Já diz o nome para gerar e aquela precisa

instalar os sapos separado Então vou instalar o Skype da biblioteca separado aqui não tá me escute a e aqui eu vou pegar a função v4 vou dar um nome para ela de oe de mesmo e aqui eu vou retornar ao topo e como sendo Esse Wilder e eu vou retornar também alguns dados do usuário que fez bobina Nossa aplicação então geralmente quando a gente tem um pé quente na hora que o usuário faz autenticação no nosso backbend a gente é torna além do Topo e né do JW ter as informações do usuário que fez a

autenticação como nome Avatar e-mail quem sabe uma biografia alguns dados que a gente vai precisar ver para exibir ali na interface ou até para mostrar no perfil dos olhos realmente e esses dados geralmente são e são sensíveis né claro que a gente não vai retornar nenhuma informação do usuário como senha ou qualquer coisa assim não faz não faria o menor sentido a isso até às vezes vem pelo.pay longe do Sol que né quando a gente gera um jwt o JW ele tem a opção da gente colocar um pen load dentro dele que são informações que

são encriptados ali dentro a informações principalmente do usuário né então a gente pode colocar essas informações do nome é meio também dentro do toque e fazer um de Cold aqui pelo front-end ou enviar essas informações juntos na requisição na resposta da requisição aqui eu vou colocar então alguns dados meus né O meu nome é meu e-mail e vou colocar também um Avatar URL eu vou pegar o meu avatar do Beach Road e aqui até mostrando um rack Zinho bem legal se você quiser pegar o seu avatar de Vishnu e basta você botar o endereço do

bit vale.com um bar o seu usuário usuário que você tem vídeo já vi ponto.png é automaticamente vai procurar o seu avô tava lá dentro então sabendo legal de se utilizar então beleza A gente já tem a funcionalidade aqui que simula uma chá E aí pro nosso técnico e agora aqui dentro eu vou chamar essa função sign with Quest vou enviar para ela os dados de e-mail e senha então esses dados eu preciso receber aqui dentro do do nosso do nosso método Saindo também e aqui eu vou criar um a tipagem para isso também sai em

mim inteira Vou falar que eu recebo e-mail que é mais Wing o pastor que é mais wi-fi eu vou desestruturar isso aqui isso aqui é uma outra dica que eu deixo para vocês é por mais que a gente esteja falando de autenticação desse vídeo eu gosto de ser um pouquinho mais resistente porque eu consigo trazer algumas outras dicas de escrita de código ao longo do vídeo que são legais e essa é uma dica mais sobre Clean code mesmo mais sobre deixar umas código explícito se eu pego simplesmente esse inteira aqui ó e envio ele como

parâmetro para o saiu essa vai funcionar porque os dois dias eles têm o mesmo formato só que uma pessoa que tá lendo o código aqui imagina que esse arquivo Aquele é muito maior né que a gente tá lendo só essa parte do código não fica claro né ela pode até passar o nome aqui daí por causa do site que vai ficar mais claro mas para quem não está utilizando typescript ou até para quem está utilizando uma coisa que legal fazer sempre é os parâmetros que a gente recebe uma função ele sempre serem nomeados parâmetros delineados

que a gente fala nele forevers é basicamente a gente desestruturar esses parâmetros sempre receber um objeto como parâmetros e desestruturar eles então pegue o e-mail e Pesca e agora quando for os parâmetros eu envio também e-mail e pastor assim para quem tá lendo esse código fica muito mais explícito que o que que eu tô recebendo na função e o que que eu tô passando para essa função e aqui agora essa funciona devolvem ottokim e usuário o topo em basicamente é o Toquinho que eu preciso para conseguir fazer autenticações a requisições autenticadas para o meu pé

quente depois então a rota de sangue ela me retorna e se toquem as próximas requisições que eu vou fazer para o meu pé quente depois elas precisam enviar esse topico um cabeçalho para eu ter acesso a isso lá no pé quente e validar se o usuário tá autenticada ou não então esse Toquinho aqui a gente vai precisar armazenar ele em alguma estrutura de dados aqui no front-end que nos permita ter acesso a esse torre em qualquer lugar da aplicação e fora isso que também permita a gente manter esse Tolkien salvo Independência usuário Feche o navegador

Abra novamente atualize a página ou qualquer coisa assim e é por isso que eu não vou armazenar esse torre dentro de uma variável tradicional dentro do estado aqui do e as duas estratégias que a gente tem para salvar o toque dentro de uma aplicação Front de uma maneira digamos legal que se mantenha entre as sessões do usuário no navegador é o local histórico é um histórico que a gente tem acesso a ele para salvar qualquer tipo de informação né informação em texto e os cookies né os cookies que são a famosa a estrutura de armazenamento

mais antiga que a gente tem dentro dos provas e aqui dentro do Next a gente tem a um digamos uma uma peculiaridade do front-end e quando a gente vai utilizar o Next para desenvolver o nosso front-end o Next ele tem aquela camada do servidor de world que fica executando ali junto com a nossa aplicação iett essa camada Gold ela é tratada como um serviço backend ou sejam servidor então quando a gente usa local Stories essa camada do molde ali que tá rodando na nossa aplicação junto com a nossa aplicação next ela não consegue enxergar o

local histórico porque o local histórico é uma aí e do navegador Então como a gente tem ali essa camada do Norte se a gente utiliza local histórico para salvar o Hulk essa camada não vai conseguir observar não vai ter acesso a esse top ou seja se eu for utilizar uma estratégia de server Side rendering dentro next a camada do serviço e Renner não vai conseguir determinar se os olhos tá autenticada ou não então se a gente precisar por exemplo buscar informações do usuário autenticado numa estratégia numa em alguma requisição né algum server Side rendering que

aconteça pelo next a gente não vai conseguir caso a gente utiliza e local história Beleza então nesse caso o que que a gente vai utilizar dentro do México na grande maioria das vezes a gente vai utilizar o quis porque os cookies sim são estruturas de dados são formas de armazenar dados que a gente consegue acessar tanto pelo lado do país pelo browser quanto pelo lado do servidor Então a gente vai usar cinco que aqui dentro do nosso aplicação para isso a gente consegue utilizar a estratégia digamos é padrão né aí que ai padrão de lidar

com cookies dentro da browser né que seria o documento. Hulk O problema é que novamente essa variável dokmee ela só tá disponível do browser então se eu precisar mudar o valor do cookie recuperar os valores do cookies quando eu tô naquele servidor node do Next né numa estratégia de servers are Angry eu não vou ter acesso ao documento e aí o nosso F vai quebrar então para isso hoje existem algumas bibliotecas que nos permitem trabalhar com a mesma e que aí para criar Cook salvar editar deletar cookies está cookies é tanto pelo lado do pé

quente pronto pelo lado do browser quanto pelo lado navegador né então algumas bibliotecas que a gente pode utilizar é a dia e as Cook a universal-cookie Ea que eu gosto mais de utilizar que é a Duques é uma integração dos cookies junto com o nexo e por isso o nome fica no quis né e eu gosto de utilizar sobre outro é bem fácil de utilizar e ela já vem com toda a integração com Dex super pronto tá E aí o que que a gente vai fazer aqui agora e eu vou importar é de dentro do

da biblioteca no Quiz é uma função que se chama setcookie né Essa função setcookie pelo nome já diz né a basicamente vai salvar minha formação nos looks essa função setcookie aqui ela recebe três parâmetros na verdade quatro parâmetros tá o primeiro deles é o contexto da requisição que que aconteceu da requisição quando alguma como quando algum código aqui dentro do nexo ele tá rodando pelo lado do Servidor ou seja é uma função service rendered ou uma Hilux né que a gente tem lá para aquela ser funções ervas do Next né se você não tá entendendo

que eu tô falando volta alguns vídeos que eu falo pouquinho mais tem um vídeo que eu falo sobre server-side rendering na íntegra sobre nexo explico como isso funciona para que serve para que utilizar e tudo mais mas quando a gente tá rodando algum código pelo server Side rendering a gente vai salvar alguma coisa dos looks a gente precisa passar o contexto daquela requisição que é basicamente a requisição aquele objeto rec que a gente recebe quando está criando o servidor node lá no express ou um serviço novo de qualquer culpa que a gente está no lado

É nesse código de autenticação Ele sempre vai executar do lado do browser até porque ele parte de uma de uma interação do usuário com a tela esse primeiro parâmetro a gente passa aí como definir porque eu não estou executando esse código pelo lado do servidor do Next Ou seja eu não tenho requisição nenhuma aliança no febre então eu passo ali como definir o segundo parâmetro é qual o nome do que eu quero salvar então o nome eu posso botar Tolkien um qualquer coisa assim como Nossa aplicação tá rodando em local host eu posso ter Estar

ao mesmo tempo envolvendo várias aplicações front-end em local rústico mesmo endereço Se eu colocar só tô pin várias aplicações minhas elas voltar digamos utilizando do mesmo Tolkien é do mesmo tom que ele nos cookies então geralmente eu gosto de botar o nome da aplicação é como prefixo então eu boto por exemplo nex Alpha aqui seria o nome do da minha aplicação. Tolkien o traço toque em qualquer coisa assim e aqui eu salvo o toque esse E aí como quarto parâmetro eu em algumas informações se eu tentar dar um contra o espaço aqui para ver quais

são essas informações que eu vou passar que eu posso passar a gente vai ver que não retorna nada né até seu abrir aqui ó dá um ficar controle ficar em cima do cético que eu vou ver que por baixo dos panos essa força essa biblioteca looks Ela usa uma outra biblioteca JavaScript chamada Cook e essa biblioteca java script chamada Cook seu clicar em cima dela aqui ó ela não tá com as definições de tipos delas eu passo o nosso possível aqui tá tudo n né então o que que eu posso fazer nesses casos eu posso

instalar a tipagem da biblioteca cookie que é utilizada pela biblioteca looks E agora se eu passe o mouse aqui no cookiepolicyoptions está vendo já vêm todos de passagem para mim agora eu volto aqui não compra o espaço e ele já me dá todos os parâmetros que eu posso utilizar aqui dentro então o paramos que eu quero utilizar aqui dentro é o Max Eid que a gente precisa Obrigatoriamente informar se eu não informar quando que se o que Vai expirar ou seja por quanto que tempo que esse cookie deve persistir dentro do nosso navegador ocupe basicamente

é assim que a pessoa perder a sessão ou seja aquela Fechar aplicação e abrir de novo Então nesse caso eu tenho duas alternativas eu posso passar o ex Pires eu passo uma data ou seja Qual é a data exata que se o que Vai expirar ou eu faço o que o Max height que é o número em segundos se eu não me engano isso o número de segundos que citou quem vai esfriar então se eu posso 60 quer dizer um minuto se eu boto os 60 quer dizer uma hora que eu boto por exemplo que

citou que aqui ele vai durar uma hora e aí quando eu boto esses números eu gosto deixar comentado do lado com Quanto de tempo que é para quem for dar manutenção já sei mais fácil Beleza agora a gente tá salvando os cookies né a gente já tá salvando a informação do Token ou seja mesmo que o usuário atualize a página a gente vai ter essa informação disponível ali para ele e aí outra coisa que eu vou salvar aqui são as informações do usuário lugar então assim que a gente fez login da aplicação eu vou salvar

os dados do usuário em algum lugar pra gente ter acesso a isso então o melhor lugar para salvar isso agora sim é o estado da aplicação não vou salvar os dados do usuário nos cookies bom e o que eu quero é que se dados estejam sempre o mais atualizado possível se eu salvar esse aqui nos cookies e deixar aquilo ali por muito tempo os várias vezes vai me dar o nome dele ou Avatar ou qualquer outra informação e aquelas informações não está ali armazenadas nos looks com o valor antigo então o que que eu gosto

de fazer nessa parte informações dos usuários é toda vez que o usuário acesse Nossa aplicação ou dá um F5 eu vou lá se eu vejo que tem o tom quem lá dentro dos looks buscar as informações atualizadas do usuário dentro do backend e salvo de novo no estado do nosso componente assim a gente tem as informações sempre mais atualizadas possível aqui então eu vou ter users users eu vou ter um instante aqui dentro a aqui Vou definir a tipagem dos dados que eu vou ter deste usuário então eu vou ter o nome dele o e-mail

e o avatar URL a vou inicializar então aqui vou falar que esse estado aqui era uma cena um user ou a definite né porque no primeiro momento eu não vou ter usuário nenhum aqui bom então é bom a aqui na verdade eu posso botar user ou nulo a iniciar aqui o nosso estado com Lulu que assim já fica um pouquinho mais fácil a para a gente ter essa informação e aqui agora então aqui embaixo depois de você tá os cookies eu vou dar um set user passando as informações aqui do usuário se eu quiser ser

escrito aqui eu também poderia é desestruturar o usuário aqui pegar as informações dele de forma isolada e passar aqui para dentro do Set user mas não tem é também totalmente necessidade disso E agora o que essa função aqui vai fazer no últimos casos é redirecionar o usuário lá para dentro do 10 por então aqui eu posso direcionar de várias formas né eu posso usar direto objeto a a classe dobro ter aqui de dentro do Next para fazer um holter. Puxe enviar ele para dentro do 10 por ou poderia também aqui de dentro do nexo utilizar

o Hulk chamado News brother como isso aqui é um componente eu simplesmente Faria consumo ter Igual aí É isso aí utilizando da mesma forma mais aqui eu posso usar esse aqui a Global aqui já fica mais fácil aí beleza a gente terminou a nossa função de sainha aqui dentro agora a gente precisa expor essa função aos componentes para que eles possam utilizá-la então eu vou retornar essa função se em mim aqui junto com as outras informações não só essa função sair eu vou retornar também os dados do usuário então agora a gente tem duas informações

a mais sendo retornados aqui embaixo já tá dando erro aqui embaixo porque a gente tá reinando essa informação user e ela não está sendo definida aqui ó na tipagem do contexto então vou falar que a gente tem essa informação de usar que segue esse padrão aqui embaixo só para ficar na ordem vou trazer o uso aqui para cima e nós estamos também retornando aqui de dentro uma função sai em mim né nome dela sair é ela recebe como parâmetro alguns dados que seguem o formato sair inteira e o retorno dela Como ela como ela é

uma função assim prima é uma forma se e ela não tem nenhuma torna aqui dentro então é boy né o prefeito a gente fez aqui toda a tipagem do nosso contexto podemos ver que já não tá dando mais erro EAG uma coisa que a gente pode ver é que nós temos esse com esses ao centro que ele fica a gente tinha colocado como falso Mas agora como a gente ia informação desse usuário aqui que ela só é preenchido no momento que o usuário faz autenticação do nosso ep a gente pode determinar que os olhos tá

autenticada ou não baseado se a informação do usa aqui existe ou não né então a gente já consegue determinar isso para falar se ele está autenticada ou não então agora eu vou salvar e isso nós vamos voltar lá no nosso mundo aqui que é onde a gente tem o formulário aqui de autenticação e nós vamos agora a usar esse contexto Então vou dar aqui no rosto e os looks que vem Direction of é um táxi Oi e aí aqui de dentro nós vamos pegar a função saem e aí agora aqui dentro eu vou chamar a

função saírem passando inteira eu vou utilizar a Wade aqui nela por enquanto só caso a gente quisesse colocar que seria o ideal colocar um farkat aqui por volta se algum tipo de tratativa validação se der um erro do backend de tornar uma mensagem para o usuário por enquanto eu vou fazer da maneira mais simples mas aqui seria o melhor lugar para gente fazer isso né mostrar uma mensagem para o usuário caso tem espalhado autenticação ou qualquer coisa assim então beleza agora que a gente já tá com a funcionalidade de saírem pronta eu vou salvar isso

aqui agora a vou voltar no meu navegador abro aqui o nosso cônsul vou deixar aquele aberto vou clicar aqui em cima em mim a gente não fez nenhum consulog né a gente pode ver que ele foi a gente foi redirecionado para o dashboard se eu for aqui dentro the application dentro de cookies e abrir aqui local host provavelmente eu vou encontrar aqui o nosso next autopin salvo que é o ideia aqui com o nosso torre ele tem também aqui a data de expiração e a data atual e coloca ali aquele aquela uma hora mais então

a gente pode ver aqui no meu relógio tá 11 horas como eu tô no terceiro e nos três não time Zone do Brasil é seria 14 aqui no time Zone UTC normal e ele botou 15 porque uma hora mais né então a gente tem que entender e lidar com datas está enviando ser uma das coisas mais chatas em programação mas a gente precisa entender esses essas coisinhas essas peculiaridades então agora a gente já tá com tô aqui salvo e essa informação do Token o mesmo que o do F5 na página ela persiste Então ela continua

aqui para gente utilizar Então isso é uma das coisas mas interessante que a gente vai precisar fazer também que foi algo que eu falei ali do nosso contexto de autenticação por mais que essa informação do Tom quem ela persista quando a gente faça um refresh na página essa informação aqui do usuário né ela não tá persistindo como uma informação local Ela não fica armazenada quando do F5 aqui no nosso ep então uma das coisas que eu vou fazer aqui do meu contexto dentro do meu do meu do meu lado por vai ver eu vou e

aqui dentro para criar um Side effect né uma função que é disparada assim que esse componente é criado em tela eu deixo importar aqui dentro e aqui e que essa função que vai fazer é quando esse autor vai ter for exibida em tela né porque ele está sendo usado lá no ERP da nossa aplicação que é o componente que fica por volta de tudo né o nesse componente por exibir em tela eu vou ver se tem um pouco em salvo dos cookies ali do usuário se tiver quer dizer que o usuário já fez autenticação na

nossa aplicação E aí eu vou lá no da quente que busco as informações do usuário atualizadas como o nome é meio Avatar ou qualquer coisa assim permissões cargos né eu poderia fazer tudo isso aqui dentro então primeira coisa que eu preciso fazer é e nos cookies e buscar se eu tenho algum que salvo então aqui de dentro dos looks é bom importar uma função chamada Wars cookies que ela basicamente me devolve todos os cookies deixa arrumar aqueles as importações eu gosto deixar primeiras importações absolutas e depois relativos e aqui dentro então agora fazer o seguinte

consta toque eu quero buscar só o toque né de dentro a Wars cookies e aqui eu passo não preciso passar nada nenhum parâmetro A única diferença na verdade é que a gente tá salvando lá dentro o nome do nosso do nosso toque ele é next Autumn torre então não posso pegar apenas tô aqui preciso ir anexa ao quando estou aqui e aqui pouca gente sabe mas a gente consegue desestruturar a também isso então posso passar assim né ao ponto Tolkien com "por volta e dá um novo nome para ele renomear essa variavam então isso aqui

é a mesma coisa que se eu fizesse isso aqui ó conste é cookies constituc igual a cookies passando a nossa chave next Half. Torno dessa forma que massa eu consigo substituir isso por essa E aí aqui que deixa fica pouquinho mais reduzida se eu tiver algum tolken salvo ali dentro dos cookies eu preciso recuperar essas informações do usuário então lá naquele serviço de autenticação que eu tinha criado para simular o nosso biquíni eu vou criar mais uma rota aqui dentro né como seria uma rota do nosso técnico que é a obrigatoriedade dessa rota é receber

um toque e devolver as informações do usuário que criou aquele toque né geralmente a gente consegue ter essa informação lá do backend a porque dentro do Toquinho Ali vai a informação do ID do usuário na maioria das vezes né mas aqui eu vou só retornar os dados como se fosse o único usuário né então aqui dentro do nosso serviço de autenticação eu vou criar uma função chamada recovery user information aqui não vou passar parâmetros nenhum mas a gente precisaria receber o toque em um lugar que a gente tá eu vou dar um delay também só

para a gente ter uma estratégia um pouquinho mais realista e eu vou retornar aqui basicamente esses dados do usuário aqui então faça e não recebe o tudo que envolve os dados daquele usuário daquele teu filho e agora aqui dentro eu vou chamar essa recovery user information E aí quando eu tiver Os dados aqui da resposta né dos dados desse desse usuário eu vou dar um set user no nosso vez ponto e outro que são os dados que a gente torna dente Fomos até quebrar isso aqui para ficar um pouquinho mais claro e é basicamente isso

que a gente precisa fazer a show agora que que a gente vai fazer eu vou salvar isso aqui agora o lá dentro do meu 10 por que eu vou para utilizado de acontecer de autenticação aqui dentro também e os contextos pegando o nosso alto não tá aqui ó e aqui dentro Eu vou pegar as informações do usuário e lá do meu avatar que eu tenho lá em cima aqui eu tinha deixado esse Avatar fixo tá vendo ó tem essa imagem aqui que ela é o avatar no na versão responsiva a versão lobo e lá embaixo

Aqui ó eu tenho Avatar de novo só que na versão web na versão maior Então vou selecionar isso aqui é um contra o Deus selecionei os dois já e eu vou substituir isso aqui por milzer ponto Avatar URL como o uso ele pode estar definido no primeiro momento eu vou botar sempre o sinal de interrogação na frente para garantir que essa informação tem algo dentro antes de eu querer mostrar ela então agora eu vou salvar isso aqui agora o que que a gente precisa que eu vou deletar um pouquinho aqui de dentro eu vou voltar

para página de login do nosso ep vou fazer autenticação aqui dentro quando ele for para o dashboard ele tem que mostrar o avatar já tá mostrando e agora seu dela F5 na nossa página ele tem que continuar mostrando Avatar ou seja Isso prova que ele foi lá no e aqui buscou as informações recentes do usuário que só vou ali no nosso Estado então dei umas cinco aqui a gente pode ver que o avatar continua ali presente vou fechar a tela abrir de novo e a gente pode ver que o avatar continua ali presente então ele

é ele é digamos preenchidos depois de um tempinho né porque tem aquele 750ml segundos de lei Geralmente eu não sei que vai demorar menos que isso a gente poderia colocar um placeholder ele por enquanto alguma coisa assim mas ele tá sendo preenchido ou seja essas informações estão sendo atualizadas ali na nossa aplicação então agora a gente já tá digamos com o nosso o nosso a base da nossa autenticação pronta né O que que não tá pronto ainda não tá pronto ainda a questão do torre ali o jwt né que a gente gerou ser enviado nas

requisições do backend Ou seja a gente fazer esse tokens enviada nas requisições de back-end E também como que a gente faz para determinar se o usuário tem acesso ou não a uma página dentro do Next aí a gente vai ter como fazer isso agora então a primeira coisa é a questão do Token ser enviado a aquisições dentro do daquele então eu vou utilizar um exemplo aqui utilizando axios aqui é geralmente o cliente http que eu uso para fazer as requisições para o meu pé quente Então eu vou instalar o Whats aqui dentro dentro de serviços

eu vou criar aqui uma yps eu vou importar o axios e aqui dentro eu vou passar para ele uma pessoa URL seria a URL do nosso biquíni ó e vou exportar essa constante aqui de dentro perfeito por enquanto essa ipe aqui tudo todas as requisições que a gente fizer a partir desse objeto entre aqui do Asus elas não vão Enviar o nosso toque ali que a gente jurou que já tá vai ter que foi gerado no momento que o usuário fez unir primeira coisa que a gente tem que fazer aqui dentro então é quando a

nossa aplicação inicializar se eu já tiver um toque em salvo lá dentro do nosso do nossos cookies eu vou já colocar esse Toquinho aqui nos headers padrão do whats para ele enviar em toda a requisição Então o que eu vou fazer aqui dentro é basicamente eu vou importar aqui de dentro dos looks a função Force cookies E aí eu vou fazer aquela mesma estratégia que eu tinha feito aqui dentro eu vou buscar de dentro da função partícula o meu toque em E aí aqui dentro a E aí embaixo eu posso o seguinte se eu tenho

um pouquin eu vou pegar a minha equipe ai dentro dela dentro do aceso tem um projeto que se chama de fótons que são as informações padrão que eu envie em todas as aquisições eu vou enviar vou botar um novo cabeçalho padrão chamado authorization' e eu vou colocar aqui Uber colocando o nosso torre né então a gente sabe que ele quando a gente vai fazer uma autenticação jwt geralmente a gente usa o cabeçalho authorisation não precisa ser isso é só um padrão da comunidade usando aqui o toque do tipo Bear enviando o nosso J deve ter

aqui no final ou seja a gente tá enviando a fazendo uma forma de verificar se existem esses cookies aqui para já existe o quê para preencher essa informação aqui dentro então agora que que eu vou fazer eu vou fazer com que o nosso Até que a gente faça uma requisição http para gente ser para gente ver essa informação sendo enviada como eu não criei nenhum backend aqui é nós essa rota local rosto 3323 não existe eu não quer não entendi o que que eu vou fazer aqui dentro é eu vou criar um interceptor dentro do

Asus né eu consigo fazer uma interceptação em toda a requisição que o Asus faz só para eu dar um consolo para eu ver as informações que estão sendo enviadas então aqui o interceptor basicamente a cada requisição que aconteceu no Whats eu quero que você faça alguma coisa e o que que essa coisa é basicamente dá um com seu blog não consegui E aí depois no final eu dou o entrar mesmo consegui pelos seus prosseguir com a requisição dele digamos da maneira ou aqui eu poderia até dar um O Retorno em alguma outra coisa para essa

configuração para essa aqui são não continuar acontecendo por exemplo um após se tornar que de dentro um forma esse ponto dois ovo e aí ele já forma esse ponto resolvi e pizzaria passar um com figo aqui só ligando para ele precisa gente parar requisição por aqui mas eu vou deixar a requisição a continuar da mesma forma aqui é só para eu ver os dados que estão sendo enviados para eu ver se meu token tá sendo enviado por lá que eu vou fazer agora aqui no meu 10 por e eu vou fazer que assim que o

usuário acesse esse nosso 10 por eu vou fazer uma requisição para nós sair de ai então aqui dentro Eu vou dar um like ai busco lá o meu objeto ele já fez a importação aqui dentro e vou dar aqui um ponto g' at numa listagem de usuários qualquer coisa só para a gente ver se estou quem tá sendo enviado Tá salvo isso aqui agora volto lá no dashboard Vamos abrir aqui o nosso especilamente ele deu um leque Harry é totalmente comum porque o pé quente não tá funcional porém lado meu Consul eu vou ver que

eu tenho aqui ó quando deu umas cinco na página e mesmo que lhe descia conector é ver eu vou ver aqui ó o quê que foi enviado lá para dentro do nosso pé quente das informações então eu consigo ver aqui ó aqui no nossos headers eu tenho a o header de autorização que é o nosso jwt que está sendo enviado lá para dentro do pequeno Beleza então o nosso tô que ele faça enviado quando o usuário faz uma F5 na página ele vai lá e automaticamente coloca o token ali dentro do whats para que toda

a requisição receber se topo é um problema ainda aqui na nossa aplicação que é o seguinte se eu não estou autenticada aqui na nossa aplicação Olha só eu vou deletar aqui next ao Talking vou deletar daqui de dentre volto lá para o login do nosso ERP se agora aqui ó eu faço login no nosso F E aí ele vai cair no nosso do nosso 10 por é Ou seja eu fiz o login e ele foi redirecionado para o 10 por E aí o 10 porque fez aquela requisição para ir para ai nesse caso eu posso

ver que aqui dentro dos renders a aquele conseguiu preencher a autorização provavelmente e provavelmente porque ele deu ele atualizou aqui a nossa página mas uma das coisas que seria importante a gente fazer aqui dentro é toda vez que o usuário realiza autenticação aqui dentro que ele chama esse método sannin a gente atualizar esse novo token que ele gerou aqui lá nos renders que estão sendo enviados pelo whats então aqui dentro eu posso fazer o seguinte eu posso importar o nosso like aqui dentro e dá um ponto de fontes. Headers passando o nosso authorization' aqui dentro

tô passando Uber com o novo toque que o usuário fez autenticação eu tenho que atender porque que ele é Itabaiana minha ficou tudo preto Ai meu Deus minha câmera Deixa eu voltar aqui tentar conseguir fazer a câmera Acabou minha bateria da câmera Pera aí que eu já volto voltando aqui após a bateria da câmera morrer né Bora tomar uma vinha lembrando hidratem-se meio desse vídeo tá longo o vídeo de uma importante uma água no meio e agora agora continuar então agora a gente tá cobrindo todos os casos né a nossa autenticação ela tá funcionando por

completo agora a gente consegue determinar se o usuário está o dedicado acessar as informações de usuários tem quais as informações do usuário em qualquer lugar na nossa aplicação por causa do contexto e também a gente já tem o toque sendo persistido pela nossa aplicação é durante as requisições então uma das coisas que a gente vai fazer aqui agora e antes da gente entrar mais na parte de o que que muda na na autenticação da questão do neste né porque a gente tá usando os cookies e eu vou mostrar um pouquinho de como usar agora essas

coisas de autenticação que a gente fez pelo lado do servidor no next mas antes disso uma das coisas que a gente pode fazer aqui dentro por exemplo é na página de 10 pontos a gente quer validar que o usuário precisa estar autenticado para então ele ter acesso a essa a essa página a gente pode por exemplo validar pelos pelos pelo pelo toque né do usuário então a gente pode validar é que o usuário tem tá autenticada pelos pelos próprios cookies então a gente viria aqui em portaria os looks aqui dentro e farão uso efectivo ele

parece o topo tava lá dentro se não redireciona ele para o login mas em outras formas da gente fazer isso é o que a gente vai ver daqui para frente então como eu falei desde o começo a gente utilizou os cookies aqui dentro do Next por um motivo né a gente usou os custos basicamente que a gente tem acesso à informação de autenticação do usuário tanto pelo browser com e pelo server-side então aqui dentro do Next por exemplo na página 10 por imagem Imagine que aqui na página 10 porque eu queria um método get server

Side próprio que é a forma que eu fazer server Side rendering aqui dentro do Next né carregar alguma informação pelo lado do servidor E se o que precisa ser uma informar uma função assíncrona e ela precisa me devolver algumas propriedades beleza aqui de dentro agora a lembra que eu falei aquela questão do contexto da requisição Toda Toda função que é que serve própolis outra equipe erros aqui do Next Next são aquelas funções é aquelas rotas que a gente consegue ter com código da quente ela Vocês servem aqui como parâmetro o contexto que é o contexto

do requisição dentro desse contexto aqui ó eu tenho acesso ao meu rack é objeto da requisição e tem acesso aos looks simples assim se eu salvar isso aqui agora acessar aqui a minha página de 10 por dando F5 eu vou ver que aqui no meu consulog e agora pelo lado do servidor e se consolar o saco do lado do browser porque isso aqui é server-side ele vai retornar aqui next estou aqui que é os cookies que eu só veio da minha aplicação ou seja o Tom que nessa aplicação né então isso é muito legal e

agora eu já consigo determinar aqui dentro se o usuário está autenticada ou não basicamente Só usando essa informação para eu utilizar que os looks aqui dentro né Aquele pacote que a gente estava utilizando eu consigo pegar aqui de dentro dos looks a função par se cookies essa função parte cookies aqui dentro eu vou executar ela agora né curso o que é igual a parte que eu fiz porém agora essa função parte cookies eu vou enviar aquele primeiro parâmetro 500 a gente tava passando com uma de Fairy Ou nem formar nem formando quando a gente estava

executando manipulações nos looks pelo browser que é um contexto de requisição é aqui que a gente envia esse tal do contexto então aqui de dentro agora dos looks eu consigo recuperar o meu next ao toque e vou renomear ele aqui para tu aqui e eu consigo agora se o usuário não está autenticada ou seja se eu não tenho um toque eu consigo retornar daqui de dentro ao invés de retornar propriedades na informações iniciais para essa tela eu consigo retornar um redirect Ou seja eu consigo redirecionar usuário de volta por login isso aqui Claro que não

há redirecionamento permanente né porque é baseado no estado de autenticação de usuários que eu boto permanente como falso a e agora é seu salvo isso aqui olha que legal a gente volta aqui no 10 por seu dom F5 aqui agora como tô quem tá presente no fluxo ele me mantém na página 10 por Se Eu deleto o Tom que aqueles que o fizeram F5 ele automaticamente envia a gente de volta para a página de login isso aqui é muito legal porque essa esse redirecionamento e essa atualização do tocomlink no next ela tá acontecendo server-side Então

diferente uma aplicação que a gente constrói com um cliente with que geralmente a gente válida a autenticação é ali com o iOS effect ou ali na hora de componente já tá sendo criado em tela nesse caso aqui o usuário nunca vai conseguir o período da página 10 por se ele não estiver autenticado nem a interface o layout nada coisa que novo Leite Wicked ou e uma aplicação que não tá utilizando do server Side rendering em Isso vai acontecer então a gente pode utilizar essa estratégia aqui de válida a autenticação do usuário nesse caso aqui a

dentro do Next funciona super bem aqui faltou última coisa para a gente Fechar isso tudo com chave de ouro o esquema de autenticação dentro do Next E aí como eu falei se vocês quiserem que eu entre mais a fundo no esquema de autenticação que no next deixe nos comentários que eu vou ficar super feliz de trazer outros assuntos como autenticação social integrada a isso que a gente desenvolveu aqui dentro da com o pé quente próprio ou até autenticação social sem daqui de próprio mas aí é só seguir realmente o tutorial Snapchat que não tem erro

a gente pode fazer trazer conteúdo sobre autorização né permissões e cargos a gente pode trazer um pouquinho mais sobre modelo de autenticação um pouquinho mais avançados como lidar com o fast-talking a gente está girando aqui no nosso JD fictício aí hoje ele não expira né mas geralmente quando a gente pediu jwt pelo da Oi gente bota ele para inspirá-la 15:30 Então como é que eu faço de queijo no front a gente principalmente com o Next inclusive para esse tom com ele será atualizado quando ele espírito Mas a gente pode trazer vídeo aqui só vocês deixarem

nos comentários e eu vou providenciar então aqui a gente tem último problema para resolver dentro do nosso ep que é o seguinte se eu fizer uma chamada aí aqui dentro então se eu quiser aqui ó kipiai a ponto get it Vou botar aqui Muse totalmente eu vou tirar essa aqui daqui ó pra gente não confunde deixar uma só tá vou deixar só isso aqui vamos colocar leite aqui dentro Ah agora eu vou salvar isso aqui agora vou abrir o console Ok vou logar na minha aplicação eu vou deixar ele para mim a gente pudesse por

a beleza o 10 por Deu erro aqui tudo bem era o que eu esperava se eu volto aqui no blog na minha aplicação ele retornou o log lá do config do Axis lembra que foi esse blog aqui ó Então como essa chamada aí agora ela tá acertando pelo lado do Black and ele esse com solário aqui também é executou pelo lado do servidor e por isso que a gente tá vendo ele aqui agora não responde não lá no Browser a gente pode ver aqui dentro dos headers tá vendo a da requisição que foi feita o

nosso tô que não foi enviado por quê que o nosso sou que não foi enviado né se a gente estava buscando os pouquinho aqui ó eu estou aqui dos Pais cookies e tudo mais porque essa função parte aqui se não sei se você lembra que eu falei em todas as funções na verdade dos looks ela recebe com o primeiro o primeiro parâmetro um contexto o contexto da requisição e eu preciso informar esse primeiro parâmetro quando eu tô executando essa função parte cookies ou qualquer outra função dos looks pelo lado do servidor o sexo como aqui

essa função parte cookies ela nunca está sendo repassado nenhum parâmetro para ela nem um terço da requisição quando eu executo esse código de chamada para ir piar pelo lado do server Side rendering do nexo ou seja do lado do servidor do Next ele não vai encontrar os cookies porque ele vai tentar utilizar a enviar do browser para buscar os cookies porque eu não tô passando de um contexto quando eu não posso contexto Ele vai tentar usar e cair do browser é entendendo que esse código está sendo executada pelo lado do browser então o que que

eu vou fazer aqui para diferenciar isso aqui aqui dentro de Services eu vou criar um a um outro serviço aqui a gente vamos chamar e Jacques mesmo beleza aqui de dentro eu vou exportar uma função chamada get up I plan essa função aqui ela vai ter basicamente todo esse código aqui dentro dela Vou botar aqui ó esse código para ficar e eu só vou tirar esse EcoSport aqui de dentro ah e vou retornar o nosso like aqui no final e vou importar oaks aqui dentro ah e aqui nos parques cuff se eu vou importar ele

também o que que eu vou fazer eu vou fazer com que essa função deve aí que a cliente ela possa receber um contexto aqui eu vou deixar te página aconteça como é mesmo mas a gente poderia buscar a ti parte desse contexto até o dia que aproveitar essa parte e já tem aqui no próprio no próprio os looks aqui é basicamente todas a tipagem aqui hoje poder pegar tudo isso aqui e botar ali dentro mas eu vou deixar com ele aqui por enquanto só a cargo de demonstração e eu vou pegar esse contexto aqui ó

e vou passar ele para dentro aqui do meu pai quis perfeito isso aqui a primeira coisa que a gente vai fazer agora aqui nesse nosso ipe Ai que que eu vou fazer eu vou basicamente é declarar uma constante ipe Ai que é igual a get If I can e sem passar nenhum parâmetro Ou seja eu não vou passar aconteça nenhum agora esse objeto gente aí aqui eu vou utilizar ele somente para as chamadas que eu fizer a partir do browser ou seja chamadas que não são servers are really então aqui no alto contas na verdade

do é no nosso 10 pode aqui quando eu tava usando esse aí aqui ó essa chamada ela vai ser feita usando esse objeto e caiaque ou seja toda chamada que a gente foi fazer para o nosso deck and a partir do browser pode usar esse que aqui as chamadas que eu fizer a partir do nosso get service tag próprios ou das rotas do Next são rotas da Candy o que que eu vou fazer eu vou declarar aqui dente uma variável chamada e clique em que é igual Arquette e Piauí flight que a gente declarou a

e agora passando o nosso contexto um parâmetro ou seja agora essa função deve enviar Clique na hora deu a buscar os cookies ela vai saber da onde buscar os cookies porque agora que eu estou executando isso pelo site eu tô passando o contexto da requisição e agora na hora que eu faço a requisição aqui que eu passo o universo hippie que a gente já tinha que quer Oi Caique não tem nenhum contexto ou seja o like aqui deve executar pelo lado do browser Beleza vou salvar aqui agora voltamos aqui não dá um F5 aqui no

nosso 10 Porto a ele ainda deu e Rio porque o pé que a gente não tá rodando Isso é normal mas agora se eu for ver aqui nos render só ele tá enviando o nosso authorization' enviando o nosso toco que tá salvo lá dentro dos cookies então agora sim a gente viu o cenário completo de autenticação dentro do Next né a gente viu basicamente como a gente consegue fazer autenticação do Next salvar os dados nos looks persistir as informações da sessão do usuário é o Zig validar se usuários autenticados pelo pelo lado do front-end né

pelo lado Clique na verdade que é mais fácil possível não é só sente ver se tem um pouquinho ele salvo ou não e consegui também validar se o usuário está autenticada pelo lado do server side the next e é a parte onde difere um pouquinho mais do modelo de autenticação internacional que a gente já tinha a minha aplicações Collection Spa tradicional no create-react-app ou em qualquer outro tipo de aplicação E assim a gente finaliza um Cordeirópolis sensacional aqui para dentro do canal do YouTube da vaca desse vídeo se você gostou desse conteúdo por favor não

deixa de deixar um like aí pra gente saber se você está gostando dessa nossa volta aos conteúdos técnicos aqui pra dentro do canal e vai sair muito conteúdo bacana daqui para frente pode ter certeza e eu vou usar muito Dos comentários que você deixa aqui no vídeo para guiar para onde vão os próximos conteúdos aqui do canal Então deixe aqui embaixo ficou uma dúvida sobre esse vídeo se você quer algum tipo de conteúdo associado a autenticação ou qualquer outro tipo de conteúdo associado ao aqui o sistema o iett que eu vou trazer com certeza nos

próximos vídeos já lembramos também que o repositório dessa aula eu vou deixar ele disponível aí nos comentários a nos comentários aqui na descrição do vídeo e pela sócia essa lá pegar esse esse conteúdo de autenticação e sair utilizando nos seus projetos vou me despedindo por aqui Um grande abraço e valeu até a próxima tchau E aí G1