Google Identity Services Login with React (2023 React Google Login)

Рет қаралды 185,127

2 жыл бұрын

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video I go over implementing login using the new Google Identity Services login. We use the Google Identity Services to authorize a successful Google login and then save the JWT in our React project. This tutorial is also useful when using external authorization alongside the google login authorization. This video is also helpful for Google One Tap (Google one-tap) login and is a similar setup.
Business inquiry? Email thecoopercodes@gmail.com

Пікірлер: 549

@thecyrusj13 Жыл бұрын

Thanks!

@CooperCodes Жыл бұрын

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.

@thecyrusj13 Жыл бұрын

@@CooperCodes Oh yeah. You're welcome. Enough for a down payment on a six pack of beer right? Good luck with everything.

@CooperCodes Жыл бұрын

Hahaha I'll use my down payment wisely, thank you for the kind words and support

@selim3291 Жыл бұрын

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.

@user-fq7jf6cp9p 10 ай бұрын

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.

@yyk9881 Жыл бұрын

Easy to follow, voice is clear, explanations are perfect!!!!!!!

@Morexod999 2 жыл бұрын

It was helpful as hell, like a bless after hours spended with implicit google API docs

@fardinkashef3604 Жыл бұрын

That's how a tutorial should be. Great job. I really liked it.

@bugraotken 8 ай бұрын

Among all the other videos related with React and Google auth, this is the far most helpful video. I can't thank you enough =))

@oscargalvez7 Жыл бұрын

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 💯💯

@CooperCodes Жыл бұрын

Thanks so much for the comment! Glad the content was helpful :)

@oscargalvez7 Жыл бұрын

@@CooperCodes Sure it was, I already implemented it into my app. Great work!

@suryaafs Жыл бұрын

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

@CooperCodes Жыл бұрын

You're very welcome, glad it helped you out especially in that specific scenario :)

@merzeofficials7344 8 ай бұрын

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

@selectablekitchen5315 Жыл бұрын

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

@davidharmeyer3093 2 жыл бұрын

This is insanely helpful. Thanks so much.

@elpeliculero5570 Жыл бұрын

Thanks so much for your thoughtful and detailed videos! On to the soft!

@ajdin1250 2 жыл бұрын

Awesome explanations, thank you very much Sir.

@user-fv7vy7dq4f 6 ай бұрын

Awesome!! Clear and accurate explanation. It helps me a lot. Thank you so much!

@lowmikow1099 3 ай бұрын

Thank you som much for this tutorial! I've been looking for well-explained installation and usage of the new Google login!

@frontend_ko 4 ай бұрын

thanks, man. it works perfectly. instruction is simple and concise

@PersianShare Жыл бұрын

JUST WOOOW, super clear, I WISH I COULD HAVE LIKE THIS VIDEO MORE THAN ONCE

@CooperCodes Жыл бұрын

You can like this comment too! Thanks for watching hahaha

@HemantDuttaHD 2 жыл бұрын

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!

@CooperCodes 2 жыл бұрын

You are absolutely welcome, glad to see my video got you on your way.

@weizhao7896 2 жыл бұрын

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

@HemantDuttaHD 2 жыл бұрын

@@weizhao7896 I followed this tutorial and things worked perfectly

@ayushnegi3610 2 жыл бұрын

From javascript mastery right?

@weizhao7896 2 жыл бұрын

@@ayushnegi3610 for me, yes. Lol

@johnfox4914 2 жыл бұрын

Well done, thank you for this tutorial.

@ShakilKhatri1 9 ай бұрын

This is exactly what I was looking for! Thanks!

@Bruno87198 2 жыл бұрын

Thanks for the video! The "/* global google */ explanation was really helpful!

@CooperCodes 2 жыл бұрын

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

@hassaanhameed9624 Жыл бұрын

Good tutorial, Thanks a lot, It was simple and concise.

@mohsenahmadi4851 2 жыл бұрын

Thanks for such a great tutorial. It was really helpful!👍🏻💯

@CooperCodes 2 жыл бұрын

Thank you so much for the comment! Appreciate the support

@condorkunka 5 ай бұрын

Thank you, Cooper Code, for providing such a through explanation! It was incredibly helpful.

@PetriikVx Жыл бұрын

Simple and amazing, thank you!

@shireensheikh505 6 ай бұрын

2024 Jan- this works! Thanks man for making this video! Helped me loads

