DEV Community

loading...
Cover image for React Native - Google Login

React Native - Google Login

Emerson Vieira
Estudante de Eng. de Software
Updated on ・4 min read

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 ;)

Discussion (8)

Collapse
imjvictor98 profile image
João Victor

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
}

Collapse
mensonones profile image
Emerson Vieira Author

Muito bom saber que o post foi útil pra ti, João. 😁

Collapse
danielcnascimento profile image
danielcnascimento

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.

Collapse
mensonones profile image
Emerson Vieira Author

links atualizados, Daniel :) obg pelo feedback

Collapse
pabloprota profile image
Pablo

Qual foi a fonte da pesquisa?

Collapse
mensonones profile image
Emerson Vieira Author

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.

Collapse
narvelan profile image
Insta: @narvelan • Edited

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

Collapse
mensonones profile image
Emerson Vieira Author

Obrigado e espero que realmente te ajude :D qualquer dúvida sobre o post é só comentar.

Forem Open with the Forem app