EASY Vue 3 Authentication with Firebase ~ Login Form Vue JS Tutorial

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 101

  • @jasbirkhalif1314
    @jasbirkhalif1314 2 года назад +2

    a unique way of teaching. haven't enjoyed tutorials for long but this was special

  • @FirstLast-gk6lg
    @FirstLast-gk6lg 4 года назад +3

    Absolutely love your tutorials some of the best on RUclips. I love how quickly you go through it, always better to slow down a tutorial than speed it up.

  • @mvpopuk
    @mvpopuk 3 года назад +3

    I love your sense of humour as well as the tutorials you’re making 🤘🏻

  • @soufianemchanna6251
    @soufianemchanna6251 3 года назад +1

    frankly, you are the best instructor for me

  • @stevensnowden8940
    @stevensnowden8940 2 года назад +1

    dude, am so grateful for this

    • @TylerPotts
      @TylerPotts  2 года назад

      Thanks for watching, Steven!

  • @rangabharath4253
    @rangabharath4253 4 года назад +2

    Awesome as always 👍😊

  • @lolashepota4050
    @lolashepota4050 3 года назад +1

    Tyler, thank you very much for understandable and cool tutorial. Well done!

  • @MuhammadAdnan2.0
    @MuhammadAdnan2.0 4 года назад +1

    Well explained... Looking for more stuff Vue & Firebase ❤️

  • @AhmadHassan-ss5un
    @AhmadHassan-ss5un 4 года назад +1

    I was waiting 😁👌

  • @josht7238
    @josht7238 3 года назад +1

    thankyou so much for this video!!

  • @T0mv-n4i
    @T0mv-n4i 3 года назад +1

    Amazingly helpful tutorial! Thank you 🙌

  • @rafsan2744
    @rafsan2744 3 года назад

    You have done it brilliantly

  • @explosive_monke
    @explosive_monke 3 года назад +1

    amazing video, thank you so much, sir

  • @tisanefruitrouge9512
    @tisanefruitrouge9512 4 года назад +2

    Great Video! Thanks a lot mate! I love the VueJS tutorials! What do you think of Tailwind css?

  • @heyyy4987
    @heyyy4987 4 года назад +2

    nice. continue with vue 3 and firebase series

    • @TylerPotts
      @TylerPotts  4 года назад

      More Vue x Firebase coming up!

  • @anacleidesilvatorres9497
    @anacleidesilvatorres9497 3 года назад +1

    Awesome tutorial, congrats

  • @vitalmipango6618
    @vitalmipango6618 3 года назад +1

    nice tutorial very helpful to me .thanks

  • @siddharthpadwal9649
    @siddharthpadwal9649 2 года назад +1

    Awesome video 👍

    • @siddharthpadwal9649
      @siddharthpadwal9649 2 года назад +1

      Create more videos on vue js, probably a full stack MEVN app / some big company clone!

    • @TylerPotts
      @TylerPotts  2 года назад +1

      Thank you 👍

  • @angelonavarro9591
    @angelonavarro9591 3 года назад +1

    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.

  • @bowlingverona
    @bowlingverona 3 года назад +1

    Hej Tyler, thanks so much for this tutorial, amazing code.

    • @TylerPotts
      @TylerPotts  3 года назад

      You're very welcome!

    • @bowlingverona
      @bowlingverona 3 года назад

      @@TylerPotts I have request regarding auth with google email, are u gonna come up with something? That would be great ;=)

  • @minoscalderon7503
    @minoscalderon7503 3 года назад +2

    What theme do you use and what extensions to develop faster? nice vid ty

  • @tr5946
    @tr5946 3 года назад +5

    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.

  • @PraveenKumar-ft2kr
    @PraveenKumar-ft2kr 3 года назад

    Great session 👌👌👏👏😄

  • @bookspage9019
    @bookspage9019 2 года назад

    thank you so much you are amazing person.

  • @matildasmedman9879
    @matildasmedman9879 3 года назад

    Hi! Firstly, amazing toturial! Secondly, do you know when you are adding the google authentication to this app? Super exited to see it!

  • @DougyVAL
    @DougyVAL 3 года назад +1

    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?

    • @DougyVAL
      @DougyVAL 3 года назад +1

      @AuT_Simmy 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.

  • @joshfoster9785
    @joshfoster9785 3 года назад +1

    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

    • @joshfoster9785
      @joshfoster9785 3 года назад

      Quick update updating my global vue cli solved this

  • @xcrunnr12
    @xcrunnr12 3 года назад +1

    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?

    • @TylerPotts
      @TylerPotts  3 года назад

      It's best to use the setup call when using the composition api :D

  • @hillno
    @hillno 4 года назад +1

    Another Great one!

  • @PureAlbania
    @PureAlbania 3 года назад +1

    Can you make a video on using Goggle and Facebook authentication with Firebase and connecting with this existing email Firebase account. Thanks.

  • @agastyasutra
    @agastyasutra 3 года назад +1

    Hey can you make a video on how to save images in firebase and get the url using vue composition api

    • @TylerPotts
      @TylerPotts  3 года назад +1

      Thanks for the idea I'll add it to my list

  • @monogalaxia
    @monogalaxia 3 года назад +1

    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?

    • @TylerPotts
      @TylerPotts  3 года назад +1

      Yeah I think you're right a few people have mentioned this to me, I'll do some research and make an updated video :)

  • @Clarabaralingonsylt
    @Clarabaralingonsylt 3 года назад

    Thank you !!

  • @codecombination9337
    @codecombination9337 3 года назад

    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

  • @TheBorninmotion
    @TheBorninmotion 4 года назад +1

    more vue firebase tuts please !

  • @artemkomarov9902
    @artemkomarov9902 2 года назад +1

    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 !

  • @yasayah7289
    @yasayah7289 2 года назад

    Rather than allow just anyone to register, how could you require admin approval before users/guests can login?

  • @jervi_sir
    @jervi_sir 3 года назад

    thank you, what about role based auth, how would we manage to do it

    • @TylerPotts
      @TylerPotts  3 года назад

      Thank you for watching! However, I can't answer that question I'm a comment 😅 Maybe I'll cover it in a video!

  • @tr5946
    @tr5946 3 года назад +1

    awesome awesome awesome

  • @hillno
    @hillno 4 года назад +1

    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?

  • @samirmouzaoui5652
    @samirmouzaoui5652 3 года назад

    thank you

  • @estebanxelhuantzi
    @estebanxelhuantzi 3 года назад

    If i have a function on a constant that recieves a parameter, how do i return it on the return section?

  • @OverDrive804
    @OverDrive804 4 года назад +1

    This is great! React version please?

    • @TylerPotts
      @TylerPotts  4 года назад +1

      Definitely one coming! It may have to be mid-week :)

  • @Kelevra501
    @Kelevra501 3 года назад +1

    Hey your github repo is just the initial commit and not the final product!

  • @philippeb1039
    @philippeb1039 3 года назад

    Why isn't there are register with firstname, lastname and address?
    Then it would be more then just a copy paste from the documentation.

  • @kethanvemuri7594
    @kethanvemuri7594 3 года назад

    Sir can you make video about best extensions for vue js in vs code

  • @kalenzo78
    @kalenzo78 4 года назад +1

    Thanks for the great work, I humbly request you to make one react tutorial with redux

    • @TylerPotts
      @TylerPotts  4 года назад

      I will be doing a React version but I will not be using Redux.

  • @Akosiyawin
    @Akosiyawin 3 года назад

    Hello! Is it safe using vue for authenticating? and for CRUD operation in database? Should I use or implement node js?

    • @TylerPotts
      @TylerPotts  3 года назад

      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.

  • @rogadev
    @rogadev 3 года назад

    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?

  • @ksriharsha2911
    @ksriharsha2911 4 года назад +1

    🔥❤️🔥👍👍👍👍

  • @wasd3108
    @wasd3108 3 года назад

    repo linked is empty/base template

  • @johannesschreurs430
    @johannesschreurs430 3 года назад

    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.

  • @almostworthy2973
    @almostworthy2973 3 года назад

    initializeApp isn't a function "TypeError: firebase.initializeApp is not a function"

  • @kelanconway2009
    @kelanconway2009 3 года назад

    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 :)

    • @kelanconway2009
      @kelanconway2009 3 года назад

      doesn't matter sorry, but really enjoying the video thanks!!

  • @moas98
    @moas98 3 года назад

    them name plz

  • @notfound6161
    @notfound6161 4 года назад

    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
    })

  • @ivanarabome4172
    @ivanarabome4172 2 года назад

    he said we're going to create our "react app"

  • @robertoperez7468
    @robertoperez7468 4 года назад +2

    Good Video, I would like you to do the firebase and Google autentication. It'll help a lot Thanks!

  • @theomegamale5335
    @theomegamale5335 2 года назад +1

    Literally the only tutorial on this topic without a bunch of unnecessary BS convoluting everything. Great work....until you said tabs over spaces.

    • @TylerPotts
      @TylerPotts  2 года назад

      Haha thanks! HOWEVER, TABS > SPACES ANY DAY!

  • @UladzislauNikitsiuk
    @UladzislauNikitsiuk 7 месяцев назад

    its getting old a bit, now is modular API. But big thanks, go docs gyus

  • @isbelmont
    @isbelmont 2 года назад

    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?

  • @sheljinchacko800
    @sheljinchacko800 3 года назад +1

    Tyler, thank you very much for understandable and cool tutorial. Well done!

  • @hillewiedahlin4916
    @hillewiedahlin4916 2 года назад +1

    Awesome tutorial, helped me alot!

  • @tidenegocios
    @tidenegocios 3 года назад +1

    Thank you very much!