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

Criando um fluxo completo de autenticação no React Native com Expo e AuthSession

Visão geral da seção: Nesta seção, o palestrante apresenta o objetivo do vídeo e explica que irá criar um fluxo completo de autenticação dentro do React Native usando a biblioteca Expo e AuthSession.

Criando o projeto

• O palestrante recomenda criar o projeto sem instalar a react-native globalmente na máquina. Ele usa npx react-native para buscar a última versão do pacote.

• O palestrante cria um novo projeto chamado "ep-hello-rn" usando o template TypeScript do React Native.

Inicializando o aplicativo

• O palestrante acessa a pasta do projeto e executa yarn start para inicializar o aplicativo.

• O aplicativo é aberto em um simulador iOS.

Configurando a Autenticação

• O palestrante adiciona uma nova dependência ao projeto chamada "expo-auth-session".

• Ele importa as funções necessárias da biblioteca expo-auth-session para configurar a autenticação.

• O palestrante configura as informações de autorização necessárias para usar a API de login do Spotify.

• Ele cria uma função handleSpotifyLogin que chama as funções da biblioteca expo-auth-session para iniciar o processo de login no Spotify.

• O palestrante adiciona um botão na tela que chama a função handleSpotifyLogin quando pressionado.

• Ele testa o processo de login no Spotify e verifica se as informações do usuário são exibidas corretamente.

Armazenando o Token de Acesso

• O palestrante explica como armazenar o token de acesso retornado pelo Spotify após o login.

• Ele cria uma nova função chamada storeToken que usa a biblioteca AsyncStorage para armazenar o token de acesso.

• O palestrante atualiza a função handleSpotifyLogin para chamar a função storeToken após receber o token de acesso do Spotify.

Recuperando o Token de Acesso

• O palestrante explica como recuperar o token de acesso armazenado anteriormente usando a biblioteca AsyncStorage.

• Ele cria uma nova função chamada getToken que usa a biblioteca AsyncStorage para recuperar o token de acesso.

• O palestrante atualiza a tela para exibir as informações do usuário usando o token de acesso recuperado.

Conclusão

• O palestrante conclui explicando como criar um fluxo completo de autenticação no React Native usando Expo e AuthSession.

Configurando a Navegação

Visão geral da seção: Nesta seção, o instrutor configura a navegação para o aplicativo.

Instalando pacotes de navegação

• O instrutor instala o pacote react-navigation e outros pacotes necessários para controlar o fluxo de autenticação.

• Ele entra na pasta ios e roda um comando para instalar os pacotes nativos do iOS.

• O instrutor importa o pacote react-native-gesture-handler no arquivo principal do aplicativo para tornar a tela tocável.

Configurando a navegação em pilha

• O instrutor explica que a navegação em pilha é usada quando há uma pilha de telas que podem ser navegadas pelo usuário.

• Ele adiciona o componente NavigationContainer ao redor da aplicação e importa o componente createStackNavigator.

• O instrutor copia um comando de instalação do pacote @react-navigation/stack e executa-o no terminal.

• Ele cria duas páginas: uma página de login e uma página principal. A página principal será exibida quando o usuário estiver logado.

Criando um componente com uma dieta

Visão geral da seção: Nesta seção, o palestrante começa a criar um componente usando React Native e explica como dividir as rotas em arquivos separados.

Importando a View do React Native

• O palestrante importa a View do React Native para criar um componente.

• Ele cria um arquivo de rotas e define as rotas que o usuário pode navegar quando não estiver autenticado na aplicação.

• Ele explica que é importante dividir as rotas em arquivos separados, dependendo das responsabilidades de cada conjunto de telas.

Criando uma navegação com pilhas

• O palestrante importa o create-stack navigator do react-navigation para criar uma navegação com pilhas.

• Ele explica que as rotas de autenticação precisam ser uma navegação em pilha porque elas têm funcionalidades de "vai e volta".

• Ele começa a criar um componente de rota usando o formato mais atualizado do react-navigation.

Definindo as rotas

• O palestrante define as rotas obrigatórias para cada tela que o usuário pode acessar.

