How to integrate Google SSO to your ReactJS application. And validate them and save details to your DB through your NodeJS express API.

Application Architecture ( IMG 1 )

React App

In react app we are using GoogleLogin plugin to integrate Google SSO.

Installation

npm install GoogleLogin --save
import { GoogleLogin } from “react-google-login”;

HTML Snippet

Use the below snippet in your component.

const CLIENT_ID = 'Your_Google_API_client_ID';...
<GoogleLogin
clientId={CLIENT_ID}render={renderProps => (<button className=”signup-btn” onClick={()=>{renderProps.onClick()}} disabled={renderProps.disabled}><img src=”images/Image 4.png” alt=”” /><span className=”signup-label”>Sign in with Google</span>{/* <Loader type=”ThreeDots” color=”#255D4F” height={10} width={50} visible={googleLoaderIsVisible}/> */}</button>
onSuccess={(res)=>{googleLogin(res)}}
onFailure={(error)=>{googleLoginFailed(error)}}cookiePolicy={‘single_host_origin’}


How to manage your Amplify app with data isolation and Multi Tenancy.

Architectural Diagram ( IMG 1 )

Multi Tenancy

Multitenancy is that multiple customers of a cloud vendor are using the same computing resources. Despite the fact that they share resources, cloud customers aren’t aware of each other, and their data is kept totally separate. Multitenancy is a crucial component of cloud computing; without it, cloud services would be far less practical. Multitenant architecture is a feature in many types of public cloud computing, including IaaS, PaaS, SaaS, containers, and serverless computing.


Understand JavaScript Callback and Promise.

Little bit about JavaScript

JavaScript is a scripting language. They can be written right in a web page’s HTML and run automatically as the page loads.

JavaScript Engines

  1. V8 — in Chrome and Opera.
  2. SpiderMonkey — in Firefox.
  3. Chakra for IE
  4. ChakraCore for Microsoft Edge
  5. Nitro and SquirrelFish for Safari

What JavaScript can do?

JavaScript’s can do anything possibly any other programming language can do. But, “It’s capabilities greatly depend on the environment it’s running.

Client Side

  1. Add new HTML to the page, change the existing content, modify styles.
  2. React to user actions, run on mouse clicks, pointer movements, key presses.
  3. Send requests over the network to…

Lijoy C George

Enthusiastic about Technology and Computing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store