Google OAuth 2.0 Login for React in 5 minutes
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- Enjoying my videos? Sign up for more content here: www.coopercode...
📩 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
FINALLY a tutorial for more advanced people who just dont want to scatter around the web...
Most straight forward video, I lost too much time searching for that.
The kind of tutorial we need and we want.
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!
Can you please upload an updated version? I'm very confused as to how the implementation should be done.
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 :)
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.
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.
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.
This was fast and straight to solving my problem. Definitely subscribing to this. Thanks a lot Mr Cooper Codes
react-google-login has been deprecated.
Yes and I believe now it's react-oauth/google
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?
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!
Fast and no unwanted content..
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.
Clean and concise! I subscribed instantly. Thank you!
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 ?
Thank you, 5 mins explained everything
how to do this using hooks? As I dont want to display the logout button as shown in video
the react-google-login package is depreciated now,
What to do when we need to save user details in database?
the react-google-login library has been deprecated, any alternatives for that.
Did you find an alternative package? react-google-login won't work with React 18 and up :(
npm i @react-oauth/google
Dont I need to have refresh tokens ? If I have some publics scopes defined, can I access them anytime with the same access token ?
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
use sessions
thank you! I had like 3 hours looking for this
No problem! 😁
react-google-login library is deprecated. create-react-app is also very old boilerplate generator.
so which thing you suggested?
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
@@hamzarizwan1715 what
You earned my sub!
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
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
th-cam.com/video/roxC8SMs7HU/w-d-xo.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.
do you have an example if the login is failed?
react-google-login package is not available from Sep 2023. How to subtitude it
how you solved it?
what to do?
I dont want to rewatch but where did you used client secret?
Thank you,Your video help me to resolve my Google Oauth issue
Glad to see it helped :)
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
Nice, Does it work inside a webview?
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
Thanks its working fine in my projects
bro nice video,
But How can we do login from all the emails. Here we are checking with testing emails
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?
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....
Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
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
God, you are a god fr. Just perfect
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
If we implement jwt token from backend , then by sign in with google how can we get the token
why do we need google login only for using with test email ?
Why is anyone doing it either on the front-end side or the back-end side ? no one is showing the full-stack example
Great tutorial, thx!
Thank you! your video helped me so much😆
Will this work in React Native as well?
how would I style the button in CSS?
Thanks, it was really helpful
Hello pls there's a problem that the same account is taken automatically each time i press the button
really helpful men many thanks!
Wow, super easy! thank you so much for sharing!
You're welcome, 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
How do i get a bearer token if I want to hit a spring boot backend using OAuth2.0?
Did you find a solution? I'm also looking for a way to get fresh bearer token.
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.
This no longer works with the react-google-login library being deprecated.
why 60fps for videos like that? it's tutorial - 30fps is enough - because all watch it on speed 2x
not work useEffect : Uncaught TypeError: Cannot read properties of undefined (reading 'apiKey')
Sorry I've been busy, I will look into this
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
Did u figure out a solution for this?
Even i want to implement it on react-native-web
Do I have to paid for google cloud platform to this. Can someone please help.
dont forget to add any api route created in backend. must include it
how do i know or check if any were created? please help me sorry im new
@@doofenshmurts2439 For example if You created, /oauth in backend for the purpose of google auth (check routes in backend). do add *localhost:/oauth* in redirect uri, at timestamp 1:45. Add all api routes with that purpose in google console, so that you dont face much errors. replace localhost:with actual url when deployed
How could I make it work in an Android app?
Hey can u do the same for Spotify pls ?
It's very helpful ❤👏
Amazing! TY!
how can we do cross-application authentication with google authentication
THANKS !!!!!!!!!!!! IT WORKS !!!!
How to get the google access token?
how to make it work for all gmail accounts ?
Thanks so much for helping me get this going!
Happy to help! Thanks for watching :)
Thanks bro!
I am getting error unable to resolve dependency tree
many thanks
Showing no longer supported
error on build
Thanks alot for this
Is Google Oauth 2.0 totally free for use?
yes
really nice tutorial
tahnk u so much man
i am getting invalid hook call warnings..
Dude this thing is not working on mobile... I'm going crazy
Uncaught TypeError: o3 is not a function
its sad that this google login dependency is deprecated now
npm i @react-oauth/google
Try this !
love you brother
the access token does not work
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!
thanks
This isn't a complete example. Lots of stuff is left out.
message of love
Hi, can you update with the new version please :)
Hey, the latest video on my channel is the new version. Hope this helps!
@@CooperCodes i just realized that, thank you very much, i've been looking for that for like weeks :)
you can no longer create a project without an organization or a folder
Amazing thanks
The react-google-login package has been deprecated so this video's solution is very much outdated.
Gonna edit the top of the description, the video for the new login stuff is here th-cam.com/video/roxC8SMs7HU/w-d-xo.html
coud yo do this, but with an updated version please :)
Updated version just came out, it’s the most recent video on my channel
@@CooperCodes yes you're right! thank you man
you deserve like
Code mill sakta hai?