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!
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!
@@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.
Excellent video, but I have a question, how do I put the Google login on my website with my Hosting, and that I can not only see it on Localhost. Regards
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
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.
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?
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
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?
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.
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 ?
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 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
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!
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?
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?
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....
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
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?
Man, I don't think you needed to create React tree to add a log in button into index.html. Lost track in the middle. I wanted one button. Not the struggle with understanding the code from tutorial.
@@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
@@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.
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
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.
The kind of tutorial we need and we want.
FINALLY a tutorial for more advanced people who just dont want to scatter around the web...
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 :)
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!
This was fast and straight to solving my problem. Definitely subscribing to this. Thanks a lot Mr Cooper Codes
Thank you, 5 mins explained everything
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.
Clean and concise! I subscribed instantly. Thank you!
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..
Excellent video, but I have a question, how do I put the Google login on my website with my Hosting, and that I can not only see it on Localhost. Regards
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.
Thanks its working fine in my projects
Thank you! The best tutorial
react-google-login package is not available from Sep 2023. How to subtitude it
how you solved it?
what to do?
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.
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
Thank you! your video helped me so much😆
react-google-login has been deprecated.
Yes and I believe now it's react-oauth/google
Thank you,Your video help me to resolve my Google Oauth issue
Glad to see it helped :)
What to do when we need to save user details in database?
the react-google-login package is depreciated now,
react-google-login library is deprecated. create-react-app is also very old boilerplate generator.
so which thing you suggested?
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! 😁
how to do this using hooks? As I dont want to display the logout button as shown in video
I dont want to rewatch but where did you used client secret?
do you have an example if the login is failed?
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?
Nice, Does it work inside a webview?
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
good choice
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.
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.
Wow, super easy! thank you so much for sharing!
You're welcome, glad it helped :)
Thanks, it was really helpful
Great tutorial, thx!
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
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 ?
really helpful men many thanks!
It's very helpful ❤👏
Dont I need to have refresh tokens ? If I have some publics scopes defined, can I access them anytime with the same access token ?
You earned my sub!
Will this work in React Native as well?
God, you are a god fr. Just perfect
Thanks so much for helping me get this going!
Happy to help! Thanks for watching :)
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
why do we need google login only for using with test email ?
how would I style the button in CSS?
How to refresh token?
If we implement jwt token from backend , then by sign in with google how can we get the token
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!
bro nice video,
But How can we do login from all the emails. Here we are checking with testing emails
Why is anyone doing it either on the front-end side or the back-end side ? no one is showing the full-stack example
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
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
many thanks
Hello pls there's a problem that the same account is taken automatically each time i press the button
Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
How to get the google access token?
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....
How could I make it work in an Android app?
Thanks bro very much
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
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?
Thanks bro!
Showing no longer supported
error on build
Amazing! TY!
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.
Man, I don't think you needed to create React tree to add a log in button into index.html. Lost track in the middle. I wanted one button. Not the struggle with understanding the code from tutorial.
thanks
tahnk u so much man
I am getting error unable to resolve dependency tree
Do I have to paid for google cloud platform to this. Can someone please help.
This no longer works with the react-google-login library being deprecated.
Hey can u do the same for Spotify pls ?
Is Google Oauth 2.0 totally free for use?
yes
how to make it work for all gmail accounts ?
how can we do cross-application authentication with google authentication
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
This isn't a complete example. Lots of stuff is left out.
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
the access token does not work
THANKS !!!!!!!!!!!! IT WORKS !!!!
i am getting invalid hook call warnings..
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.
Amazing thanks
Code mill sakta hai?
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
why 60fps for videos like that? it's tutorial - 30fps is enough - because all watch it on speed 2x
thank you
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 :)
its sad that this google login dependency is deprecated now
npm i @react-oauth/google
Try this !
ty
Uncaught TypeError: o3 is not a function
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
really nice tutorial
Dude this thing is not working on mobile... I'm going crazy