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

Ajith Jojo Joseph

Hire Me for Freelancing $30/Hour ,
Contact via email : [email protected]

Share with your friends:

Comments are closed.

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