Google OAuth 2.0 Login for React in 5 minutes

Рет қаралды 304,799

2 жыл бұрын

Enjoying my videos? Sign up for more content here: www.coopercodes.com/
📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
Join the Cooper Codes Community: / discord (Weekly calls, free resources, tutoring, and more!)
UPDATE: This implementation is no longer supported by Google, for the new way to use Google Login with React check out my new video here • Google Identity Servic...
In this video I show an easy way to get a Google OAuth 2.0 authentication system set up in your React application. We set up our google client in the cloud console, create login/logout buttons, and intialize our OAuth 2.0 client!
Want to support me? Purchase on Amazon with my link here: amzn.to/3Q4h3Pb
Enjoying my content? Feel free to support me on Patreon / coopercodes
Business inquiry? Email thecoopercodes@gmail.com

Пікірлер: 169

@AhmedRaza-ll5yv 4 ай бұрын

Kind of tutorial I want for any tech related problem striaght to the point like an arrow and no time wasting BS! Thanks a lot man

@picassoofai4061 Жыл бұрын

Most straight forward video, I lost too much time searching for that.

@banjomichael4229 3 ай бұрын

This was fast and straight to solving my problem. Definitely subscribing to this. Thanks a lot Mr Cooper Codes

@yairlevi8469 8 ай бұрын

FINALLY a tutorial for more advanced people who just dont want to scatter around the web...

@stephanieeaton449 5 ай бұрын

This was so fast and easy! I love concise tutorials such as this. I guess what I would like to have added though is resources on how to use the logged in user (some of us are real nuggets), and also the next steps to take this to a production environment. But this a great start!

@gorkemgok9313 8 ай бұрын

The kind of tutorial we need and we want.

@Lucas-jb8ce 2 жыл бұрын

Can you please upload an updated version? I'm very confused as to how the implementation should be done.

@AindriuMacGiollaEoin 2 жыл бұрын

Thanks so much, I was following a React tutorial which broke and this fixed the OAuth login.

@CooperCodes 2 жыл бұрын

Glad to see it fixed your issues, thanks for watching!

@frostfire7434 Жыл бұрын

Thank you, 5 mins explained everything

@joshb6315 6 ай бұрын

Clean and concise! I subscribed instantly. Thank you!

@levankantara 2 жыл бұрын

I get 403 error. The given origin is not allowed for the given client ID. on my devices ( PC and android Phone) it works fine, there are no errors. but it does not work for anyone else. What could be the issue? I have exited Testing mode and moved to Production.

@omarcortes9787 2 жыл бұрын

thank you! I had like 3 hours looking for this

@CooperCodes 2 жыл бұрын

No problem! 😁

@atleast_me Жыл бұрын

Fast and no unwanted content..

@ashiqdey 2 жыл бұрын

how to do this using hooks? As I dont want to display the logout button as shown in video

@akhil_sarikonda 5 ай бұрын

How to handle Redirect URI for vercel preview links? Upon successful authentication, Google redirects the user to the URL which we set in the "Redirection URI" field in the Google Console. As the URLs change for every vercel preview deployment, setting a static URL in the "Redirection URI" results in a mismatch. So how to handle this?

@hongbo-wei 11 күн бұрын

Great tutorial, thx!

@manueljarrin4582 Жыл бұрын

I just wanted to thank you! was trying for days to exchange a firebase id token with an auth2 one and wasnt able to do it, so I am going purely on auth. Any video on exchange tokens would be great, but anyways keep going with this type of content to the point tutorials you earned a sub!

@CooperCodes Жыл бұрын

Hey M Jay, thank you so much for your support! It means a bunch and I'm glad the video was helpful :)

@thalistrisch9635 Жыл бұрын

Thank you! your video helped me so much😆

@abc_cba 2 жыл бұрын

Hi, I get the error "'React' must be in scope when using JSX react/react-in-jsx-scope" in "./src/components/logout.js" on line 12 & 13. also, ./src/index.js Module not found: Can't resolve 'react-dom/client' in 'C:\Users\Samue\OneDrive\Desktop\auth\authentication\src' Can you please help with that ?

