Firebase Authentication Tutorial #4 - Setting up Firebase Locally

Hey gang, in this Firebase Auth tutorial I'll show you how to set up firebase on the front-end in your application, to connect to our back-end project. We'll do this by loading the Firebase SDK into our HTML page.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

+ Firestore Playlist -

+ Materialize Playlist -

🤑🤑 Donate


🎓🎓 Find me on Udemy

[RobinHilton]

As of version 5.10.1 you will no longer need to add the "timestampsInSnapshots" part :)

[mog]

This is absolutely awesome and I'm loving this series. Just for other users here, if you have an OAuth error in your console while setting up and you're using Visual Studio Code, make sure you add that live server link (127.0.0.1 for me) to the *Authorised Domains* list in FireBase console so that firebase will properly connect. That is, *Firebase console --> Authentication --> Sign-In Method --> Authorised Domains --> add Domain --> "**127.0.0.1**"*

[wisdomkapende]

i really enjoying these firebase tuturials nice work net ninja

[Cho]

I have just finished taking notes. You are great as always. Thank you! You're going to be back on Monday, aren't you? Have a good weekend:)

[hojdog]

I like that you start from scratch and don't use boilerplate, even if the focus is on something else. Nothing more of a turn off than being faced with unfamiliar code right off the bat.

[iamtafara]

who else likes his videos while waiting to skip the first ad, , , , :)

[devlrn]

I already liked your video before watching it complete...😀 Nice lesson!

[MichalBurzynski]

First of all, thanks a lot The Net Ninja, I have learned a ton from your YouTube tutorials and your Vue + Firebase udemy course was great as well, I even made my own Vue application based on knowledge I got from this course. But I want to ask, do you plan to make some tutorials in the future about more production ready JavaScript code, something about unit testing, MVC patterns, you know more advanced stuff. I feel like I got to the point, where many tutorials are too easy, and there is not enough stuff for advanced coding.

[danielmunch]

Would I need to add that on all my HTML pages, or just the login/signup?

[DA-cvxv]

Hello, Shaun - Can you address if we should, or how we should, hide or obfuscate the Firebase config variables? I've read several forum posts elsewhere that it's not required to do so, but I'm still a little unclear as to why this isn't needed. Correct me if I am wrong, but these variables are accessible client-side. I realize that a wrong-doer would need user credentials (user login), but it still bother's me that this information is accessible. I also understand that there are ip/website-ip white-listing abilities within Firebase, but I'm unsure how this works exactly. Thank you in advance.

[lennelson]

funny - git copilot likes and knows about your video since it is writing your code for me :)

[chrisconnelly]

Do we need to have the SDK link above the auth code if we have it in header from the firestore tutorial?

[chardyndiki]

Hello,

I have a question, shouldn’t we have the auth logic handle by an api gateway? Wouldn’t it be safer? I’m trying to get my ahead around the safest architecture model. Answer thought?

[CDO]

I guess it's completely different in 2021...

[williamhinson]

Would appreciate a guide on how to do this with Webpack..

[cesarp]

config variables in a client page.. can this one not be copied and run to create their own users in another machine? is there a way to whitelist who call this parameters? or do I have to do this behind cloud functions or a backend server to protect this query tokens?

[TutunSadhukhan]

if i use realtime database instead of firestore should i use same sdk??or any additional is needed??

[jahjahtruth]

I am getting an error that api key is not found. Any idea why that would be happening?

[tonjoyr]

Is it safe to place firebaseconfig on index.html??? or we should create another js file for this ?

[kevlarkode]

Can this be still done with spark plan?