React Native - Google Login
Tags: reactnative, firebase, auth, google
Published: 2019-10-23 17:07:36

# 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](https://rnfirebase.io/)
com o comando abaixo:
```sh
$ yarn  add @react-native-firebase/app
```
A segunda dependência a ser adicionada ao projeto é referente ao módulo [Firebase Auth para RN](https://rnfirebase.io/auth/usage) . Adicione com o comando abaixo:
```sh
$ yarn  add @react-native-firebase/auth
```
Na página do módulo Auth, há uma uma parte que se refere a [Social Auth](https://rnfirebase.io/auth/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](https://github.com/react-native-community/react-native-google-signin). Adicione a mesma usando o comando abaixo:
```sh
$ 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:

```sh
$ react-native link @react-native-community/google-signin
```
Precisamos acessar a pasta android e abrir o arquivo build.gradle
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b5k7gslsuyq6ihdf0pii.png)
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](https://thepracticaldev.s3.amazonaws.com/i/hjqw0hqfiqu0yy372tei.png)

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](https://thepracticaldev.s3.amazonaws.com/i/y9voftlr3moqcega7crx.png)
em seguida, deve selecionar **app/Tasks/android/signingReport**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sh3rz8j4uabtno9hvjey.png)

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](https://thepracticaldev.s3.amazonaws.com/i/wbkcjrb3o33zk7kdeaiz.png)

**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](https://thepracticaldev.s3.amazonaws.com/i/jhyl4nl34h5tmlst6kb8.png)
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](https://developers.google.com/identity/sign-in/android/start-integrating) e rolar um pouco a página até aparecer o **botão** **Configure a project**. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kguf00ml9ixw6j19yja7.png)

Selecione seu projeto

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3am2vk99aeqm0qccosaf.png)

**Selecione Android e clique em CREATE**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pkes1n34m96psxnqhb4j.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9n37sn6v25azsvv8htfz.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6z2pt1ibd1hzbe8lngza.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/56gph5crahi8grb1ia3l.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/d86nml43p5w75upow2dq.png)

Agora acesse as configurações do seu projeto, como mostra a imagem a seguir.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jmef2hxl4yrp16m89rxk.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z69s8ppu97igh7k5ush3.png)

**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](https://github.com/mensonones/tutorial-reactnative-google-login)

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