DEV Community: Anwar Gul

Get Started with React Native + Google Sign In

Anwar Gul — Sun, 19 Apr 2020 20:15:35 +0000

In this post, I will be showing you guys how you can add sign in with Google feature in your app in a few simple steps.

I will be using a React Native Community supported package called react-native-community/google-signin.

Note : `This post is made for react-native >= 0.60, if you are using react-native <= 0.59.x then this is not for you`

Features

Support all 3 types of authentication methods (standard, with server-side validation or with offline access (aka server-side access))
Promise-based API consistent between Android and iOS
Typings for TypeScript and Flow
Native signin buttons

Versions

React Native 0.61.5

react-native-community/google-signin 4.0.0

Steps

First, create the App using this command in terminal

npx react-native init TypeYourAppNameHere

Navigate to RNGoogleSignInDemo in the terminal like this

cd TypeYourAppNameHere

Now install react-native-community/google-signin dependency in your app

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

OR

npm install --save @react-native-community/google-signin

Since React Native >= 0.60 AutoLinking is supported therefore we don't need to run linking command.

But we do need to do some configuration in the native side but I promise it will be easy.

There are two ways to do this, with or without Firebase and I will be using the one with the Firebase. But for the other one, I can make a separate post for it. Do let me know should I?

Firebase

Search for Firebase and go to Firebase Console
Create a project [ I have already created ] by clicking on Add Project.

Type your project Name after that click Continue

Choose whether you want to add Analytics or not it's up to your preferences. By default, it's enabled. Press Continue.

Now your project is created.

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
- Debug signing certificate SHA-1
For App's Package name you can find in android/app/main/AndroidManifest.xml file

For Debug signing certificate SHA-1

In terminal type command for Debug SHA1 (root of the project)

Mac/Linux

keytool -J-Duser.language=en -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Windows

– Change the directory to the JDK bin directory. The path of the JDK depends upon the operating system you are using

cd C:\Program Files\Java\jdk1.8.0_121\bin

– Now we have to run the following command using the keytool.exe file in JDK/bin

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

If you don't like terminal then you use can Android Studio instead

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

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        googlePlayServicesAuthVersion = "18.0.0" // Add this line
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.2")
        classpath 'com.google.gms:google-services:4.3.3' // Add this line
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

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

e.g.

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.

Let's get our hands dirty with the code

I will be making a simple app of just two components to App.js (already exists by default) and second will be Home.js.

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
    });


 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);
    }
  };

Demo App Preview

Do check the official Docs and if you have any questions let me know.

react-native-google-signin / google-signin

Google Sign-in for your React Native applications

🚧🚧 New features planned: looking for financial backers and collaborators 🚧🚧

See this issue

Features

Support all 3 types of authentication methods (standard, with server-side validation or with offline access (aka server-side access))
Promise-based API consistent between Android and iOS
Typings for TypeScript and Flow
Mock of the native module for testing with Jest
Native sign in buttons

Requirements

RN >= 0.60

Project setup and initialization

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

Then follow the Android guide and iOS guide

Expo installation

This package cannot be used in the "Expo Go" app because it requires custom native code. However, you can add custom native code to expo by following the guide below.

npx expo install @react-native-google-signin/google-signin

After installing this npm package, add the config plugin to the plugins array of your app.json or app.config.js:

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    }
    "ios":

…

View on GitHub

I hope you like this post and I will be posting more post soon and most importantly All suggestions are welcome.

Javascript ES6 Declarations Guide.

Anwar Gul — Sun, 01 Mar 2020 03:27:43 +0000

In this article, we will be discussing the very fundamental and the basic building block in your javascript programming journey i.e Variables. In JavaScript, there are three keywords used to declare a variable var, let, and const and each one affects how the code will interpret the variable differently.

NOTE: JavaScript-only hoist declarations, not initializations. So all declarations are hoisted.

Javascript ES6 Declarations Guide. | by Anwar Gul | The Startup | Medium

Anwar Gul ・ Sep 6, 2020 ・
Medium

1- VAR

This statement consists of a few parts:

The declaration of a variable using the var keyword
The variable name (or identifier), author
The assignment operation, represented by the = syntax
The value being assigned, "Anwar"

Declarations with var keyword can either be of global scope or function scope depending on the current execution context.

Current Execution Context: Declaration inside function is in the function scope/local scope. Outside of the function, any declaration is in the global scope.

As above can be seen the declared variables are initialized with “undefined” by default. Hence var variables can be declared without being initialized.
var variables can be reassigned and/or redeclared within its scope. For Instance :

Declarations with var keyword are hoisted to the top of their scope.

2- Let

Declarations with let keyword are Block scoped.

Block Scope:

In layman’s term the definition of Block Scope, “A boundary that starts from an opening curly brace { and ends on closing curly brace } while optionally enclosing some amount of code.”

Variables with let are hoisted. But by looking at the above example it seems let variables aren't hoisted but the matter of fact this happens due to concept Temporal Dead Zone.

since let variables are not initialized until the javascript engine evaluates the assignment. A time from variable creation to its initialization where they can’t be accessed is known as Temporal Dead Zone

If the JavaScript engine can’t find the value of let variables at the line where they were declared, it will assign them the value of undefined

Variables with let declaration can be updated/re-assigned but they can’t be redeclared.

3- Const

Just like let, Declarations with const keyword are also Block scoped.

const variables are also hoisted. If the JavaScript engine can’t find the value of const variables at the line where they were declared, return an error.

const variables can not be declared without assigning a value.

So const variables can’t be updated/reassigned a new value

And also const variables can’t be redeclared.

BONUS

If you are thinking about something like “Hey Anwar, I got all that but you never answered! what would happen if we don’t use any of the keywords that you mentioned”.

Well, I will be keeping it brief since it already been become a lengthy post.

variables without declaration become a part of the global variable, in the console that would be window and in node.js global

SUMMARY

I hope you like this article and I will be posting more articles soon and most importantly All suggestions are welcome.

DEV Community: Anwar Gul

Get Started with React Native + Google Sign In

Note : This post is made for react-native >= 0.60, if you are using react-native <= 0.59.x then this is not for you

Features

Versions

React Native 0.61.5

react-native-community/google-signin 4.0.0

Steps

Firebase

Mac/Linux

Windows

e.g.

Let's get our hands dirty with the code

Demo App Preview

react-native-google-signin / google-signin

Google Sign-in for your React Native applications

🚧🚧 New features planned: looking for financial backers and collaborators 🚧🚧

Features

Requirements

Project setup and initialization

Expo installation

Javascript ES6 Declarations Guide.

NOTE: JavaScript-only hoist declarations, not initializations. So all declarations are hoisted.

Javascript ES6 Declarations Guide. | by Anwar Gul | The Startup | Medium

Anwar Gul ・ Sep 6, 2020 ・ Medium

1- VAR

2- Let

3- Const

BONUS

SUMMARY

Note : `This post is made for react-native >= 0.60, if you are using react-native <= 0.59.x then this is not for you`

Anwar Gul ・ Sep 6, 2020 ・
Medium