Google OAuth 2.0 Login for React in 5 minutes
HTML-код
- Опубликовано: 13 фев 2022
- 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 
Наука
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
Most straight forward video, I lost too much time searching for that.
This was fast and straight to solving my problem. Definitely subscribing to this. Thanks a lot Mr Cooper Codes
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!
The kind of tutorial we need and we want.
Thanks so much, I was following a React tutorial which broke and this fixed the OAuth login.
Glad to see it fixed your issues, thanks for watching!
Can you please upload an updated version? I'm very confused as to how the implementation should be done.
Thank you, 5 mins explained everything
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!
Hey M Jay, thank you so much for your support! It means a bunch and I'm glad the video was helpful :)
FINALLY a tutorial for more advanced people who just dont want to scatter around the web...
Clean and concise! I subscribed instantly. Thank you!
Thanks its working fine in my projects
Fast and no unwanted content..
Thank you! your video helped me so much😆
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.
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 ?
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.
It's very helpful ❤👏
Thank you,Your video help me to resolve my Google Oauth issue
Glad to see it helped :)
Thanks, it was really helpful
really helpful men many thanks!
thank you! I had like 3 hours looking for this
No problem! 😁
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?
how to do this using hooks? As I dont want to display the logout button as shown in video
You earned my sub!
THANKS !!!!!!!!!!!! IT WORKS !!!!
really nice tutorial
Thanks alot for this
the react-google-login library has been deprecated, any alternatives for that.
Thanks bro!
Thanks bro very much
Wow, super easy! thank you so much for sharing!
You're welcome, glad it helped :)
What to do when we need to save user details in database?
Amazing thanks
Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Could you update the video for the new Sign In with Google ?
Did you get the job after all you're in computer science fields more then two years, can you help me, are you working
@@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.
many thanks
Amazing! TY!
Thanks a lot👍👍
God, you are a god fr. Just perfect
Hello pls there's a problem that the same account is taken automatically each time i press the button
How do i get a bearer token if I want to hit a spring boot backend using OAuth2.0?
Awesome!! Do you have any idea how to make the login state persist so a user doesn't have to login every refresh?
maybe store token on successful login on localstorage
how would I style the button in CSS?
If we implement jwt token from backend , then by sign in with google how can we get the token
tahnk u so much man
why do we need google login only for using with test email ?
love you brother
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....
Thanks so much for helping me get this going!
Happy to help! Thanks for watching :)
do you have an example if the login is failed?
thank you
Thanks!
the react-google-login package is depreciated now,
Nice, Does it work inside a webview?
Why is anyone doing it either on the front-end side or the back-end side ? no one is showing the full-stack example
Will this work in React Native as well?
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?
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
thanks
bro nice video,
But How can we do login from all the emails. Here we are checking with testing emails
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
Thanks!
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.
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
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
Ok thanks
you deserve like
You are a god!
I'm quite confuse, how do users register if we need to manually add the allowed users only in the oauth consent screen
those are the test users only
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
Womp Womp
on point
Do I have to paid for google cloud platform to this. Can someone please help.
How could I make it work in an Android app?
ty
How to get the google access token?
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?
x2
did you ever figure this out? in the same spot
ruclips.net/video/roxC8SMs7HU/видео.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.
Hey can u do the same for Spotify pls ?
react-google-login package is not available from Sep 2023. How to subtitude it
how you solved it?
what to do?
how to make it work for all gmail accounts ?
I am getting error unable to resolve dependency tree
react-google-login library is deprecated. create-react-app is also very old boilerplate generator.
so which thing you suggested?
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?
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!
@@CooperCodes If I am using the google button at localhost:3000/login, should I put /login in authorized sources?
I believe that if you use localhost:3000 it should cover all routes (all routes meaning anything like /login or /register etc.)
@@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
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?
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
Cool dude
Showing no longer supported
error on build
how can we do cross-application authentication with google authentication
This no longer works with the react-google-login library being deprecated.
react-google-login has been deprecated.
Yes and I believe now it's react-oauth/google
greetings from Bogotá
great video !
Im not sure why but my logout isn't working properly even though our codes are identical
This could have something to do with your browser cache, are you using the latest version of Google Chrome?
@@CooperCodes you were right!! thanks man !
@@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.
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?
i am getting invalid hook call warnings..
the access token does not work
Code mill sakta hai?
helpful
Glad it helped!
Thank you for the video! Could you please advise how to securely save google cliend_Id? What is the best practice for this? Thanks
save it on a .env file
Uncaught TypeError: o3 is not a function
its sad that this google login dependency is deprecated now
this is sooooooo!!!!!!!!! rich
Dude this thing is not working on mobile... I'm going crazy
why 60fps for videos like that? it's tutorial - 30fps is enough - because all watch it on speed 2x
I want all users to sign in not just test users I add how to do that.
why do we need to init gapi script??
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!