Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #2019

Merged
merged 4 commits into from
Oct 24, 2024
Merged

Develop #2019

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
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"
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:
Expand All @@ -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
Expand All @@ -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
Expand Down
14 changes: 5 additions & 9 deletions content/engineering/react-context-api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?

Expand All @@ -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 \<your context name\>Context.js, e.g. userContext.js
3. import and create a context like so:
Expand Down