Autenticação no React Native / ReactJS com Context API & Hooks | Masterclass #12

[@LuizCarvalhoCOM]

2 anos e esse vídeo ainda é uma mão na roda. Obrigado galera!

[@gabrieltoledo5082]

Diego e Rocketseat, nossa esse vídeo coube como uma luva para o app que estou desenvolvendo, sem vocês eu não estaria tendo êxito no código. Muito obrigado!! :D

[@elvesw]

Pedido, faz o vídeo de toda sua configuração de eslint, etc...

[@Joe-zw1qt]

Up

[@dot_slash5720]

up

[@henriquemartins8401]

ja tem aqui no canal

[@Joe-zw1qt]

@@henriquemartins8401 mas o q ele iria postar seria mais atual, dá forma q ele usa e bem mais detalhado

[@rocketseat]

Faala, Elves! A configuração do ESLint é muito particular, varia muito de projeto para projeto, e também entre as linguagens... 💜

[@LucasMerencia]

Cara, já trabalho a um bom tempo como desenvolvedor, e comecei recentemente a estudar react-native para projetos pessoais. Bro, esta master class destravou muita coisa. Obrigado!

[@rocketseat]

Que feedback incrível, Lucas! Valeu!! 💜

[@anddersonrds]

24.4k de views e apenas 1.5k likes, qual é galera? Vamos ajudar a comunidade que tantos nos ajuda, assistiu e gostou? Curti pelo menos, isso ajuda muito. Como sempre uma excelente aula @Rocketseat :)

[@rocketseat]

Valeeu pelo apoio, Anderson! 💜💜

[@EfraimDays]

Adorando react native principalmente pela comunidade Br ser tão forte em comparação com as outras tecnologias

[@marcosatsantana]

uai, só eu ja vi esse mesmo video umas 3 vezes kk

[@viniguerrero]

Esse é com certeza absoluta o melhor video da história e do canal da Rocketseat! Parabens pelo conteudo show de bola Diegão, abraço!

[@LuizCarvalhoCOM]

kkkkk tbm achei... Sério

[@rafaelinacio7148]

Cara, uma das melhores sensações e pensar que alguns meses atrás eu vendo o mesmo vídeo não entenderia nada, e agora entendo praticamente 100% do conteúdo.

[@rocketseat]

Caramba, que massa, Rafael! 💜 Parabéns 👏👏

[@juliakimura2696]

Diego tu salvou minha vida, preciso fazer uma aplicação e nunca tinha feito um app antes profissionalmente, como diz Filipe, esse video ta uma delicinha

[@rocketseat]

Faaaala, Julia! Que bom que o conteúdo te ajudou de alguma forma! 😍 Espero que essa seja a primeira de *muitas* aplicações! Conte com a nossa comunidade sempre! 💜

[@descomplicandogame4727]

existem pessoas más, existem pessoas que não se importam, existem pessoas boas e existe o time da RocketSeat, que Deus abençoem todos vocês.

[@TransplantadoTV]

Muito top!! Melhor video de react-native que eu vi até agora. Vai me resolver uma semana inteira de trabalho, nao pq é só copiar seus passos. Mas pq vc fez entender. Show de bola, Diego! Parabéns e obrigado!

[@fiquericoousofratentando]

contéudo top , mais impressionante é a velocidade dele programando , Diego manja muito até na velocidade de programação.

[@samerkayali4525]

Muito Obrigado!!! essa aula preencheu tantas lacunas do meu conhecimento que até pareceu qeu ela foi feita pra mim

[@yohanlopes1847]

Diego, eu te amo pô. Sério mesmo. Muito competente e já salvou meu pescoço umas mil vezes. Sem dúvidas um dos maiores educadores de ti do youtube. Abraço bem grande e nunca pare com esse trabalho.

[@LeonardoPennaOFC]

Diego de volta , finalmente!

[@rocketseat]

💜🤩

[@nicolasnathancampos5266]

Meu Deus... esses maluco tem o dom de ensinamento. Eu estava atrás de fazer login com redux e.t.c e só com esse video já me sanou bastante coisa e bastante dúvida, parabéns aos envolvidos de verdade :)

[@tiagocunhafernandes6607]

Diegão!! top, tinha achado que não tinha limpado o storage mas depois vi que limpo!!.. Só faltou colocar o touch pra ficar completo!

[@jonataoliveira1403]

Comecei a estudar ContextAPI ontem mesmo, esse vídeo veio na hora certa 👏🏻👏🏻👏🏻

[@marcusvpu]

eu tb man !! da hora ne :)

[@andre_zagatti]

Essa api de Context com os Hooks ta sensacional, uma forma de arquitetar a aplicação de uma forma limpa.

[@joaopaulolacerda911]

a Rocket sempre ajudando a comunidade muito top essa aula bora curtir esse video galera pra ajudar a comunidade

[@johnnymoreira7859]

Ao Time da Rocketseat Vocês são demais, parabéns pelo trabalho que vem desempenhando. Eu sempre pesqueisei por tutoriais em inglês, desde que conheci a Rockeseat, passei a pesquisar pelos seus conteúdos primeiro, caso eu não encontre o que eu quero, aí sim vou pra gringa. Grato pelo esforço da equipe

[@luistitossaiete9850]

Muito massaaaa, to comecando no ReactJS, entao cheguei aqui querendo aprender uma forma de fazer autenticacao. Agora, ligando isso com as bases que tenho de Node.js, so posso chegar a conclusao de que essa combinacao [Node.js + React] é simplismente maravilhosa.

[@rocketseat]

Boaaa Luis!! Haha elas combinam muito bem mesmo! 🚀💜

[@acm.marques]

Muito bom Diegão era o que eu estava buscando aprender. Você digita rápdo mano, impressionante um dia chego lá para ter todo este conhecimento da stack Thanks!!

[@ricardoabreum]

Esse MasterClass foi sensacional!!! Aborda diversos conceitos importantes do React. Seria importante fazer um vídeo de como tratar o refresh_token em aplicações mobile que usam OpenId/Oauth2. Renovo o token ou autentico novamente? Precisamos salvar a senha do usuário? E se o refresh falhar, autentico novamente?

[@LeandroOtonii]

Diego do heaven! Sempre achei que era coisa demais usar o Redux só pra controlar autenticação, essa dica chegou no timing perfeito. Vai me ajudar demais, muito obrigado e vê se não some, já estava sentindo falta das suas aulas.

[@mauricimendes5669]

Se desse para dar mais de um like... É sensacional o nível e quantidade conhecimentos que a Rocketseat consegue transmitir... #NLW

[@douglastesch8876]

Cara, realmente não da para falar que o Diego esconde o jogo, essa master class está com o conteúdo mais quente possível guys, delicinha.

[@rocketseat]

Valeeeeu Douglas! Diego é top né? 💜

[@samuelvincenzo3573]

Vídeo Sensacional, Parabéns pela explicação de forma didática

[@rocketseat]

Que massa que curtiu, Samuel! Valeu demais pelo feedback! 💜 🚀

[@leonardorabelo4352]

Era tudo o que eu precisava, valeu Rocketseat! A melhor de todas!

[@WNFelix]

Implementei em um projeto que estou desenvolvendo, ficou muito bom. Vcs são demais Diegao 👌

[@guilhermedasilva9289]

Fico impressionado com a qualidade do conteúdo.

[@guilhermedasilva9289]

Conteúdo excelente, parabéns para Rocketseat e para o Diego. Não vejo a hora de ter a oportunidade de fazer um curso mais a fundo com a Rocketseat.

[@brunolombardi1512]

Ahhh estava só esperando mais um vídeo delicinha de vocês. Pera.. é estou no canal certo.

[@vinihvc]

hmmm

[@fabiofreitasbr]

Cara, Diego... Que conteúdo de qualidade ! Incrível, sempre incrível...

[@vitorklein4005]

carraca m bom o conteúdo, me ajudo mt, eu estava bem empacado nos meus estudos com react-native por conta de autenticação, e esse vídeo me esclareceu muitas duvidas, vlw rocket, trabalho mt fera de vcs

[@marcospadilha3634]

Vocês são SENSACIONAIS, APENAS!

[@KevinMadalossoVeiga]

vídeo sensacional, parabéns Rocketseat!!!

[@rocketseat]

Valeeeeu, Kevin! 😍 🚀

Perdi as contas de quantas vezes este vídeo me ajudou

[@MarcosGomes-np1ke]

Fico me perguntando por qual motivo alguem negativa um vídeo da Rocketseat. De qualquer forma.. Parabéns pelo conteúdo! Vocês são fodaas

[@jobsongilbertobarrosamorim2516]

Eu tinha feito exatamente isso num projeto ReactJS nesses últimos meses, quando cheguei nesse mesmo ponto eu estava bastante feliz com o resultado. Mas daí quando comecei a mexer com refresh do token e ACL roles (admin, etc, utilizando a biblioteca CASL), começaram algumas dores de cabeça. Um primeiro conflito foi nas ações abortáveis da biblioteca react-async: quando eu atualizava algum dado do contexto, ele já queria sair trocando de página antes de retornar o resultado pra página (o que fazia o react-async abortar, e me impedia também de controlar o redirecionamento na própria página). Outro problema foi fazer o refresh do token (eu acho que eu tinha usado a biblioteca axios-auth-refresh) ser refletido nos dados do contexto (por exemplo, um admin trocando seu papel para o de usuário comum pra visualizar a página como os demais usuários, ou um usuário ganhando um novo papel entre duas requisições com seu token antigo sendo invalidado para forçar um refresh). A princípio, eu queria fazer isso automaticamente (cabeçalho da resposta -> novo token -> decode -> role -> setCurrentRole), mas no fim tive que retornar o resultado pra página para ela chamar um método no contexto que daí ativava o reload da página e, novamente, caía no problema de não permitir que eu controlasse o redirecionamento. No fim, eu acabei deixando o contexto de lado e fiz o serviço de "api" ser responsável por tudo isso, mas depois caí em outros problemas com o CASL (como eu não estava armazenando os dados em estados do react, não dava pra utilizar o CASL do jeito padrão, tive que utilizá-lo meio que manualmente). Enfim, eu agora estou me dedicando em refazer essas partes e ver se desta vez eu consigo botar todos os quatro (context, react-async, CASL e token refresh) funcionando juntos.

[@misaruto]

Tirou um tijolo do meu rim com esse video, pq foi dificil achar algo tão completo em relação as context api como aqui na Rocketseat.

[@RaphaelAzeredo]

Pena que só da para dar like uma vez, adorei o conteúdo, parabéns Diego

[@darlandsv]

Putz eu procurando justamente conteúdo sobre ContextAPI com Hooks, show de bola!!

[@leonardobraz5223]

Vocês podiam fazer um vídeo explicando mais sobre Linking no Native, né? Desde a parte de manipulação de URL até receber uma intent com algum arquivo, similar ao que seria registrar no intent-filter que a aplicação é capaz de receber pdf's (por ex, criar um app para leitura de pdf no qual os pdf's poderão ser abertos por ele via "Open with..."). Conteúdo sensacional!

[@rocketseat]

Valeeu pela sugestão e pelo feedback, Leonardo! 💜

[@douglasnickson9117]

Como sempre, vídeo excelente. Obrigado!

[@phelipeviana9184]

Você é outro nivel... parabéns Fili.. ops Diego kkkk

[@luistitossaiete9850]

Ainda bem que o Diego mecionou aqui o video sobre o setup com node.js, foi muito legal e to conseguindo implementar. porem, to tendo dificuldades em lidar com o eslint no ReactJS

[@rocketseat]

Boaa, Luis! ESLint pode ser complicado mesmo até pegar o jeito, mas ele ajuda muito a manter um bom padrão de regras! 💜💜

[@destravandoosdedosnaguitar3550]

Que presentaço, hein??!! Toda uma estrutura básica de autenticação dada de presente e com explicações detalhadas, dignas de um gigante que é o Diego Fernandes. Muitíssimo obrigado por este conteúdo de inestimável valor. Só não entendi por quê os arquivos "api" e "auth", da pasta "services" ficaram com a extensão ".ts" e não ".tsx". Sei que a extensão não afeta o funcionamento, mas o correto seria que fossem, também, ".tsx", correto??

[@AdrianoTonetto]

Diego, bem que você poderia fazer um vídeo com todas as suas configurações do ESLint, Prettier e outros mais !!!

[@kataik_]

Depois de um tempo, eu acabei de terminar o meu signIn e signUp. Thanks!

