Setting Up Google Authentication in Firebase 9: A Step-by-Step Guide

[@cr_spirit3986]

I saw an hour long tutorial for this which was much more complicated. Bro explained auth in 10 minutes. Damn amazing!

[@brettwestwooddeveloper]

Awesome! Thanks for the kind words!

[@cr_spirit3986]

@@brettwestwooddeveloper Could you also make a video for firestore? That'd be amazing...

[@Techn0mancer_X]

I have been struggling with how to add Google as an authentication provider for my app, and in 15 minutes you solved my problem. THANK YOU VERY MUCH (sorry for the caps)

[@brettwestwooddeveloper]

Awesome! I am glad I can hep. It definitely is frustrating when you can't figure something out.

[@darlinmanuelcasadoperez1092]

Thank you for the great tutorial! keep up the good work buddy!

[@brettwestwooddeveloper]

Thank you! Will do!

[@andys_industries]

This tutorial was clean thanks fam...but it would be nice to extend it towards getting the user object too

[@nwekemaxwell6595]

yess!!! it worked you're a saver😁❤️❤️❤️ got stuck trying out the doc guide... been 2days... thanks 👍

[@brettwestwooddeveloper]

Glad I could help. I was stuck on the docs for a minute too!

[@notleai]

awesome tutorial bro

[@brettwestwooddeveloper]

Thank you!

[@arokoyuolaniyi3103]

Thanks for simplifying

[@Harmansingh-i9b5k]

great video!!

[@brettwestwooddeveloper]

Thank you!

[@brendansullivan4872]

If you put those in a .env file a nice way to get hacked is to look in your build folder an retrieve it from inspect menu.

[@brettwestwooddeveloper]

Curious, so you are saying somebody can hack a .env file?

[@brendansullivan4872]

It blew my mind when I saw it but while at work what happened was a friend of mine goes into the build (sources I believe) and you can see the values directly in there because it gets injected when you build. The good news is the config file for firebase with the api key measurement etc is meant to be public facing. Not very usable for the hacker since you set the rules on the backend for Firestore and the real-time db etc. what you want to add though is app check. That buries any hacker trying to pull some shit because you can put recaptcha v3 where it’s automatic. When you do this you can choose any firebase add on to be enforced with it and they are blocked.

[@inchristtvke]

Much appreicated man. I was trying to set this up for my org and most people are overlooking a thing or 2 cause it always causes problems.

[@brettwestwooddeveloper]

No problem! Glad to hear I was able to help you guys out there!

[@sahillalani2]

would it be possible to do this with a V3 chrome extension as well that's coded in vanilla JS?

[@brettwestwooddeveloper]

I don't use Firebase much anymore

[@HosseinKalbasi]

wouldn't having the config secrets directly in the React app put security at risk? As it's Javascript and might be accessible in the UI. Is it possible to do the token generation on the backend? similar to when we do email/password login

[@brettwestwooddeveloper]

Yes you should have the config secrets in an .env file. Yes ideally you should do the token generation on the backend.

[@abhaygohel298]

If i use mobile than it is not woking.

[@Ravisingh21able]

can't believe you just clicked on "zoom-in" from the menu bar instead of using the keyboard shortcut, TWICE !!

[@brettwestwooddeveloper]

I am a noob

[@daubouin4ever]

thx

[@brettwestwooddeveloper]

No problem!

[@user-vm7xx3wi8cbz]

Do you need to do anything in Google Console as a prerequisite to this? The steps you follow when you want to buildin Google Sign In I mean..

[@brettwestwooddeveloper]

Just need a google account, so if you have a gmail you will be fine

[@frenchmike]

bro that was good, if you make a follow up on showing the user on the front end, plus signing off plus using a db with it, let me know

[@tonybenci2796]

Hi Brett. I wonder whether you've seen this issue? I have already gotten the Firebase/google working and all of a sudden it is throwing CORS warnings in the browser. I am working in React and NextJS and I have the same issue. Any ideas on this? Did you see any in your console for this application? Cheers Tony

[@SamIliya]

nice bruh

[@brettwestwooddeveloper]

Thank you

[@nwekemaxwell6595]

would be nice if you add a follow up on how to get the users object too🥺🥺

[@brettwestwooddeveloper]

will do

[@Nilesh-h6k]

Do you know how to do the same with python fastapi?

[@TheSEGFam]

Could you do a form collecting name etc to fire store and upload image for like a profile page? I'm stuck

[@brettwestwooddeveloper]

yes I can

[@TheSEGFam]

@@brettwestwooddeveloper that would be amazing. So what iv ran into is I have a form, with "upload profile picture" and (just for example) a realitor has a listing they want to highlight so a "product highlight" photo which I needs to go to FBstorage, then on the same form I have the basics name, email, etc that needs to go to fire store I CAN NOT get it to work.

[@tanksalif]

Thank you much G!

[@odogwu-1918]

You have a very nice content here,

[@odogwu-1918]

I want to also add that when you create content like this one you should actually create video for other problem people might encounter after they have done this. For example (now I am done with the google authentication, the next problem now is how do I know a user have signed in or signed out) its been three weeks judging from the time I am seeing on youtube this other solution should be out by now. Yeah it is your channel, but stuffs like this is what makes people to subscribe and wait for your contents

[@brettwestwooddeveloper]

Thank you very much!

[@brettwestwooddeveloper]

I can definitely make a video on this topic

[@odogwu-1918]

@@brettwestwooddeveloper You are welcomed

[@mullla1ya]

I feel so dumb with this: error loading dynamically imported module