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.
npm install generic-google-signingeneric-google-signinEste 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.
---
- react
- react-native
- firebase
- @react-native-firebase/app
- @react-native-google-signin/google-signin
- @react-native-firebase/auth
Execute o seguinte comando para instalar as dependências:
``sh`
npm install generic-google-signin @react-native-google-signin/google-signin @react-native-firebase/auth
---
Para gerar o SHA-1 a partir do arquivo debug.keystore, execute:
`sh`
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:
`sh`
eas credentials
---
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.google-services.json
4. Adicione o arquivo na pasta /android/app do seu projeto.
---
No arquivo /android/build.gradle, adicione a dependência do Google Services:
`gradle`
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.4.1'
}
}
No arquivo /android/app/build.gradle, aplique o plugin do Google Services:
`gradle`
apply plugin: 'com.google.gms.google-services'
---
Para utilizar o componente SigninGoogle, importe-o no seu código:
`tsx`
import { SigninGoogle } from 'generic-google-signin';
Exemplo de uso:
`tsx`
iosClientId="your-ios-client-id.apps.googleusercontent.com"
text="Entrar com Google"
style={{ backgroudColor: '#4285F4', textColor: '#FFFFFF', borderRadius: 5 }}
/>
---
ID do cliente para Android, obtido no google-services.json.
Exemplo:
`ts`
"your-android-client-id.apps.googleusercontent.com"
---
ID do cliente para iOS, obtido no google-services.json.
Exemplo:
`ts`
"your-ios-client-id.apps.googleusercontent.com"
---
Texto exibido no botão de login. Caso não seja fornecido, o botão ficará sem texto.
Exemplo:
`ts`
"Entrar com Google"
---
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) |
---
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.