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-firebase/app
• @react-native-google-signin/google-signin
• @react-native-firebase/auth

Instalação

Execute o seguinte comando para instalar as dependências:

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

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

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.