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)
I just wanted to comment, am getting google doesn't exist error , and you fixed that 😄 , if you are getting JWT as undefined remove the .credentials from response ex: console.log(response)
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.
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
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???
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
@@SurbhiYadav-i1z yeah i just ran into this, if you go into the node_modules and see, the current function is actually jwtDecode (without the underscore).
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.
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
@@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 }); }, []);
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.
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?
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 :)
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.
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 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
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.
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.
jwt-decode no longer has a default export. here's the updated import code: import { jwtDecode } from 'jwt-decode'; import './App.css'; function App() { function handleCallbackResponse(response) { console.log("Encoded JWT ID token: " + response.credential); var userObject = jwtDecode(response.credential); console.log(userObject);
I implemented the login button it works fine but the problem is that I cannot style/customize the google button. I wanted to make the button responsive how can I do that ?. I tried using CSS Bootstrap nothing worked 😭
Hi!! I'm still getting a google not defined error during mounting, how do you fix that??? I put the script in and you can access google object from the console but react will throw an error while rendering (not compiling, I disabled the linter for that) and will not render anything.
@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.
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!
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.
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.
I am getting this error : "[GSI_LOGGER]: The given origin is not allowed for the given client ID. _.z @ m=credential_button_library:44" , But I added exactly what you instructed can you help pls?
When you deploy, do you change the localhost and localhost:3000 to your application's endpoint? also would I need port :3000 ?I see we need both localhost and localhost:3000 that is why I ask
Where is the link on gihub? It doesn't work and I don't know if mistake is in my code or it's something else. I checked everything. If you give a tutorial you can give the link on the project as well(
Thank you! Works fine in Localhost, but i want to make it public. now I get error '[GSI_LOGGER]: The given origin is not allowed for the given client ID.' I can only log in with an Email that I manually added while in Testing stage. What extra steps do I need to make it useable " IN Production"?
@@romanhrytsyshyn1966 If i remember correctly, problem was in Javascript Origins. I forgot to include my website URL with 'www.' Make sure you include both with and without WWW
@@levankantara Well, as I understood, I have another problem. I deployed my app using Github Pages and this auth doesn’t work because Github Pages works only with static data.
@CooperCodes All of this work fine. But dont know while hosting this code it says CORS error. I am using CORS package as well and it doesnt even show up on local server though I dont use any CORS blocking extension. I have been mad as all of my work is based on google login. Please help
My sign-in only works if I have the specific port number in the OAuth Client console... any fix for this? I have localhost and localhost:3000 in there, but it keeps saying that my origin isn't registered with teh OAuth client. For reference, I'm using vite so the default is localhost:5173 and upward. Any fix for this?
In my case i wanna create signIn div in login component that is loaded after useEffect in App.js. I get this errror [GSI_LOGGER]: Failed to render button because there is no parent or options set and button not showing. Do u know how to fix it?
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
I just wanted to comment, am getting google doesn't exist error , and you fixed that
😄 , if you are getting JWT as undefined remove the .credentials from response ex: console.log(response)
great vid,coders like u are the underrated goats of youtube
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.
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
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!!
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
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 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???
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
thanks, man. it works perfectly. instruction is simple and concise
Among all the other videos related with React and Google auth, this is the far most helpful video. I can't thank you enough =))
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?
@@SurbhiYadav-i1z yeah i just ran into this, if you go into the node_modules and see, the current function is actually jwtDecode (without the underscore).
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.
That's how a tutorial should be. Great job. I really liked it.
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 :)
It was helpful as hell, like a bless after hours spended with implicit google API docs
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
2024 Jan- this works! Thanks man for making this video! Helped me loads
Easy to follow, voice is clear, explanations are perfect!!!!!!!
Thank you som much for this tutorial! I've been looking for well-explained installation and usage of the new Google login!
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 :)
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.
I tNice tutorialnk you speak for a good portion of us.
Awesome!! Clear and accurate explanation. It helps me a lot. Thank you so much!
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.
ITS WORKING! nice job dude
Agreed. All the others just turn your brain upside down. Nice tutorials is simple.
You are so underrated 🙌 thanks
Thanks for watching Faheem, appreciate yah :)
Life Saving.
God bless you bro.
This is exactly what I was looking for!
Thanks!
Great, I'm lucky, it works great for me without errors
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
Great Work Bro , Appreciated !!
Thank you, Cooper Code, for providing such a through explanation! It was incredibly helpful.
Nice tutorial Michael,
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 :)
does anyone get "Cross-Origin-Opener-Policy policy would block the window.postMessage call." error?
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, helped me create a sequence diagram for explaining this process. Liked!
Glad it was helpful :) thanks for watching
If the user logged in and then refreshed the page will it undo their log in and ask them to log in again?
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.
Overall best tutorial on this... Many thanks!!
Thanks I really appreciate that!
Awesome explanations, thank you very much Sir.
Not working it's throwing error google is not defined in the browser and script link is throwing 404 aborted in console
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 a lot for this great tutorial. it solved me lots of trouble. Thanks
Thanks so much for your thoughtful and detailed videos! On to the soft!
Great tutorial man
Thanks for sharing your valuable experience.
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?
Thank you for saving my life in my job lol
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
Thanks! Your video content is the safest and most useful
Thank you! Appreciate the comment and glad it was useful
This is insanely helpful. Thanks so much.
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.
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.
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?
you are literally the best
Can you also explain in brief that how can we then use the googel spreadsheet api's ? Do I need to use gapi ?
Very helpful... Thanks a lot
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.
Life saving my man, life saving!
Thanks for such a great tutorial. It was really helpful!👍🏻💯
Thank you so much for the comment! Appreciate the support
But what if I need some restricted scopes?
Well done, thank you for this tutorial.
jwt-decode no longer has a default export. here's the updated import code:
import { jwtDecode } from 'jwt-decode';
import './App.css';
function App() {
function handleCallbackResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
var userObject = jwtDecode(response.credential);
console.log(userObject);
I implemented the login button it works fine but the problem is that I cannot style/customize the google button. I wanted to make the button responsive how can I do that ?. I tried using CSS Bootstrap nothing worked 😭
Thanks a lot, you've save my day!
up to now. Your soft is great too!
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
Hi!! I'm still getting a google not defined error during mounting, how do you fix that??? I put the script in and you can access google object from the console but react will throw an error while rendering (not compiling, I disabled the linter for that) and will not render anything.
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.
Awesome video thanks!
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! :)
How to display google sign up button instead of google sign in button
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.
How can you use returned token and ask for access to Google API's like Calendar etc?
Thanks works perfectly 🎉
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.
How can this apply to multipage? I found myself auto signed out when switching pages..
If someone else's program is connected to Google login, how do I get this "jwt token"? Are there any corresponding videos or articles?
I am getting this error : "[GSI_LOGGER]: The given origin is not allowed for the given client ID.
_.z @ m=credential_button_library:44" , But I added exactly what you instructed can you help pls?
Good tutorial, Thanks a lot, It was simple and concise.
You are a 10 on 10
Sir, i kept on having this error "The given origin is not allowed for the given client ID.", how can i fix this?
When you deploy, do you change the localhost and localhost:3000 to your application's endpoint? also would I need port :3000 ?I see we need both localhost and localhost:3000 that is why I ask
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
Awesome! Learnt a few tricks from this.
onto the software. I'd like to make soft from my ukulele, keyboard, etc., but don't know how to transfer. Do I need a microphone or
Thanks a lot for this video, super helpful.
Please how do I style the button? Too small for where I want to use it
Where is the link on gihub? It doesn't work and I don't know if mistake is in my code or it's something else. I checked everything. If you give a tutorial you can give the link on the project as well(
Thank you! Works fine in Localhost, but i want to make it public. now I get error '[GSI_LOGGER]: The given origin is not allowed for the given client ID.' I can only log in with an Email that I manually added while in Testing stage.
What extra steps do I need to make it useable " IN Production"?
Did you find out the answer?
@@romanhrytsyshyn1966 If i remember correctly, problem was in Javascript Origins. I forgot to include my website URL with 'www.' Make sure you include both with and without WWW
@@levankantara Well, as I understood, I have another problem. I deployed my app using Github Pages and this auth doesn’t work because Github Pages works only with static data.
@@romanhrytsyshyn1966 Yea, i hear people complain about github pages a lot. I used firebase for hosting as well
it is very easy to deploy
@CooperCodes All of this work fine. But dont know while hosting this code it says CORS error. I am using CORS package as well and it doesnt even show up on local server though I dont use any CORS blocking extension. I have been mad as all of my work is based on google login. Please help
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
My sign-in only works if I have the specific port number in the OAuth Client console... any fix for this? I have localhost and localhost:3000 in there, but it keeps saying that my origin isn't registered with teh OAuth client. For reference, I'm using vite so the default is localhost:5173 and upward. Any fix for this?
In my case i wanna create signIn div in login component that is loaded after useEffect in App.js. I get this errror [GSI_LOGGER]: Failed to render button because there is no parent or options set and button not showing. Do u know how to fix it?