@mohdanas8027 2 жыл бұрын

Thanks its working fine in my projects

@Winedineandrhyme 2 жыл бұрын

Umm, what if i want multiple users to login? cus from what i'm seeing here, only test users can login. I need login access to be made public.

@Ontropy 2 ай бұрын

the react-google-login library has been deprecated, any alternatives for that.

@ayush_bhardvaj 3 ай бұрын

What to do when we need to save user details in database?

@ssteven_johnson Ай бұрын

WTF!!!!! I've wasted hours/weeks/months in the docs section of Google APIs and this video has been here for TWO YEARS🤯🤯🤯🤯🤯... How tf am I just seeing this now. . . I subscribed asap!! THANK YOU

@hamzarizwan1715 Ай бұрын

Womp Womp

@ghauri001 Жыл бұрын

Thanks, it was really helpful

@jeflo_punks Жыл бұрын

really helpful men many thanks!

@inxastralmarsbasement Жыл бұрын

how would I style the button in CSS?

@andrews13 4 ай бұрын

You earned my sub!

@mustafakhodor5119 2 жыл бұрын

Hello pls there's a problem that the same account is taken automatically each time i press the button

@Lotpite Жыл бұрын

why do we need google login only for using with test email ?

@adityalenka1499 2 жыл бұрын

Thank you,Your video help me to resolve my Google Oauth issue

@CooperCodes 2 жыл бұрын

Glad to see it helped :)

@kamalsutte2742 8 ай бұрын

If we implement jwt token from backend , then by sign in with google how can we get the token

@houaidakrifa6091 2 жыл бұрын

It's very helpful ❤👏

@aldygunawan8089 8 ай бұрын

do you have an example if the login is failed?

@JesterPiero 2 жыл бұрын

THANKS !!!!!!!!!!!! IT WORKS !!!!

@leobuezo3600 Жыл бұрын

Wow, super easy! thank you so much for sharing!

@CooperCodes Жыл бұрын

You're welcome, glad it helped :)

@kacperkepinski4990 7 ай бұрын

Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

@abrutii Жыл бұрын

Why is anyone doing it either on the front-end side or the back-end side ? no one is showing the full-stack example

@piyushaggarwal5207 2 жыл бұрын

Could you update the video for the new Sign In with Google ?

@essayawesome Ай бұрын

Did you get the job after all you're in computer science fields more then two years, can you help me, are you working

@piyushaggarwal5207 Ай бұрын

@@essayawesome Yes. I have been employed. But what do you need help with? It's all out there. If you have a question search for it. If you don't find the answer, ask in Reddit communities.

@rogelioperezmena3460 2 жыл бұрын

Thanks bro!

@hiphop861 Жыл бұрын

bro nice video, But How can we do login from all the emails. Here we are checking with testing emails

@hustler2246 Жыл бұрын

react-google-login has been deprecated.

@emmang2010 2 ай бұрын

Yes and I believe now it's react-oauth/google

@viraldimention Жыл бұрын

Nice, Does it work inside a webview?

@ben5238 2 жыл бұрын

Awesome!! Do you have any idea how to make the login state persist so a user doesn't have to login every refresh?

@TheVedantshah Жыл бұрын

maybe store token on successful login on localstorage

@notorious43 7 ай бұрын

Hi, your videos are very helpful, can you please make one vedio for login with google and at the time of login google calendar access will be asked, if yes then create access_token and send it to backend

@user-er2hx3xd8t 7 ай бұрын

Amazing! TY!

@mretineh1172 Жыл бұрын

Thanks alot for this

@prakarshshrivastava6422 Жыл бұрын

the react-google-login package is depreciated now,

@shahzaib715 9 ай бұрын

Hi bro I wanna ask I have made Todo list User can create account then after login to use now I want to add login by google how how I will grab or which password I will store to my Database when using google auth means I will get name email like that but what about password which user will put to login again?????? please guide me I am stuck here....

@joshuacushing2858 2 жыл бұрын

Thanks so much for helping me get this going!

@CooperCodes 2 жыл бұрын

Happy to help! Thanks for watching :)

@jackmiller2518 Жыл бұрын

Will this work in React Native as well?

@peasantfolkhero 11 ай бұрын

many thanks

@fabre6733 10 ай бұрын

I'm quite confuse, how do users register if we need to manually add the allowed users only in the oauth consent screen

@faisalsaddique3323 9 ай бұрын

those are the test users only

@theofanisbirmpilis7364 Жыл бұрын

really nice tutorial

@samareshdas767 Жыл бұрын

How to get the google access token?

@vanovasilyan3807 2 жыл бұрын

Thanks bro very much

@AlexHitchon Жыл бұрын

Hey thanks for the quick explanation. Was wondering at the end once i get the accessToken can i use this in my script for my account and not have to keep logging in. Will it expire ever?

@faisalsaddique3323 9 ай бұрын

yes most of the time that token expires, but you are being given a refresh token, and you could use that to request a new token

@yoyo-yx1qx 2 жыл бұрын

if you get an error saying "you need both client id and scope to initialise oauth" simply make sure you got your client id and also add scope like this, scope:"profile",i had this error now and this fixed

@vincentvermeire966 Жыл бұрын

Thanks!

@karimm5956 Жыл бұрын

where i can change the scope please ? i am beginner in react. thanks on the dashbord, i have already give the scope but nothing and i have the same error.

@srinivasarao-lanka Жыл бұрын

Thanks a lot👍👍

@pranjaldoorwar9743 2 жыл бұрын

Amazing thanks

@lainhathoang 3 ай бұрын

@user-pm1xk1wi6d 7 ай бұрын

Do I have to paid for google cloud platform to this. Can someone please help.

@ananyatiadi6559 7 ай бұрын

I am getting error unable to resolve dependency tree

@acandrescardenas Ай бұрын

How could I make it work in an Android app?

@raviteja8798 9 ай бұрын

how to make it work for all gmail accounts ?

@sincethatmoment 10 ай бұрын

react-google-login library is deprecated. create-react-app is also very old boilerplate generator.

@ardhrubo8455 7 ай бұрын

so which thing you suggested?

@lukaschiaradia568 Жыл бұрын

Hey can u do the same for Spotify pls ?

@fanyang9597 8 ай бұрын

Thanks!

@sandeepmaurya5262 Жыл бұрын

Showing no longer supported error on build

@slogone2336 2 ай бұрын

God, you are a god fr. Just perfect

@Vishayam 2 жыл бұрын

tahnk u so much man

@abduvalimurodullayev-or1el 5 ай бұрын

thanks

@ruairidhgrass3479 Жыл бұрын

I'm getting an error saying that this library will soon be deprecated and that you must use newer libraries instead. Do you know what the new google login library is and how to implement it?

@Escrotomortal2 Жыл бұрын

@annalord4249 Жыл бұрын

did you ever figure this out? in the same spot

@CooperCodes Жыл бұрын

kzfaq.info/get/bejne/qNWodpuEstmbeIk.html Check out this video here. It is the new library, this one has been up to help people migrating / switching over. Sorry if this wasn't super obvious.

@aleksandarurovic7300 Жыл бұрын

love you brother

@birolaygun1515 Жыл бұрын

thank you

@Valenscheuermann 7 ай бұрын

Hey, I have a question. I got a Deployed vite react app, im trying to add a login from google option, the problem is, i need to give acces to any account from google to log in, i mean not just add test accounts in the config of google cloud, is that possible?

@user-pb4hr3wg4d 6 ай бұрын

thats bc your in the moment your app goes to production, google enable access from any google account, the test user is only for while dev process

@dilshadzm786 6 ай бұрын

how can we do cross-application authentication with google authentication

@fabian2314 18 күн бұрын

message of love

@sathwikmatcha5511 6 ай бұрын

This no longer works with the react-google-login library being deprecated.

@zafarhussain5063 Жыл бұрын

you deserve like

@neilaldenescobin9150 2 күн бұрын

helpful

@m.likhitha2300 10 ай бұрын

i am getting invalid hook call warnings..

@HungNguyen-le8pg 8 ай бұрын

react-google-login package is not available from Sep 2023. How to subtitude it

@trishitanandy4735 7 ай бұрын

how you solved it?

@antimuggle_ridhi2565 7 ай бұрын

what to do?

@edarcode8124 2 жыл бұрын

Greetings from Colombia! in the domains section am I not supposed to put localhost...? And if my App is in vercel, what should I put?

@CooperCodes 2 жыл бұрын

For React, the default domain for running locally is localhost:3000 . So you should put whatever Vercel uses when you run locally, for example if it’s localhost:4000 you should use that. To the domains comment, I believe in the video I cover all the spots where you need to put the domain. If there is another section it most likely won’t break it but the video should cover what you need. If you could point to the specific domains section you’re talking about I could help more. Thank you for the comment!

@edarcode8124 2 жыл бұрын

@@CooperCodes If I am using the google button at localhost:3000/login, should I put /login in authorized sources?

@CooperCodes 2 жыл бұрын

I believe that if you use localhost:3000 it should cover all routes (all routes meaning anything like /login or /register etc.)

@bricejoosten5173 2 жыл бұрын

@@edarcode8124 I did the situation you're asking for, React app with React Router, my google button is in /profile and no, in authorized sources there is only localhost 3000, no "/profile" and it works fine

@ramoverboard6093 5 ай бұрын

the access token does not work

@kushalappaca5324 3 ай бұрын

How do i get a bearer token if I want to hit a spring boot backend using OAuth2.0?

@manfromthewest 5 күн бұрын

Did you find a solution? I'm also looking for a way to get fresh bearer token.

@pricesmith1793 6 ай бұрын

I don't understand.. Client secret wasn't used... isn't that pretty important for oauth? Also, what's the difference between google-auth-library, gapi, and googleapis?

@AhmedEu 2 жыл бұрын

on point

@tanhnoinoilanh 22 күн бұрын

Is there any one know why this button can't be displayed and the hook useGoogleLogin is not responded when using the webview of react native. How to solved that? Thanks

@kapilbadokar 13 күн бұрын

Did u figure out a solution for this? Even i want to implement it on react-native-web

@stvlley 2 жыл бұрын

You are a god!

@stricklybisnez3296 2 жыл бұрын

greetings from Bogotá great video ! Im not sure why but my logout isn't working properly even though our codes are identical

@CooperCodes 2 жыл бұрын

This could have something to do with your browser cache, are you using the latest version of Google Chrome?

@stricklybisnez3296 2 жыл бұрын

@@CooperCodes you were right!! thanks man !

@CooperCodes 2 жыл бұрын

@@stricklybisnez3296 Hah that is awesome that was actually the fix. The libraries I use help make things easier, and they are very well supported. But you still run into strange things like that, glad to see its fixed.

@kalidsherefuddin 2 жыл бұрын

Ok thanks

@vitaliidolotov4226 11 ай бұрын

Thank you for the video! Could you please advise how to securely save google cliend_Id? What is the best practice for this? Thanks

@debianstark2181 11 ай бұрын

save it on a .env file

@sonugodda1771 Жыл бұрын

Code mill sakta hai?

@Vignaya_143 7 ай бұрын

Uncaught TypeError: o3 is not a function

@kirtanmodi8598 2 жыл бұрын

why do we need to init gapi script??

@CooperCodes 2 жыл бұрын

This is a great question! The reason why we need to initialize the gapi script is because in the background our imported login / logout buttons are using gapi to make calls to the google service we created. gapi.init "caches" our google credentials so if we use gapi anywhere else it will reference the properties we passed in. This is the simple explanation, but hopefully helpful!