@abdirisaqqasim3726 Жыл бұрын

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.

@temiemmanuel3580 2 жыл бұрын

Awesome! Learnt a few tricks from this.

@getachewsharew5904 Жыл бұрын

Life Saving. God bless you bro.

@karengallardo4480 Жыл бұрын

I tNice tutorialnk you speak for a good portion of us.

@realhavir1295 2 жыл бұрын

Life saving my man, life saving!

@Chase20224 Жыл бұрын

Thanks! Your video content is the safest and most useful

@kaaarkaaa3492 Жыл бұрын

Agreed. All the others just turn your brain upside down. Nice tutorials is simple.

@user-yp2ic9ol1m 2 жыл бұрын

i really appreciate it! Exellent tutorial! from korea

@rahulprajapat1087 Жыл бұрын

Great Work Bro , Appreciated !!

@mohamadelhamed1098 Жыл бұрын

ITS WORKING! nice job dude

@LS_Roblox-DG Жыл бұрын

Thanks for sharing your valuable experience.

@imamhiday140 2 жыл бұрын

Truly life saver, thank you for the code i really apreciate it !

@CooperCodes 2 жыл бұрын

I got you! Thanks for watching

@carmelchurchsatchiyapuram2292 Жыл бұрын

you are literally the best

@guruigang Жыл бұрын

Thank you so much. So clear.

@dheerajs5774 2 жыл бұрын

Great! Thanks for the solution.

@lorimerjenkins6265 Жыл бұрын

LOVE IT !!!

@davidjunior390 2 жыл бұрын

Overall best tutorial on this... Many thanks!!

@CooperCodes 2 жыл бұрын

Thanks I really appreciate that!

@maxicraft8891 Жыл бұрын

Worked , thanks a lot!

@victorpaulguzmansoto5575 Жыл бұрын

Great, I'm lucky, it works great for me without errors

@Quo777 6 ай бұрын

Thanks a lot, you've save my day!

@bobross2404 Жыл бұрын

Great video, helped me create a sequence diagram for explaining this process. Liked!

@CooperCodes Жыл бұрын

Glad it was helpful :) thanks for watching

@dudewithdonuts7639 5 ай бұрын

Great tutorial man

@amanrawat9622 Жыл бұрын

Thanks works perfectly 🎉

@medweb8690 2 жыл бұрын

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.

@abdulladoo5096 Жыл бұрын

very much thank you! You are a really good teacher. Thank you again :)

@CooperCodes Жыл бұрын

Thank you kindly for the comment :) always appreciate those who are willing to learn, thank you for the kind words.

@LuisPerez-MATB 9 ай бұрын

Perfectly working October 2023, thanks for the tutorial! Very easy and understandable

@user-gm3xp8yi9b 8 ай бұрын

hey i need help , idk there is an error jwt_decode is not a function can you help me with this?

@simransingh5496 7 ай бұрын

@@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).

@benjamingartner5288 Жыл бұрын

Insane thank you man!

@saerakurbanova680 Жыл бұрын

thank you so much for this tutorial❤❤❤

@davidcain3247 Жыл бұрын

Dude, you rock.

@LordKaos666 Жыл бұрын

Really, a very useful video, thanks!

@mtejera Жыл бұрын

Thank you so much! Amazing and straightforward tutorial. I appreciate it a lot!

@CooperCodes Жыл бұрын

Miguel thank you so much for watching and leaving a comment. I appreciate you back :)

@durgaprasadthandra4066 Жыл бұрын

Can any one help me I got "Google is not defined" error

@williamcuervo4252 Жыл бұрын

up to now. Your soft is great too!

@benjaminomwenga9493 2 жыл бұрын

thanks a lot!!! so nice reverb

@augustofirpo5313 Жыл бұрын

Great video!

@faheemahmad5882 Жыл бұрын

You are so underrated 🙌 thanks

@CooperCodes Жыл бұрын

Thanks for watching Faheem, appreciate yah :)

@auditrihumbas177 Жыл бұрын

Nice tutorial Michael,

@antoniutzu Жыл бұрын

big like brah, thanks!

@aqua-vc2oe Жыл бұрын

there! Thanks a lot for the help, I'm going to subscribe to your channel and keep up with all the videos!

@rafayzia4180 2 жыл бұрын

Thanks a bunch bro!

@kushagra4401 2 жыл бұрын

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

@CooperCodes 2 жыл бұрын