• Ele usa o nome da tela como propriedade obrigatória e passa o componente que será exibido na tela quando o usuário navegar para essa rota.

• Ele explica que cada rota precisa ter seu próprio nome e componente.

Criando componentes adicionais

• O palestrante copia o código do componente anterior e o modifica para criar um novo componente de rota.

• Ele explica que é importante trocar todas as referências ao nome da rota antiga pelo nome da nova rota.

• Ele define as rotas obrigatórias para cada tela que o usuário pode acessar no novo componente.

Conclusão

Nesta seção, o palestrante explicou como criar um componente usando React Native e como dividir as rotas em arquivos separados. Ele também mostrou como criar uma navegação com pilhas e definir as rotas obrigatórias para cada tela que o usuário pode acessar.

Criando um serviço de autenticação

Visão geral da seção: Nesta seção, o palestrante cria uma função fake para simular a comunicação com uma equipe que retorna um token de autenticação. Ele cria um serviço chamado "of" e exporta uma função chamada "sign-in", que faz login na aplicação. Ele usa promessas para simular a chamada e armazena as informações do usuário.

Criação do serviço "of"

• O palestrante cria um serviço chamado "of" para simular a comunicação com uma equipe.

• Ele usa essa equipe para retornar um token de autenticação.

Exportando a função "sign-in"

• O palestrante exporta uma função chamada "sign-in".

• Essa função faz login na aplicação.

• Ela retorna uma promessa porque ele quer simular uma chamada assíncrona.

Simulando a chamada assíncrona

• Para simular a chamada assíncrona, o palestrante adiciona 17 timeouts à função.

• Isso faz com que pareça que a equipe demorou dois segundos para responder.

• A equipe responde com um token de autenticação e informações do usuário.

Criando o arquivo index.tsx

Visão geral da seção: Nesta seção, o palestrante cria o arquivo index.tsx, que controlará qual stack de navegação estará disponível quando o usuário estiver logado ou não. Ele também cria um componente chamado "Rose" para a tela de login.

Criando o componente "Rose"

• O palestrante cria um componente chamado "Rose".

• Ele será usado para a tela de login.

• Ele adiciona uma condicional para verificar se o usuário está logado ou não.

Controlando a stack de navegação

• O arquivo index.tsx controlará qual stack de navegação estará disponível quando o usuário estiver logado ou não.

• Quando o usuário estiver logado, ele verá a tela principal. Caso contrário, ele verá a tela de login.

Adicionando botão na tela de login

Visão geral da seção: Nesta seção, o palestrante adiciona um botão à tela de login e importa o componente "Gols".

Adicionando botão à tela de login

• O palestrante adiciona um botão à tela de login.

• Ele chama esse botão de "Saindo".

• Por enquanto, nada acontece quando o botão é clicado.

Importando o componente "Gols"

• O palestrante importa o componente "Gols" para dentro do arquivo index.tsx.

• Ele coloca esse componente na view da aplicação.

Autenticação com Context API

Visão geral da seção: Nesta seção, o palestrante começa a falar sobre como implementar autenticação em uma aplicação React usando a Context API.

Criando um serviço de autenticação fake

• Para simular a autenticação, é criado um serviço fake que retorna uma promessa após dois segundos.

• O serviço é importado e utilizado dentro do componente responsável pelo botão de login.

Utilizando o Context API para armazenar informações de autenticação

• É criada uma pasta chamada "context" para armazenar os contextos da aplicação.

• É criado um contexto de autenticação que armazena as informações do usuário logado.

• O contexto é exportado e utilizado em toda a aplicação.

Controlando rotas disponíveis após o login

• É necessário controlar quais rotas estarão disponíveis após o usuário fazer login na aplicação.

• Isso pode ser feito utilizando o contexto de autenticação e verificando se o usuário está logado ou não.

• O palestrante menciona que mais adiante será abordado o uso de hooks para facilitar essa tarefa.

Entendendo o Contexto

Visão geral da seção: Nesta seção, o palestrante explica como funciona o contexto no React Native e como ele pode ser usado para compartilhar informações entre componentes.

