Login Google com React Native
OBS: Este tutorial engloba apenas projetos a partir da versão 0.60 do RN(React Native) e o Android.
Oi! Eu decidi escrever este post por motivos de ter apanhado um pouco para configurar e fazer funcionar essa feature no projeto do trabalho. Espero realmente que este post te ajude a não perder tempo e nem paciência.
Primeiramente temos que adicionar as dependências necessárias. Vamos por partes. A primeira dependência a ser adicionada é o do Firebase para RN
com o comando abaixo:
$ yarn add @react-native-firebase/app
A segunda dependência a ser adicionada ao projeto é referente ao módulo Firebase Auth para RN . Adicione com o comando abaixo:
$ yarn add @react-native-firebase/auth
Na página do módulo Auth, há uma uma parte que se refere a Social Auth, onde é mostrado como fazer login usando Facebook, Twitter e Google. O foco deste post é o login usando o Google. Na mesma página, onde se refere o login com Google, eles indicam o uso de uma outra lib para facilitar o login. A lib é react-native-google-signin. Adicione a mesma usando o comando abaixo:
$ yarn add @react-native-community/google-signin
A partir daqui, se você rebuildar e tentar rodar seu projeto, ele não vai abrir, pois precisamos configurar algumas coisinhas para que a lib(google-signin) funcione direitinho.
Antes de tudo, você precisa fazer o link da lib, pois ainda não funciona com autolink. Faça o link usando o comando abaixo:
$ react-native link @react-native-community/google-signin
Precisamos acessar a pasta android e abrir o arquivo build.gradle
precisamos adicionar googlePlayServicesAuthVersion = "17.0.0" e classpath("com.google.gms:google-services:4.3.2") como mostra na imagem.
Acesse a pasta app dentro da pasta android e abra o arquivo build.gradle
agora adicione
implementation 'androidx.appcompat:appcompat:1.1.0-rc01' e
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
como mostra a imagem.
Agora você precisar abrir seu projeto android com o Android Studio e abra a aba do gradle.
em seguida, deve selecionar app/Tasks/android/signingReport
clique duas vezes em signingReport e após executado, role o resultado até encontrar a Task app:signingReport e Variant: debugUnitest. Abaixo a imagem do resultado
copie/salve a chave de SHA1 para os próximos passos.
Acesse o console do seu firebase e se já tiver um projeto, basta acessar o mesmo e na página inicial dele, clicar em adicionar app e selecionar android, feito isso, vai abrir uma página para você registrar seu app.
você precisa ter em mãos o nome do pacote do app e a chave SHA1 e colocar nos respectivos campos como na imagem acima. Após preencher os campos, basta registrar o app.
Agora precisa acessar o site e rolar um pouco a página até aparecer o botão Configure a project.
Selecione seu projeto
Selecione Android e clique em CREATE
Agora preencha os campos com o nome do pacote e com a sua chave SHA1 e clique em CREATE
Na imagem seguir, é dado seu client id e chave secreta, vão ser necessários para os passos seguintes. Salve-os!!!
Volte a página inicial de seu projeto no firebase, clique em Authentication no menu ao lado.
Clique em configuração do SDK da Web e adicione seu client id e chave secreta, agora clique em salvar.
Agora acesse as configurações do seu projeto, como mostra a imagem a seguir.
Agora, em Apps para Android, selecione seu app e baixe seu arquivo google-services.json
adicione este arquivo na pasta app que fica dentro da pasta android. Feito isto, rebuild seu projeto e inicie-o. Seu app estará configurado para fazer login Google.
Espero que não tenha ficado confuso. Até a próxima ;)
Top comments (8)
O post ficou muito legal, me ajudou bastante. Mas para quem teve problema de merge ao fazer build do projeto como eu, basta ir no android/app/build.grade e adicionar uma flag em debug e release:
debug {
multiDexEnabled true
}
release {
multiDexEnabled true
}
Muito bom saber que o post foi útil pra ti, João. 😁
Gostei do post, muito útil, mas queria saber se a API do google e demais dependências estão estáveis para esse passo a passo hoje.
tentei acessar os links, mas nenhum deles funcionam, creio que o post merece uma pequena atualização. forte abraço ! Grato pela ajuda amigo.
links atualizados, Daniel :) obg pelo feedback
Qual foi a fonte da pesquisa?
Oi, Pablo. Basicamente a doc da Google relacionado a auth do firebase e da lib usada para login usando Google e de resto foi quebrando cabeça mesmo.
Obrigado pelo tutorial, estou aprendendo a programar para o android, tenho um site no qual o usuário se cadastra e faz login pelo google auth, e quero fazer um app que se conect usando o mesmo método
Obrigado e espero que realmente te ajude :D qualquer dúvida sobre o post é só comentar.