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

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/fir...
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoff...
🔥 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

[@TangiersIntrigue]

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.

[@codecommerce]

Thank you my friend

[@jezuschrist7120]

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

[@DexterrrrX]

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

[@codecommerce]

Thank you dude! Awesome!

[@LetsPlayLuffy]

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

[@codecommerce]

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

[@Ni3o]

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.

[@codecommerce]

So awesome dude. Keep it going 💪

[@akarshanmishra2351]

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.

[@AhmadMughal1]

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

[@lean9875]

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

[@neilmerchant2796]

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

[@danarichards1765]

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

[@aaaliii4u]

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

[@codecommerce]

Thank you my friend!

[@fabioaurora]

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

[@codecommerce]

CORS can be a little tricky and is certainly annoying!

[@bravo1oh1]

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?

[@carminameza]

Amazing video, the goat

[@codecommerce]

Thank you CP! 🙏

[@martinthomas8955]

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?

[@akshittyagi4068]

Did you got a solution I am also having same issue

[@kg_khangelani]

Thank you🙌

[@MANASDEWARIMVCS]

super helpful video

[@coodementor6826]

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

[@codecommerce]

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

[@coodementor6826]

@@codecommerce Yes sure, example: netflix does

[@matheus-felipe-dev]

tanks

[@ZweL2001]

signInWithPopup not woking on mobile.how to fixed it sir

[@codecommerce]

Hmm do you have a gh?

[@not.a.n]

When a Website using React + headless CMS?

[@codecommerce]

That would be awesome!

[@Ash-ko8qp]

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.

[@ashmitsharma9096]

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

[@sumeetsuryawanshi8384]

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

[@codecommerce]

Haha thanks man!

[@NagatoKamiPain]

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

[@codecommerce]

Thank's GG

[@brendansullivan4872]

Problem is that you will get hacked with this approach. You have the file which will show up in the build when deploying this app. By hitting inspect you will see it in the sources and the directory of the build since the values will be hard coded there

[@dharmeshgohil9375]

waiting for gmail,facebook and instagram login using react tutorial

[@codecommerce]

You got it dude!

[@dharmeshgohil9375]

thank you

[@sergiohernandez72]

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.

[@GabrielPereira-hd8tc]

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

[@Selieznov]

only for me method with redirect dont work? Btw did someone tested method with popup on mobile browser? works from second time

[@PRITPAL1999]

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?

[@bravo1oh1]

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!

[@dddoes9528]

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

[@chrisskyr623]

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

[@rakaa31]

one request, please dont use background music

[@codecommerce]

Thank you Rakaa, was it overpowering?

[@TheAppliancePlug]

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

[@codecommerce]

Yes it does, you can also use “NextAuth”

[@fjj813]

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

[@codecommerce]

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

[@fjj813]

@@codecommerce 🙏🏼🙏🏼🙏🏼

[@abdullahsohail1781]

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

[@abdullahsohail1781]

just subscribed

[@abdullahsohail1781]

just subscribed

[@codecommerce]

Appreciate you dude!

[@_moonxd667]

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

[@janmacek346]

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

[@avi12]

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

[@liuyan8066]

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]

figure out

[@codecommerce]

Good

[@acrophobicgoose]

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

[@liuyan8066]

@@acrophobicgoose I put out of , made that error. 😛

[@Achrafrzz]

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

[@duyhuynhnguyentuan6266]

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

[@codecommerce]

Glad it helped

[@gabrielsuptitz1624]

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

[@jatinghetiya-g1n]

Thanks, was able to do it the first time

[@aliwarraich5067]

Thanks for the complete and to-the-point tutorial

[@codecommerce]

Thank you Ali!

[@studying_timelapse]

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

[@codecommerce]

Thank you my friend!

[@pawe7420]

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

[@codecommerce]

Thank you so much dude!

[@nicolas____]

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

[@codecommerce]

