React Native - Google Login

mensonones

Emerson Vieira

Posted on October 23, 2019

React Native - Google Login

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Precisamos acessar a pasta android e abrir o arquivo build.gradle
Alt Text
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
Alt Text

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.
Alt Text
em seguida, deve selecionar app/Tasks/android/signingReport
Alt Text

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

Alt Text

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.

Alt Text
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.

Alt Text

Selecione seu projeto

Alt Text

Selecione Android e clique em CREATE
Alt Text

Agora preencha os campos com o nome do pacote e com a sua chave SHA1 e clique em CREATE

Alt Text

Na imagem seguir, é dado seu client id e chave secreta, vão ser necessários para os passos seguintes. Salve-os!!!

Alt Text

Volte a página inicial de seu projeto no firebase, clique em Authentication no menu ao lado.

Alt Text

Clique em configuração do SDK da Web e adicione seu client id e chave secreta, agora clique em salvar.

Alt Text

Agora acesse as configurações do seu projeto, como mostra a imagem a seguir.
Alt Text

Agora, em Apps para Android, selecione seu app e baixe seu arquivo google-services.json

Alt Text

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.

Projeto Exemplo

Espero que não tenha ficado confuso. Até a próxima ;)

💖 💪 🙅 🚩
mensonones
Emerson Vieira

Posted on October 23, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React Native - Google Login
reactnative React Native - Google Login

October 23, 2019