Yo this is my first super thanks! And the fact that its 10 bucks! You are way too kind, thank you so much :) this channel is genuinely a labor of love which I hope people see in the content, and I look forward to providing more in the future. This donation genuinely means so much to me. Thank you for your kindness.
You're a life saver mate! I was following a 5 hour long tutorial trying to make social media app using react and the guy was using the outdated method for this google oauth thing and I was losing my mind. Thank you so much! You've been a huge help!
hey, have u successfully updated the google sign-in from the old version? I watched this video and come back try to fix the old one, but just get stuck T^T
Everyone does not have the skill to teach easily and clearly mate, but you do. You made it simple and straightforward, thanks a lot. I got the error, google doesn't exist, Just in case someone else gets the same, you have to add window. google.............(add window before google)
Thanks a lot! Not just for the Google Login, you are telling what are you doing step by step. This is so important to understand the logic of the code.
Amazing tutorial! I have watched plenty of tutorials overall and this is one of the easiest to understand and straight to the point. Also, I loved how I just did what you said and it worked the first time! That doesn't happen often. Keep it up 💯💯
Thank you, appreciate it! The global google is a little strange, but I found it to be a good solution when depending on scripts from your HTML like I discussed in the video. Appreciate the support
@@user-gm3xp8yi9b yeah i just ran into this, if you go into the node_modules and see, the current function is actually jwtDecode (without the underscore).
Thanks so much dude. Google Technical Support couldn't even help me out as much as you did. The official Google docs on this didn't even mention React (as far as I know). The docs were frightening and I thought I would never figure this out with all the rabbit holes and snail trails. But anyway, I've watched 4 other videos on one-tap and yours is the first one that makes use of the sign in button if the user is not already logged in. One note I would add is that instead of using /* global google */ you can use window.google.accounts.id, etc. When I searched for "google one-tap" I didn't find your video. I had to search for "google signin". So if you added "one-tap" as a tag or search word it might increase your views (if you haven't already). It's nice that I didn't have to set up fake server and use the google-auth-library package for this to work also.
Yeah hah when I made this video this stuff was super fresh. If I were to do the video over again I would definitely grabh google from the window object like you suggest, luckily its a one line fix but still wish it was in the video. Glad this was helpful! The Google documentation is surprisingly awful... considering its yah know... Google???
You've earned a sub and a like, you know how to program things really well and explain it to beginners so we dont scratch our heads until hair starts falling off. You showed me that I have a programming knowledge deficiency.
10:49 The updated jwt decode code is import {jwtDecode} from 'jwt-decode'; const userObject = jwtDecode(response.credential) console.log(userObject) posting this as I had error when executing the code in video. so thought might be helpful for anyone watching
@@CooperCodes Hey! is there any way we can customize the button rendered by it, like i want to align it center by default it is right aligned. i have tried css properties and different ways but couldn't figure it out
@@rajatkushwaha279 const googleLogin = (res) => { const userCred = res.credential; const user = jwtDecode(userCred); // use the user data }; useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "your client id here", callback: googleLogin, }); // mention id of btn, here i used googlelogin google.accounts.id.renderButton(document.getElementById("googleLogin"), { theme: "outline", size: "large", fullWidth: true }); }, []);
just started learning react and came across your video. it took my entire day but worth it as its working same as he shown his video! but there were some code declaration errors which I faced. but still bundles of thanks
Thank you! I used old version of google sign in and it threw me an error. So I decided to use new method and found your video. Thanks again for helping)))
That is so great to hear that the video solved your problem! I made the video for people transitioning to the new login system, so glad to see it helped that case :)
Thank you so much for the donation, glad the video was helpful! Genuinely donations like this make my day and help me realize the impact my content has on others, so thank you.
Thank you for this! Qq...once the user is logged in...what's the recommended approach for backend API authorization? If I have an Express backend...can you send the Bearer token in the header?
You could use a library that allows you to set cookies and create a "token" cookie, then on the backend verify that token. I'm not sure about the backend details but I'm sure there is a function to validate it.
Your video was extremely helpful and easy to follow. It saved me a lot of trouble. I would be grateful if you could make another video on how to redirect pages after login. Thank you for your assistance.
Thank you, thank you, thank you!!! I have been trying to get an old program running for two days. None of my old stuff worked. All the tutorials I tryed did not work. Nothing gave me the token!
Wow, this is a great tutorial. I'm having to force the npm install of react-google-login. Is there another updated package? I'm googling where to find such an update since the deprecation on July 29th. Thank you for taking the time to make this video for all to see.
A fantastic fix I thought was broken. Make sure to check your extensions for anything that may be aggressively blocking. It wouldn't let me get anything from the gsi link. Disabled the extension: problem solved.
somebody wrote on ts? do you know how solve the problem with that(type script can not find a google..) maybe later gonna be more problems witch you solved can you write here solve?
Thanks for the video. There is a way to change this way, to save a token. This would be to make future integrations, even if the user is not logged in and within the application? For example, creating events in Google Calendar.
why i am getting error every-time that "google is not defined" although my app is working fine but error message show every-time and then i have to close it manually any solution to this issue?
Hello, index.html Using both async and defer together is technically allowed, but it does not follow the intended usage of these attributes and can cause confusion. According to the HTML specification, if both attributes are present, the async attribute takes precedence, and the defer attribute is ignore.
Thank you for providing valuable contents. Do you have any example to work with oauth 2.0 working with scope parameter to fetch the authorization code and then token? It will be great help if you have it. Thank you for your time.
Hi, since you commented 11 days ago I assume you were successfully able to run this tutorial. I ca't run this because it shows error: 'google' is not defined... I included script in index.html...
Love the Tutorial: Is there any reason that the token might fail? And do you have suggested work arounds! Cross-Origin-Opener-Policy policy would block the window.postMessage call.
@Sai karthik Varanasi basically when user gets logged in google returns a object. just store that object into the localstoage and for next write the code in such way that first it'll look to the localstorage for the user data if its null or not exist login the user and if user data is present in the localstorage then no need to login the user.
@Sai karthik Varanasi you have to store data in localstorage. you can do it by localStorage.setItem() function it takes two parameters first, what you want to name it lets say 'profile' and in second you have to pass data in string format (JSON.stringify). now when you want to access the data on refresh you can get data in useEffect (after refresh) using localStorage.getItem('profile') you have to pass the name you chose like i took profile for example.
Great Video. But I have one question Can we add scopes in order to access google photos or google drive? I working on app that need both of these APIs. Thanks btw
Thanks!
Yo this is my first super thanks! And the fact that its 10 bucks! You are way too kind, thank you so much :) this channel is genuinely a labor of love which I hope people see in the content, and I look forward to providing more in the future. This donation genuinely means so much to me. Thank you for your kindness.
@@CooperCodes Oh yeah. You're welcome. Enough for a down payment on a six pack of beer right? Good luck with everything.
Hahaha I'll use my down payment wisely, thank you for the kind words and support
You're a life saver mate! I was following a 5 hour long tutorial trying to make social media app using react and the guy was using the outdated method for this google oauth thing and I was losing my mind. Thank you so much! You've been a huge help!
You are absolutely welcome, glad to see my video got you on your way.
hey, have u successfully updated the google sign-in from the old version? I watched this video and come back try to fix the old one, but just get stuck T^T
@@weizhao7896 I followed this tutorial and things worked perfectly
From javascript mastery right?
@@ayushnegi3610 for me, yes. Lol
Everyone does not have the skill to teach easily and clearly mate, but you do. You made it simple and straightforward, thanks a lot.
I got the error, google doesn't exist, Just in case someone else gets the same, you have to add window. google.............(add window before google)
Thanks 😃
This saved me hours, thank you!
thanks, but I wonder why is he didn't get an google doesn't exist error...
not working for me, i have always an error "window.google.account is undefined" and i don't understand why😢
Sorry in advance for my english
In viewing this, I didn't realize that the comment /* global google */ was actually necessary and not just a regular comment.Thank you so much!!
Thanks man it helped me too
Thanks a lot! Not just for the Google Login, you are telling what are you doing step by step. This is so important to understand the logic of the code.
Amazing tutorial! I have watched plenty of tutorials overall and this is one of the easiest to understand and straight to the point. Also, I loved how I just did what you said and it worked the first time! That doesn't happen often. Keep it up 💯💯
Thanks so much for the comment! Glad the content was helpful :)
@@CooperCodes Sure it was, I already implemented it into my app. Great work!
Thanks for the video! The "/* global google */ explanation was really helpful!
Thank you, appreciate it! The global google is a little strange, but I found it to be a good solution when depending on scripts from your HTML like I discussed in the video. Appreciate the support
Perfectly working October 2023, thanks for the tutorial! Very easy and understandable
hey i need help , idk there is an error jwt_decode is not a function
can you help me with this?
@@user-gm3xp8yi9b yeah i just ran into this, if you go into the node_modules and see, the current function is actually jwtDecode (without the underscore).
Thanks so much dude. Google Technical Support couldn't even help me out as much as you did. The official Google docs on this didn't even mention React (as far as I know). The docs were frightening and I thought I would never figure this out with all the rabbit holes and snail trails. But anyway, I've watched 4 other videos on one-tap and yours is the first one that makes use of the sign in button if the user is not already logged in. One note I would add is that instead of using /* global google */ you can use window.google.accounts.id, etc. When I searched for "google one-tap" I didn't find your video. I had to search for "google signin". So if you added "one-tap" as a tag or search word it might increase your views (if you haven't already). It's nice that I didn't have to set up fake server and use the google-auth-library package for this to work also.
Yeah hah when I made this video this stuff was super fresh. If I were to do the video over again I would definitely grabh google from the window object like you suggest, luckily its a one line fix but still wish it was in the video. Glad this was helpful! The Google documentation is surprisingly awful... considering its yah know... Google???
I was looking for profile object and then it turn out to be decoded credentials. You're such a life saver, thank you so much! What an amazing tutorial
You're very welcome, glad it helped you out especially in that specific scenario :)
You've earned a sub and a like, you know how to program things really well and explain it to beginners so we dont scratch our heads until hair starts falling off. You showed me that I have a programming knowledge deficiency.
OMG THANK YOU!!! I went through hours of "beginner" guides before I could find tNice tutorials and at least make a simple soft... Only video I've
thanks, man. it works perfectly. instruction is simple and concise
JUST WOOOW, super clear, I WISH I COULD HAVE LIKE THIS VIDEO MORE THAN ONCE
You can like this comment too! Thanks for watching hahaha
It was helpful as hell, like a bless after hours spended with implicit google API docs
Thank you som much for this tutorial! I've been looking for well-explained installation and usage of the new Google login!
10:49 The updated jwt decode code is
import {jwtDecode} from 'jwt-decode';
const userObject = jwtDecode(response.credential)
console.log(userObject)
posting this as I had error when executing the code in video. so thought might be helpful for anyone watching
Thank you so much for this. you are a life saver. i was having problems working with old oauth and spent hours on it. finally this worked
Glad to see it was helpful! Thank you for watching and supporting :)
@@CooperCodes Hey! is there any way we can customize the button rendered by it, like i want to align it center by default it is right aligned. i have tried css properties and different ways but couldn't figure it out
can u send the code?? It's too long to write :{
@@rajatkushwaha279
const googleLogin = (res) => {
const userCred = res.credential;
const user = jwtDecode(userCred);
// use the user data
};
useEffect(() => {
/* global google */
google.accounts.id.initialize({
client_id: "your client id here",
callback: googleLogin,
});
// mention id of btn, here i used googlelogin
google.accounts.id.renderButton(document.getElementById("googleLogin"), { theme: "outline", size: "large", fullWidth: true });
}, []);
@@kushagra4401 Thanks :)
just started learning react and came across your video. it took my entire day but worth it as its working same as he shown his video! but there were some code declaration errors which I faced. but still bundles of thanks
That's how a tutorial should be. Great job. I really liked it.
Among all the other videos related with React and Google auth, this is the far most helpful video. I can't thank you enough =))
2024 Jan- this works! Thanks man for making this video! Helped me loads
Easy to follow, voice is clear, explanations are perfect!!!!!!!
Thank you! I used old version of google sign in and it threw me an error. So I decided to use new method and found your video. Thanks again for helping)))
That is so great to hear that the video solved your problem! I made the video for people transitioning to the new login system, so glad to see it helped that case :)
Awesome!! Clear and accurate explanation. It helps me a lot. Thank you so much!
I tNice tutorialnk you speak for a good portion of us.
Agreed. All the others just turn your brain upside down. Nice tutorials is simple.
Thanks! way better than google documentation.
Thank you so much for the donation, glad the video was helpful! Genuinely donations like this make my day and help me realize the impact my content has on others, so thank you.
Thank you for this! Qq...once the user is logged in...what's the recommended approach for backend API authorization? If I have an Express backend...can you send the Bearer token in the header?
You could use a library that allows you to set cookies and create a "token" cookie, then on the backend verify that token. I'm not sure about the backend details but I'm sure there is a function to validate it.
Your video was extremely helpful and easy to follow. It saved me a lot of trouble. I would be grateful if you could make another video on how to redirect pages after login. Thank you for your assistance.
Awesome explanations, thank you very much Sir.
Great video, helped me create a sequence diagram for explaining this process. Liked!
Glad it was helpful :) thanks for watching
This is exactly what I was looking for!
Thanks!
Overall best tutorial on this... Many thanks!!
Thanks I really appreciate that!
Very helpful... Thanks a lot
Thanks for such a great tutorial. It was really helpful!👍🏻💯
Thank you so much for the comment! Appreciate the support
Thank you, thank you, thank you!!! I have been trying to get an old program running for two days. None of my old stuff worked. All the tutorials I tryed did not work. Nothing gave me the token!
Glad the tutorials could help, thanks so much for commenting! :)
does anyone get "Cross-Origin-Opener-Policy policy would block the window.postMessage call." error?
Thanks for sharing your valuable experience.
Thanks so much for your thoughtful and detailed videos! On to the soft!
Thank you so much! Amazing and straightforward tutorial. I appreciate it a lot!
Miguel thank you so much for watching and leaving a comment. I appreciate you back :)
Can any one help me I got "Google is not defined" error
Well done, thank you for this tutorial.
Thank you, Cooper Code, for providing such a through explanation! It was incredibly helpful.
All of my computers got the softwares here. I first install them on virtual environnt to make sure they're not malware. So I can assure
Life Saving.
God bless you bro.
up to now. Your soft is great too!
This is insanely helpful. Thanks so much.
Wow, this is a great tutorial. I'm having to force the npm install of react-google-login. Is there another updated package? I'm googling where to find such an update since the deprecation on July 29th. Thank you for taking the time to make this video for all to see.
Great, I'm lucky, it works great for me without errors
Thanks man. I was struggling to find the google auth latest solution.
Thanks a ton. Wish they had typescript files for d.ts. Subed!
Not working it's throwing error google is not defined in the browser and script link is throwing 404 aborted in console
in the details. when you get stuck, roll back to the beginning and start over. The other weay is to focus entirely on one set of commands
Good tutorial, Thanks a lot, It was simple and concise.
Your a life saver tipo thank you for this I've been struggling with this for weeks now thank you
Glad I could help, thanks for watching!
Bro I am struggling Can any one help me I got "Google is not defined" error
@@durgaprasadthandra4066 nah for some reason this stopped working for me
Thanks a lot, you've save my day!
Thanks! Your video content is the safest and most useful
Thank you! Appreciate the comment and glad it was useful
very much thank you!
You are a really good teacher.
Thank you again :)
Thank you kindly for the comment :) always appreciate those who are willing to learn, thank you for the kind words.
A fantastic fix I thought was broken. Make sure to check your extensions for anything that may be aggressively blocking. It wouldn't let me get anything from the gsi link. Disabled the extension: problem solved.
somebody wrote on ts?
do you know how solve the problem with that(type script can not find a google..)
maybe later gonna be more problems witch you solved
can you write here solve?
i really appreciate it! Exellent tutorial! from korea
Thank you for saving my life in my job lol
You are so underrated 🙌 thanks
Thanks for watching Faheem, appreciate yah :)
Truly life saver, thank you for the code i really apreciate it !
I got you! Thanks for watching
But what if I need some restricted scopes?
Simple and amazing, thank you!
there! Thanks a lot for the help, I'm going to subscribe to your channel and keep up with all the videos!
Great tutorial man
Awesome! Learnt a few tricks from this.
Great Work Bro , Appreciated !!
this was really helpful. Thank You
I got you :)
Trying to make a soft you hear in your head co to life might be the hardest part starting out but I guess that requires so solid
Nice tutorial Michael,
Thanks bro. I just put credentials instead of credential. The little 's' made me brower for 30 minutes.
thanks, i will do my best to have patience for tNice tutorials because i normally don't have much, i wish there were chapters here so i could skip
Thanks for the video.
There is a way to change this way, to save a token.
This would be to make future integrations, even if the user is not logged in and within the application?
For example, creating events in Google Calendar.
ITS WORKING! nice job dude
why i am getting error every-time that "google is not defined" although my app is working fine but error message show every-time and then i have to close it manually any solution to this issue?
Really, a very useful video, thanks!
Thanks for the video. Is there a way to format the Google signin button to use Material UI? I want it to use my theming.
Life saving my man, life saving!
Hello,
index.html Using both async and defer together is technically allowed, but it does not follow the intended usage of these attributes and can cause confusion. According to the HTML specification, if both attributes are present, the async attribute takes precedence, and the defer attribute is ignore.
Thank you for providing valuable contents. Do you have any example to work with oauth 2.0 working with scope parameter to fetch the authorization code and then token?
It will be great help if you have it. Thank you for your time.
Hi, since you commented 11 days ago I assume you were successfully able to run this tutorial. I ca't run this because it shows error: 'google' is not defined... I included script in index.html...
Great! Thanks for the solution.
Thanks works perfectly 🎉
Thank you so much , your video helped alot.
You are very welcome! Thank you for watching :)
How to display google sign up button instead of google sign in button
Thank you so much. So clear.
Insane thank you man!
thanks for the amazing concise tutorial. I have doubt regarding what needs to be one token expires. Do I need to force user login again?
Best guide. Thank you
Best guy. Thank you
Thanks alot man this video really helped me
You're welcome! Glad it helped :)
thank you so much for this tutorial❤❤❤
Love the Tutorial:
Is there any reason that the token might fail? And do you have suggested work arounds!
Cross-Origin-Opener-Policy policy would block the window.postMessage call.
Great video! just one question, how can I use the token to avoid the login every time the page gets refreshed?
I think I have the same problem, when refreshing it asks me to login again. Did you find any solution for that?
for this you have to store the user data in localstorage and if there is no data in localstorage only then make a login call
@Sai karthik Varanasi you can find detailed articles on the web.
@Sai karthik Varanasi basically when user gets logged in google returns a object. just store that object into the localstoage and for next write the code in such way that first it'll look to the localstorage for the user data if its null or not exist login the user and if user data is present in the localstorage then no need to login the user.
@Sai karthik Varanasi you have to store data in localstorage. you can do it by localStorage.setItem() function it takes two parameters first, what you want to name it lets say 'profile' and in second you have to pass data in string format (JSON.stringify). now when you want to access the data on refresh you can get data in useEffect (after refresh) using localStorage.getItem('profile') you have to pass the name you chose like i took profile for example.
Thanks. really helpful
If the user logged in and then refreshed the page will it undo their log in and ask them to log in again?
You are a 10 on 10
you are literally the best
Great Video. But I have one question
Can we add scopes in order to access google photos or google drive?
I working on app that need both of these APIs.
Thanks btw