Authentication in Vue using Laravel Sanctum

[@aschmelyun]

If you'd like to see the full source code behind this video, you can check it out on my GitHub here: github.com/aschmelyun/video-auth-vue-laravel-sanctum

[@moranilt]

$request->user()->secrets isn't working. 500 ERROR is always response. But Secrets::all() is working good. Any ideas how to fix?

[@claudio-emmanuel]

Hi Andrew, what are your IDE's theme and font settings? and which IDE are you using?

[@bruttavoglia]

Hi Andrew! I want to implement even registration from Vue, if I'm not wrong it's just move the user creation process from UserFactory to Register.vue component right?

[@mihoteo]

@@moranilt I would like to know too.

[@danishirfanshah5770]

@@moranilt hey, did you get the answer. i also have same problem

[@ademtepe2855]

One of the fullest 23 mins of my life, thank you for making such a clear and concise video. (Well, it's 23 mins but actually I watched, applied and worked on this video and subject all day.)

[@aschmelyun]

Thank you so much! That means a lot to me, I'm glad you enjoyed the video!

[@DarylLegion]

Your tutorials are well explained. Please make a series of this Laravel Vue + Sanctum

[@ademtepe2855]

I would appreciate that too. A simple but full app example would be great!

[@dawidwinkler3854]

I don't get it. As already someone mentioned, the XSRF-Token already exists without /sanctum/csrf-cookie, wo why do we call that? And it says, that after a successful login I can call any other api routes, yes, of course, couse there is no auth:sanctum middleware in your secrets api call, so i can call that through postman too.

[@shamscorner]

Man!!! The video quality is A+

[@icekalang3598]

what happens when you accidentally refresh the page?

[@Tyche.Crypto]

Would you please make a video about protecting the routes with the sanctum, and how to refresh or expire the token.

[@aschmelyun]

Sure! I will add it to my list.

[@tysonadeyemi3726]

I was wondering if Sanctum can be used for a Multi guard set up such as Admin, Customer and Vendor type of setup

[@kennyteoh4409]

Hi, isn't your "api/secrets" api path been expose to frontend. Where anyone can use postman to call the "api/secrets" without authenticate?

[@FilipBekic01]

Why do we do GET /sanctum/csrf-cookie if we already have XSRF-TOKEN in our cookies?

[@sevolaiser]

If I try to retrieve the user secrets I get the error that there is no User on the request. I dont know why he is telling me im not logged in after entering the right credentials. What could be the problem?

[@AllanVigiano]

same problem here... I have a git clone and then composer update, npm install and php artisan migrate (plus factories). So strange!

[@marcuu5]

Is it possible to use the Laravel ui auth forms and laravel sanctum or do you have to write your own login form?

[@MrEdSaints]

It would be amazing if you could make an updated version of this ..

[@JJ-ot3ps]

is this one the same as laravel breeze that comes with vue? and maybe add vite ?

[@someone-jq3lc]

what font family you are using in your editor?

[@digitaluniverse9826]

Andrew how do we logout with this cookie stuff?

[@sukatuabdullahithedevissa4454]

Thank you very much for a beautiful short and detailed tutorial.

[@Cybersix6666]

Great video... would you make a video on how to deploy this into a live server ? I dont seem to be able to find one ... thanks

[@claudio-emmanuel]

Hi Andrew, what are your IDE's theme and font settings? and which IDE are you using?

[@Ahmed-157]

This was a perfectly made tutorial! Do you plan to make more Vue and Laravel tutorials?

[@КириллБелоусов-ы5е]

in which folder is the admin panel created? in client project or inside laravel project?

[@anbuselvanrocky]

What are the code extensions and configurations you are using?

[@dgloria]

My problem with this that my api is not protected from third party if I call myApp/public/api/secrets page. So that would be a security issue. How would you do that? Eg. in postman you aren't able to access the api only if I provide you an access bearer token. One little addition, when you make a video, please keep bottom 3% free from content, I can't see your terminal commands of the youtube progress bar correctly when pausing the video. Thank you.

[@redonechkernit5510]

Thank you about this video. How i can check if user authenticated ?

[@softwareEngineerKunwar]

Great tutorial. The description is clear and to the point. Would you mind to make full new video for laravel 8 vue3 + sanctum rest api full stack? Thanks in advance.

[@henriqueferr8623]

I'm having a problem at 20:20. When i go into 'localhost:8000/api/secrets' it says that i'm "trying to get property 'secrets' of non-object". When I try only to return $request->user() it shows nothing. I'm using Laravel 8

[@beehive219]

Make sure you added your domain (for me, using Valet, It's 'spa.test') to the 'stateful' option in config/sanctum.php :)

[@drsolace]

@@beehive219 Thanks Lars!

[@mihoteo]

@@beehive219 Doesnt work for me. It still shows non-object instead of data :/

[@Simone-ft2cg]

Hi, Thanks for this video! I need to make a PUT api Route to modify the product in the cart. Can I just write the route in api.php or I need Laravel Sanctum?

[@thomaspotterdotexe]

Did you know what vscode extension to install to make showing the identifier, like that 'table' and 'column' in migration file? thanks!

[@aschmelyun]

Hey Thomas! I believe for this video, I used the PHP Intelephense plugin: marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

[@thomaspotterdotexe]

@@aschmelyun oh, I use that too but it doesn't showing like that ("table", "column", etc) idk why :'(

[@jerickcarlosmangalus6856]

i'm having problems with laravel santum its very slow in response when i use sails in docker ? any idea how to fix this ?

[@lloparyllopary]

which code editor do you use? And if it is vscode which extensions do you have?

[@aschmelyun]

I'm using PHPStorm with the Material UI Theme plugin set to the Atom One Dark color scheme!

[@lloparyllopary]

@@aschmelyun thanks!!

[@Vtivo]

Thanks for the course, hoping to understand Sanctum more... @5:25 In Tinker when I run: App\User::with('secrets')->get(); I get the following error: PHP Error: Call to a member function addEagerConstraints() on null in /Users/[username]/Sites/sanctum/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php on line 578 Can you help?

[@Vtivo]

My follow along version uses Laravel Framework 7.25.0. App\Secret::with('user')->get() works. I downloaded & setup your repo (Laravel Framework 7.9.2) both tinker queries worked fine, has anything changed on the newer version of Laravel?

[@aschmelyun]

Hey Dino! Check your User.php model, where you're defining the public function secrets() method and make sure that there's a return statement. You should have something like: public function secrets() { return $this->hasMany('App\Secret'); }

[@kosticnemanja1914]

Work through the Controller, not through the Tinker... App\Secret::with('user')->get(); WORKING App\User::with('secrets')->get(); NOT WORKING ?? HELP Illuminate/Database/Eloquent/RealationNotFoundException with message 'Call to undefined realationship [secrets] on model [App/User]

[@alexandriv2174]

what is it dcr?

[@raufhashimov241]

Thanks man youre channel best for anyone whos learning laravel.If you also will show auth laravel sanctum with react that's will be great.And try to show every example using react because developers usually use react.

[@nirajgautam403]

lets say im at dashboard , and im making axios call to get user which is protected with auth:sanctum middleware , do i have to send the token manually through my axios call or it will work just fine

[@aschmelyun]

As long as it's coming from the same domain name, you shouldn't have to include the token at all. You may need to add withCredentials: true to your axios initialization though.

[@stanislavkacmarik6210]

Why is this much better option then tymon/jwt-auth? Is it more secure? Or does sanctum solve some problems that are in tymon/jwt-auth? Or is it just easier to setup?

[@aschmelyun]

It works similarly behind the scenes for API tokens, but also does a lot of authentication setup automatically when combined with frontend JavaScript calls. It’s also an official Laravel repository, meaning that it will be updated consistently as the framework is!

[@richardwheatley7194]

I was building on valet and failed to pick up domain config, but otherwise a great tutorial in both content and delivery.

[@SussanRai]

How can i get auth user in public api using scantum

[@Venezuelangel]

I'm sorry for being lost, but what password are you using to log in to your dummy users (it's hashed in the DB, of course).

[@SabinMehedin]

Hi! The password is password. In your factory file can see a comment near the hash: // password :)

[@stefantatic4836]

Hi, Andrew, awesome video. Regarding the last example, I assume it's easier and more robust to use the auth:sanctum (instead of the default auth:api) middleware on protected routes? This way it'll throw a 401 (unauthenicated) and for some routes 403 (unauthorized) error which is clearer than "general" 500 (internal server error). Of course, the biggest plus you get is that you can set this middleware on your controller's constructor/chain it in the routes file instead of performing the checks for each controller's method. Am I right to point this out? Another comment: is there something that can be done to handle redirection of your Vue frontend in the same way Laravel does it out of the box for back-end served apps? I'm specifically thinking (but you might add something as well) about RedirectIfAuthenticated middleware which prevents signed-in users from reaching e.g. Login/Register pages. How can this be tackled for your Vue front end app? Thanks again for this great tutorial, I subscribed and hope to see more cool videos from you. Keep up!

[@stefantatic4836]

Also, the thing I'm baffled for the last 3 days: how do you handle the (authenticated) User object? E.g: you want your navbar to have the user options on top or login/register if no one's signed in and of course have this updated on login/logout. Do you keep the object on the root instance and have all your other components (e.g. mentioned top navbar, but also sidebar which can show different options to admin/regular user/guest user) update on this change or... Let me know if you need me to explain it a bit more, I hope you get my question. I am somewhat experienced with Laravel, but I'm pretty new to Vue and I'm currently building my first SPA so it's a fun journey. 😃

[@orlandoubilla7055]

Hi! if your .env file have the var SANCTUM_STATEFUL_DOMAINS and using localhost over some port (like 8080) , add it too. SANCTUM_STATEFUL_DOMAINS=localhost:8080 Regards.-

[@DavixeTheBoss]

@@stefantatic4836 For this kind of use cases, i think the best is to use Vuex

[@maulik1644]

Which IDE are you using??🤔 Is that php Strom??

[@aschmelyun]

Yes! It's using the Material Theme UI with Firacode as the font.

[@wojciech-koziol]

Hi, great tutorial but I've got problem with login in. When I do axios.post on route /login I've got error: errors: {email: ["These credentials do not match our records."]} message: "The given data was invalid." I've checked up several times and inputed data is correct.

[@wojciech-koziol]

Okey, I solved the problem. I just created manually user.

[@hanimajebry4970]

13:30 , you could've used `form-group` class

[@robbichandra6279]

Can you do full tutorial please

[@aschmelyun]

It's on my to-do list! Keep an eye out for future videos!

[@ronnelsuan5846]

Hi i have vue login page. and i just want to implement sanctum on may login. it should i need secret or not ?

[@ronnelsuan5846]

if it's okay my login is vue only then after i logged in its typical laravel blade templating?

[@ronnelsuan5846]

what's the use of personal token access in sanctum ?

[@kushtra24]

Does this work for laravel 8?

[@nirmaldangi877]

I have problem in using laravel8

[@michaelerwin8744]

Since this relies on cookies for security, how does mobile app integration work using same API?

[@aschmelyun]

If you check out the Laravel Sanctum documentation, there's a whole section about using bearer tokens as authentication. You can pass them through as an Authorization header to your API requests!

Hello there! I try this with Laravel 8, and I'm blocked by this error: "localhost:8000/login 404 (Not Found)" What could be the problem?

[@moranilt]

Hi. Just try to read laravel.com/docs/8.x/sanctum There are some differences between v7 and v8 of Laravel. YOu don't need to install laravel/ui. Instead you should use laravel/jetstream

@@moranilt Yep, thank you very much, I realized by now that 8 is different in that field... so I started a new project installing Jetstream, now I'm configuring my Vue app to handle the login/logout requests, check if someone is authenticated, etc...

[@guillercelestino801]

Can please add on how to refresh the token.

[@aschmelyun]

Sure thing! I'll add this to my list of upcoming videos, keep an eye out!

[@rosesolution2435]

Can't see the commands

[@FilipBekic01]

I've thinking about Sanctum and.. if you use just a simple authorization system, why do you even need Sanctum? Can't you just authorize normaly vie axios request? Sanctum may be useful only issuing API tokens which you do not do in the video.

[@aaronmeder]

Thanks, great overview!

[@JohnnyBigodes]

Awesome as always.... Thank you

[@ahmadabuaysheh]

Really clear and amazing video. Thank you!

[@SergeySSD]

work with token match easy and better if need full cross domain

[@neomn110]

13:55

[@Lumaport]

Awesome video thank you

[@Sub_Boi]

Thank you

[@igorthierry]

if you want to make requests for api routes from a web page SESSION_DRIVER=cookie SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:8000

[@eisa343s]

Thanks.

[@akiaksandrpapilau932]

artisan make:controller SicretController - makes a new blank class with the name SicretController, it is so useful, i do not even know how i would live without this help, lmao, every day i get more and more disappointed about this framework, also you tutorial is not relevant alredy for the 8th version. f**k do these guys have anything permanent?

[@franzkafka9734]

Русскоговорящим ку У кого его метод не работает пишите: App\Models\User::factory()->create();

[@mihaylov13]

Тода Андрей

[@joshuaabejero9592]

OMG I almost run go back to ExpressJS! You saved me a lot of trouble. Now I can access the AUTH User using $request-user()->id.

[@SquarCoX]

How do i check in each component if the user is authenticated??

[@DavixeTheBoss]

The best option for this, in my opinion, is to save the user data in a global, eg: Vuex, check if the user is authenticated or not before accessing any route within the Vue Router and this way you could define which components could the user access or not.