O que é o contexto?

• O contexto é uma forma de compartilhar informações entre componentes no React Native.

• Quando um componente é envolvido por um provedor de contexto, todos os componentes dentro desse provedor têm acesso às informações do contexto.

• O uso do contexto evita a necessidade de controlar estados localmente em cada componente.

Como usar o contexto?

• Para ler as informações do contexto em um componente, importe o provedor de contexto e use a função useContext.

• Use a desestruturação para obter apenas as informações necessárias do contexto.

• As informações do contexto podem ser atualizadas em qualquer lugar dentro do provedor usando funções específicas.

Por que usar o contexto?

• Não utilize AsyncStorage para comunicação entre componentes. Use o Contexto criado especificamente para essa finalidade.

• Mover a responsabilidade de controlar o estado de autenticação para um provedor de Contexto permite que todas as partes da aplicação tenham acesso às mesmas informações.

Organizando o Contexto

Visão geral da seção: Nesta seção, o palestrante mostra como organizar o contexto do aplicativo Yeti.

Movendo valores para o arquivo de contexto

• O arquivo de contexto é responsável por armazenar informações importantes do aplicativo.

• É possível mover valores que não são mais necessários para fora do arquivo de contexto.

• É importante definir um formato para o contexto e criar uma interface para isso.

Definindo o formato do cliente conta

• É possível definir um formato para a tipagem do objeto cliente conta.

• As informações armazenadas no objeto cliente conta podem incluir se o usuário está logado, token de autenticação e informações do usuário.

Resolvendo problemas com objetos vazios

• Para evitar problemas com objetos vazios, é possível forçar a tipagem ou permitir que o contexto seja nulo.

• Forçar a tipagem pode ajudar a garantir que os objetos tenham exatamente o tipo necessário.

Corrigindo Bugs na Aplicação

Visão geral da seção: Nesta seção, o palestrante aborda alguns bugs na aplicação Yeti e como corrigi-los.

Enviando informações completas ao fazer login

• Ao fazer login, é importante enviar todas as informações necessárias, incluindo token e informações do usuário.

Desculpe, mas não recebi nenhum arquivo de transcrição para trabalhar. Por favor, envie o arquivo de transcrição para que eu possa começar a criar as notas em markdown.

Contexto de Autenticação

Visão geral da seção: Nesta seção, o palestrante explica como manter as informações do usuário autenticado dentro do contexto de autenticação.

Inicializando o estado do usuário

• O palestrante mostra como passar um objeto vazio para a informação de saída e verifica se o usuário está autenticado ou não.

• Ele transforma a variável "user" em um booleano usando sinais de negação e construtor da classe boolean javascript.

• O palestrante inicializa o estado do usuário com nulo ao invés de um objeto vazio.

Mantendo as informações do usuário no contexto de autenticação

• O palestrante mostra como salvar as informações do usuário no contexto de autenticação.

• Ele verifica que mesmo com o objeto vazio, a variável "user" retorna true.

• O palestrante utiliza o hook useContext para pegar as informações do usuário dentro do contexto e mostrar na aplicação.

Utilizando a informação de autenticação nas rotas

• O palestrante explica como utilizar a informação salva no contexto para decidir qual rota mostrar baseado na informação se o usuário está logado ou não.

• Ele mostra que quando a informação muda, todos os componentes que estão utilizando aquele contexto são atualizados automaticamente.

Mudando entre rotas baseado na informação de autenticação

Visão geral da seção: Nesta seção, o palestrante explica como mudar entre rotas baseado na informação de autenticação.

Mudando para a rota de autenticação

• O palestrante mostra como mudar para a rota de autenticação quando o usuário não está autenticado.

• Ele explica que é possível fazer isso utilizando o componente Redirect do React Router.

Mudando para a rota principal

• O palestrante mostra como mudar para a rota principal quando o usuário está autenticado.

• Ele explica que é possível fazer isso utilizando o componente Route do React Router e passando uma função que retorna um componente.

Desculpe, mas não recebi nenhum arquivo de transcrição para trabalhar. Por favor, envie o arquivo de transcrição para que eu possa começar a criar as notas em markdown.

