React SSO OAuth2.0 Login & Register | Login with Google w/ Express.js Server and Passport.js

React SSO OAuth2.0 Login & Register | Login with Google w/ Express.js Server and Passport.js

If you ever wondered how SSO or Single Sign-On buttons are created and managed between the browser and server that allows you to Register or Login using one of the other services without the need to retype the same credentials and account info type every time which makes it super quick and users of your app will choose to join your user's list even more because of the simplicity and how easy it is.

If you ever wondered how SSO or Single Sign-On buttons are created and managed between the browser and server that allows you to Register or Login using one of the other services without the need to retype the same credentials and account info type every time which makes it super quick and users of your app will choose to join your user's list even more because of the simplicity and how easy it is. If you're familiar with something like "Login with Google" or "Signup with Facebook" well you're in the right place! In this video we'll go step by step into creating a SSO Authentication API with between React App and a Node.js/Express server using Passport.js and Google OAuth2.

⭐ Timestamps ⭐ 00:00​ Intro and What we're going to build 02:24​ Creating Express API: Google Console setup 07:24​ Using Google OAuth Strategy for SSO 24:05​ Authorizing user on each Request with Passport.js 29:19​ Creating Login with Google API 42:29​ Using Authorization Middle for protected routes 45:10​ Setting Up React project and installing dependencies 49:37​ Adding Multi-page routes for working with the API 52:33​ Open Login with Google window and redirect 01:00:01​ Keeping track of Google Login State 01:04:31​ Fetch Authenticated user Info on React app 01:09:01​ Saving Authenticated user on Redux Store 01:14:21​ Redirecting after login with google

⭐ You can get the Full Pro Tips Code from Github for React SSO:

https://github.com/ipenywis/react-sso

⭐ You can get the Full Pro Tips Code from Github for Express/Passport SSO Server:

https://github.com/ipenywis/express-p...

Subscribe: https://www.youtube.com/c/CoderOne/featured

react javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Top VSCode Extensions for React, React Native, JavaScript and Productivity

Bunch of VSCode Extensions that improve quality of your coding time no matter what stack you are using. In this post, you'll see Top VSCode Extensions for React, React Native, JavaScript and Productivity

React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Ts

Using the React cloneElement is a better way to build a component API props in ES6 Javascript and Typescript. Here's a tutorial on how to do so.