[@wagmedrado]

Muito bom. Me fez mudar de nível

[@GiuDrawer]

Muito legal! Esses vídeos ajudam muito, obrigada pelo conteúdo sempre de qualidade!

[@paulospiguel]

Sou aluno e fã da rocket. VCS mudaram a minha vida. Minha dúvida é posso usar redux e context API juntos, na mesma aplicação?

[@RodrigoSD383]

Essa aula esta salvando minha vida

[@rocketseat]

Woow! Que massa que curtiu, Rodrigo! 💜

[@david75186]

meu deus, que conteúdo maravilhoso, estou implementando no meu projeto React JS sem nenhum problema! ❤️❤️❤️

[@kataik_]

Nossa, esse video veio na hr certa, salvou minha vida.

[@matheusrochadigital]

Video sensacional ! Caso quem esteja assistindo hoje e não conseguiu achar o npm install do async-storage, o novo e esse: npm install @react-native-async-storage/async-storage

[@LucasFerronato]

COM CERTEZA, faça um vídeo de ESLINT, Prettier, typescript, etc... como comentou! Seria Sensacional!!!

[@Joe-zw1qt]

Up

[@rocketseat]

Valeu pela sugestão! 💜

[@LSensTubeer]

Muito show Diego ! Curto muito sua organização, se puder faz um vídeo do flow no react

[@rocketseat]

Vaaleu pela sugestão e pelo feedback, Luan! 💜

[@kochgamers]

salvou mto aqui no meu projeto com o firebase

[@podcastsbrcortes5621]

Muito massa, só conteúdo de qualidade nesse canal.

[@Aleweslei]

Boa, Diego qual seria a melhor abordagem no cenário pra autenticação em um aplicativo e o token expira? A uma maneira de atualizar ou seria o caso de realmente colocar um tempo maior pra expirar? parabéns pelo conteúdo!

[@JanderSilva01]

A Rocketseat parece que sabe as dúvidas que eu estou tendo nas minhas aplicações, e faz os tutoriais em cima dessa informação.

[@rocketseat]

Nós temos certos poderes... 👀🔮

[@Suzanesantos1997]

Olá, primeiro quero parabenizar a excelente qualidade do vídeo. Também gostaria de expor uma dúvida: quando eu uso a extensão .ts e a .tsx? Qual a diferença entre as duas? (Estou aprendendo typescript agora, então sou muito leiga no assunto).

[@negasuja]

Rocketseat lendo mentes de novo novamente ❤️❤️❤️

[@pedrosancao]

Vindo do NLW #2 Gostei bastante da explicação do contexto, parabéns pela qualidade das aulas!

[@broksfields]

Padrão Rocketseat, parabéns pelo conteúdo!

[@samueloliveira4465]

Vídeo de 3 anos atrás, mas ainda ajuda bastante, tive que modificar algumas coisas, mas tudo ok

[@Hiagoleof250]

Que ajuda velho!!! Eu te amo manooo

[@leonardolub]

No Java, a notação com menor-maior "" era chamada de Diamond.

[@rocketseat]

💜

[@mti2fw]

Diego, mostra desigm patterns no React/React Native: HOC, renders props, presentation/container (apesar de tu não gostar kkkk), etc. Se possível com TypeScript! :D

[@rocketseat]

Vaaaleu pela sugestão, Magno! 💜

[@emmanuelfelipenery2956]

Top como sempre!!! não sei se foi só eu mas isolando em contexts me lembrou muito o ducks pattern do redux. Onde ele possui os atributos e actions em um modulo isolado.

[@rocketseat]

Valeeeu Emmanuel! 💜

[@jasonloureiro7095]

Valeu Diego, ótimo tutorial!!!

[@denissouza8857]

Uma pena o youtube liberar apenas um like, show 🚀🚀🚀🚀

[@rocketseat]

Diego: a Denis: 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍 💜💜💜 Vaaaleu!

[@pauloreis7093]

Puxa, que vídeo monstro! Sensacional!

[@EduardoPinaCampinas]

Sensacional a masterclass!!!!! Parabens pelo aula de codigo!!!!!!!!!

[@rocketseat]

Vaaaleu pelo feedback, Eduardo! 💜

[@luisrodrigues678]

