EASY Vue 3 Authentication with Firebase ~ Login Form Vue JS Tutorial
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- Learn how to easily authenticate your vue js application with firebase by creating a simple but effective login / register application with protected routes. Firebase's easy to use framework makes authentication a breeze in Vue 3 using the composition API.
Source code: github.com/Tyl...
// Support me on Ko-Fi
ko-fi.com/tyle...
// FOLLOW ME ON TWITTER
/ tyler_potts_
// BECOME A MEMBER
www.youtube.co...
// MY GEAR FOR CODING AND TH-cam
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
a unique way of teaching. haven't enjoyed tutorials for long but this was special
Awesome, thank you!
Absolutely love your tutorials some of the best on TH-cam. I love how quickly you go through it, always better to slow down a tutorial than speed it up.
Awesome, thank you!
I love your sense of humour as well as the tutorials you’re making 🤘🏻
I appreciate that!
frankly, you are the best instructor for me
nice. continue with vue 3 and firebase series
More Vue x Firebase coming up!
dude, am so grateful for this
Thanks for watching, Steven!
Hello, I'm having trouble installing firebase, whenever I run the command npm i firebase it always gives a message saying 10 moderate severity vulnerabilities.
Great Video! Thanks a lot mate! I love the VueJS tutorials! What do you think of Tailwind css?
I love it! :D
Well explained... Looking for more stuff Vue & Firebase ❤️
Thanks, more to come!
ERROR WITH REFRESHING:
After logging in I see: "Welcome, test"
After I refresh the same page I see: "Welcome," the "test" is gone
I can still route to the about page and back to the home page and I am still logged in. How can I handle this refresh issue?
I have the same problem.
@@cimon__ my solution was to store the name is LocalStorage. I would place it in storage onBeforeMount and then onMounted I would retrieve it from LocalStorage.
Tyler, thank you very much for understandable and cool tutorial. Well done!
thankyou so much for this video!!
Glad it was helpful!
Thanks @Douglas Sliverman your fixed worked, For those that got no page and error below, i used onMounted rather than onBeforeMount and my app is visible im new to lifecycle hooks in vue and could do with an explanation for why i was getting the error in code
We're sorry but vue-auth-yt doesn't work properly without JavaScript enabled. Please enable it to continue. my javascript is enabled also by doing this on the lifecycle event not before is there any security issues? thanks
Quick update updating my global vue cli solved this
Amazingly helpful tutorial! Thank you 🙌
Glad it was helpful!
I was waiting 😁👌
:D
Hi! Firstly, amazing toturial! Secondly, do you know when you are adding the google authentication to this app? Super exited to see it!
Hey Tyler, if you still have the source code for this project, could you post it to github? The source code link in the description does not have the complete code.
Can you make a video on using Goggle and Facebook authentication with Firebase and connecting with this existing email Firebase account. Thanks.
nice tutorial very helpful to me .thanks
Glad it helped
Awesome as always 👍😊
Thank you! Cheers!
more vue firebase tuts please !
We need updates! a lot of changes, today ..) its not work at all, today) because of new syntax and api changes ) And additional question, how to show navbar if user login, for example ) v-if="user"; thank you !
Another option is to add this code into index.js file on router folder...
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true
//THIS ONE DO THE MAGIC
}
]
//THIS ONE
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
next({
path: '/login',
params: { nextUrl: to.fullPath }
})
} else {
next()
}
//Add ur own logic is just an example
})
You have done it brilliantly
What theme do you use and what extensions to develop faster? nice vid ty
Awesome video 👍
Create more videos on vue js, probably a full stack MEVN app / some big company clone!
Thank you 👍
This is what creates code monkeys, you glance over so many topics that are crucial to properly understanding Vue, without going in depth to them. You start using the setup function without going into detail what it will do, same goes for onBeforeMount and ref. People following this video might get a nice basic login, authenticated by Firebase, but I don't think they will be able to understand why it works or what they made.
There is not much learning in this video, only following along and creating something that has no real world value.
If you want to learn Vue properly, I'd suggest going to the Vue docs and then to the Firebase docs if you are invested into using the both of them combined.
Not to mention the fact that the code on Github is not the final code that was used in the example.
Awesome tutorial, congrats
Thank you! Cheers!
Great tutorial, very understandable, but I think the way to import firebase to a project changed. You can't just import the whole object anymore...or am I missing something?
Yeah I think you're right a few people have mentioned this to me, I'll do some research and make an updated video :)
Hej Tyler, thanks so much for this tutorial, amazing code.
You're very welcome!
@@TylerPotts I have request regarding auth with google email, are u gonna come up with something? That would be great ;=)
amazing video, thank you so much, sir
Glad you liked it
One question I can't figure out. Your code catches the errors of auth with ...catch(err => alert(err.message)); but how can we pass this up to the data level to make it more useful for error handling?
Great Tut. However, I am wondering if there is a reason that you create the Logout function in the setup section instead creating it with the methods?
It's best to use the setup call when using the composition api :D
thank you so much you are amazing person.
Thanks for the great work, I humbly request you to make one react tutorial with redux
I will be doing a React version but I will not be using Redux.
Hi great video,
I myself am exploring and learning vue js
I wanted to ask why you didn't do the login and register functionality isndie methods:
i mean by making functions
Thank you very much!
You're welcome!
Hey can you make a video on how to save images in firebase and get the url using vue composition api
Thanks for the idea I'll add it to my list
Rather than allow just anyone to register, how could you require admin approval before users/guests can login?
Another Great one!
Thank you! Cheers!
Why isn't there are register with firstname, lastname and address?
Then it would be more then just a copy paste from the documentation.
Great session 👌👌👏👏😄
Sir can you make video about best extensions for vue js in vs code
This is great! React version please?
Definitely one coming! It may have to be mid-week :)
Hey your github repo is just the initial commit and not the final product!
awesome awesome awesome
If i have a function on a constant that recieves a parameter, how do i return it on the return section?
thank you
You're welcome
Good Video, I would like you to do the firebase and Google autentication. It'll help a lot Thanks!
Sure thing!
thank you, what about role based auth, how would we manage to do it
Thank you for watching! However, I can't answer that question I'm a comment 😅 Maybe I'll cover it in a video!
Am I just not understanding something or did you just expose your entire firebase account by including it in main.js like that? How is your apikey and other sensitive credentials protected? Does npm run build take care of protecting this information or can anyone see these details inside inspect > sources?
Literally the only tutorial on this topic without a bunch of unnecessary BS convoluting everything. Great work....until you said tabs over spaces.
Haha thanks! HOWEVER, TABS > SPACES ANY DAY!
Hello! Is it safe using vue for authenticating? and for CRUD operation in database? Should I use or implement node js?
As long as Firebase is managing the keys its safe to a degree however I believe it is safer to use Nuxt with SSR for the authentication along with firebase.
repo linked is empty/base template
he said we're going to create our "react app"
Hi there, i've done everything correct but when registering it says password must be 6 characters long or more? i've used password123 and still comes up this error. Any help? thanks :)
doesn't matter sorry, but really enjoying the video thanks!!
its getting old a bit, now is modular API. But big thanks, go docs gyus
initializeApp isn't a function "TypeError: firebase.initializeApp is not a function"
🔥❤️🔥👍👍👍👍
:D
them name plz
Who's them?
Thank you , you helped me a lot, but I noticed that if I use this code of below in home, about or other view, then the page is protected
onBeforeMount( () => {
auth.onAuthStateChanged((user) => {
if(!user) {
router.replace('Login');
} else if(route.path == "Login"){
router.replace('/');
}
})
})
Using this code in every view is the right way to protect every view?
Tyler, thank you very much for understandable and cool tutorial. Well done!
Thanks Lola!
Awesome tutorial, helped me alot!
Happy it helped! :D
Thank you !!