Glad I could help!

[@13_egagofurtriwahana82]

fist

[@nafisfaiyaz2791]

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

[@maplestoryinchinese]

Great Video!

[@codecommerce]

Thanks!

[@Upendar_nani_222]

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

[@devashish-soni]

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

[@benjamincabalona9014]

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

[@Triwizard109]

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

[@samsuriahmad2128]

I cant try in next js bruhh

[@jltg34]

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.

[@thecowmilk4857]

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

[@codecommerce]

Thank you my friend!

[@samuelerbo]

Thanks a lot!!!!

[@laila-tul-noorahmed5336]

this video is helpful for me thanks for this video

[@codecommerce]

Glad it helped - thank you!

[@habeebullahokunlola8154]

Best 🎉

[@mahdihossen9526]

thank you

[@bydroro5251]

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

[@liuyan8066]

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.

[@codecommerce]

Ah I see, that would get a little tricky.

[@mihirlakhamje9575]

you look like Hank Schrader :)

[@codecommerce]

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

[@sza619]

Thank you so much!! Amazing tutorial!

[@wendeldev]

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

[@codecommerce]

Thanks Wendel

[@yusufaltundal3482]

That was very helpful. Thank you sir.

[@babatundetaiwo5184]

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

[@codecommerce]

Glad it was helpful!

[@ermiyasb1453]

Great tutorial and easy explanation thank you sir

[@developedbypy]

Whats the music playlist? 😀

[@codecommerce]

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

[@thecno]

Awasome content, Thanks.

[@codecommerce]

Thank you Fernando

[@Simonnava1]

how can fix the useEffect warning???

[@betterbehappythannot3605]

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!

[@codecommerce]

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.

[@faroukayomide5214]

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

[@codecommerce]

Thank you Farouk!

[@kunjolee9243]

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

[@codecommerce]

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!

[@ergceme]

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

[@codecommerce]

Thank you Cem!

[@alifhasanshahOfficial]

thank you so much man.

[@codecommerce]

Thank you dude!

[@mohamedtarek5183]

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

[@codecommerce]

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

[@siddhant3852]

Great video , saved me a lot of time.

[@codecommerce]

That’s so awesome!

[@sixtusonyedibe1619]

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

[@codecommerce]

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

[@kavascgjmd5790]

Hey is it solved?

[@Reverse-sg5rn]

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

[@codecommerce]

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

[@robinsonzapata1]

Great tutorial! Thank you so much very much appreciated.

[@codecommerce]

Thanks!

[@elguirius521]

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

[@codecommerce]

Dude thank you for the kind words!

[@mzattzila89]

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

[@codecommerce]

Thank you!

[@dharmeshgohil9375]

EXPECTING FROM LONG TIME

[@javascriptcrafts]

Thanks man for the amazing tutorial . ❤❤

[@codecommerce]

Thank you!

[@casparbroekhuizen4854]

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

[@codecommerce]

Thank you so much Casper!

[@iam_bammy4125]

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

[@codecommerce]

So glad!

[@andersbraathen1256]

Great video, thank you!

[@codecommerce]

Thank you Anders

[@rhythm_kumawat]

plzzz dont put songs in background

[@codecommerce]

You got it

[@staymotivated1204]

OMG😍😍😍😍 This is premium!

[@codecommerce]

Thanks dude!

[@ricardocarvalho4346]

Great video

[@codecommerce]

Thanks man!

[@GenerativeAI786]

excellent job

[@codecommerce]

Thank you! Cheers!

[@HarshSingh-un5kh]

Try not to put music in bg

[@codecommerce]

No more music in the bg :)

[@halocano5509]

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.

[@codecommerce]

Thank you my friend! 🙏

[@abdulmomin-yq4mt]

[@codecommerce]

Whats up man!

[@rungxanh2901]

Thank you very much Boss 🫡

[@codecommerce]

Thanks Joe!