Vue.js Firebase Authentication - Add To An Existing Project

Поділитися
Вставка
  • Опубліковано 18 гру 2024

КОМЕНТАРІ • 140

  • @jdwoods2008
    @jdwoods2008 6 років тому +3

    Great video Brad! I'm glad you're keeping Vue tutorials in your mix.
    Also, thanks for commenting your JS as you go, it helps me not only to be thoughtful with my own comments later but also helps during those times I'm struggling to follow a new concept in your tutorials. Seeing the comments can help understand what each statement does until I see the big picture.
    Cheers.

  • @omarbaldi5676
    @omarbaldi5676 4 роки тому +1

    I've found this tutorial extremely useful, you've been very clear at explaining concepts in the easiest way possible. Props to you and keep going! 👌🏻

  • @pale_matter
    @pale_matter 6 років тому

    Brad, I've learned an extraordinary amount watching your videos over the last few months. The segment on protecting routes was very informative, keep up the hard work!

  • @cmilohernandez
    @cmilohernandez 5 років тому

    Dude....... your the bomb! So many Vue firebase videos trying to get it together. And then bam! Traversy!

  • @villianvichev2287
    @villianvichev2287 6 років тому +1

    perfect voice , perfect teacher just superb ...........thank you Brad

  • @JuanDelgado-eh8pp
    @JuanDelgado-eh8pp 5 років тому +5

    Please make more videos of vue.js and firebase

  • @xspaniki
    @xspaniki 4 роки тому +1

    I love you Brad :D this is better than netflix.

  • @clivewardcron
    @clivewardcron 6 років тому +35

    I'm not sure if this has been addressed already or not, but at the part where we make the login method I wasn't able to use user.email in the alert.
    I found that I needed to use the form:
    user.user.email
    Just in case anyone watching this now is wondering what's going on with an undefined result.

    • @dynacube
      @dynacube 6 років тому +1

      Thank you!!!

    • @beckyboyce7131
      @beckyboyce7131 6 років тому

      thank you for sharing this - I was wondering...

    • @artede1
      @artede1 6 років тому

      thanks. haha I wondered why I got undefined that's why I did the alert('You are logged in as ' + this.email);
      hahah

    • @shouhatano6007
      @shouhatano6007 5 років тому

      I confused with that right now, thx for shearing!

    • @lohithkumar8257
      @lohithkumar8257 5 років тому

      @@artede1 genius bro....haha

  • @StuckOnARock
    @StuckOnARock 6 років тому +14

    Thank you for making this video, this is exactly what I am looking for.

  • @retiar2111
    @retiar2111 6 років тому +1

    Thank you, i followed the series back then and i wanted this too . Awesome content as always !

  • @DrWebDev
    @DrWebDev 6 років тому +3

    Hi Brad! Your tutorials are really Awesome...!
    We all want to know that, how we can manage our projects. Managing in sense of documentation, proper flow of project, with diagrams and many more please make a series on it and guide us how you manage your projects. Thanks

  • @АлексейГусар-ф9й
    @АлексейГусар-ф9й 6 років тому

    Man, really, thank you! I can't describe how great that things that you are doing and how much it means to me.

  • @clydefrog1487
    @clydefrog1487 5 років тому

    Brad, you are a God. You have taught me so much and always have very applicable tutorials to projects i'm trying to create. This is why i go out of my way to buy your courses on Udemy. You deserve all the support. Well done.

  • @ashtwenty12
    @ashtwenty12 6 років тому +1

    Hello Brad, keep calm and keep the great content flowing. As a self learner, i have learned so many useful thing from you an your video's. Once i get more rounded with a full project i will have a look at your courses as i like the format, and general, lets make a project together style. I chose to comment on this video as i'm looking into security and encryption, and wondered what your thoughts on general security and encryption is. Is Java Spring security and Java web tokens a better way to go than firebase and what other cryptography methods would you recommend. Thank you again and hope this comment finds you well.

  • @andyrap77
    @andyrap77 6 років тому +1

    Thank you for making these videos. So glad I found you

  • @tehseenullah215
    @tehseenullah215 5 років тому +1

    you saved my life bro. you are more than love

  • @AntonioRosso
    @AntonioRosso 6 років тому +6

    Hi Brad, Great tutorial, thank you. At 4:01, you start in test mode. Now that we've implemented Firebase Authentication in the app, it may be a good idea to go back to Database -> Cloud Firestore -> Rules and change that "allow read, write;" to "allow read, write: if request.auth != null;" firebase.google.com/docs/firestore/security/get-started#writing_rules cheers mate!

  • @aram5642
    @aram5642 3 роки тому

    I was hoping to see how the redirect param is consumed later. I love it when sites remember where I was heading to and take me there after I have logged in.

  • @alexlupu1844
    @alexlupu1844 5 років тому

    this sir right here is an amazing teacher

  • @lillymarie3790
    @lillymarie3790 6 років тому

    Thank you so much for this video. This is exactly what I was missing in the series.

  • @vixibly5687
    @vixibly5687 4 роки тому +1

    Great tutorials!!!, thanks very much, I've learned a lot!!!

  • @imorganmarshall
    @imorganmarshall 6 років тому +3

    New upload pops up from Traversy, "calls break time at work"

  • @ashb9254
    @ashb9254 6 років тому

    I was eagerly waiting. Thanks!

  • @marcelwagnerdev
    @marcelwagnerdev 3 роки тому

    If you want a component to rerender, you could have added a 'vbind:key' to the component and change the value of the :key when the login function is called

  • @aQilahQi
    @aQilahQi 6 років тому

    I LOVE THIS SERIES. Love all your videos. It's so helpful.

    • @aQilahQi
      @aQilahQi 6 років тому

      best practice file structure with sass and external js in vue maybe?

  • @akashaj4660
    @akashaj4660 4 роки тому

    You are Awesome Brad!

  • @GameOver7853
    @GameOver7853 6 років тому

    Loving the VueJS videos. keep up Brad!

  • @magicalbhakuni
    @magicalbhakuni 6 років тому

    Loved the video. Very nice details!
    A MEAN app with Angular 5 with API integration will be just amazing in the future.

  • @sasmonteiro
    @sasmonteiro 5 років тому

    Hey Brad, nice tut, you can use Vuex to store the isLoggedIn so that the nav buttons become reactive, then you don't need to use the router.go

  • @NST-games
    @NST-games 6 років тому +1

    Why don't you add @submit.prevent="register" to a form itself instead of click to a button? You would be able to press Enter to log in.

  • @GmailNexus
    @GmailNexus 4 роки тому

    Image Upload via Firebase Storage would be awesome!!

  • @wobsoriano
    @wobsoriano 6 років тому

    Perfect timing as always for my projects

  • @TheCodebookInc
    @TheCodebookInc 6 років тому +3

    Can you add in this project multi-authentication system like adding job roles field in the schema and then redirecting towards its desired role page?

  • @markdoe4484
    @markdoe4484 6 років тому +2

    Hey Brad! Great tutorial but please note that if have two users application doesn't prevent looking on other users data i mean dashboard. In current state all users share same dashboard. regards

    • @raymondmichael4987
      @raymondmichael4987 6 років тому +1

      Mark Doe , mmmmnh this is strange!!! Now that I think about it, for us beginners, it's better if the man himself, Brad, give his opinion, b'se it'll be sad for us learning this tech with technical errors.
      Gud stuff though, but just point it out

    • @jeffersonrosales5184
      @jeffersonrosales5184 5 років тому

      I want to know how to do this. I want to prevent other users from seeing each other's data. Have you solve this problem? Can you share to us how did you do that? Thanks!!!!!!!!!!!!!

  • @jorgebee65
    @jorgebee65 6 років тому

    Nice work, congratulations, I follow this and the previous tutorials and I think you are making a great Job. Thank you for your time.

  • @jeffersonrosales5184
    @jeffersonrosales5184 5 років тому +1

    Thanks brad! but how can we prevent users from seeing each other's data?

  • @SebastianPerezG
    @SebastianPerezG 6 років тому +4

    You can use @click.prevent and get rid of e.preventsDefault() excelent tutorial.

  • @nurzhanamantay8729
    @nurzhanamantay8729 5 років тому +1

    thank you Brad. you are awesome

  • @stephenr468
    @stephenr468 3 роки тому

    Thanks for this wonderful tutorial.

  • @shnam928
    @shnam928 5 років тому +2

    Thanks, but I couldn't find any tutorials(using Vue+firebase firestore) in which users have access to their own data & not the same data as another user sees. For example if it's a blog system, each user should see his/her own posts. I'll appreciate it if you make a video or give me a hint at least:)

  • @seanlangley7467
    @seanlangley7467 6 років тому +1

    Thank you for the video, Brad :)

    • @TraversyMedia
      @TraversyMedia  6 років тому +1

      You're welcome, thanks for watching

  • @wirm9595
    @wirm9595 5 років тому

    GREAT VIDEO BRAD!

  • @waseembarcha6816
    @waseembarcha6816 6 років тому +2

    This is really awesome! It will be better if you add vuex and role base authorization in a separate video.

  • @engsiyad
    @engsiyad 6 років тому +2

    Hello brad can you please make about Microservices using PHP
    Please i need it to learn.
    Thank you.

  • @bodasandeepkumar4234
    @bodasandeepkumar4234 6 років тому

    Hi brad ! please make a video on polling pusher authentication also. Thanks

  • @MartCubeX
    @MartCubeX 6 років тому

    Great tutorial Brad, can you make a video about your VS code settings,extensions and so on... thanks a lot

  • @pagevpetty
    @pagevpetty 5 років тому +1

    Can you show us how to take users their own private data, rather than everyone just going to a general dashboard, pretty please :)

  • @gogogo5573
    @gogogo5573 6 років тому

    that refresh route and navbar was a great shot. Can I ask how to add users level there?

  • @seemakadyan8421
    @seemakadyan8421 6 років тому

    What about creating a search bar. How can we filter data not just some basic text but maybe multiple conditions or maybe dates. How to do that?

  • @jordandickson3419
    @jordandickson3419 4 роки тому

    Awesome tutorial! Thank you so much for the help!!

  • @codecorner131
    @codecorner131 6 років тому +1

    Thanks Brad ^^ I did a sails js auth if you want to take a look ?

  • @mr_biggy_bear
    @mr_biggy_bear 5 років тому

    amazing as always. thanks for the knowledge.

  • @milkpio
    @milkpio 2 роки тому

    If you have problem today to import the firebase files add /compat/ to the url file. Ex: import firebase from firebase/compat/app

  • @Dave-laye
    @Dave-laye 6 років тому +1

    Thanks for this cours master!

  • @JohnBiddulph
    @JohnBiddulph 6 років тому

    Thanks you! how would I set class="active" should I add another v-if on the li in the navbar?

  • @patozincke
    @patozincke 5 років тому

    Great Series!

  • @IamAWildMan
    @IamAWildMan 6 років тому

    Hey man, what do you think about making course about Apache Cordrova?

  • @hafizjavaid
    @hafizjavaid 4 роки тому

    Thanks Brad

  • @oskarolortegui9623
    @oskarolortegui9623 4 роки тому

    Does anyone know how to create a collection "by hand" (not using the firebase interface) I tried on Dashboard.vue on created() using ""db.collection("employess").add({...})"" and it worked but every time I refresh the page, another equal object is generated. please help

  • @shrikantbhatt8135
    @shrikantbhatt8135 6 років тому

    Hi Brad in index.js I am getting error can not use 2 export defaault!

  • @forzaforza9204
    @forzaforza9204 6 років тому

    Hi Brad! I wanted to ask you if it is possible to mix different backend languages in one project. As an example. Use php for the core code and add node js to build the chat section of the same app. Pls let me know.

    • @SimonDaviesOfCourse
      @SimonDaviesOfCourse 6 років тому

      you could look into laravel and Echo its good, laracasts.com/series/get-real-with-laravel-echo

  • @donfearplay
    @donfearplay 6 років тому

    Thanks, Brad, Great as always !
    Guys, how to deploy a new app created with Vue? "main" github page is already used, so how to overcome this and add "/" between url and repository.

  • @disturb16
    @disturb16 6 років тому +1

    you are awesome! I was trying to get this authentication thing for days and I couldn't. the (!app) trick help me out a lot. thanks

  • @bartez8018
    @bartez8018 5 років тому +1

    why employee_id is string in database?

    • @xThuby
      @xThuby 5 років тому

      Generally, unless you're going to be doing mathematical calculations, the numbers should be stored as strings.

  • @emmfueable
    @emmfueable 5 років тому +2

    can you create a video for nuxt firebase?

  • @paccooper3019
    @paccooper3019 4 роки тому

    When I first load the page, and I click on the login button, it reloads the page instead of doing the login. After that, when I click on it, it works fine. Does anyone know why that happens?

  • @robertsoriano7041
    @robertsoriano7041 6 років тому

    puting the Vue instantiation inside onauthstatechanged will render your page twice..

  • @ElderPinto
    @ElderPinto 5 років тому

    My Vuetools stoped working after use new Vue({ ... }} inside firebase.auth().onAuthStateChanged(...) . Does anyone have a suggestion?

  • @ruqayya7931
    @ruqayya7931 4 роки тому

    Thank you you are the best ! I hope you do a vue course on udemy

  • @AbhishekKumar-mq1tt
    @AbhishekKumar-mq1tt 6 років тому

    Thank u for this awesome video

  • @mahkamehfallah8321
    @mahkamehfallah8321 5 років тому

    it was awesome thank you

  • @tehseenullah215
    @tehseenullah215 5 років тому

    great videos. i want to have two type of users access on my dashboard one is admin and other is normal user. can someone guide me how to achieve this. i am new to vue.js

  • @gildojalane833
    @gildojalane833 6 років тому

    Thank you for sharing

  • @admiralman895
    @admiralman895 6 років тому

    Awesome video.

  • @SuperVersicherungen
    @SuperVersicherungen 6 років тому

    Hi Brad, what do you think about Dartlang?

  • @clerdsonjuca3823
    @clerdsonjuca3823 6 років тому

    ionic e firebase crud please

  • @Avinash-fv7vh
    @Avinash-fv7vh 6 років тому

    Hey, this is a very good tutorial. I am stuck at a point. I am using Facebook OAuth for authentication with a popup window, so after logging in the alert says u are logged in and the user is added n firebase, but after clicking ok on the alert the page doesn't reload and it stays at login page only. It will be very helpful if any solutions are suggested. Thank you

  • @paktechie2313
    @paktechie2313 6 років тому +1

    For people that are having trouble accessing the Email of the registered user, instead of doing user.email, do user.user.email, or do this
    register: function() {
    firebase
    .auth()
    .createUserWithEmailAndPassword(this.email, this.password)
    .then(res => res.user)
    .then(user => {
    alert(`Account created for: ${user.email}`);
    })
    .catch(err => {
    alert(err.message);
    });
    }

  • @briannock5300
    @briannock5300 6 років тому

    I hadn't noticed this before but all of my fa-eye links take me to the employee information for the 1st employee on the list. I've made sure my Home.vue & ViewEmployee.vue files match the ones on github but it didn't help. What file do I need to be checking? Thanks

    • @TraversyMedia
      @TraversyMedia  6 років тому

      Take a look at the router/index.js file on github, does it match that exactly?

    • @briannock5300
      @briannock5300 6 років тому

      Yes, the only difference is mine is named Dashboard yours is Home.

  • @mikekang
    @mikekang 6 років тому +2

    Great Tutorial!! Do you have any plan to make vuejs+laravel tutorial??

  • @KonradSchK
    @KonradSchK 3 роки тому

    is this still relavant or outdated?

  • @iancarr3923
    @iancarr3923 6 років тому

    Excellent!

  • @Alessandro-nq3tm
    @Alessandro-nq3tm 6 років тому

    Tip: you can use @click=""..." Instead of v-on:click="..."

  • @chocolatemagnum1174
    @chocolatemagnum1174 6 років тому

    Thanks so much!!

  • @zackaltharok4545
    @zackaltharok4545 4 роки тому +1

    Well this won't run at all. Neither work. I've tried installing it and troubleshoot it but it'd always give me an error type Elifecycle when I run npm install.

  • @buitrungthien
    @buitrungthien 5 років тому

    thank you man!

  • @tnhoang088
    @tnhoang088 6 років тому

    How about send email reset password and redirect to my own page, sir.

  • @arturoatencio1433
    @arturoatencio1433 4 роки тому

    Hi! I do have a question about firebase, when you register an user, it does go to the firebase's authentication tab, but it is not stored in the collection under database tab. Can you explain how to store those values on the collection too?

  • @adace1
    @adace1 6 років тому

    Hey Brad, big fan of your tutorials! Could you do some on Apollo/Graphcool or just more GraphQL videos in general?

  • @ahebwachryce3299
    @ahebwachryce3299 6 років тому

    Hi Brad thanks for the amazing work,could you do the same for the angular firestore series

  • @BearkFearGamer
    @BearkFearGamer 4 роки тому

    somethings you can do better like the imports from firebase.
    use:
    import firebase from "firebase/app"
    import "firebase/auth" // to use auth, if you are using another, import too. Or you can import in one place.
    firebase.auth().createUserWithEmailAndPassword(email..., password...)

  • @kellervision
    @kellervision 6 років тому

    I love you man.

  • @rubenbernardes496
    @rubenbernardes496 6 років тому

    You're the man

  • @Light1c3
    @Light1c3 6 років тому

    Can you make a video about Onsen UI?

  • @linoxd
    @linoxd 4 роки тому

    thanks :'(, you're the best

  • @IamMclov1n25
    @IamMclov1n25 6 років тому

    please create a udemy react course!

  • @muhammeteser8914
    @muhammeteser8914 5 років тому +1

    Hi. How this know where to go? I didn't understand.
    this.$router.go({ path: this.$router.path });

  • @abrahamdieudonne9174
    @abrahamdieudonne9174 6 років тому +2

    MVP

  • @oamarkanji3153
    @oamarkanji3153 6 років тому

    Hi and thank you for the amazing tutorial. I have run into an issue, the following alert: alert(`account created for ${user.email}`) comes back as account created for undefined. For some reason it is not recognizing user. Any ideas why?

    • @zaidammerjamel
      @zaidammerjamel 6 років тому

      use ${user.user.email} thanks to
      Clive Ward-Cron

  • @victoruzochukwu9366
    @victoruzochukwu9366 6 років тому

    Hello Brad nice work.. Can you please make a video on how to implement micro-service architecture in nodejs. thanks