Vue 3 + Firebase Authentication in 10 Minutes

[@brunosargi7012]

I really just want to say "THANK YOU" for this amazing content. I used React for years and now decided to switch for Vue, and your channel is making my experience from "nice" to "omg I love Vue". So really thanks and please keep up with the amazing content!!

[@miraztisha]

Can you give me source code??

[@JimKrillPDX]

I wrestled with how to handle the authGuard in vue-router for a while... finally ended up with something similar to what you have here, but not quite. This video helped out a lot to finalize what I've been working on. Thank you!

[@nevenlukic]

7:27 has saved me. Thank you! I've managed to setup everything myself but this part was the missing piece. Great video, short, informative and fun.

[@hyggedev2124]

I was today years old, when I found out, I can understand a lot of what's happening in vue coming from React. When your learn web development framework's, there truly is so much overlap and similarities 💯 Great video. I think vue is next for me.

[@luistrcastro]

One of the best tutorials ever!! New, updated and straightforward

[@shaxzodalimov356]

I haven't been able to find such quality content on this topic for a long time. It was very useful. Thank you

[@RumbleLab]

I don't normally like and subscribe to videos like this but you were an exception. Your style was really nice and concise. I could see me watching your videos not just when I am trying to do something, but when trying to learn a new concept. Fine job. Thank you

[@LearnVue]

thanks so much i really try to make videos that respect everyone's time, so i'm glad you like the style :)

[@luisangelguzman2335]

Simple, concise, and streightforward. I have nothing to say but thank you. Keep up the amazing content!

[@pushandhabalia1501]

you were super quick, super precise, covered all cases. Its hard to find guys like you. Keep up the pacy work, Simple awesome thanks man 🍻

[@ignjat4123]

This video explains everything so well in just 10 minutes. Thanks a lot for the video, man. You saved me a ton of time.

[@danielwatson6529]

Thanks bro, would love more firebase(9) stuff, love how u present it, the pace etc

[@HijadeOdin]

Excellent! first time I watch a QUICK guide for development and it actually works haha! Thank you, this is very usefull

[@patrickodonnell2010]

This is a great concise example! I adapted it to my Vuetify 3 project and the options format and it worked 1st time. Thanks for this, brilliant, and btw I was making it much more difficult for myself prior to watching this lol.

[@youssefelshahawy8080]

Such an amazing tutorial, man! Keep going

[@LearnVue]

thank youu

[@Rasmuskvejborg]

Thank you for this excellent guide that is not a second longer than it needs to be!

[@JohannGarrido]

Man, this video is just GOLD. Subscribed.

[@LearnVue]

thanks so much!

[@atherisu]

Thank you so much for this video!!! I think a role based access control with firebase would be a great continuation to this

[@lerne-du]

Thank you! It is the best video about Vue 3 and Firebase Authentication

[@codexjay674]

Thank you so much for this video. i just started Vue and this is just what I needed 👍

[@jaireina]

Nice and simple. Thank you!

[@RicardoMouraGimenez]

Best tutorial on youtube. Thank you!

[@deadlyprogrammer6780]

thanks for the toturial! hope you come back publishing more videos ^^

[@mj-lc9db]

Yoooo! Thanks this helped me for my school work

[@juanalbertoboada]

WOW! Amazing tutorial! simple and streightforward! Two thumbs up!

[@domb7210]

Can someone explain to me the getCurrentUser function and the removeListener callback in 7:42? I do not understand why removeListener is called inside itself. I also tried not calling removeListener inside itself, and it works the same. What is the difference? Thank you!

[@web3388]

calling removeListener again cancels the tracking of onAuthStateChanged. Let me explain with an example, onAuthStateChanged solved the problem of the lack of authorization status when the page was refreshed. Those. we waited for this event and received an authorized user. If tracking is not canceled, then onAuthStateChanged will fire on every route change, in general this will not affect the work in any way, but in fact we only needed it once - on reboot. I hope I managed to explain))

[@wimdenherder]

I tried to make it shorter, but actually the listener persists, so it's 'still detecting' multiple times when logging out and in again. But still, not really a performance issue ;) const getCurrentUser = () => new Promise((resolve, reject) => { onAuthStateChanged(getAuth(), e => { console.log('still detecting'); resolve(e); }, reject) } ) So you could also write this, which is easier to read: const getCurrentUser = () => new Promise((resolve, reject) => { onAuthStateChanged(getAuth(), resolve, reject) } )

[@lowkeygaming4716]

