Technetium 101(React Native): Google Social Login



Version

  • react-native: 0.63.4
  • react-native-community/google-signin: 4.0.0

Step 1 : Install package

yarn add @react-native-community/google-signin

Step 2 : Create firebase project

  • Search for Firebase and go to Firebase Console
  • Create a project by clicking on Add Project.
  • After done create project, click the android icon in the firebase Console Dashboard
  • Fill in the following fields of "Add Firebase to your Android app" to generate config file ( i.e. google-services.json)
    • Android package name (check at android manifest or android/app/build.gradle)
    • Debug signing certificate SHA-1
      • open cmd
      • go to project directory and paste
      • keytool -list -v -keystore android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android
    • Release signing certificate SHA-1
      • open cmd
      • go to jdk\bin directory and paste. eg `C:\Program Files\Java\jdk1.8.0_121\bin`
      • keytool -list -v -keystore {path_to_your_.jks_file} -alias {alias_name}


  • When you are done registering your android app with firebase then Download the Config file and place it in android/app
  • Add Firebase SDK in Project-level build.gradle i.e. android/build.gradle
  • Add Google Play Services plugin in App-level build.gradle (android/appp/build.gradle):
    • apply plugin: 'com.google.gms.google-services' // Add at end of the file
  • In firebase, you will need to enable Google option in SignIn Method section
  • While enabling Google, do copy the Web Client ID from there, we need this later on


Step 3 : Add code in react native project for Login

  • Import Public Api of @react-native-community/google-signin
import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-community/google-signin';
  • But before you can use above imports you need call once, configure of GoogleSignin. You can call it in ComponentDidMount life Cycle method or you can use useEffect Hook
GoogleSignin.configure({
 webClientId: WebClientID, // client ID of type WEB for your server(needed to verify user ID and offline access)
 offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
 forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.
 accountName: '', // [Android] specifies an account name on the device that should be used
    });
  • Sign in function
 signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const info = await GoogleSignin.signIn();
      console.warn({userInfo: info});
      setUserInfo(info);
    } catch (error) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
      } else if (error.code === statusCodes.IN_PROGRESS) {
        // operation (e.g. sign in) is in progress already
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        // play services not available or outdated
      } else {
        // some other error happened
      }
    }
  };
  • Sign out function
signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      setUserInfo(null); // Remember to remove the user from your app's state as well
    } catch (error) {
      console.error(error);
    }
  };
  • Button
<GoogleSigninButton
    style={{ width: 192, height: 48 }}
    size={GoogleSigninButton.Size.Wide}
    color={GoogleSigninButton.Color.Dark}
    onPress={this._signIn}
    disabled={this.state.isSigninInProgress} 
/>

Reference

SHA-1


Comments

Post a Comment

Popular posts from this blog

Build App Insights: Mobile app development trends 2021

Image
Mobile app development trends 2021 The mobile app development industry is continuously evolving. Technology advancements, consumer demands, and a wide range of other factors have a direct impact on mobile app trends. Staying up to date with the latest trends is arguably the most crucial aspect of success in this space. Mobile app resellers need to keep up with new trends to better serve their clients. The same goes for content creators and producers ready to take their brands to the next level with mobile development.  These trends will invite more users to jump on the bandwagon. Thereby businesses strengthen their user base.  1. Internet of Things (IoT) App Integration The IoT describes the growing network of devices connected to the Internet, providing convenience and automated control to consumers. Smart home technology is a perfect example of the rise in IoT and mobile app development.  Mobile apps can be used to adjust the thermostat in a house from a remote loc...
Read more

Build App Insights: Skeleton Screens Benefits

Image
  Skeleton Screens UI and UX experts said that while users wait for content to load on a page, users should be engaged with the loading page. The idea behind using spinners to engage users before content loads is great; however, the result can be less than ideal because most users will get bored or no sign of progress staring at a dummy animated spinner like it’s a clock A skeleton screen is essentially a wireframe of the application. The wireframe is a placeholder until the application finally loads. The skeleton loading screen essentially impersonates the original layout. Rather than most performance or UX wins, this pattern only focuses on improving the perceived experience. When compared against a blank screen or a traditional spinner, skeleton screens are seen as shorter in duration Benefits of Skeleton Screens in Apps 1. Increase perceived performance App feel faster,  App feel more responsive App feel more user friendly. 2. Reduce surprise and disorientation as con...
Read more

Technetium 101(React Native): Performance Optimization

Image
  This article will offer a list of suggestions for optimizing performance while building a React Native app 1. Avoid use inline functions directly as props to a component & also avoid inline styling  class Foo extends Component { render ( ) { return ( < button onClick = { ( ) => console . log ( 'boop' ) } > { /* 🙅‍♀️ */ } BOOP </ button > ) ; } } class Foo extends Component { handleClick = ( ) => { // this anonymous function is fine used like this console . log ( 'boop' ) ; } render ( ) { return ( < button onClick = { this . handleClick } > { /* 🙆‍♂️ */ } BOOP </ button > ) ; } } onPress contains an arrow function , a new reference to that inline function is declared in every render . It is not recommended that way. Causing an unnecessary re-render computation. use StyleSheet for styles ref https://medium.com/corebuild-so...
Read more