Mano, num tem conteúdo melhor nessa internet

[@rocketseat]

Awwnnn 💜💜💜 Valeu, Luis! 💜

[@Matheus-qv7yw]

obrigado Rocket, amo vcs

[@rocketseat]

Também amamos todos vocês!! 💜😍

[@ocharlespereira]

Que homem é este Diego Deshamps, será q tem como fazer um video especifico de criação de mais Hooks e SWR? Aquele grande Abraço mestre!!!

[@ofamigeradoudd]

Que conteúdo top! Parabéns

[@mecatronicacomreciclagem656]

Top dmais, parabéns Diego, vai me ajudar bastante nos projetos

[@rocketseat]

Vaaleu pelo feedback 💜

[@caducastanha5645]

muito boa essa masterclass, vcs são feras demais... Parabéns!

[@rocketseat]

Valeeu pelo feedback, Cadu! 💜💜💜

[@rodrigomartins9115]

Diego faz um video sobre o react native web, e fala o que voce acha sobre isso, se faz sentido, diga sua opinião

[@rocketseat]

Vaaaleu pela sugestão, Rodrigo! 💜

[@fabinSilvas]

Conteúdo top demais

[@skiffer5800]

Redux & hooks são as coisas mais delicinha do react

[@matheuscostajs]

Valeu galera, esse vídeo salvou!

[@giuseppesarto1958]

Fix: em 58:53 o "setLoading(false)", deveria estar fora da cláusula IF

[@viniciusmoreira3394]

deus te abençoe

[@giuseppesarto1958]

@@viniciusmoreira3394 e a ti também!

[@CiriloColombo]

@@viniciusmoreira3394 kkkkk pensei a mesma coisa quando li o comentário

[@ArrozWhite]

fiquei tentando entender o loading infinito tb kk fiz um then ai funcionou, achei que tinha copiado errado algo ate kk const storagedLogin = await AsyncStorage.multiGet([ '@RNAuth:user', '@RNAuth:token', ]).then((data) => { console.log(data); if(data[0][1] && data[1][1]) { api.defaults.headers['Authorization'] = `Bearer ${data[1][1]}`; setUser(JSON.parse(data[0][1])); } setLoading(false); });

[@vittim1998]

poderia explicar o porquê disso?

[@talithamad]

Muito bom! Me ajudou bastante! :)

[@douglaluisdutra]

muito bom! parabéns e muito obrigado!

[@_heydav]

Diego, eu te amo 💜

[@tiagopaees]

Ótimo conteúdo! Vídeo sobre o setup do lint seria muito bom!

[@gavranhas]

Show de bola, Diego! Valeu!

[@vitorreis6096]

top top top. Estava precisando deste Masterclass. Hora exata!!

[@rocketseat]

Nós temos certos poderes 👀🔮 😂😂

[@DhenysonJhean]

Uma duvida galera: Já vi varios videos que dão basicamente a mesma opnião que useContext compartilha dados entre componentes e se for só pra isso blz, mas para algo mais complexo o Redux ainda é mais completo. O porém é que todos esses videos eu não sei se a comparação é só do useContext vs Redux sem considerar o useReducer. Então minha duvida é? E se for considerando useContext + useReducer eles tem o mesmo "poder" do Redux ou mesmo assim continuam só um "quebra galho"?

[@thalysonrodrigues4200]

Falando sobre TypeScript: interface e type tem quase a mesma funcionalidade... Mas em questão de semântica de POO e particularidades da linguagem como o próprio type, porque não usar ele ao invés de interface? Já que não tem classe implementando este contrato?

[@M4J0R97]

Justamente o que eu estava procurando 😍

[@douglaspoma]

Faz uma Masterclass abordando verificação de validade e refresh token.

[@rocketseat]

Vaaleu pela sugestão, Douglas! 💜

[@MrCaioragazzi]

Que vídeo meus amigos!!! Muito obrigado Rocketseat!!!!!!

[@rocketseat]

Vaaaleu Caio! 💜

[@apolosilva7505]

Ajudou bastante, obrigado.

[@fernandodepaula5850]

salvou meu projeto, eu já estava arrancando os cabelos!

[@PauloRicardo-dk6yf]

Tô de luto!!! Essa aula matou mais uma ignorância em mim.