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