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
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.
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.
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
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.
@@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).
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 💯💯
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
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???
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?
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. 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
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! 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.
@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 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.
Im getting this error ERROR in ./src/App.js 14:21-31 export 'default' (imported as 'jwt_decode') was not found in 'jwt-decode' (possible exports: InvalidTokenError, jwtDecode) I'm up to around the 11:25 mark in the video. Can someone please point me in the right direction?
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.
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 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...
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?
for sign in part in 9:45 , after entering the test account, the google NEED me to ENTER PASSWORD instead of direct logged in , can you suggestion the possibile problem?
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?
@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
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?
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
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.
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.
This is the official Google Identity documentation for web: developers.google.com/identity/gsi/web/guides/overview He basically goes through the 'get started' and 'sign in with google button' sections.
![How To Integrate Google Login in React! [Easy] | Add Auth To Your React Project](http://i.ytimg.com/vi/UUJfTsn6S_Y/mqdefault.jpg)
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
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.
great vid,coders like u are the underrated goats of youtube
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)
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.
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
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
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.
thanks, man. it works perfectly. instruction is simple and concise
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).
Among all the other videos related with React and Google auth, this is the far most helpful video. I can't thank you enough =))
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
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!
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!!
Thank you som much for this tutorial! I've been looking for well-explained installation and usage of the new Google login!
That's how a tutorial should be. Great job. I really liked it.
It was helpful as hell, like a bless after hours spended with implicit google API docs
Thank you, Cooper Code, for providing such a through explanation! It was incredibly helpful.
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 :)
2024 Jan- this works! Thanks man for making this video! Helped me loads
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
Awesome!! Clear and accurate explanation. It helps me a lot. Thank you so much!
Easy to follow, voice is clear, explanations are perfect!!!!!!!
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
I tNice tutorialnk you speak for a good portion of us.
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 :)
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?
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 :)
This is exactly what I was looking for!
Thanks!
Can you also explain in brief that how can we then use the googel spreadsheet api's ? Do I need to use gapi ?
Great video, helped me create a sequence diagram for explaining this process. Liked!
Glad it was helpful :) thanks for watching
Life saving my man, life saving!
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.
Life Saving.
God bless you bro.
ITS WORKING! nice job dude
Awesome explanations, thank you very much Sir.
Overall best tutorial on this... Many thanks!!
Thanks I really appreciate that!
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.
i really appreciate it! Exellent tutorial! from korea
Thanks! Your video content is the safest and most useful
Thank you! Appreciate the comment and glad it was useful
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
Great Work Bro , Appreciated !!
up to now. Your soft is great too!
Great, I'm lucky, it works great for me without errors
Thanks a lot for this great tutorial. it solved me lots of trouble. 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 :)
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?
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
If the user logged in and then refreshed the page will it undo their log in and ask them to log in again?
03:31
Is Client Secret used to verify JWT on the backend? how to verify?
This is insanely helpful. Thanks so much.
Great tutorial man
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
Thanks for sharing your valuable experience.
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 a lot, you've save my day!
you are literally the best
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.
Well done, thank you for this tutorial.
Im getting this error ERROR in ./src/App.js 14:21-31
export 'default' (imported as 'jwt_decode') was not found in 'jwt-decode' (possible exports: InvalidTokenError, jwtDecode) I'm up to around the 11:25 mark in the video. Can someone please point me in the right direction?
Never mind, i got it.
Nice tutorial Michael,
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.
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 for saving my life in my job lol
How can you use returned token and ask for access to Google API's like Calendar etc?
Thanks for such a great tutorial. It was really helpful!👍🏻💯
Thank you so much for the comment! Appreciate the support
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...
Dude, you rock.
thanks much, please, how to get DOB and Gender from google account?
But what if I need some restricted scopes?
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
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
Not working it's throwing error google is not defined in the browser and script link is throwing 404 aborted in console
HI ! thanks for the video , can you shortly brief whats the different between this and the video of Google OAuth 2.0 Login for React in 5 minutes?
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?
If someone else's program is connected to Google login, how do I get this "jwt token"? Are there any corresponding videos or articles?
Hi! And how do I get access token to use Google OAuth 2 from JWT token?
Awesome! Learnt a few tricks from this.
for sign in part in 9:45 , after entering the test account, the google NEED me to ENTER PASSWORD instead of direct logged in , can you suggestion the possibile problem?
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?
@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
Thanks works perfectly 🎉
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?
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
How can this apply to multipage? I found myself auto signed out when switching pages..
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.
Truly life saver, thank you for the code i really apreciate it !
I got you! Thanks for watching
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.
Insane thank you man!
LOVE IT !!!
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.
This was awesome! Thanks for putting it out there
Can you please share the link to the documentation that you followed ?
This is the official Google Identity documentation for web: developers.google.com/identity/gsi/web/guides/overview
He basically goes through the 'get started' and 'sign in with google button' sections.