diff --git a/content/engineering/google-authentication-with-nodejs-and-passportjs/index.md b/content/engineering/google-authentication-with-nodejs-and-passportjs/index.md index 471d31a55..df1bd6650 100644 --- a/content/engineering/google-authentication-with-nodejs-and-passportjs/index.md +++ b/content/engineering/google-authentication-with-nodejs-and-passportjs/index.md @@ -1,5 +1,5 @@ --- -title: Google OAuth2 Authentication in NodeJS +title: Google OAuth2 Authentication in NodeJS - A Guide to Implementing OAuth in Node.js date: "2020-02-12" coverImage: "google_cover.jpg" author: "Puneet Singh" @@ -7,7 +7,7 @@ tags: ["NodeJs","SocialLogin","Oauth"] description: "Learn how to implement Google OAuth2 Authentication in NodeJS using Passport" --- -In this blog, we’ll be implementing authentication via Google in a Node.js web application. For this, we’ll be using [Passport.js](http://www.passportjs.org/), an authentication package for Node.js. +In this blog, we’ll be implementing OAuth in node js application via Google. For this, we’ll be using [Passport.js](http://www.passportjs.org/), an authentication package for Node.js. Here’s a quick guide on implementing OAuth 2.0 in node js​. ## Before You Get Started This tutorial assumes you have: @@ -18,7 +18,7 @@ This tutorial assumes you have: ### Step 1: Create a Google client ID and client secret -We can create a client ID and client secret using its [Google API Console](https://console.developers.google.com/). You need to follow below steps once you open Google API Console +We can create a client ID and client secret using its [Google API Console](https://console.developers.google.com/). You need to follow below steps once you open Google Auth API Console - From the project drop-down, select an existing project, or create a new one by selecting Create a new project - In the sidebar under "APIs & Services", select Credentials @@ -31,7 +31,7 @@ We can create a client ID and client secret using its [Google API Console](http ### Step 2: Initialize a node.js project with all the dependencies -First in an empty folder run the below command +To create OAuth nodejs authentication, first in an empty folder run the below command ``` npm init diff --git a/content/engineering/react-context-api/index.md b/content/engineering/react-context-api/index.md index 8a2667f0c..4ace98abc 100644 --- a/content/engineering/react-context-api/index.md +++ b/content/engineering/react-context-api/index.md @@ -7,20 +7,17 @@ tags: ["React", "Redux", "Hooks"] description: "Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease. Let's see how to use it." --- -React context API, In this article you will explore what is Context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application. +React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application. ## What is Context API? The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux. -Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease. +Talking about the Context APIs, they’re a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease. ## React context API: How it works? -React.createContext() is all you need. It returns a consumer and a provider. -**Provider** is a component that as it's names suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. -**Consumer** as it so happens is a component that consumes and uses the state. -More information can be found on [React's documentation page](https://reactjs.org/docs/context.html) +React.createContext() is all you need. It returns a consumer and a provider. **Provider** is a component that as it's names suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. Apart from the react context **Provider**, **Consumer** as it so happens is a component that consumes and uses the state. More information can be found on [React's documentation page](https://reactjs.org/docs/context.html) ## Context API will replace redux? @@ -42,9 +39,8 @@ Redux is just a concept. If you are comfortable with using reducers and actions ## How to use Context API? -You might think to yourself: "Well, I'm convinced. How do I implement Context API in my app?" -First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. -And if you do need it you should follow these very few steps: +You might think to yourself: "Well, I'm convinced. How do I implement Context API in react for my app?" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps: + 1. Create a folder under your app root named contexts (not required. just a convention) 2. Create a file named \Context.js, e.g. userContext.js 3. import and create a context like so: