Google SignIn Using Firebase And React Native & Expo

For Expo SDK Version ≥ 46. Firebase Android & iOS Application

Hey..!! My name is Rohit. Well, I am not a professional content writer. But I will ensure that at the end of this article, you can add a Google SignIn Feature With Firebase to your react native & expo applications.

I recommend you to watch the step-by-step tutorial here:

Project setup and Package Requirements

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

• We all know that the expo deprecated the expo-google package after the Expo SDK version 46 release. We have to use an alternate method to get our job done.
• According to the official documentation, we have two methods to use the google sign-in feature in our react native & expo applications. Expo Auth Session And React Native Google Sign-In.
• In this project, I will use the React Native Google Sign-In method to get our job done. It’s a native code bases project and the expo go mobile application does not support the native code. So again, According to official documentation, we have two methods to test the application. Prebuild method and Development Build method.
• I do not prefer to work with the Prebuild method because it requires Android Studio or Xcode (depending on the OS you are working on), and I’m too lazy to work on that. So, I prefer the Development build method. In this method, all you need is your expo dev account login credentials. So, if you don’t have an expo dev account then make sure to make it first.
• Sometimes the build fails due to the internal server issue. You just have to retry the command
• The project setup and connecting it with the firebase is the toughest part of this project. Coding is easy. I tried to write the steps of project set-up, but it’s too hectic. So, I suggest you watch the first few minutes of the YouTube Video to set up your project.

Project Algo & Code

In the App.js

• First Configure the Web Client ID and Auth State change

GoogleSignin.configure({
    webClientId: '############################################################',
  });

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

• A useEffect hook to remember the changes in the state

useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

• On Google Sign-in (These are the official documented code)

const onGoogleButtonPress = async () => {
    // Get the users ID token
    const { idToken } = await GoogleSignin.signIn();
  
    // Create a Google credential with the token
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  
    // Sign-in the user with the credential
    const user_sign_in = auth().signInWithCredential(googleCredential);
    user_sign_in.then((user) => {
      console.log(user);
    })
    .catch((error) => {
      console.log(error);
    })
  }

• A logout function

const signOut = async () => { 
    try {
      await GoogleSignin.revokeAccess();
      await auth().signOut();
    } catch (error) {
      console.error(error);
    }
 }

• That’s it. You can customize the UI of the application according to your project requirement. Now, test the application using the build method.
• If you are confused or lost. Then I would recommend you to watch the step-by-step video guide of Google SignIn using firebase, react native & expo.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.