generic-google-signin

Guia de Configuração - generic-google-signin

Este guia detalha os passos para configurar o componente generic-google-signin no seu projeto React Native. Partimos do pressuposto que o Firebase já está configurado no seu projeto.

---

Pre-requisitos

Dependências Necessárias

• react
• react-native
• firebase
• @react-native-google-signin/google-signin

Firebase Configurado

• Aquivo firebaseConfig.js no diretório do projeto.
• Um objeto authInstance = initializeAuth() instanciado no projeto.

Instalação

Execute o seguinte comando para instalar as dependências:

npm install generic-google-signin @react-native-google-signin/google-signin

---

Configuração

1. Configuração do Keystore

Para gerar o SHA-1 a partir do arquivo debug.keystore, execute:

keytool -list -v -keystore ./android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android

Para gerar o SHA-1 a partir de uma build EAS, execute:

eas credentials

---

2. Configuração do Firebase

1. No Firebase Console, acesse "Authentication".
2. Clique na aba "Sign-in method" e habilite o provedor de login "Google".
3. Baixe o arquivo google-services.json.
4. Adicione o arquivo google-services.json na pasta /android/app do seu projeto.

---

3. Configuração do Gradle

No arquivo /android/build.gradle, adicione a dependência do Google Services:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.4.1'
    }
}

No arquivo /android/app/build.gradle, aplique o plugin do Google Services:

apply plugin: 'com.google.gms.google-services'

---

Importação e Uso

Para utilizar o componente SigninGoogle, importe-o no seu código:

import { SigninGoogle } from 'generic-google-signin';

Exemplo de uso:

<SigninGoogle
    auth={authInstance}
    androidClientId="your-android-client-id.apps.googleusercontent.com"
    iosClientId="your-ios-client-id.apps.googleusercontent.com"
    text="Entrar com Google"
    style={{ backgroudColor: '#4285F4', textColor: '#FFFFFF', borderRadius: 5 }}
/>

---

Propriedades do Componente

auth → Auth

Instância do Firebase Authentication obrigatória para gerenciar a autenticação.

---

androidClientId → String?

ID do cliente para Android, obtido no google-services.json.

Exemplo:

"your-android-client-id.apps.googleusercontent.com"

---

iosClientId → String?

ID do cliente para iOS, obtido no google-services.json.

Exemplo:

"your-ios-client-id.apps.googleusercontent.com"

---

text → String?

Texto exibido no botão de login. Caso não seja fornecido, o botão ficará sem texto.

Exemplo:

"Entrar com Google"

---

style → GoogleSignInStyle?

Estilização do botão. Parâmetros disponíveis:

Parâmetro	Tipo	Padrão	Descrição
textColor	String	#FFFFFF	Cor do texto
backgroudColor	String	#4285F4	Cor de fundo
borderRadius	Number	2	Raio da borda
height	Number	36	Altura do botão
width	Number	'100%'	Largura do botão
fontSize	Number	13	Tamanho da fonte
fontFamily	String	'sans-serif'	Fonte do texto
fontWeight	String	'700'	Peso da fonte
showIcon	Boolean	true	Exibir ícone do Google
iconColor	String	null	Cor do ícone
shadowColor	String	#000	Cor da sombra
shadowOffset	Object	{ width: 0, height: 10 }	Offset da sombra
shadowOpacity	Number	0.8	Opacidade da sombra
shadowRadius	Number	4	Raio da sombra
elevation	Number	3	Elevação (Android)

---

Finalização

Siga esses passos para configurar corretamente o generic-google-signin no seu projeto React Native. Certifique-se de que todas as dependências e configurações estão corretas para evitar erros durante a autenticação.

Caso encontre problemas, verifique a documentação oficial do Google Sign-In e do Firebase Authentication.