Google Auth in android and ios with React native Expo Managed workflow
Hey , Recently i striggled alot to find a way to integrate the google auth with react native expo app. without firebase
now the only option to integrate google auth with react native expo is using react-native-google-signin
So this is the step by step tutorial.
First you have to install the package
npx expo install @react-native-google-signin/google-signin
Then
Open your app.json file and update this code to work with your ios app
{
"expo": {
"plugins": [
[
"@react-native-google-signin/google-signin",
{
"iosUrlScheme": "com.googleusercontent.apps._some_id_here_"
}
]
]
}
}
if you are using eas build then you have to create a development build , bcoz this wont run with your expo go app
eas build --platform ios --profile development
Use this code to build a development build. now you can use this app to test your app.
For android we have to add google-services.json fileÂ
if you dont have google-services.json file , get it one from firebase or google api console.
"oauth_client": [
{
"client_id": "Your Google auth Web Client id",
"client_type": 3
}
],
In your login page React native
import { GoogleSignin, statusCodes, GoogleSigninButton, } from '@react-native-google-signin/google-signin';
useEffect(() => {
GoogleSignin.configure({
webClientId: 'Add your Web client id', // update the google service as well.
iosClientId: 'add your ios client id,
offlineAccess: false,
});
}, []);
const signIn = async () => {
try {
await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
const userInfo = await GoogleSignin.signIn();
console.log(userInfo);
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
console.log('User cancelled the login process');
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log('Login in progress');
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log('Play services not available');
} else {
console.log(error);
}
}
};
The thing is we dont need to work with Android app client id , insted of that we are using web client id
<GoogleSigninButton size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark} onPress={signIn} />
Use this code to call the google sign in
I will add more info to the tutorial soon.
Thank you
Share with your friends:
Google Auth in android and ios with React native Expo Managed workflow
Hey , Recently i striggled alot to find a way to integrate the google auth with react native expo app. […]
October 3, 2024
How to host React Application into Cpanel – Routes not working Htaccess fix
Do you know how to host react applications into Cpanel? After building your react application. you will get an index.html […]
July 28, 2022
Print a div in React js or HTML – a Simple JavaScript function
Do you know how to print a div in react js or HTML? Before I tell you how. I wanna […]
June 1, 2022
Digital Marketing Toolkit
Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits
Get Free Access Now