React-native Google signin with expo

4 Easy step’s to implement google signin in your expo project

1. Creating a project at console.cloud.google.com.
2. importing expo-google-app-auth in your project.
3. Add google api key’s to your project.
4. Paste referral code to your project.

Creating a project at console.cloud.google.com.

Google Cloud projects form the basis for creating, enabling, and using all Google Cloud services including managing APIs, enabling billing, adding and removing collaborators, and managing permissions for Google Cloud resources.

To create a Google Cloud project:

1. Open the Google Cloud Console.
2. At the top-left, click Menu menu > IAM & Admin > Create a Project.
3. In the Project Name field, enter a descriptive name for your project.

Optional: To edit the Project ID, click Edit. The project ID can’t be changed after the project is created, so choose an ID that meets your needs for the lifetime of the project.

4. In the Location field, click Browse to display potential locations for your project. Then, click Select.

5. Click Create. The console navigates to the Dashboard page and your project is created within a few minutes.

For further information on Google Cloud projects, refer to Creating and managing projects.

Importing expo-google-app-auth in your project.

you’ll need to run expo install expo-google-sign-in. To use it in a bare React Native app, follow its installation instructions.

import * as AppAuth from 'expo-app-auth';

// When configured correctly, URLSchemes should contain your REVERSED_CLIENT_ID
const { URLSchemes } = AppAuth;

Add google api key’s to your project.

// app.json
{
  "expo": {
    "ios": {
      // The bundle ID you used with your Firebase app
      "bundleIdentifier": "example.expo.googlesignin",
      "config": {
        "googleSignIn": {
          // Your REVERSED_CLIENT_ID from the GoogleService-Info.plist
          "reservedClientId": "<YOUR_REVERSED_IOS_CLIENT_ID>"
        }
      },
      // Optional path to the iOS file generated by Firebase
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "android": {
      // The package you used with your Firebase app
      "package": "example.expo.googlesignin",
      // Optional path to the Android file generated by Firebase
      "googleServicesFile": "./google-services.json"
    }
  }
}

If you are using with Firebase try this

When using Firebase, also configure the Google-services configuration files:

1. Open up the Firebase Console and setup a new project, or use an existing one.
2. Create a native iOS app using the ios.bundleIdentifier you defined earlier, and an Android app using the android.package.
3. (Android only) Go to your Firebase project’s settings, scroll down to “Your apps” and select your Android app. Under SHA certificate fingerprints, click Add fingerprint, and paste the value of you get for Google Certificate Fingerprint when running expo fetch:android:hashes.

• If you haven’t already run expo build:android for this project, you'll need to do that first before getting the Google Certificate Fingerprint.

4. Download the GoogleService-Info.plist (iOS) & the google-services.json (Android) from your Firebase project settings page. Move them to your Expo project.

Modify app.json:

• For iOS
• Set your expo.ios.config.googleSignIn.reservedClientId to the value of REVERSED_CLIENT_ID in the GoogleService-Info.plist.
• Set expo.ios.googleServicesFile to the relative path of your GoogleService-Info.plist. Make sure the file is located somewhere in your Expo project.
• For Android
• Set expo.android.googleServicesFile to the relative path of your google-services.json. Make sure the file is located somewhere in your Expo project.

Paste referral code to your project.

Here is the code you need to paste in your project.

import React from 'react';
import { Text } from 'react-native';
import * as GoogleSignIn from 'expo-google-sign-in';

export default class AuthScreen extends React.Component {
  state = { user: null };

  componentDidMount() {
    this.initAsync();
  }

  initAsync = async () => {
    await GoogleSignIn.initAsync({
      // You may ommit the clientId when the firebase `googleServicesFile` is configured
      clientId: '<YOUR_IOS_CLIENT_ID>',
    });
    this._syncUserWithStateAsync();
  };

  _syncUserWithStateAsync = async () => {
    const user = await GoogleSignIn.signInSilentlyAsync();
    this.setState({ user });
  };

  signOutAsync = async () => {
    await GoogleSignIn.signOutAsync();
    this.setState({ user: null });
  };

  signInAsync = async () => {
    try {
      await GoogleSignIn.askForPlayServicesAsync();
      const { type, user } = await GoogleSignIn.signInAsync();
      if (type === 'success') {
        this._syncUserWithStateAsync();
      }
    } catch ({ message }) {
      alert('login: Error:' + message);
    }
  };

  onPress = () => {
    if (this.state.user) {
      this.signOutAsync();
    } else {
      this.signInAsync();
    }
  };

  render() {
    return <Text onPress={this.onPress}>Toggle Auth</Text>;
  }
}

These are the 4 easy step to implement google signin in your project

Enjoy and run your code…