Very nice vid. You have discussed a lot of useful stuff in a short time.

[@velhoguidsd]

Simple and perfect example.

[@aasmundnrsett8751]

Really smooth 👌🏻

[@YourJulietnet]

Great video! Can you help me out in which direction I need to search if I want the user (after logging in), to create a note or item and save it, but it's only viewable for this specific user? What is that called? Thanks again!

[@TylerPotts]

Hey! Great tutorial! I love the pacing! :D

[@LearnVue]

thanks a ton. been a fan of your videos too!!

[@TylerPotts]

@@LearnVue Haha, thank you! :D

[@sanusivictorolajuwon514]

Great tutorial 🤗🤗🤗. Thank You 👍🏽

[@LearnVue]

thanks for watching!

[@martijn_schermers]

Big love, you solved a problem I was dealing with for tooo long 🤟

[@Santiago-e8j9f]

you are the best, love you man

[@ridwanridiawan]

Hi terimakasih, saya pelanggan baru anda ,,👍🏻

[@wimdenherder]

Fantastic tutorial. If you look to LIKES / VIEWS, it seems that video's with a ratio like this video are really high quality

[@wimdenherder]

You can adjust Elliot Waites' chrome extension to this rating-system, enjoy!

[@zergzerg4844]

In your lesson you've made a mistake when you initialized firebase on 2:20. According firebase's manual if you are going to use Auth config you need to pass app into getAuth method => const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app); And after then using this variables.

[@funkdoc94]

Great video, thank you. One note though: never tell the user "wrong password" or "wrong username", this is a security threat.

[@ashwinsaxena1437]

Thanks for the tutorial! Nicely paced, some Fireship influence here, am I right?

[@AryanChaurasia10]

Nice but if you could also show documentations steps it will be lot easier to learn for new comers. Like going through the documentation of Firebase showing users how you got the method and then using in your code.

[@Shulkerkiste]

The Firebase authentication documentation is really confusing. It wouldn't help for this video.

[@ReshiMahendra]

Nice tuts.. waiting for the oauth signin/signup with local database instead of firebase 😁👍

[@LearnVue]

Thanks, I'll look into making one!

[@radekhladik7895]

There is one thing that should have been noted in the video. The route guard is client side so it must not be considered secure on its own. It is more like a convenience for the user than real barrier.... You need to implement proper guards in your backend.

[@LearnVue]

yeah definitely - adding some auth checks to the API calls is always necessary!

[@SULAIMANADAMU-wp8fj]

I love this video, please what's the name of the vs-code theme?

[@tamtm-gp9nr]

thank you for this amazing content

[@tobiasfriedrich00]

Wow! Amazing Video!!! Thank you!

[@alexanderpooh4015]

Thank you! You really helped me! Thanks god I learnt English!

[@alexanderpooh4015]

Take your Like and Subscribe!

[@LearnVue]

Glad i could help :)

[@varavinth5196]

Great tutorial.. And very useful..

[@closeluca]

thanks dude, this is a very nice tutorial!

[@LearnVue]

thank you thank you! and thanks for the support on so many of my vids!

[@lhceleguim]

simply fantastic

[@ElmachitoSilbateador]

Can someone explain to me what is happening in 7:41 ? Why is removeListener calling to itself?

[@hashira_d]

because onAuthStateChanged return unsubscribe method before further code execution

[@comunicloud30]

You rock!!!! Thank you very much for this video.

[@traitotaku4940]

Awesome Video! 6:49 I get this error: Uncaught FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). I noticed that other components are calling getAuth() in onMounted(), how can I fix this error? Please help.

[@traitotaku4940]

Sorry it's solved! I was missing the else { next(); }

[@gcfhornet]

Really helps. Thanks.

[@SunilVGandhi]

Is there a repo where I can check out the code ?

[@GabrielAlves-rs6eq]

great video!

[@LeagueOfAI711]

Good tutorial, could you make a Firestore video please?

[@maskman4821]

This is very useful and practical vue ÷ firebase auth tutorial, we can use this as a template, thank you so much. Can you also make a vue + firebase token auth with express or nuxt tutorial, I really want to know how to implement token auth with firebase javascript/admin sdk, thank you in advance 🙏🙏🙏

[@LearnVue]

thanks!! i'll definitely look into the token auth capabilities. actually looking into something like that for the development of learnvue.co right now!

[@tomaszleszczynski8928]

Hi Matt. First of all, thanks for the tutorial. The content you provided is really helpful. I followed your instructions, but I'm stuck with logging out when the user closes the browser tab. Any advice?