Glad to see it was helpful! Thank you for watching and supporting :)

@kushagra4401 2 жыл бұрын

@@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 2 жыл бұрын

can u send the code?? It's too long to write :{

@kushagra4401 2 жыл бұрын

@@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 }); }, []);

@rajatkushwaha279 2 жыл бұрын

@@kushagra4401 Thanks :)

@alexiscarreramorales6080 2 жыл бұрын

Gracias por el video. Fue de mucha ayuda

@zahraalipour4122 2 жыл бұрын

It was Great, Thanks

@Magnify. Жыл бұрын

If the user logged in and then refreshed the page will it undo their log in and ask them to log in again?

@tajindersingh806 Жыл бұрын

great booster, thanks you bro

@JackKrivan Жыл бұрын

Your a life saver tipo thank you for this I've been struggling with this for weeks now thank you

@CooperCodes Жыл бұрын

Glad I could help, thanks for watching!

@durgaprasadthandra4066 Жыл бұрын

Bro I am struggling Can any one help me I got "Google is not defined" error

@JackKrivan Жыл бұрын

@@durgaprasadthandra4066 nah for some reason this stopped working for me

@icebare139 Жыл бұрын

Thanks. really helpful

@ashok2089 9 ай бұрын

Thank you so much!

@luberalexanderechavarriabe4156 Жыл бұрын

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)

@Manja-rd3dr Жыл бұрын

Thanks 😃

@DanielMShawn Жыл бұрын

This saved me hours, thank you!

@solo-yl8uc 11 ай бұрын

thanks, but I wonder why is he didn't get an google doesn't exist error...

@charleneleclerc9205 10 ай бұрын

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

@FGA-47 Жыл бұрын

this was really helpful. Thank You

@CooperCodes Жыл бұрын

I got you :)

@mahdirafi6537 4 күн бұрын

Very helpful... Thanks a lot

@foreigner268 2 жыл бұрын

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.

@georgenwankwo2881 2 жыл бұрын

Great Tutorial! But i have a question. Your tutorial made use of jwt token but mine returns an access token which can't be decoded the way you did with the jwt. How do i go about this?

@MatheusFerreira-ut5tc Жыл бұрын

Thank you for saving my life in my job lol

@DhruvGoel-jc1lp Жыл бұрын

Thanks alot man this video really helped me

@CooperCodes Жыл бұрын

You're welcome! Glad it helped :)

@GURUPRASAD-wd6dv Жыл бұрын

Thanks for tutorial

@carriep7812 11 ай бұрын

This was awesome! Thanks for putting it out there

@amirv1347 2 жыл бұрын

So UseFul Tnx

@Patwal77 11 ай бұрын

Thanks! way better than google documentation.

@CooperCodes 11 ай бұрын

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.

@KamTuPLAY 2 жыл бұрын

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)))

@CooperCodes 2 жыл бұрын

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 :)

@pippinbloom Жыл бұрын

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!!

@forever-knight Жыл бұрын

Thanks man it helped me too

@elonspapa7393 2 жыл бұрын

hi, im in the middle of building an app script for google sheet, and trying to publish, but it's asking me to make a demo using the client id and also following the sign in branding guideline. can you make a video to show how it's done please?

@juanpedro_mario Жыл бұрын

Thanks a lot for this video, super helpful. Please how do I style the button? Too small for where I want to use it

@hamednaderi7675 Жыл бұрын

many thanks 🙏

@HuKuTozZ Жыл бұрын

Best guide. Thank you

@CooperCodes Жыл бұрын

Best guy. Thank you

@umairkiani3391 Жыл бұрын

Thank you so much , your video helped alot.

@CooperCodes Жыл бұрын

You are very welcome! Thank you for watching :)

@mymysticvoyages 3 ай бұрын

You are a 10 on 10

@franciscojaviercaballe9816 Жыл бұрын

Thank you!!

@solo-yl8uc 11 ай бұрын

thank you so much sir

@anoopisaac 8 ай бұрын

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?

@chetanarora7402 Жыл бұрын

Thanks man. I was struggling to find the google auth latest solution.

@apexyu164 Жыл бұрын

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?

@tudoreugenchindea2414 Жыл бұрын

Amazing video. I need to integrate this to my spring boot backend which uses JSESSIONID. Do you know how I could integrate that from this JWT token?

@goksuokar288 Жыл бұрын

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.