A bugfix in case you can't logout: In Nav.vue the Logout router-link change it to this: Logout then in the logout function after you await the logout request you can redirect to login.
const logout = async () => { await fetch('localhost:8000/api/logout', { method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'include', }); await store.dispatch('setAuth', false); //Add this line to redirect to login route await router.push('/login'); // It is important to put this line too, because if you don't put it, the NAV component will not recognize that it is no longer authenticated. } It will be good if you update your repository to solve this problem, for future students 👍👍👍👍👍
The common problem of all such tutorials is that they pay too much attention how to insert e.g. a button to the code but explain very little or don't explain at all principles of what we're doing. I assume as far as your auditory needs to know about an auth in Vue they already know basics about HTML and Vue so boring 80% of video can be shortened. Unfortunately I haven't learned how JWT works in Vue at all. What are auth cookies? What is difference with tokens? What about BFF? Router guards? Vuex? Nothing. It's just mechanical example.
Every video is available when you subscribe, also nice suggestion I will create a new page where I show what I'm currently working on and what I will work in the future.
Logout doesn't seem to work for me. The cookie still remains. I'm using nodejs for backend and the API route works fine when I test in Postman. I've also changed the router-link for logout to the anchor tag.
In Nav.vue --- Logout router-link, i changed to below Logout then in the logout function , added --------await router.push('/Login'); After I clicked on logout button also, i am able to redirect back to login page, But in navbar, still i can see Logout???? Can please tell me, why is this happening
update your "Logout" function to this one, just add two lines at the end of it const logout = async () => { await fetch('localhost:8000/api/logout', { method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'include', }); await store.dispatch('setAuth', false); //Add this line to redirect to login route await router.push('/login'); // It is important to put this line too, because if you don't put it, the NAV component will not recognize that it is no longer authenticated. }
You are right it doesn't work, the problem is in Nav.vue the Logout router-link change it to this: Logout it will work but it won't redirect. For some reason it redirects before it removes the cookie so I suggest adding a redirect at the logout function also.
Hello, this is a awesome guide. But I have an issue when setting cookie in browser. for postman it works fine, i am using axios with quasar framwork , I have set withCredential = True in axios boot file also. could you help me with it. thanks
First of all thanks for this tutorial...for you are the only TH-camr who stores jwt token with httponly cookie....I followed your tutorial step-by-step but when I logout, the jwt token doesnt get deleted from the browser (whereas from Postman, if I do a POST request to the 'logout' endpoint, the httponly cookie that contains the jwt token successfully gets deleted) ...but not sure why from the browser the jwt token doesnt get deleted while running the Vuejs app? I tried in both Firefox and chrome...same issue....can you please be able to throw some light on this?
I wrote a comment about the bugfix. In Nav.vue the Logout router-link change it to this: Logout then in the logout function after you await the logout request you can redirect to login.
@@anisbedhiafi4531 but I thought its not good to use localstorage. Now im so confused. Is his method really secure ?(provided that we add localstorage)
at 18:36 when I click my submit button I get an 404 error in my console for localhost:8000/api/register how can I fix this issue? where I go to network and then preview there a message in the display area saying "Cannot POST /api/register"
@@87ruthless53 You can use Docker or you can build one of these backends: 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 VueJS and C# JWT Authentication: th-cam.com/play/PLlameCF3cMEti_wQrnx9lqlgpTGN9RcqZ.html VueJS and Kotlin JWT Authentication: th-cam.com/play/PLlameCF3cMEvidqRQe5Ew65dbC_zN7__M.html
@@andrewaghoghovwia1948 Currently the available backends are in Laravel and in Django: VueJS and Laravel JWT Authentication: th-cam.com/play/PLlameCF3cMEtiBwc_DJqvKpxUC2WbOCKl.html VueJS and Django JWT Authentication: th-cam.com/play/PLlameCF3cMEv8Fcp3hA2rMG6sBZEh7VWX.html The other backends will be in NodeJS, NestJS, Golang, Deno.js and they will be uploaded in the following days
Please provide a repo with the code. I keep missing small syntactical mistakes. Same for your other videos. You're the only page that doesn't provide the code.
A bugfix in case you can't logout:
In Nav.vue the Logout router-link change it to this:
Logout
then in the logout function after you await the logout request you can redirect to login.
const logout = async () => {
await fetch('localhost:8000/api/logout', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
credentials: 'include',
});
await store.dispatch('setAuth', false); //Add this line to redirect to login route
await router.push('/login'); // It is important to put this line too, because if you don't put it, the NAV component will not recognize that it is no longer authenticated.
}
It will be good if you update your repository to solve this problem, for future students
👍👍👍👍👍
@@jonathancolorado2998 so helpful thank you
I took an Error 500 when I registered. I set up backend. How can I fix this
The common problem of all such tutorials is that they pay too much attention how to insert e.g. a button to the code but explain very little or don't explain at all principles of what we're doing. I assume as far as your auditory needs to know about an auth in Vue they already know basics about HTML and Vue so boring 80% of video can be shortened. Unfortunately I haven't learned how JWT works in Vue at all. What are auth cookies? What is difference with tokens? What about BFF? Router guards? Vuex? Nothing. It's just mechanical example.
You save my job with this tutorial! Thank you!
You are a monster!, As we say in Colombia, you did a great job and I learned a lot. Thanks
Great thanks from Poland
great ! tks for the code in github !
Hi, will every youtube video be available on subscription on your website? And where can we follow what new content you re gonna post on your website?
Every video is available when you subscribe, also nice suggestion I will create a new page where I show what I'm currently working on and what I will work in the future.
I created a new page scalablescripts.com/p/schedule where I describe what I'm working on and what I will be working next :)
when i use credentials: 'include', for login it gives me the error "Ensure credentialed requests are not sent to CORS resources with origin wildcards"
hi, very good but, there is way ti show login form without layout?
Thanks for the video!
I have a simple question why are we using script language? and when do we use it and when not !?
Am I suppose to see the cookie on Application and Network tab? Or only on Network tab? Cuz I'm getting AuthenticationException from laravel sanctum.
Logout doesn't seem to work for me. The cookie still remains. I'm using nodejs for backend and the API route works fine when I test in Postman. I've also changed the router-link for logout to the anchor tag.
Fantastic video, thanks
do you backend for this with how create backend vue.js & Initialize Sequelize?
that's the tutorial i want!
Can someone tell me why I need docker, and is docker very important here?
i followed all the steps but why in the console didnt show the jwt cookie?
same! did u solve it?
same, did u solve it
how can we solve the cors failed problem?
In Nav.vue --- Logout router-link, i changed to below
Logout
then in the logout function , added --------await router.push('/Login');
After I clicked on logout button also, i am able to redirect back to login page, But in navbar, still i can see Logout????
Can please tell me, why is this happening
update your "Logout" function to this one, just add two lines at the end of it
const logout = async () => {
await fetch('localhost:8000/api/logout', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
credentials: 'include',
});
await store.dispatch('setAuth', false); //Add this line to redirect to login route
await router.push('/login'); // It is important to put this line too, because if you don't put it, the NAV component will not recognize that it is no longer authenticated.
}
I can see no function from login that created the cookie which I assume is the token, can you just explain pls?
Hello what would happen if I refresh or close the browser? will i be logged out ?
sir, how to seo friendly using laravel and vue spa app... using vue meta?
When I log out, the cookie does not disappear. Do you have an idea of what could be wrong? Have followed the video from start to finish.
Which backend are you using?
@@ScalableScripts Sending it to Laravel with Docker
You are right it doesn't work, the problem is in Nav.vue the Logout router-link change it to this:
Logout
it will work but it won't redirect. For some reason it redirects before it removes the cookie so I suggest adding a redirect at the logout function also.
Awesome, thanks 👍
Hello, this is a awesome guide. But I have an issue when setting cookie in browser. for postman it works fine, i am using axios with quasar framwork , I have set withCredential = True in axios boot file also. could you help me with it. thanks
Hello, 'withCredentials' but not 'withCredential'
First of all thanks for this tutorial...for you are the only TH-camr who stores jwt token with httponly cookie....I followed your tutorial step-by-step but when I logout, the jwt token doesnt get deleted from the browser (whereas from Postman, if I do a POST request to the 'logout' endpoint, the httponly cookie that contains the jwt token successfully gets deleted) ...but not sure why from the browser the jwt token doesnt get deleted while running the Vuejs app? I tried in both Firefox and chrome...same issue....can you please be able to throw some light on this?
I wrote a comment about the bugfix.
In Nav.vue the Logout router-link change it to this:
Logout
then in the logout function after you await the logout request you can redirect to login.
Amazing...Worked like a charm :) Thank you so much :)
@@codedjango i put that but not resolve.. =( issue is there...
@@codedjango i have successfully logged in but my chorme browser can't add cookies, i have rechecked my code and same as yours
If you refresh your page your authenticated state will be lost.
True, did you found solution for this?
@@DK-pf2dg Yes use localstorage with Vue Store
@@anisbedhiafi4531 but I thought its not good to use localstorage. Now im so confused. Is his method really secure ?(provided that we add localstorage)
@@jamols09 oly shit!!! this is true!! if you close the navigator and enter again the cookie lose! solution?
Misy tsy mety tsony ranga code nao ah
at 18:36 when I click my submit button I get an 404 error in my console for localhost:8000/api/register how can I fix this issue?
where I go to network and then preview there a message in the display area saying "Cannot POST /api/register"
Did you build the backend?
@@ScalableScripts I have not, I skipped straight to 4:12. I think that might be my issue, I'll give it try with dockers
@@87ruthless53 You can use Docker or you can build one of these backends:
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
VueJS and C# JWT Authentication: th-cam.com/play/PLlameCF3cMEti_wQrnx9lqlgpTGN9RcqZ.html
VueJS and Kotlin JWT Authentication: th-cam.com/play/PLlameCF3cMEvidqRQe5Ew65dbC_zN7__M.html
Good video but this isn't a secure way to implement JWT authentication. You should show how to implement refresh tokens with JWT on the backend.
I know but I didn't want to make it too complicated :)
What backend is used here?
@@andrewaghoghovwia1948 Laravel
@@ScalableScripts Maybe a part 2 with refresh token implementation? 😋
@@andrewaghoghovwia1948 Currently the available backends are in Laravel and in Django:
VueJS and Laravel JWT Authentication: th-cam.com/play/PLlameCF3cMEtiBwc_DJqvKpxUC2WbOCKl.html
VueJS and Django JWT Authentication: th-cam.com/play/PLlameCF3cMEv8Fcp3hA2rMG6sBZEh7VWX.html
The other backends will be in NodeJS, NestJS, Golang, Deno.js and they will be uploaded in the following days
amazing
Can i ask, what is store? is that kind of middleware?
That is used by Vuex to store the state of the app. Check more here: vuex.vuejs.org/guide/#the-simplest-store
Please provide a repo with the code. I keep missing small syntactical mistakes. Same for your other videos. You're the only page that doesn't provide the code.
imma first
Left us hanging :( not a good tuttorial
Great video. Thanks