KZhead

Google Authentication With React JS & Firebase - Sign In With Google - Firebase v9

Code Commerce
2024 ж. 9 Мам.
52 867 Рет қаралды
Жүктеу

In this video I demonstrate how to use Google authentication with Firebase using React JS. We will focus on two separate ways to authenticate with Google. (Sign in with a google popup) or (Redirect to Google Page). We will store all of the logic in Context for managing the authenticated state of the user.
Thank you for watching.
Please use your own keys- they are free!
If you are interested in authentication with an email & password then you can view that here!
• React Firebase Authent...
Github Repo:
github.com/fireclint/google-a...
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

Пікірлер

  • Man, this saved me a major headache. I wanted to implement Firebase on an app that was working with Sanity previously, which was using OAuth. It has been a while since I last worked with Firebase, so not only this was a great refresher but saved me a long time going through documentation. Really appreciate it.

    @TangiersIntrigue@TangiersIntrigue Жыл бұрын

    • Thank you my friend

      @codecommerce@codecommerce Жыл бұрын

  • Anytime I need to add authentication to my projects I just come back here You save me everytime😂

    @DexterrrrX@DexterrrrX Жыл бұрын

    • Thank you dude! Awesome!

      @codecommerce@codecommerce Жыл бұрын

  • Very good tutorial, I'm Brazilian and even reading the caption I managed to learn a lot, thank you very much 💯🙂

    @gabrielsuptitz1624@gabrielsuptitz1624 Жыл бұрын

  • Much needed. I was looking for this for a big project. Thanks a lot. Funny how a video of a year old is still relevant

    @babatundetaiwo5184@babatundetaiwo518410 ай бұрын

    • Glad it was helpful!

      @codecommerce@codecommerce10 ай бұрын

  • Bro this was one hell of a fire tutorial!!! The guide was splendid, pretty much straightforward and very easy to understand!!! Thank You!!

    @thecowmilk4857@thecowmilk4857 Жыл бұрын

    • Thank you my friend!

      @codecommerce@codecommerce Жыл бұрын

  • This has been the first time I never had any issues while following the tutorial. Everything is upto date and clearly explained. Thank you so much for making this tutorial and saving hrs of pain staking stackoverflow and docs browsing.

    @akarshanmishra2351@akarshanmishra2351 Жыл бұрын

  • Between all the conflicting and out of date information, I've been stuck trying to learn authentication using Firebase for literally months. You've helped me to finally start getting a handle on it. Thank you, sincerely.

    @jltg34@jltg347 ай бұрын

  • Thank you Clint , your videos are awesome , you explain while showing how its done ..Keep the good work going ...👍

    @jezuschrist7120@jezuschrist71203 ай бұрын

  • I was one video away from pausing Programming for a few weeks, luckily the video was yours. Thx so much, great vid. Have a nice Day.

    @Ni3o@Ni3o Жыл бұрын

    • So awesome dude. Keep it going 💪

      @codecommerce@codecommerce Жыл бұрын

  • Hi.. awesome video.. havent completed it yet but its turning out great.. quick question - do u have one where you integrate apple log in? what if i want google and apple login on the same application? Also once user logs in.. what if i want them to input data to a table using firestore, can it use the same log in? thanks..sorry im a newb!

    @bravo1oh1@bravo1oh1 Жыл бұрын

  • Great tutorial and easy explanation thank you sir

    @ermiyasb1453@ermiyasb14538 ай бұрын

  • Man thank you so much for this video. I couldn't fix my Firebase issue and your video just saved hours of my time.

    @duyhuynhnguyentuan6266@duyhuynhnguyentuan626610 ай бұрын

    • Glad it helped

      @codecommerce@codecommerce10 ай бұрын

  • I hardly understand English, but it was easy to understand as I followed it one by one. Thank you!

    @studying_timelapse@studying_timelapse Жыл бұрын

    • Thank you my friend!

      @codecommerce@codecommerce Жыл бұрын

  • Great Tutorial , easy to understand. I had no problems implementing this in my App. Thanks!

    @devashish-soni@devashish-soni8 ай бұрын

  • Easy to understand and implement to my project :-) Thank you!

    @janmacek346@janmacek346 Жыл бұрын

  • Can I ask what you're listening to around 17:00? sounds like some wave music 🌊

    @neilmerchant2796@neilmerchant2796 Жыл бұрын

  • Bro, hope you will keep going with such great tutorials. Thanks a lot!

    @pawe7420@pawe742011 ай бұрын

    • Thank you so much dude!

      @codecommerce@codecommerce11 ай бұрын

  • Thank you so much!! Amazing tutorial!

    @sza619@sza6198 ай бұрын

  • You look like a college dropout without a beard haha, you are one of the most valuable youtube channels, continue to develop as you do!

    @betterbehappythannot3605@betterbehappythannot3605 Жыл бұрын

    • Haha perhaps I need to grow that beard back. I actually never went to college!! I went to a trade school and became a firefighter/paramedic.

      @codecommerce@codecommerce Жыл бұрын

  • The best tutorial, saludos de Argentina! keep doing this videos pls 🔥🔥🔥🔥

    @lean9875@lean9875 Жыл бұрын

  • Earned my sub. It’s exactly what i needed. Than you

    @benjamincabalona9014@benjamincabalona90146 ай бұрын

  • Great video 👍made it a little more challenging since I was using typescript while following this and it kept giving me type errors. Chat gpt helped me fix those errors but if you have any advice on how I can fix typescript errors when working in javascript that would be great.

    @sergiohernandez72@sergiohernandez72Ай бұрын

  • Thank you a lot! You just save my college project 🙏

    @_moonxd667@_moonxd66712 күн бұрын

  • Nice man, thanks for this tutorial, the difference to me is that i using the redux and this tutorial helped me to make enjoy your exemples

    @GabrielPereira-hd8tc@GabrielPereira-hd8tc15 күн бұрын

  • Love this one! Very helpful... Thanks alot ❤️

    @iam_bammy4125@iam_bammy4125 Жыл бұрын

    • So glad!

      @codecommerce@codecommerce Жыл бұрын

  • Yo man.. i got the apple log in to work! .. feels great.. quick question.. why does the protected route show for a split second. how do u not have that happen.. ive searched google but no one talks about it? did we do something wrong?

    @bravo1oh1@bravo1oh1 Жыл бұрын

  • Man you saved my file. I needed this so bad - thank you so much

    @nicolas____@nicolas____10 ай бұрын

    • Glad I could help!

      @codecommerce@codecommerce10 ай бұрын

  • Thanks for the complete and to-the-point tutorial

    @aliwarraich5067@aliwarraich5067 Жыл бұрын

    • Thank you Ali!

      @codecommerce@codecommerce Жыл бұрын

  • does this work in NextJS? I know they have their own as well

    @TheAppliancePlug@TheAppliancePlug Жыл бұрын

    • Yes it does, you can also use “NextAuth”

      @codecommerce@codecommerce Жыл бұрын

  • EXPECTING FROM LONG TIME

    @dharmeshgohil9375@dharmeshgohil93752 жыл бұрын

  • Is there anyway to change the project name after "to continue to" ?

    @danarichards1765@danarichards17656 ай бұрын

  • Thank you for the tutorial! Just a little feedback; but it would be nice, if the music wasn't so distracting. Use something more relaxing or give us the option to run our own :)

    @LetsPlayLuffy@LetsPlayLuffy Жыл бұрын

    • Thank you Luffy, I’ll find something a little more relaxed.

      @codecommerce@codecommerce Жыл бұрын

  • That was very helpful. Thank you sir.

    @yusufaltundal3482@yusufaltundal3482 Жыл бұрын

  • For me does not work and say that hooks can only be called inside of the body of a function. Do you know to fix that issue??

    @chrisskyr623@chrisskyr623 Жыл бұрын

  • Thank you so much 😇 looking forward to more of this really good explanation

    @faroukayomide5214@faroukayomide5214 Жыл бұрын

    • Thank you Farouk!

      @codecommerce@codecommerce Жыл бұрын

  • it´s amazing , i feel lucky to have found this channel, txk very much!

    @elguirius521@elguirius5212 жыл бұрын

    • Dude thank you for the kind words!

      @codecommerce@codecommerce2 жыл бұрын

  • This is awesome, thank you so much!! So helpful

    @mzattzila89@mzattzila89 Жыл бұрын

    • Thank you!

      @codecommerce@codecommerce Жыл бұрын

  • Using this method when i import the logOut and User in the Navbar it causes an error saying intermediate values undefined

    @AhmadMughal1@AhmadMughal110 ай бұрын

  • User hook is set to null again and agian, whenever i click on login button, for some second its showing account page, then immediately hook set to null, why this is happening?

    @PRITPAL1999@PRITPAL199911 ай бұрын

  • Super helpful video that saved me a lot of time, thank you man

    @casparbroekhuizen4854@casparbroekhuizen4854 Жыл бұрын

    • Thank you so much Casper!

      @codecommerce@codecommerce Жыл бұрын

  • always concise and to the point, aweome video. (y)

    @aaaliii4u@aaaliii4u Жыл бұрын

    • Thank you my friend!

      @codecommerce@codecommerce Жыл бұрын

  • Incredible ! The only video that helped me with this topic. Thank you !!! +1 sub

    @wendeldev@wendeldev Жыл бұрын

    • Thanks Wendel

      @codecommerce@codecommerce Жыл бұрын

  • Great video, just a question, what's the name of your vscode theme, as i know is One Dark Pro but when i install that theme is not like yours, it'd be nice if you share with me what's the name of your theme :)

    @kunjolee9243@kunjolee92432 жыл бұрын

    • Hey dude! I just recently changed it since that video but I’ll have to check. It was one of the variants of One Dark Pro!

      @codecommerce@codecommerce Жыл бұрын

  • wow, i love this video, it's helpful with my project. Thanks a lot

    @bydroro5251@bydroro5251 Жыл бұрын

  • thanks mate, It was useful vid to learn basic steps of google login 😊

    @ergceme@ergceme Жыл бұрын

    • Thank you Cem!

      @codecommerce@codecommerce Жыл бұрын

  • Thanks, was able to do it the first time

    @user-uj8gg9dw5f@user-uj8gg9dw5f2 ай бұрын

  • Hii dude i try this code in codesandbox but I got error in Authcaontext The error is 'return outside the function ' how to solve this error please help me

    @Upendar_nani_222@Upendar_nani_222 Жыл бұрын

  • i have successfully authorized using google, but i want to add import form drive feature. can you please help me

    @nafisfaiyaz2791@nafisfaiyaz2791 Жыл бұрын

  • HI sir great video can anyone help actually i made todo app and learning for authentication can you suggest how to display todo of particular user from firebase as i am a newbie

    @dddoes9528@dddoes9528 Жыл бұрын

  • hey bro , in phone i can't sign up ?? but in computer si ??

    @Achrafrzz@Achrafrzz5 ай бұрын

  • hey Clint, when I do this I get an error auth/operation is not allowed. Can you help me??

    @Triwizard109@Triwizard109 Жыл бұрын

  • Great explanation, but this is not working for me atm because CORS is blocking the Popup, is there a workaround this?, cant find it anywhere, seems that a lot of people having the same problem using google Authentication with Firebase at this moment

    @fabioaurora@fabioaurora9 ай бұрын

    • CORS can be a little tricky and is certainly annoying!

      @codecommerce@codecommerce9 ай бұрын

  • how can fix the useEffect warning???

    @Simonnava1@Simonnava1 Жыл бұрын

  • Thanks man for the amazing tutorial . ❤❤

    @azizcodes@azizcodes Жыл бұрын

    • Thank you!

      @codecommerce@codecommerce Жыл бұрын

  • Great tutorial! Thank you so much very much appreciated.

    @robinsonzapata1@robinsonzapata1 Жыл бұрын

    • Thanks!

      @codecommerce@codecommerce Жыл бұрын

  • Great video , saved me a lot of time.

    @siddhant3852@siddhant38522 жыл бұрын

    • That’s so awesome!

      @codecommerce@codecommerce2 жыл бұрын

  • Smashed the like button so hard it might have broke my screen!😐 Thank you for this amazing guide

    @sumeetsuryawanshi8384@sumeetsuryawanshi83842 ай бұрын

    • Haha thanks man!

      @codecommerce@codecommerce8 күн бұрын

  • I'm using signInWithRedirect and testing it out on the server with my iPhone and my dad's Samsung phone and neither of them can login. When I hit the google button it just does nothing. This works exactly how it is in the video on my desktop but just not on mobile phones. Any ideas anyone? Also I have downloaded your version from github and tried it, same issue unfortunately Update: just added my ip address to the Authorized domains in Firebase and it works now. However after signing in with google, when it redirects me back to my page it doesn't sign in as if user is null. Same with github version. Any ideas?

    @martinthomas8955@martinthomas8955 Жыл бұрын

    • Did you got a solution I am also having same issue

      @akshittyagi4068@akshittyagi406811 ай бұрын

  • Normally I never comment on any coding tutorial I have watched, bu this time I make an exception. This is a very good explanatory crash course regarding Firebase authentication process. I really appreciate your kind work, thank you brother.

    @halocano5509@halocano5509 Жыл бұрын

    • Thank you my friend! 🙏

      @codecommerce@codecommerce Жыл бұрын

  • Hi if possible, could put a tutorial video about after gmail account login in, how to connect with firestore. I repeated Crpyto tutorial to build email login and connect firebase, then I put a google login button in SignIn page. How can make two login methods working for same collection in firestore.

    @liuyan8066@liuyan8066 Жыл бұрын

    • Ah I see, that would get a little tricky.

      @codecommerce@codecommerce Жыл бұрын

  • 🙏🏼🙏🏼your videos are very helpful😊. can you add more features on that firebase video or start a new reactjs CRUD application (login + register + CRUD)

    @fjj813@fjj8132 жыл бұрын

    • Thank you dude! Yes, I am working on a project with Firebase Auth coupled with firestore db.

      @codecommerce@codecommerce2 жыл бұрын

    • @@codecommerce 🙏🏼🙏🏼🙏🏼

      @fjj813@fjj8132 жыл бұрын

  • Thank you for your video, this is the most understandable tutorial for teaching firebase. I got 4 errors in 21:53, about "Uncaught TypeError: Cannot destructure property 'user' of '(0 , _context_AuthContext__WEBPACK_IMPORTED_MODULE_1__.UserAuth)(...)' as it is undefined. at Navbar (Navbar.jsx:6:1)" all the code is same as you did. I don't know how comes. Thank you.

    @liuyan8066@liuyan8066 Жыл бұрын

    • figure out

      @liuyan8066@liuyan8066 Жыл бұрын

    • Good

      @codecommerce@codecommerce Жыл бұрын

    • @@liuyan8066 hey I've been debugging the same problem for a while now! How did you figure it out?

      @isabellaqian7535@isabellaqian7535 Жыл бұрын

    • @@isabellaqian7535 I put out of , made that error. 😛

      @liuyan8066@liuyan8066 Жыл бұрын

  • this video is helpful for me thanks for this video

    @laila-tul-noorahmed5336@laila-tul-noorahmed5336 Жыл бұрын

    • Glad it helped - thank you!

      @codecommerce@codecommerce Жыл бұрын

  • Thanks a lot!!!!

    @samuelerbo@samuelerbo4 ай бұрын

  • I loved your video. But may I suggest not using the music in the background, we are way too interested in what you're speaking.

    @Ash-ko8qp@Ash-ko8qp10 ай бұрын

  • Hi I followed your tutorial but the items in the store gets lost after I refreshed the page.

    @sixtusonyedibe1619@sixtusonyedibe16192 жыл бұрын

    • Do you have a link to a github I can see?

      @codecommerce@codecommerce2 жыл бұрын

    • Hey is it solved?

      @kavascgjmd5790@kavascgjmd5790 Жыл бұрын

  • thank you so much man.

    @alifhasanshahOfficial@alifhasanshahOfficial Жыл бұрын

    • Thank you dude!

      @codecommerce@codecommerce Жыл бұрын

  • Thank you alot, Can u make a videos react firebase auth v9 one device is allowed at a time??

    @coodementor6826@coodementor6826 Жыл бұрын

    • Like the user can only be logged in on one device at a time?

      @codecommerce@codecommerce Жыл бұрын

    • @@codecommerce Yes sure, example: netflix does

      @coodementor6826@coodementor6826 Жыл бұрын

  • OMG😍😍😍😍 This is premium!

    @staymotivated1204@staymotivated1204 Жыл бұрын

    • Thanks dude!

      @codecommerce@codecommerce Жыл бұрын

  • thank you

    @mahdihossen9526@mahdihossen952610 ай бұрын

  • Great video, thank you!

    @andersbraathen1256@andersbraathen1256 Жыл бұрын

    • Thank you Anders

      @codecommerce@codecommerce Жыл бұрын

  • Amazing video, the goat

    @c.p.carminameza1057@c.p.carminameza1057 Жыл бұрын

    • Thank you CP! 🙏

      @codecommerce@codecommerce Жыл бұрын

  • can you do one for facebook? or is it the same logic for all social media authentication?

    @Reverse-sg5rn@Reverse-sg5rn Жыл бұрын

    • Reverse- yes, you would need a Facebook developer account to get your keys.

      @codecommerce@codecommerce Жыл бұрын

  • Whats the music playlist? 😀

    @developedbypy@developedbypy Жыл бұрын

    • Just some random mix on “epidemic sound”. Never heard of the songs before but was feeling those beats!

      @codecommerce@codecommerce Жыл бұрын

  • 19:15-19:36 That moment when your camera freezes

    @avi12@avi123 ай бұрын

  • waiting for gmail,facebook and instagram login using react tutorial

    @dharmeshgohil9375@dharmeshgohil93752 жыл бұрын

    • You got it dude!

      @codecommerce@codecommerce2 жыл бұрын

    • thank you

      @dharmeshgohil9375@dharmeshgohil93752 жыл бұрын

  • Thank you🙌

    @kg_khangelani@kg_khangelani Жыл бұрын

  • tanks

    @Mega-gb1yk@Mega-gb1yk2 жыл бұрын

  • you look like Hank Schrader :)

    @mihirlakhamje9575@mihirlakhamje95754 ай бұрын

    • lol the bald guy from breaking bad? I'm not sure how i feel about that! hahaha

      @codecommerce@codecommerce3 ай бұрын

  • signInWithPopup not woking on mobile.how to fixed it sir

    @ZweL2001@ZweL2001 Жыл бұрын

    • Hmm do you have a gh?

      @codecommerce@codecommerce Жыл бұрын

  • When a Website using React + headless CMS?

    @not.a.n@not.a.n2 жыл бұрын

    • That would be awesome!

      @codecommerce@codecommerce2 жыл бұрын

  • Great Video!

    @maplestoryinchinese@maplestoryinchinese Жыл бұрын

    • Thanks!

      @codecommerce@codecommerce Жыл бұрын

  • Best 🎉

    @habeebullahokunlola8154@habeebullahokunlola8154Ай бұрын

  • Awasome content, Thanks.

    @thecno@thecno Жыл бұрын

    • Thank you Fernando

      @codecommerce@codecommerce Жыл бұрын

  • why likes are so low, thannnnnnnnnnnnnnnnnnnnnnnnnnkkkkk yoooooooooooooooooooooooooou. Just saved me.

    @abdullahsohail1781@abdullahsohail17813 күн бұрын

    • just subscribed

      @abdullahsohail1781@abdullahsohail17813 күн бұрын

    • just subscribed

      @abdullahsohail1781@abdullahsohail17813 күн бұрын

    • Appreciate you dude!

      @codecommerce@codecommerce3 күн бұрын

  • I cant try in next js bruhh

    @samsuriahmad2128@samsuriahmad2128 Жыл бұрын

  • super helpful video

    @MANASDEWARIMVCS@MANASDEWARIMVCS Жыл бұрын

  • excellent job

    @GenerativeAI786@GenerativeAI786 Жыл бұрын

    • Thank you! Cheers!

      @codecommerce@codecommerce Жыл бұрын

  • fist

    @13_egagofurtriwahana82@13_egagofurtriwahana822 жыл бұрын

  • Great video

    @ricardocarvalho4346@ricardocarvalho4346 Жыл бұрын

    • Thanks man!

      @codecommerce@codecommerce Жыл бұрын

  • one request, please dont use background music

    @rakaa31@rakaa31 Жыл бұрын

    • Thank you Rakaa, was it overpowering?

      @codecommerce@codecommerce Жыл бұрын

  • please dont use background music in explanation videos its disturbing and deconcentrating, but great video otherwise

    @NagatoKamiPain@NagatoKamiPain Жыл бұрын

    • Thank's GG

      @codecommerce@codecommerce Жыл бұрын

  • Please don't add bg music. It is VERY distracting.

    @ashmitsharma9096@ashmitsharma9096 Жыл бұрын

  • Why you don't make a full e-commerce project free or paid no problem

    @mohamedtarek5183@mohamedtarek5183 Жыл бұрын

    • Thank you for the motivation Mohamed! I will in time! I am enjoying the process!

      @codecommerce@codecommerce Жыл бұрын

  • plzzz dont put songs in background

    @rhythm_kumawat@rhythm_kumawat Жыл бұрын

    • You got it

      @codecommerce@codecommerce Жыл бұрын

  • Try not to put music in bg

    @HarshSingh-un5kh@HarshSingh-un5kh Жыл бұрын

    • No more music in the bg :)

      @codecommerce@codecommerce Жыл бұрын

  • @abdulmomin-yq4mt@abdulmomin-yq4mt Жыл бұрын

    • Whats up man!

      @codecommerce@codecommerce Жыл бұрын

  • Thank you very much Boss 🫡

    @rungxanh2901@rungxanh2901 Жыл бұрын

    • Thanks Joe!

      @codecommerce@codecommerce Жыл бұрын
KZhead