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

No video

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

Рет қаралды 60,909

Күн бұрын

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
🧭 Watch How to Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Watch Learn Redux For Beginners | React Redux from Zero To Hero build a real-world app
• Learn Redux For Beginn...
🧭 Watch How to Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
⭐ You can get the Full Pro Tips Code from Github for React SSO:
github.com/ipenywis/react-sso
⭐ You can get the Full Pro Tips Code from Github for Express/Passport SSO Server:
github.com/ipenywis/express-p...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
💡 My Blog: ipenywis.com
Made with 💗 by Coderone

Пікірлер: 56

@davidvivas8307 3 жыл бұрын

After researching a lot, I have finished watching your videos two times because your explanations are so good. Thanks

@heggyhere1374 2 жыл бұрын

ditto

@Zygfryd_z_Toussaint 2 жыл бұрын

Man, thank you so much. You helped me implementing google login in my next app. Ty!

@rupamsinha934 2 жыл бұрын

Seriously man You are awesome.. Just saved my day! Keep it up the good works❤️

@francoperez7712 2 жыл бұрын

I loved this tutorial!! Thank you!!!

@hongwenli541 2 жыл бұрын

Very Cool Video! Keep up with good work. I look forward to another nice contents.

@CristianPerez-yp6yj Жыл бұрын

Thank you very much for this contribution, it helps me a lot to start with passport and the backend, congratulations

@user-zi9gm5qe5g Жыл бұрын

Great Explanation, Highly Recommended.

@kritikkaushal6305 3 жыл бұрын

Your channel is amazing!

@Deepakkumar431 2 жыл бұрын

Very informative :)

@SanjuKumar-hk8yy Жыл бұрын

Thanks man, this method is perfect when req.user is undefined after user login (by google, github or other services). I trying to solve req.user undefined before 2 days now today it is work for me.🙂🙂

@rayyanmalik7322 2 жыл бұрын

Thanks a lot for this, cannot tell you how helpful this was

@sonlequang5843 3 ай бұрын

I like the video tutorial, thanks.

@m3mphi5r4r7 3 жыл бұрын

You saved my day !!! cheers

@heggyhere1374 2 жыл бұрын

true hero, indeed!

@unknownaction8504 2 жыл бұрын

Very helpful

@tarekmagdy5775 8 ай бұрын

BROOOOOOOOOOO U SAVED ME I LOVE U

@alejandrohernandez674 Жыл бұрын

Thanks for this video I had watch so many but this one was the most detail and clear 🙏

@bephrem Жыл бұрын

thanks for this

@adetayoakinsanya8149 3 жыл бұрын

Thank you

@axelekamba7333 Жыл бұрын

Great tutorial and it helps a lot. Can you help me on how I can use azure ad instead of google? Thanks

@bhanderikenil2650 3 жыл бұрын

how can we access mobile number and address through when we make profile of user??

@xingshiwu3104 6 ай бұрын

Thank you. I've learned a lot. Can you tell me how to customize strategy by passport-oauth2，I want to use passport-oauth2 custom policy to do the system

@polmonroig1182 2 жыл бұрын

Great explanation! You helped a lot. But I have a question, if I am planning on deploying the app, would I need 2 domains? One for the react frontend and another one for the backend? Or how would the redirect work?

@TheArphan 2 жыл бұрын

No, you don't need two domains, but I'm not sure how to redirect.

@ngocoder Жыл бұрын

You don't need 2 domains. You can use subdomain instead.

@ManiKandan-wi7ek 2 жыл бұрын

can I do the same step in the ember js framework? will it work? Reply ASAP

@soumavabanerjee5925 2 жыл бұрын

won't the user disappear after page refresh ?

@rahultirkey7950 2 жыл бұрын

callback url doesn't store user data in req. Can you help me?

@sachinpatle7429 6 ай бұрын

what about the logout .does the logout means we have to delete the entries for the db of the loggedin user ? , also want the behavour of the logout here

@suryamariappan9108 10 ай бұрын

Can I use it for my react native application? . Do I have to remove the redirect url or what should I do

@iammahabub 22 күн бұрын

what if I had to make this (API with Google SSO) for two client apps i.e. React website & React-Native Mobile App

@mariustrelea5132 22 сағат бұрын

how your popup google window is closing ?

@wonderman8537 3 жыл бұрын

y r u using sql. Cant setup cus of it

@hongwenli541 2 жыл бұрын

I don't get user info from backend after logging in.. why do you think it is?

@alexvolkov529 Жыл бұрын

Have your cookies stored on the frontend?

@prabu106 Жыл бұрын

This is oauth login only not a sso. Sso and oauth are different concepts

@anishbishnoi29xD 3 жыл бұрын

make video on infinite scroll like instagram post, and skeleton loading screen. In MERN please

@souravdas423 Жыл бұрын

How many of you think he looks like Andrew Garfield(the actor in Amazing spiderman)

@SaltyBoi420 2 жыл бұрын

not work in production

@SaltyBoi420 2 жыл бұрын

i got no session after log in, probably because of different domain

@alexvolkov529 Жыл бұрын

@@SaltyBoi420 Hi! I'm having the same problem. There is no session on the front-end side. My Backend request is trying to set cookies (I can see it in the headers), but ends up failing to do this. Have you solved this problem?

@SaltyBoi420 Жыл бұрын

@@alexvolkov529 Hi mate, yes i have solved it, so we cannot pass/set a cookie from A domain to B domain imagine we can do that internet will be a mess. So i use my backend on subdomain.A.id and my frontend on A.id and i can pass my jwt as cookie from backend to frontend, but only work on firefox. I believe it is an user agent (browser) problem. Cheers👍

@alexvolkov529 Жыл бұрын

@@SaltyBoi420 Yes, thank you! It makes sense!

@SaltyBoi420 Жыл бұрын

@@alexvolkov529 i can provide you the project for reference if you want. But you know the problem is on production level😂👍

@kennykang3053 2 жыл бұрын

The two codebases should be merged into one. The frontend and backend should be run under the same webserver, using just one port, so there should be no CORs policies needed...

@creatorsremose 2 жыл бұрын

In the real world (i.e, a job), the separate server approach is much more common, for reasons like scalability and ease of deployment.

@matekomenda4706 2 жыл бұрын

In real life, they separate the code bases :)

@alexgriggs4087 3 жыл бұрын

please buy a new mic and fix that echo...

@KingTom777 2 жыл бұрын

I have a problem with the window.closed. the newWindow object is changing to global for somereason so the newWindw.closed attribute is set to true like 200 ms after it opened even if it's still not closed. it seems to be a problem with the domain becasue when I use a webpage with localhost:3000 it works. Any workaround for this ? why is your code working out of the box ?

@KingTom777 2 жыл бұрын

The problem was helmet middleware for some reason.

@psbball529 Жыл бұрын

@@KingTom777 Same thing was happening to me. Because you were able to figure out it came from helmet, i went through the helmet middlewares to figure out which one was causing the issue. It is coming from helmet.crossOriginOpenerPolicy(). If you change the policy for this one, it will solve the issue: app.use( helmet({ crossOriginOpenerPolicy: { policy: "unsafe-none" } }) ); To answer your question, I don't know why his code worked out of the box without this workaround.

@psbball529 Жыл бұрын

Actually, this seems like it should be the default policy. So it makes sense that it would work for everyone else, but I can't figure why mine would be different.

@hyrixlele8959 Жыл бұрын

Finally a great explanation ! Thank you , A question I'm using jsonwebtoken in my email/password signup so after i wanted to add google SSO , is it okay to use the jsonwebtoken instead of passport.deserializeuser ?