Manter Usuário Logado

Visão Geral da Seção: Nesta seção, o palestrante explica como manter o usuário logado na aplicação.

Utilizando o iOS Effect Dori para Disparar uma Verificação

• O palestrante utiliza o iOS effect dori para disparar uma verificação assim que a tela é construída.

• Ele cria uma função chamada "load stories" para buscar os dados do histórico e armazená-los em variáveis.

• O palestrante verifica se as variáveis possuem conteúdo e preenche os dados do usuário logado com as informações armazenadas.

Transformando Valores de Volta em um Objeto

• Como os valores foram armazenados com um JSON e Frank Fay, é necessário transformá-los de volta em um objeto.

• É preciso transformar a função "stories.clear()" em uma função que limpa as informações e chamar logo depois a função "stories.use()".

Mostrando Informações do Login

• Enquanto a aplicação não consegue buscar as informações do usuário, ele mostra uma tela de carregamento.

• Quando termina de carregar, ele define a variável "loggedIn" como falso e depois como verdadeiro quando termina de carregar os dados do usuário.

• Ele utiliza o activity indicator plus size para mostrar a informação do login dentro da view.

Autenticação de Usuário

Visão geral da seção: Nesta seção, o instrutor demonstra como implementar a autenticação do usuário em um aplicativo React Native.

Verificação de Login

• O instrutor mostra como verificar se o login do usuário foi concluído com sucesso.

• Ele remove uma parte desnecessária do código relacionada à verificação de login.

• O arquivo index é usado para fazer a verificação de login.

Splash Screen

• O instrutor explica como criar uma animação para a tela inicial do aplicativo.

• Ele menciona o uso do módulo react-native-splash-screen para controlar quando a splash screen desaparece.

• A animação da splash screen só desaparece quando a informação de login é recebida.

Envio de Token

• O instrutor mostra como enviar o token de autenticação em todas as requisições subsequentes usando Axios.

• Ele explica que isso só funciona depois que o usuário faz login na aplicação.

• É necessário definir manualmente o token em outras partes da aplicação onde não há um processo explícito de login.

Criação do Hulk de Autenticação

• O instrutor menciona que ele criará seu próprio hulk (middleware?) para gerenciar a autenticação e exibir os dados do usuário.

Criando um contexto para armazenar informações do usuário

Visão geral da seção: Nesta seção, o palestrante explica como criar um contexto para armazenar informações do usuário.

Interface de usuário

• Criação de uma interface para definir o formato do usuário.

• A interface do usuário terá um nome e um e-mail.

Exportando uma função

• Em vez de exportar o contexto, é possível exportar uma outra função chamada "os alfas".

• Essa função utilizará o "new this context" e retornará automaticamente tudo que não sair nem usá-lo inside out.

Autenticação completa

• O palestrante mostra como fazer a chamada API, pegar o token e armazenar as informações do usuário.

• Ele também explica como criar um contexto para deixar essas informações disponíveis em toda aplicação.

• É possível controlar o estado dessas informações enquanto elas ainda não foram recuperadas do stories.

• O palestrante mostra onde fazer autenticação e como ver terminais dentro da navegação IEC.

Utilizando local histórico ao invés de assim que stories

Visão geral da seção: Nesta seção, o palestrante explica a diferença entre usar local histórico e assim que stories.

Local histórico

• Em vez de utilizar "assim que stories", é recomendado utilizar sempre "local histórico".

• Isso porque ele é síncrono e mais rápido, sem precisar ter algumas verificações feitas com "assim que stories".

Conclusão e sugestões

Visão geral da seção: Nesta seção, o palestrante conclui a apresentação e pede sugestões para próximos vídeos.

Conclusão

• O palestrante termina a apresentação mostrando como migrar tudo que foi feito para o React JS na web sem problemas.

• Ele também pede para deixar um like e comentário com sugestões.

Sugestões

• Deixar sugestões sobre a sintaxe do hook, uso do Yeti antes dessa sintaxe, opinião sobre a Contact API e sugestões para próximos vídeos.