Parabéns pelo conteúdo do vídeo e pela sua didática, e o que mais me chamou a atenção foi a sua colaboração com as perguntas nos comentários, realmente merece muito que seu canal cresça. Muito ensinam com os vídeos, mas não dão nenhuma atenção aos comentários.
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 🚀❤️
Excelente! Novo aqui, mas já sou fã do canal. Vocês poderiam fazer um vídeo com fluxo de delete e update de dados usando REACT e FIREBASE. Já consigo fazer o AUTH e o POST graças a vocês. Forte abraço e parabéns pelo trampo.
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: th-cam.com/video/gqbXnYhvB5E/w-d-xo.html Valeu tmj💥🚀
Pra quem assim como eu está tendo problemas ao atualizar a página e perder a autenticação, é devido a necessidade de converter o conteúdo do getItem no useffect para objeto novamente, pois ele pega o array todo como uma string. O código ficará da seguinte forma: const storageUser = JSON.parse(localStorage.getItem('@Auth:user')) E o mesmo para o token, feito isso é só sucesso, e ótimo vídeo , me ajudou muito!
Fala Jovem Programador, gostei muito do vídeo, me ajudou a reforçar esse processo de autenticação de maneira explicativa. Já deixei meu like, porém eu quero te pedir uma coisa, compartilha comigo esse tema do vscode? gostei kkk um abraço
Aula sensacional meu amigo, só uma dúvida, salvar as informações do user no localstorage não é uma falha de segurança? Ganhou um inscrito, se eu tiver falando besteira pode me corrigir rs E outra iniciativa bacana seria fazer esse codigo do front em typescript abração meu amigo
Estou buscado aprender a parte de autenticação e nas buscas cai nesse teu vídeo e gostaria de te perguntar, queria saber se com a base desses 3 vídeos que você passa com esse conhecimento será que da para fazer a autenticação do Reactjs de um backend em Laravel que usa o Passaport(recurso do laravel para autenticação com token) e pelo que vi usa OAuth2. vejo muitos exeplos do JWT, mais quando tento buscar algo mais especifico raramente encontro algo, então queria saber de quem já tem experiência
opa tudo bem? pode tirar uma duvida ? se eu passar os valores no localstorage manualmente eu consigo acessar as paginas privadas exemplo: @Auth:user=123, @Auth:token=123 como faz para previnir isso ?
E se eu implementar um checkbox na minha tela de login, onde eu desejo que quando selecionado, ele fica com autologin, porém se tiver desmarcado, e eu fechar a página, ele peça o Login novamente, estou com essa dificuldade, mas não encontro nada nesse sentido. Consegue me ajudar?
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 😁💥💥🚀
Como eu faria para ser acessivel por exemplo a rota gerenciar apenas para um usuário administrador. Suponha que eu tenha no banco cadastrado um campo de usuário chamado cargo, e nele seria "Administrador", como eu faria para essa rota ser acessivel apenas para esse cargo.
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!!!
Mano me ajuda!!! Como a aplicação sabe se você está logado ou não? Eu não entendi essa parte 🥺 o frontend checa o localStorage e vê se o token está lá? E oq ele faz com esse token? Ajuda aí por favor preciso disso pra resolver um trabalho da facul!!!
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.
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
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?
@@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.
Parabéns pelo conteúdo do vídeo e pela sua didática, e o que mais me chamou a atenção foi a sua colaboração com as perguntas nos comentários, realmente merece muito que seu canal cresça. Muito ensinam com os vídeos, mas não dão nenhuma atenção aos comentários.
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 🚀❤️
Muito bom esse vídeo cara, sem rodeios, direto ao ponto e com o mínimo de código possível.
Excelente! Novo aqui, mas já sou fã do canal.
Vocês poderiam fazer um vídeo com fluxo de delete e update de dados usando REACT e FIREBASE.
Já consigo fazer o AUTH e o POST graças a vocês.
Forte abraço e parabéns pelo trampo.
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: th-cam.com/video/gqbXnYhvB5E/w-d-xo.html
Valeu tmj💥🚀
Caraca mano, me ajudou bastante. +1 inscrito.
Brabo mano, bem direto ao que interessa
Pra quem assim como eu está tendo problemas ao atualizar a página e perder a autenticação, é devido a necessidade de converter o conteúdo do getItem no useffect para objeto novamente, pois ele pega o array todo como uma string. O código ficará da seguinte forma:
const storageUser = JSON.parse(localStorage.getItem('@Auth:user'))
E o mesmo para o token, feito isso é só sucesso, e ótimo vídeo , me ajudou muito!
Isso aee💥💥🚀🚀🚀
Simplesmente parabéns tu é fera!
Mano, arrasou. Tornou o código mais limpo
Cara top seus vídeos, ainda mais assim onde você fez vários vídeos finalizando em uma aplicação grande , bom pelo menos para mim parece ser grande
Fala Jovem Programador, gostei muito do vídeo, me ajudou a reforçar esse processo de autenticação de maneira explicativa.
Já deixei meu like, porém eu quero te pedir uma coisa, compartilha comigo esse tema do vscode? gostei kkk um abraço
Falaaa meu manoo, o tema e Aura Dark. Valeu tmj 😁🚀💥
Que aula show de bola!! Parabéns!
mais um conteúdo muito bem explicado!
Parabéns pela didática! Sucesso !
Muito obrigada 😃
Obrigado pela aula! upp
Muito obrigado pela ajuda!
Aula sensacional meu amigo, só uma dúvida, salvar as informações do user no localstorage não é uma falha de segurança? Ganhou um inscrito, se eu tiver falando besteira pode me corrigir rs E outra iniciativa bacana seria fazer esse codigo do front em typescript
abração meu amigo
Muito obrigado por compartilhar conhecimentos
Excelente Aula!
Estou buscado aprender a parte de autenticação e nas buscas cai nesse teu vídeo e gostaria de te perguntar, queria saber se com a base desses 3 vídeos que você passa com esse conhecimento será que da para fazer a autenticação do Reactjs de um backend em Laravel que usa o Passaport(recurso do laravel para autenticação com token) e pelo que vi usa OAuth2. vejo muitos exeplos do JWT, mais quando tento buscar algo mais especifico raramente encontro algo, então queria saber de quem já tem experiência
esse é o melhor jeito? Como verifico se o token é valido? temp ode expiração? o autorization barear continua mesmo depois que fecha o navegador?
opa tudo bem? pode tirar uma duvida ? se eu passar os valores no localstorage manualmente eu consigo acessar as paginas privadas exemplo: @Auth:user=123, @Auth:token=123 como faz para previnir isso ?
E se eu implementar um checkbox na minha tela de login, onde eu desejo que quando selecionado, ele fica com autologin, porém se tiver desmarcado, e eu fechar a página, ele peça o Login novamente, estou com essa dificuldade, mas não encontro nada nesse sentido. Consegue me ajudar?
Qual distro estava utilizando nesse vídeo?
Kubuntu 20.04 com alguns temas kkkkk
Muito bom! sabe me dizer alguma maneira de preservar a autenticação ao atualizar a pagina?
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 😁💥💥🚀
Como eu faria para ser acessivel por exemplo a rota gerenciar apenas para um usuário administrador. Suponha que eu tenha no banco cadastrado um campo de usuário chamado cargo, e nele seria "Administrador", como eu faria para essa rota ser acessivel apenas para esse cargo.
Usa if verificar o token e coloca pra token trazer o cargo
Que plugin vc usa pra deixar os icones de sugestão de texto diferentes?
E tema do vs code que faz isso "Aura Theme".
Sensacional
Muito, muito obrigado
Se o token do cara é salvo no localStorage, porque precisamos usar contextApi, qual é o sentido ou diferença em usar só localStorage?
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.
muito top merci
👏🏼👏🏼👏🏼
Mano me ajuda!!! Como a aplicação sabe se você está logado ou não? Eu não entendi essa parte 🥺 o frontend checa o localStorage e vê se o token está lá? E oq ele faz com esse token? Ajuda aí por favor preciso disso pra resolver um trabalho da facul!!!
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.
Show
Vlw
Otimo video, qual é o tema?
Negou o tema? mentira né kkkk acabei de pedir também
como eu poderia estar acessando os outros dados do usuario ? como o nome por exemplo ?
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 !
Acho que poderia gerar um bug, e se os dados do localStorage estiverem prenchidos com dados falsos
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.
Show