[@warrenprezydent2010]

Really good video. With yours help, firebase doesn't look that hard :D

[@teosean_9647]

I have an error property 'email' and 'password' was accessed during render but not defined on instance, do u know how to fix it?

[@caiovinicius7871]

Amazing video, ty!

[@LearnVue]

thanks for the support 💚

[@NoleKsum-si6vg]

You helped me so much

[@Dania-Rahub]

Amazing !

[@ohmydefense]

Why you've deleted "const app = " at 2:18?

[@Skif769]

Thank you! Very help me add fairebase in prj

[@rucibi]

wonderful ! Thanks !!

[@malathip4043]

I want to use .net core mssql for backend, what is the auth plugin to use with vue

[@mahtoosacks]

Why does my app keep making the homepage default to /#? All my routes end up being prefixed with /#/

[@shayonghoshroy7208]

Great tutorial! Really helped me a lot. Only comment, please provide source code in the description.

[@MohamedGamal-hd7rc]

PLEASE 🙏 🙏 Can someone tell me i make this auth how i can use laravel as a backend and make relationships with user

[@riyad-appscode]

awesome video

[@noaah.m]

my routes arent working to go to the register or sign in page?

[@emburaman]

Great tutorial. Now, anyone also getting "error 'handleSignOut' is assigned a value but never used" ? How to solve that?

[@medamazigh]

THANK YOU SO MUCH

[@YuvrajSingh-sm1rc]

but where did you added client secret and id

[@chase5998]

Hi there, thanks for the tutorial. Unfortunately, though the google popup sign in works on desktop web, for some reason when i'm on iphone safari, when i tap on the sign in with google option button, the popup appears for half a second then disappears. I've tried safari, chrome and brave and all faced the same issues. It works normally when i'm on my desktop though. Anyone else faced a similar issue?

[@franzieerides7306]

Great tutorial! Can anyone help me? I'm getting a "TypeError: next is not a function" in router/index.js

[@Shulkerkiste]

It should look something like this: router.beforeEach(async (to, from, next) => { const routeRequiresAuth = to.matched.some(record => record?.meta.requiresAuth); await isLoggedIn() || !routeRequiresAuth ? next() : next({ name: 'login' }); });

[@brainandrie2874]

How to validate the error that the email we used has been registered?

[@jonathanesedji8705]

ty es un manstrr le sang !

[@zackplauche]

3:52 There's nothing in my localStorage, and I successfully created an account and "logged in" apparently. 👀

[@Shulkerkiste]

I was confused too, when I've tried it the first time ^^ Firebase stores the user in DevTools -> Application -> IndexedDB.

[@santokhan_]

Great

[@danielwatson6529]

yea go on bro, theres literally nothing on " vue 3 firebase 9 crud with typescript" I've been going round in circles for days I can't find anything but to me it feels like such an obvious stack/system once i can get It operating

[@pattlactroi4279]

Can you provide the source code, please! Thank you!

[@69leostereo]

some can share the code for this project ?

[@deavisdude]

Great tutorial, unfortunately when I try to use signInWithPopup or signInWithRedirect I am sent to a blank page...

[@LearnVue]

Hey! Since releasing this video, there's been a major update to the Firebase SDK. an awesome member of the community updated the Github repo for it, let me know if this helps: github.com/matthewmaribojoc/vue-firebase-auth

[@deavisdude]

@@LearnVue Thanks for the reply, but it doesn't look like that project uses the google auth provider. I am able to get email and password working. Just not the google auth provider

[@deavisdude]

@@LearnVue Tried commenting before with a link to my stack overflow post, but it seems like they're being deleted.

[@moodzc945]

how to prevent a logged in user to access the sign in and register?

[@donggillee6527]

luv ya

[@joascastelo8519]

muito fácil que isso, nunca vi ninguém deixar um conteudo tão simples

[@Busyideas]

Hii can you provide source code please please

[@HenriqueLeal92]

I finished it with many errors, all of them "is defined but never used" because i don't know where i was supposed to use.. that's why i watched the video to learn.. nice try but i found it incomplete

[@parkerboling6361]

i hate this shit..... everytime i follow along with a video something fucks up. why is it saying component names should be multi-word

[@LearnVue]

hey! i think that might be an issue coming from eslint.vuejs.org/rules/multi-word-component-names.html - let me know if this helps :)

[@nikolamanojlovic7657]

this is too fast, i dont understand what are you doing :/