Vue Authentication Full Course | Login, Logout, Forgot and Reset Password

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ก.ย. 2020
  • 👉 Check our website: scalablescripts.com
    Backend: • Api Authentication Wit...
    Learn to Authenticate using Vue.js. In this video, we will create a Login component where we will send the Login Credentials and get back a JWT Token. Then we will use that JWT Token as a Bearer Token in the Request Headers to retrieve the Authenticated User. We will also add the Logout functionality.
    Backend: • Api Authentication Wit...
    #vue #vuejs #jwt

ความคิดเห็น • 161

  • @ScalableScripts
    @ScalableScripts  3 ปีที่แล้ว +10

    You can check these playlists if you are interested:
    VueJS and Laravel JWT Authentication: th-cam.com/play/PLlameCF3cMEs7ErSWENv03zOKtH5NTG61.html
    VueJS and Django JWT Authentication: th-cam.com/play/PLlameCF3cMEvj7fV-Szcaz_ve303e4AxX.html
    VueJS and NodeJS JWT Authentication: th-cam.com/play/PLlameCF3cMEsjpIRxfB9Rjici3aMCaQVo.html
    VueJS and Golang JWT Authentication: th-cam.com/play/PLlameCF3cMEvSY8iQ6QBVE8VRK4UiZZ33.html
    VueJS and NestJS JWT Authentication: th-cam.com/play/PLlameCF3cMEujfD19Si2VNRlFEyDa_ZJb.html
    VueJS and Deno JWT Authentication: th-cam.com/play/PLlameCF3cMEuDSusZHXGeIZ0Axmd74aPc.html

  • @prabeshguragain4463
    @prabeshguragain4463 3 ปีที่แล้ว +12

    Exactly what i wanted. I just learned basics of vuejs and wanted to implement it in a real project. Just didnt know how to do it in a flow/pattern. Thank you for the tutorial.

  • @minahyu1857
    @minahyu1857 ปีที่แล้ว +9

    This is exactly what I wanted and your explanation was just perfect. Thank you.

  • @vicsystems
    @vicsystems 3 ปีที่แล้ว +8

    One of the best tutorials I have seen

  • @faze7574
    @faze7574 3 ปีที่แล้ว +3

    the way you teaching is awesome, great tutorial ❤

  • @elvisonobo7060
    @elvisonobo7060 3 ปีที่แล้ว +31

    This tutorial is just bliss. Coding simplicity, no jumping around unnecessarily, clear audio, crystal clear video, no bullshit explanations that are not needed. Straight to the point. Kudos to you
    Watched a paid course and the explanation on Vuex got me dizzy 😱. This right here 🤛👍

    • @fayzullorakhimov4781
      @fayzullorakhimov4781 3 ปีที่แล้ว

      hk

    • @goodbrainwork
      @goodbrainwork 2 ปีที่แล้ว

      what are bullshit explanations?

    • @ZvolskyMi
      @ZvolskyMi 2 ปีที่แล้ว

      + the english which the bad non-native speaker can good understand

  • @stevebiko3282
    @stevebiko3282 2 ปีที่แล้ว

    Best guide I have ever seen on TH-cam.

  • @doubleyousl3726
    @doubleyousl3726 2 ปีที่แล้ว +8

    16:52 handle submit register
    26:06 refactor axios
    29:14 handle submit login
    33:20 bearer

  • @albart1732
    @albart1732 3 ปีที่แล้ว +4

    Great and clear tutorial Thanks :) Alain from France

  • @arjunpukale3310
    @arjunpukale3310 9 หลายเดือนก่อน

    loved the tutorial. crisp and to the point

  • @rafysancheztilogica8587
    @rafysancheztilogica8587 9 หลายเดือนก่อน

    Excellent - I am begining and It is a wonderful example !!!!

  • @makkujapan8123
    @makkujapan8123 3 ปีที่แล้ว +1

    Really good tutorial. Thank you for that!

  • @vikashjoshi4818
    @vikashjoshi4818 3 ปีที่แล้ว +1

    great video straight to the points 👏👏👏

  • @ayrtoncravero
    @ayrtoncravero 2 ปีที่แล้ว +1

    Muchisimas gracias por el video! Realmente me ayudo con una duda que estaba teniendo!!

  • @natashasamuel9346
    @natashasamuel9346 2 ปีที่แล้ว

    Great class.
    Keep up the good work.
    Thank You,
    Natasha Samuel

  • @nektariossourgias8470
    @nektariossourgias8470 3 ปีที่แล้ว +1

    great tutorial and simple....

  • @mohamedayman140
    @mohamedayman140 ปีที่แล้ว

    Well done. Very awesome tutorial !

  • @Andrei-qi4tm
    @Andrei-qi4tm ปีที่แล้ว

    This is video is very informal, great job!

  • @node_JS
    @node_JS 2 ปีที่แล้ว

    Thanks .it is wonderful and your sound is relaxing me

  • @GergelyCsermely
    @GergelyCsermely 2 ปีที่แล้ว

    Thank You, very nice tutorial.

  • @ariobintangnugraha2641
    @ariobintangnugraha2641 ปีที่แล้ว

    You are a lifesaver!! Thank you!

  • @gbalert58
    @gbalert58 3 ปีที่แล้ว

    great video i like the way you teach.

  • @vicsystems
    @vicsystems 3 ปีที่แล้ว +1

    This is amazing and helpful

  • @sualsizler
    @sualsizler 3 ปีที่แล้ว +1

    great tutorial, thanks

  • @evellinne
    @evellinne 3 ปีที่แล้ว +16

    I didn't understand where I get the styles that you say in minute 4:00... could you tell me? Thanks!

  • @tiennghequyet1268
    @tiennghequyet1268 3 ปีที่แล้ว +5

    This video is great at the right time When I need it

    • @dnnhacbuon8171
      @dnnhacbuon8171 3 ปีที่แล้ว +2

      haa người ae thiện lành

  • @IvanRibeiro
    @IvanRibeiro 8 หลายเดือนก่อน

    Great tutorial.
    Thank you very much.😁

  • @well_done_o7
    @well_done_o7 8 หลายเดือนก่อน

    oooohhh man, That was all i wanted... Love ya girl. U helped me a lot

  • @ckgringoblogger9170
    @ckgringoblogger9170 2 ปีที่แล้ว

    In your example, are you using the backend with Sanctum or JWT? Thanks for the class.

  • @difusal
    @difusal 3 ปีที่แล้ว

    I found gold in this channel🤩

  • @mossfoobar8322
    @mossfoobar8322 3 ปีที่แล้ว

    Very nice toturial , enjoyed it very much. 👍 hats off to you

  • @edwardolujobi552
    @edwardolujobi552 2 ปีที่แล้ว

    Hi. Great video. The login form looked quite different. Do I need to add a bootstrap link apart from the one you added at the beginning of the video

  • @edmarr2
    @edmarr2 2 ปีที่แล้ว

    Your video is good, thanks for share

  • @manishongraph3318
    @manishongraph3318 2 ปีที่แล้ว

    lovely voice 😇

  • @josbexerr5166
    @josbexerr5166 3 ปีที่แล้ว

    Muchas gracias Guapa......saludos de los andes peruanos

  • @joypro5278
    @joypro5278 5 หลายเดือนก่อน

    Subscribed
    Love you❤

  • @rashed50702
    @rashed50702 3 ปีที่แล้ว +1

    I am facing some problem when pages reload/refresh then, auth user is gone. And I want to redirect to router '/' when someone who is unauthenticated user tries to go router '/dashboard'

  • @mahsagoodarzi859
    @mahsagoodarzi859 3 ปีที่แล้ว +2

    thank you but it's so bad that the top of your screen is hidden and it's so confusing that what did you do in what component

  • @God4Short
    @God4Short ปีที่แล้ว

    beautiful voice.. 🫀

  • @hamidray2429
    @hamidray2429 3 ปีที่แล้ว

    how create backend vue.js & Initialize Sequelize for this frontend?

  • @Haise01
    @Haise01 3 ปีที่แล้ว

    I have a question
    Does this authentication saves your data like a profile? For example, if I'm making a social media... If I try to make a comment after logging in, will that comment appear with the profile you logged in? thank you!

  • @okpain8324
    @okpain8324 ปีที่แล้ว

    amazing tutoo thanks alot

  • @zedrobot5864
    @zedrobot5864 3 ปีที่แล้ว

    Thank u so much really helpful tutorial can u make a tutorial on how can we deploy our app to heroku or any other platforms

  • @milk_steak_the_original
    @milk_steak_the_original 3 ปีที่แล้ว +2

    Is there a finished repo of this tutorial ?

  • @tbugaevsky
    @tbugaevsky ปีที่แล้ว

    Goooood! thank you.

  • @maharashtravidhansabha4289
    @maharashtravidhansabha4289 ปีที่แล้ว

    hi! i am not sure if I will get a reply to this comment but still i am trying to ask. i am not a technical person and did not understand this properly. my question is, can this be achieved in google apps script where all 4 functions Login, Logout, Forgot and Reset Password can be achieved? if yes, do you have any such video on your channel? if yes, pls share the link. thanks... god bless !

  • @BirajShrestha123
    @BirajShrestha123 2 ปีที่แล้ว

    Thank you soooooooooooooooo much....

  • @peteraro2892
    @peteraro2892 2 ปีที่แล้ว +1

    please where did you get the css from? Thank oyu

  • @omaromar-sv2jt
    @omaromar-sv2jt 3 ปีที่แล้ว

    Tha action registre that send thé token. When you definted ?

  • @shimulchakraborty4029
    @shimulchakraborty4029 3 ปีที่แล้ว

    can you help me to how to upload a image file into the ready api?

  • @rustonefendi3642
    @rustonefendi3642 3 ปีที่แล้ว

    why do I always experience unauthenticated users even though I have setItem in the login component and called getItem in the home component

  • @Kader-su8jr
    @Kader-su8jr 3 ปีที่แล้ว +1

    Wow! This video is so easy to understand. Is this using Vue 2 or 3?

    • @ScalableScripts
      @ScalableScripts  3 ปีที่แล้ว

      This is Vue 2, I'm uploading content for Vue 3 you can find it here: th-cam.com/play/PLlameCF3cMEsd1x8vBxTX9JYA6u2BawpR.html

  • @juhen9
    @juhen9 ปีที่แล้ว

    Thanks! Perfect

  • @Masimkaify
    @Masimkaify 2 ปีที่แล้ว

    You can use json-server for backend

  • @davidyu9088
    @davidyu9088 2 ปีที่แล้ว

    Nice vid, btw where do u get the style code?

  • @noeliacocconi560
    @noeliacocconi560 ปีที่แล้ว

    Hi! I am not being able to post the login just like 30:52. It returns 404. The register post is working, any ideas what is missing? Thanks!

  • @ShadowD2C
    @ShadowD2C 2 ปีที่แล้ว +1

    where you got the styles at 4:20 ?

  • @ngoccantech820
    @ngoccantech820 2 ปีที่แล้ว

    Thank you!!!!

  • @saharmoradi9706
    @saharmoradi9706 ปีที่แล้ว +2

    thanks for tutorials. for Axios, I have 404 error and cant connect to server. Do you have any idea? thanks again

    • @ZhiziKnowHow
      @ZhiziKnowHow 10 หลายเดือนก่อน

      me too i get axios error

  • @christianjakealiser1752
    @christianjakealiser1752 2 ปีที่แล้ว

    where did you get the styles?

  • @hasyidanparamananda
    @hasyidanparamananda 2 ปีที่แล้ว

    Where i can get the style and everything you copy paste?

  • @chekrasena
    @chekrasena 3 ปีที่แล้ว

    tnq mam

  • @nishantsethi6625
    @nishantsethi6625 2 ปีที่แล้ว

    timesaver video for beginner thanks

  • @ctrlspace
    @ctrlspace 3 ปีที่แล้ว

    love you!!!

  • @viewvue3744
    @viewvue3744 2 ปีที่แล้ว +1

    do you have the github link of this project ? pls i need it , thanks

  • @devaes
    @devaes 2 ปีที่แล้ว

    are the data persisted ? When you refresh the page it back to its normal state

  • @recindustry8791
    @recindustry8791 ปีที่แล้ว +1

    I am your 900th like!

  • @pierreci2378
    @pierreci2378 8 หลายเดือนก่อน

    thank you

  • @CocodrilosaurioXD
    @CocodrilosaurioXD 3 ปีที่แล้ว +1

    Should be a good idea put the code on the description or something similar

  • @MohtashimIqbalButt
    @MohtashimIqbalButt 3 ปีที่แล้ว

    Nice 👍🏻

  • @SandeepKaur-pv4nt
    @SandeepKaur-pv4nt ปีที่แล้ว

    Fronted vue.js and with in backed Web api create it's video
    And plz in which show the files name which files changes i don't understand

  • @sucunha8645
    @sucunha8645 ปีที่แล้ว

    Nice tutorialhats, low pitched Nice tutorialhats etc.

  • @ferzy2134
    @ferzy2134 ปีที่แล้ว

    SNice tutorialt, it's the nice tuto

  • @shivamtreesoft4451
    @shivamtreesoft4451 2 ปีที่แล้ว

    its in vue js 3?

  • @aangtonio5570
    @aangtonio5570 11 หลายเดือนก่อน

    Sadly, this tutorial doesn't work with newer versions of Vue (as vue-cli is now almost deprecated and everything is made through Vite). Wish this tutorial to be updated soon. 🙏🙏🙏

  • @herzerwaermend
    @herzerwaermend 2 ปีที่แล้ว

    is it not bad practice to save the token in local storage?

    • @ScalableScripts
      @ScalableScripts  2 ปีที่แล้ว

      If you check my channel you will see that I have another video where I save it to an httponly cookie and another one where I use access & refresh tokens

  • @isaachatilima
    @isaachatilima ปีที่แล้ว

    How do I remove the authorization header on login page?

  • @bassamdarawshi
    @bassamdarawshi 3 ปีที่แล้ว

    can i do forget password and reset using sanctom??
    and why you chose passport no sanctom?

    • @ScalableScripts
      @ScalableScripts  3 ปีที่แล้ว

      Sanctum wasn't released when I created this tutorial

    • @tingtingjoanaling2114
      @tingtingjoanaling2114 3 ปีที่แล้ว

      @@ScalableScripts can u do for jwt ?

    • @ScalableScripts
      @ScalableScripts  3 ปีที่แล้ว

      I have some tutorials coming in the pipeline, it may take ~2 months to do one for sanctum

  • @witchestify
    @witchestify 2 ปีที่แล้ว +1

    25:16 axios configuration

  • @adarshvalamary1527
    @adarshvalamary1527 3 ปีที่แล้ว

    I am getting "FAILED TO LOAD RESPONSE DATA" in the preview tab. Does anyone know what is the issue?

    • @ScalableScripts
      @ScalableScripts  3 ปีที่แล้ว +1

      I suggest watching the newest VueJS JWT Authentication: th-cam.com/video/ULFAgn2ITko/w-d-xo.html

    • @adarshvalamary1527
      @adarshvalamary1527 3 ปีที่แล้ว

      @@ScalableScripts ok Thank you!

  • @ten8217
    @ten8217 3 ปีที่แล้ว

    I love you muah muah

  • @i3_13
    @i3_13 ปีที่แล้ว +1

    Why not show the file tabs?

  • @jogansahu9295
    @jogansahu9295 3 ปีที่แล้ว

    i love u so match

  • @passivecryptoearnings3605
    @passivecryptoearnings3605 3 ปีที่แล้ว

    How does this work? users get created in a file? I can't understand that

    • @ScalableScripts
      @ScalableScripts  3 ปีที่แล้ว

      In the description you can find the backend: th-cam.com/video/F9Xmc3iHc88/w-d-xo.html. So you have to complete that one first then this video consumes that API.

  • @silverlira
    @silverlira 3 ปีที่แล้ว +1

    can you put this code to git, pls?)

  • @SureshKumar-bt9rd
    @SureshKumar-bt9rd 2 ปีที่แล้ว

    return ['email' => $request->{$this->username()}, 'password' => $request->password, 'status' => 1,'expire_date'>=date('Y-m-d')]; greater than equal not working and i got 500 server error message. and i need to display error message (your license expired) when current date cross the expire date (LARAVAL 7 VUE JS)
    Please help me Mam!!!

  • @mustafasargol5224
    @mustafasargol5224 ปีที่แล้ว

    I got Cross-Origin Request Blocked. How can i fixed this?

  • @muhammadtayyeb7008
    @muhammadtayyeb7008 3 ปีที่แล้ว

    error occur when i write div tag in login.vue
    Error Vue js error: Component template should contain exactly one root element

    • @joshuawillis7874
      @joshuawillis7874 3 ปีที่แล้ว +3

      surround ALL of your elements with a single tag. If there is more than one element at the root level, it will throw this error.

  • @islamabusleem6939
    @islamabusleem6939 2 ปีที่แล้ว

    localStorage is not secure for storing data especially against XSS attack

  • @galkonesh6821
    @galkonesh6821 2 ปีที่แล้ว

    u already created localhost:8000 ??

  • @raouferaoufe3563
    @raouferaoufe3563 ปีที่แล้ว

    Little did I know that my dumapp self creating drum softs by making a bunch of different soft rolls was far from the best way of doing

  • @mohammadbor6728
    @mohammadbor6728 ปีที่แล้ว

    pleas share this.project in git or ... for download

  • @damladalgc3131
    @damladalgc3131 2 ปีที่แล้ว

    hello how can i make a session to other pages

    • @damladalgc3131
      @damladalgc3131 2 ปีที่แล้ว

      Is it enough to make a at the beginning of the page?

  • @biswanathbanik9505
    @biswanathbanik9505 ปีที่แล้ว

    how to import files in vue js

  • @oxynato215
    @oxynato215 3 ปีที่แล้ว

    Can u plz provide us the source code.

  • @anisbedhiafi4531
    @anisbedhiafi4531 3 ปีที่แล้ว +10

    On logout, you forgot to send a logout request to the server to actually destroy the token on the server side

  • @espeditoesposito9534
    @espeditoesposito9534 2 ปีที่แล้ว

    404 error when sending data link: '' register ", why?

    • @renaudlandry5384
      @renaudlandry5384 ปีที่แล้ว

      Did you find the solution because i get the same thing ?

  • @pierreci2378
    @pierreci2378 8 หลายเดือนก่อน

    didn t understand how the token is generate ?

  • @reinoutko
    @reinoutko ปีที่แล้ว

    How scary, I was just thinking about learning this

  • @TDhanunjay
    @TDhanunjay 2 ปีที่แล้ว

    Code link please???