Configurando e utilizando o Firebase Auth com React Native (Expo)
Neste artigo será mostrado como realizar a configução do Firebase para utilizar a autenticação via email e senha (cadastro, login e recuperação de senha).
Estava estudando Firebase com o Expo e, devido a pouca quantidade de material encontrado sobre a sua intergração com a versão 9 do Firebase, resolvi escrever este artigo mostrando o passo a passo que instalei e configurei o Firebase ao meu projeto.
Link do repositório: https://github.com/AstrOOnauta/expo-firebase-auth-realtime-db
Criando o projeto React Native (Expo)
No terminal, executar o seguinte comando:
npx expo init {NOME_DO_APP}Escolha o template que achar melhor (utilizei o Bare Workflow e adicionei o Typescript manualmente).
Aguarde concluir a instalação das dependências do projeto…
Após concluido, acessar a pasta do projeto:
cd {NOME_DO_APP}O próximo passo é instalar o Firebase no projeto (foi utilizada a versão 9.1.0 recomendada na documentação do Expo):
yarn add firebase@9.1.0Em seguida será necessário criar um Projeto Console no site do Firebase, que incluirá todo o sistema de autenticação (com tabela de usuarios cadastrados).
Criando projeto no Firebase Console
Ao acessar o site do Firebase Console (logado com sua conta da Google), mostrará a página acima e o primeiro passo é clicar em “ + adicionar projeto”.
Em seguida:
- Digite o nome do seu projeto e clique em continuar;
- Escolha se quer adionar o Google Analytics , e clique em continuar (caso queira adicionar) ou em criar projeto (caso não queira adicionar);
- Em configurar o Google Analytics, selecione a opção Default Account for Firebase.
Projeto Firebase pronto, basta esperar ele ser criado…
Para iniciar o registro do projeto, basta clicar no ícone WEB, digitar o nome do seu app e clicar em registrar app. O Firebase Console irá gerar as credenciais necessárias para conectar seu projeto Expo ao Firebase.
Crie um arquivo (FirebaseConnection.ts) para armazenar e exportar as credenciais fornecidas pelo Firebase, a estrutura deverá ser a seguinte:
OBS.: Recomenda-se utilizar as credenciais em variaveis de ambiente para uma melhor proteção dos dados.
Criando Firebase Auth com Email e Senha
O primeiro passo será ativar o nosso app no Firebase Console para permitir autenticação.
Na sidebar, expanda o menu Criação e clique em Authentication. Em seguida clique em Vamos Começar.
Selecione a opção Email/senha.
Ative a opção Email/senha e clique em salvar.
Após isso a Autenticação de Email/senha, o Firebase ja estará funcionando e a tabela de users já estará liberada para uso (com a tabela vazia, até o momento).
Então, tudo já está configurado para realizar o cadastro de novos usuários utilizando o sistema de email e senha.
Registrando novos Usuários via Email/senha
No projeto Expo, crie uma screen chamada SignUp (deverá conter um formulário para capturar o nome, email e senha do usuário que deseja se cadastrar). O código utilizado para instanciar o Firebase e registrar um usuário é o seguinte:
Fazendo alguns testes, é possivel verificar que a tabela de users do Firebase Authetication já começa a ser populado por meio da aplicação em Expo:
O próximo passo será a utilização do sistema de recuperação de senha por envio email nativo do Firebase.
Utilizando o Firebase Recovery Password via email
Assim como para registrar um usuário, crie uma screen no projeto Expo chamada RecoveryPassword.tsx para capturar o email do usuário que necessita recuperar a senha. O código desta pagina é o seguinte:
Utilizando um email ja cadastrado no Firebase pelo nosso app, é possivel verificar a funcionalidade do recovery password:
Em seguida, será abordado o sistema de Autenticação do Firebase e a separação de rotas públicas e privadas.
Login com Email/senha usando Firebase
Uma das formas utilizadas para gerenciamento de rotas/telas privadas e publicas é determinar se o usuário está autenticado ou não na aplicação. Uma das vantagens do Firebase é permitir uma autenticação simples e segura.
Para fazer este gerenciamente, o arquivo App.tsx pode retornar um componente de Routes.tsx que define quais rotas será mostrado para o usuário que esta utilizando a aplicação.
Desta forma, o arquivo Routes.tsx tem uma estrutura parecida com a seguinte:
O método getAuth() do Firebase Auth armazena temporariamente o usuário autenticado após a realização de um login. Desta forma, após o login, é possível gerenciar as rotas: usuários não autenticados só terão acessos às telas de login, registro e recuperação de senha, por exemplo, mas os usuários que efetuaram o login, poderão acessar as demais telas do aplicativo, como uma dashboard, por exemplo.
Desta forma, para realizar o login, será craido uma tela de Login para aplicação (que irá capturar o email e senha do usuário), a qual chamei de SignIn.tsx. O código para autenticação terá a seguinte estrutura:
OBS.: Uma forma eficiente de persistir o usuário autenticado na aplicação seria passando um contexto e salvando os dados do usuário/token no AsyncStorage ou o SecureStore do próprio Expo.
Thanks for stopping by! 😁
🚀 AstrOOnauta 🚀