Vue 3 + Firebase Authentication in 10 Minutes
Vložit
- čas přidán 7. 09. 2024
- ✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
INTRO
Music by Lukrembo
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!!
Can you give me source code??
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!
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.
One of the best tutorials ever!! New, updated and straightforward
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.
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
thanks so much i really try to make videos that respect everyone's time, so i'm glad you like the style :)
I haven't been able to find such quality content on this topic for a long time. It was very useful. Thank you
Thanks bro, would love more firebase(9) stuff, love how u present it, the pace etc
Simple, concise, and streightforward. I have nothing to say but thank you. Keep up the amazing content!
Such an amazing tutorial, man!
Keep going
thank youu
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 🍻
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.
This video explains everything so well in just 10 minutes. Thanks a lot for the video, man. You saved me a ton of time.
Excellent! first time I watch a QUICK guide for development and it actually works haha! Thank you, this is very usefull
Great video, thank you.
One note though: never tell the user "wrong password" or "wrong username", this is a security threat.
Thank you so much for this video!!!
I think a role based access control with firebase would be a great continuation to this
thanks for the toturial! hope you come back publishing more videos ^^
Thank you for this excellent guide that is not a second longer than it needs to be!
Nice tuts.. waiting for the oauth signin/signup with local database instead of firebase 😁👍
Thanks, I'll look into making one!
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.
The Firebase authentication documentation is really confusing. It wouldn't help for this video.
Fantastic tutorial. If you look to LIKES / VIEWS, it seems that video's with a ratio like this video are really high quality
You can adjust Elliot Waites' chrome extension to this rating-system, enjoy!
Thanks for the tutorial! Nicely paced, some Fireship influence here, am I right?
Thank you so much for this video. i just started Vue and this is just what I needed 👍
Thank you! It is the best video about Vue 3 and Firebase Authentication
Very helpful and straight to the point. Everything worked as it should. Thanks
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 🙏🙏🙏
thanks!! i'll definitely look into the token auth capabilities. actually looking into something like that for the development of learnvue.co right now!
Simple and perfect example.
Man, this video is just GOLD. Subscribed.
thanks so much!
Hi terimakasih, saya pelanggan baru anda ,,👍🏻
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!
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))
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)
}
)
Yoooo! Thanks this helped me for my school work
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.
yeah definitely - adding some auth checks to the API calls is always necessary!
WOW! Amazing tutorial! simple and streightforward!
Two thumbs up!
Best tutorial on youtube. Thank you!
thank you for this amazing content
Great tutorial 🤗🤗🤗. Thank You 👍🏽
thanks for watching!
Very nice vid. You have discussed a lot of useful stuff in a short time.
you are the best, love you man
Big love, you solved a problem I was dealing with for tooo long 🤟
Thank you! Very help me add fairebase in prj
great video!
Great tutorial! Really helped me a lot. Only comment, please provide source code in the description.
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.
Hey! Great tutorial! I love the pacing! :D
thanks a ton. been a fan of your videos too!!
@@LearnVue Haha, thank you! :D
Good tutorial, could you make a Firestore video please?
Really smooth 👌🏻
I love this video, please what's the name of the vs-code theme?
Really good video. With yours help, firebase doesn't look that hard :D
Thank you! You really helped me! Thanks god I learnt English!
Take your Like and Subscribe!
Glad i could help :)
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?
thanks dude, this is a very nice tutorial!
thank you thank you! and thanks for the support on so many of my vids!
Great tutorial.
Now, anyone also getting "error 'handleSignOut' is assigned a value but never used" ? How to solve that?
Great tutorial.. And very useful..
Wow! Amazing Video!!! Thank you!
simply fantastic
I have an error property 'email' and 'password' was accessed during render but not defined on instance, do u know how to fix it?
Really helps. Thanks.
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?
You helped me so much
You rock!!!! Thank you very much for this video.
wonderful ! Thanks !!
Is there a repo where I can check out the code ?
PLEASE 🙏 🙏 Can someone tell me i make this auth how i can use laravel as a backend and make relationships with user
I want to use .net core mssql for backend, what is the auth plugin to use with vue
ty es un manstrr le sang !
Amazing video, ty!
thanks for the support 💚
Can someone explain to me what is happening in 7:41 ? Why is removeListener calling to itself?
because onAuthStateChanged return unsubscribe method before further code execution
awesome video
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
Amazing !
Great
THANK YOU SO MUCH
Great tutorial!
Can anyone help me? I'm getting a "TypeError: next is not a function" in router/index.js
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' });
});
but where did you added client secret and id
Why does my app keep making the homepage default to /#? All my routes end up being prefixed with /#/
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.
Sorry it's solved! I was missing the
else {
next();
}
Can you provide the source code, please! Thank you!
my routes arent working to go to the register or sign in page?
How to validate the error that the email we used has been registered?
Why you've deleted "const app = " at 2:18?
how to prevent a logged in user to access the sign in and register?
luv ya
Great tutorial, unfortunately when I try to use signInWithPopup or signInWithRedirect I am sent to a blank page...
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
@@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
@@LearnVue Tried commenting before with a link to my stack overflow post, but it seems like they're being deleted.
some can share the code for this project ?
3:52 There's nothing in my localStorage, and I successfully created an account and "logged in" apparently. 👀
I was confused too, when I've tried it the first time ^^
Firebase stores the user in DevTools -> Application -> IndexedDB.
Hii can you provide source code please please
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
i hate this shit..... everytime i follow along with a video something fucks up. why is it saying component names should be multi-word
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 :)
this is too fast, i dont understand what are you doing :/