FLUXO DE AUTENTICAÇÃO COM REACT E CONTEXT API 

Cara que massa que nossos conteúdos estão te ajudando fico muito feliz em saber disso😁😁 Em relação ao sugestão do vídeo já existe um vídeo no canal onde eu meio que crio um CRUD com firebase com react, faltou apenas o método de update... mais pode ter certeza que vai ter mais vídeos no canal com esse conteúdo!! Link do vídeo: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gqbXnYhvB5E.html Valeu tmj💥🚀

Falaaa meu manoo, o tema e Aura Dark. Valeu tmj 😁🚀💥

Kubuntu 20.04 com alguns temas kkkkk

Muito obrigada 😃

Neste exemplo do vídeo já está preservando a autenticação quando a página é atualizada! Pq os dados de token estão sendo salvos no localStorage então mesmo atualizando a página o usuário permanece logado!!!! Valeu pelo comentário 😁💥💥🚀

E tema do vs code que faz isso "Aura Theme".

Existem varias formas, mas você pode usar o JWT-DECODE com ele tu consegue acessar todos os dados do token e com essas informações criar uma logica pra remover ou manter a sessão do usuário. Inclusive terá vídeo no canal tratando deste assunto! Valeu pelo comentário

@@GaiProgramador entendi, obrigado, vou pesquisar sobre ! e já fico no aguardo do vídeo !

Tipo, vc criou essa variável SIGNED que caso USER seja true vai liberar o acesso, mas eu não poderia simplesmente ir no meu localStorage e adicionar um objeto USER qualquer e liberar o acesso?

Fiz o teste aqui. Abri a aplicação, e apenas colocando um usuário e um token aleatório nos cookies eu consegui fazer o login e ver a página principal. Assim o token que é gerado e validado pelo backend é inútil, não?

Neste tutorial eu não verifico as informações que estão dentro do token, então de fato o frontend pode aceitar qualquer outro token, porém o seu backend só aceita tokens validos, por exemplo se tiver uma rota no backend para buscar usuário se vc mandar um token aleatório seu backend provalvemente irá retornar um erro. Para melhorar a validação do seu token que vem do backend vc pode fazer o seguinte baixe o pacote JWT-DECODE para usar no react e com esse pacote vc criar uma função dentro do contexto para verificar as informações que contem dentro do token, assim vc pode criar uma logica pra manter o usuário logado ou não com base nas informações abstraidas do token.

Negou o tema? mentira né kkkk acabei de pedir também

Isso aee💥💥🚀🚀🚀

Muito obrigado pelo comentário! Eu fico muito feliz em interagir com todos aqui nos comentários... Oque mais motiva a criar vídeos são vcs nos comentários com dúvidas, sugestões, elogios, críticas... tudo isso me dá ânimo e me faz aprender ainda mais... Valeu por tudo pessoal 🚀❤️

Opa Thiago! Beleza?! Primeiro precisamos entender qual o proposito de usar o contextAPI dentro e um projeto react. De forma resumida o context API serve para compartilhar dados e informações entre componentes sem a necessidade de passar os dados explicitamente pelas props de cada componente pai ou filho. Então, quando precisamos compartilhar informações de temas, autorização, dados de formulários entre outros a forma mais pratica e performática, seria utilizar o contexto. Se vc utilizar somente o localStorage para validar a autenticação, provavelmente vc teria uma função dentro do componente para validar as informações que estão no localStorage, e saber se a autenticação e valida ou não... E pra isso o componente teria sido carregado mostrado em tela e depois validaria a informação. Já utilizando o context API vc valida as informações através das das rotas como fiz no vídeo. E os componentes apenas receberias as informações quando o usuário fosse realmente valido. E só seria montado em tela quando os dados já estiverem validados. Bom essa e a forma como eu vejo essa situação kkk espero ter ajudado. Caso tenha uma opinião contraria, diga pra gente. Sempre estou aberto a debater conhecimento. tmj!! Valeu pelo comentário.

@@GaiProgramador eu não entendi o do porque usar o Localstorage, se temos uma variavel de contexto dentro do projeto, não seria mais seguro e mais facil deixar o token e o usuario apenas em uma variavel de contexto e não mandar para o localstorage ?

Cara não é uma boa prática deixar informações preciosas dentro de variáveis... E além do mais, como faria quando o usuário atualizar a página? As informações salvas na variável seriam removida... A não ser que vc tenha uma outra forma de contornar isso, caso tenha partilhe com a gente 😁😁 valeu tmj!!!

@@GaiProgramador não tenho não hehe estou tirando duvidas mesmo

@@GaiProgramador de fato essa forma e uma boa mesmo. show de bola.

Usa if verificar o token e coloca pra token trazer o cargo

Vlw

Bem nesse cenario você pode estar usando o JWT-DECODE para criar uma fução dentro do contexto e verificar se as informações dentro dele são validas. Assim você garante a segurança da aplicação, sem contar que sua API so vai aceitar requisições com o token valido.

@@GaiProgramador voce esta falando do jwt verify? Se sim, acho que seria top fazer com nextjs usando o middlewares da versão 13 pegando o token dos cookies... oq vc acha?

Ainda não utilizei o nextjs em nenhuma de suas versões kkkk talvez vou começar estudar um pouco sobre ele...

@@GaiProgramador é uma boa ate.. apesar que ate a propia doc do react agora recomenda utlizar ele kk vai entender, mas pensei pelo lado o jwt para verificar a cada mudança de rota, pois ai seria uma segurança a mais com o middleware fazendo a verificação no servidor e tals.

@@GaiProgramador venho aqui mais uma vez, no caso se a pessoa der reload na pagina... ok ela fica logada, mas os dados do header da requisição desaparecem. Tentei usar o useEfect para setar mas n vai.