React-native google signing gives Developer Error

 React-native google signing gives Developer Error

Your SHA-1 key in firebase is not match your with your app's SHA-1 key. To get your correct SHA-1 key follow the command in console with your application path :

YOu need too generate three keystone 

1. debuge mode

2. release mode

3. play store keystone then have to add in to the firebase setting sha1

for WIndows

C:\Program Files\Java\jdk1.8.0_251\bin

keytool -list -v -keystore "F:\premates_customerapps-main\android\app\debug.keystore" -alias androiddebugkey -storepass android -keypass android

keytool -list -v -keystore ./android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android (MAC OS)

The problem is SHA-1 key. when we use gradlew signingReport command there is created many type of varient Signin reports. So use SHA-1 key related with Varient : relese.

OR

I had this problem too and trawled through many answers saying check your client Id and key hash, both of which I was positive were right.

The thing that got it working for me was I opened OAuth identities in the project management console (not Firebase) at https://console.cloud.google.com/apis/credentials and added an Android Oauth client Id with the correct signature (I did not have one of these there prior for some reason). Redownload the GoogleServices json file.

I also needed to set the webClientId to the "client_type": 3 Oauth client ID. It then worked.

here is the 100 percent working code which one i am working on this

import React, { Component, Fragment } from "react";
	import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, Image,} from 'react-native';
	import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';
	import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';
	export default class LoginController extends Component {
	constructor(props) {
	super(props);
	this.state = {
	pushData: [],
	loggedIn: false
	}
	}
	componentDidMount() {
	GoogleSignin.configure({
	webClientId: 'YOUR_WEB_CLIENT_ID_HERE',
	offlineAccess: true,
	hostedDomain: '',
	forceConsentPrompt: true,
	});
	}
	_signIn = async () => {
	try {
	await GoogleSignin.hasPlayServices();
	const userInfo = await GoogleSignin.signIn();
	this.setState({ userInfo: userInfo, loggedIn: true });
	} catch (error) {
	if (error.code === statusCodes.SIGN_IN_CANCELLED) {
	// user cancelled the login flow
	} else if (error.code === statusCodes.IN_PROGRESS) {
	// operation (f.e. sign in) is in progress already
	} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
	// play services not available or outdated
	} else {
	// some other error happened
	}
	}
	};
	getCurrentUserInfo = async () => {
	try {
	const userInfo = await GoogleSignin.signInSilently();
	this.setState({ userInfo });
	} catch (error) {
	if (error.code === statusCodes.SIGN_IN_REQUIRED) {
	// user has not signed in yet
	this.setState({ loggedIn: false });
	} else {
	// some other error
	this.setState({ loggedIn: false });
	}
	}
	};
	signOut = async () => {
	try {
	await GoogleSignin.revokeAccess();
	await GoogleSignin.signOut();
	this.setState({ user: null, loggedIn: false }); // Remember to remove the user from your app's state as well
	} catch (error) {
	console.error(error);
	}
	};
	render() {
	return (
	<Fragment>
	<StatusBar barStyle="dark-content" />
	<SafeAreaView>
	<ScrollView
	contentInsetAdjustmentBehavior="automatic"
	style={styles.scrollView}>
	<Header />
	{global.HermesInternal == null ? null : (
	<View style={styles.engine}>
	<Text style={styles.footer}>Engine: Hermes</Text>
	</View>
	)}
	<View style={styles.body}>
	<View style={styles.sectionContainer}>
	<GoogleSigninButton
	style={{ width: 192, height: 48 }}
	size={GoogleSigninButton.Size.Wide}
	color={GoogleSigninButton.Color.Dark}
	onPress={this._signIn}
	disabled={this.state.isSigninInProgress} />
	</View>
	<View style={styles.buttonContainer}>
	{!this.state.loggedIn && <Text>You are currently logged out</Text>}
	{this.state.loggedIn && <Button onPress={this.signOut}
	title="Signout"
	color="#841584">
	</Button>}
	</View>
	{!this.state.loggedIn && <LearnMoreLinks />}
	{this.state.loggedIn && <View>
	<View style={styles.listHeader}>
	<Text>User Info</Text>
	</View>
	<View style={styles.dp}>
	<Image
	style={{ width: 100, height: 100 }}
	source={{ uri: this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.photo }}
	/>
	</View>
	<View style={styles.detailContainer}>
	<Text style={styles.title}>Name</Text>
	<Text style={styles.message}>{this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.name}</Text>
	</View>
	<View style={styles.detailContainer}>
	<Text style={styles.title}>Email</Text>
	<Text style={styles.message}>{this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.email}</Text>
	</View>
	<View style={styles.detailContainer}>
	<Text style={styles.title}>ID</Text>
	<Text style={styles.message}>{this.state.userInfo && this.state.userInfo.user && this.state.userInfo.user.id}</Text>
	</View>
	</View>}
	</View>
	</ScrollView>
	</SafeAreaView>
	</Fragment>
	);
	}
	}
	const styles = StyleSheet.create({
	scrollView: {
	backgroundColor: Colors.lighter,
	},
	listHeader: {
	backgroundColor: '#eee',
	color: "#222",
	height: 44,
	padding: 12
	},
	detailContainer: {
	paddingHorizontal: 20
	},
	title: {
	fontSize: 18,
	fontWeight: 'bold',
	paddingTop: 10
	},
	message: {
	fontSize: 14,
	paddingBottom: 15,
	borderBottomColor: "#ccc",
	borderBottomWidth: 1
	},
	dp:{
	marginTop: 32,
	paddingHorizontal: 24,
	flexDirection: 'row',
	justifyContent: 'center'
	},
	engine: {
	position: 'absolute',
	right: 0,
	},
	body: {
	backgroundColor: Colors.white,
	},
	sectionContainer: {
	marginTop: 32,
	paddingHorizontal: 24,
	flexDirection: 'row',
	justifyContent: 'center'
	},
	buttonContainer: {
	marginTop: 32,
	paddingHorizontal: 24,
	flexDirection: 'row',
	justifyContent: 'center'
	},
	sectionTitle: {
	fontSize: 24,
	fontWeight: '600',
	color: Colors.black,
	},
	sectionDescription: {
	marginTop: 8,
	fontSize: 18,
	fontWeight: '400',
	color: Colors.dark,
	},
	highlight: {
	fontWeight: '700',
	},
	footer: {
	color: Colors.dark,
	fontSize: 12,
	fontWeight: '600',
	padding: 4,
	paddingRight: 12,
	textAlign: 'right',
	},
	});