Laravel SPA Authentication - setup and common mistakes

[@cdruc]

Hey! This video is quite old and before axios used to add the x-xsrf-token header automatically. Now it no longer adds it, so you’ll have to do it yourself. Laravel Sanctum Auth: masteringauth.com

[@macarenagd3954]

Hello, your videos help me a lot. I am eagerly looking forward to the launch of your course. How are you doing it now with the new version? I'm using 1.7.2 and can't find a way to avoid getting a 401 error. I´m using withCredentials: true and withXSRFToken: true in my axios configuration. Thanks a lot man!

[@masollano]

is the site already up?

[@DimZeta]

This is one of the clearest and easiest to understand videos about Laravel Sanctum, but also about CORS and CSRF token. Thanks a lot!

[@cdruc]

You’re very welcome! glad you enjoyed it!

[@teknotips188]

100% agree

[@shofada]

Wow! Diagrams and in-depth explanations. This is a sweet upgrade. Thanks for putting this together. Keep it up!

[@REZAZIMohamedabdessamed]

That's the most straight forward and cleaner explanation about Laravel sanctum auth and CORS.

[@thisisroushan_1337]

This was an incredibly in-depth video that really showed me why I was facing the errors I was facing. Thank you!

[@Redheadtama1]

Thank you so much for making these videos. After scouring the internet for months looking for help with my hobby project, I have finally found you and you are the only person who explains this stuff in simple terms! P.S. I have subscribed to your course. Looking forward to it :)

[@janmichaelbesinga3867]

After watching for a couple of minutes, i realized i need to pause the video and hit like and subscribe. Kudos

[@ericrojas3385]

Oh man thanks a lot!!. I had already given up on Sanctum and was going to replace it with jwt or bearer tokens until I saw your video. You're the best!!

[@IntiMaldonado]

This is the best and most needed explanation online about setting up latavel api with spa front end 👌

[@kapa4208]

Definitely the clearest explanation of SPA authentication with Laravel and Vue. Thank you so much!

[@sinaahmadpour3180]

After 10 years I finally understood the CORS issue completely! Thank you for the great material

[@cdruc]

glad you found it useful! 👊

[@kirinyetbrian]

This helped me a lot after struggling for three days.Thank you!

[@neonneon8225]

Thank you so much, I resolved the problem I was faced with after watching your great video tutorial. Additionally, I learnt some extra important points from you. Thanks Sir.

[@pccc2011]

This is the most clearly video explain about Laravel Sanctum and Cookie based. Thanks so much!! ❤

[@siyabdev]

Your exaplanation is just WOW

[@ericksanabria5657]

wow! i have been struggling in my first spa project. I wiill reconfigure everything again. You have gained a new subscriber ty

[@william.darrigo]

Super detailed! Best tutorial on sanctum so far. Thank you

[@justinenemuadia9887]

Man, I came from the article. Thank you soooooooo muchh

[@OnlyGoUpW]

again you saved my life for the second time ! thank you from algeria !!

[@ZanarkandStarplayer]

Thanks!

[@cdruc]

Thank you! 👊

[@twentyfirstmen]

Bro, You're so good at explaining, Thanks a lot, continue ❤❤💪🏼💪🏼

[@mostafakhaled6680]

you did a great job man , thanks for your time and efforts

[@laracrafts195]

nice video, you made everything clear and precise without any issues

[@Naixik]

Thank you for this vidéo, I lost 2 days to still find your solution !

[@cdruc]

Glad it helped!

[@tukangkabel4997]

I like this! Brief explanation, clear and easy to understand. I'm waiting for a tutorial on creating or installing an admin template. After login this is done. Thanks

[@geniygames4620]

Thank you for the video! I do everything the same as you, except installing laravel breeze. It does not work for me. Do I need to do anything additional if it works on a local host without breeze?

[@7ala9at]

thank you, how to check user status , is logged or not

[@dibbyo456]

Finally something that actually works. Thank you so much.

[@cdruc]

Glad it helped 👊

[@israeliloba]

Thank you so much, i have been on this error for two days now

[@oketafred]

Thanks Constantin awesome content as always

[@cdruc]

Glad you enjoyed it👊

[@dandybagusprasetyo8871]

Hello... how can i handle check this user logged in or not? for accessing the requiresAuth: true route in vue js?

[@imtiazakidarmawan602]

I tried the same but there is no cookie and session on both the backend and frontend. Any solution ?. Thanks

[@bulentguven4662]

Hi, I wonder that to I have to clear top level domain cookies every time user logout? For the first time, it is okey that my sanctum api block unregistered user access to the specific url. However, after logging in and logging out again, that's when the problems occur. After logging out, sanctum doesn't block the request and send the success response.

[@turdakhov]

Absolutly incredible tutorial. Thank you!

[@youssefelgharib7092]

Thank you very much mr.Constantin Druc for your helpful videos. I've a question for you: What do you think is more practical inertia or api and why? We saw that inertia handles the most annoying things such as CSRF validation, error handling and routing and so on ...

[@nadjinmalade8738]

Since Inertia came, I only use Inertia.

[@cdruc]

As always, it depends on your purpose and what you want to achieve. Mobile app in the plans? LaravelAPI + Vue3. No mobile app + control over the tech stack? InertiaJS. Looking to increase hiring chances? LaravelAPI + Vue3. If your aim is speed of development & !mobile, Inertia all the way!

[@alexalex6163]

Thank you very much! I`ve learned a lot thanks to you.

[@madtin]

How would you check if there's a valid session in the front end? laravel is always settings the session cookie even if logged out...

[@chalvarenga96]

Excellent! I have a question, how can I do everything you did in the video but, instead of testing the endpoints with a frontend, test it with Postman? Is that possible?

[@banalexandru4393]

In angular I reapted the exact same steps, but the XSRF-TOKEN cookie is not being set in the browser cookies storage, neither the other API cookies. I can't seem to find an answer for this anywhere

[@ajndlajjnl4175]

hello sir why dont u use laravel fortify for backend, or develop with inertia for fullstackapp

[@Алексей-у6щ1о]

Thank you very much! I could not solve such a problem for a long time.

[@rhenaldkarrel]

What if I want to perform a create action where there's a middleware of auth:api? How to pass the token to the axios authorization? Thank you for the video by the way!

[@JustAnonymous1]

the same qst did you get it ? i try to passed the toekn in the session and get them before make the req but i don't if it's good solution or not!

[@NguyenVuAnhKhoa]

i got 401 unauthorized but with nuxtjs, i used the loginWith for login and have properly configured but still got that 401 error. Do u have any solution please

[@bernanribeiro3329]

When you install breeze it came to everything setup, but is amazing understand on how it work. But actually I came here because I still getting problem regarding this. My login and register is working perfectly, but when I update the user data I am getting this CORS errors : "'Access-Control-Allow-Origin' header is present on the requested resource." Do have any idea why?

[@giorgishalamberidze8204]

samee problem

[@muhammadumarsotvoldiev8768]

Brilliant job!

[@helioao]

Jesus! Saved my month! Thank you so much! I spent the last weeks asking WTHGO??? Why this does not work?!??!

[@cdruc]

Glad you found it helpful! 👊

[@helioao]

@@cdruc looks like a joke but I came here to stop losing time with a second project, and boo, I inverted the ports of frontend and backend (9001 and 9002). So thanks again.

[@LadyMariYo]

Thank you for the thorough explanation!

[@tomatomov9061]

Have a question. Everytime when the user logs in, sanctum will generate new baerer token and then you are adding it in cookie so it can be used in further actions, until the user logs out ? Did I understand it correct ?

[@johnpaularcenal6516]

Saved my life! Thank You so much!!

[@siyabdev]

I i set up Cookie based authentication in Laravel/Nuxt/Sanctum and in future, i build a mobile app for my API, the flow of CSRF would remain the same or would it change?

[@juniordev4190]

Extremely useful. Thank you for sharing.

[@cdruc]

Glad you find it helpful 👊

[@madie2659]

wow, you explain very good, please create a video on laravel relationships

[@cdruc]

sadly i’m not working too much with Laravel these days 😩 look up laracasts - im sure they have something like this for free / on their YT channel 🤞

[@allaghi]

I am working on new project using jetstream with inertia, and planning to connect it with mobile app, I am thinking of using passport, we need you advice.

[@AungThuZaw-u3x]

Thanks A lot. I struggling 2 days for those error.

[@firassebai8592]

can i start with laravel ui and implement sanctum for spa ?

[@kristiyan.zhelyazkov]

I have one question. How did you run your spa under spa.example.test? For the laravel project I think you use valet but for the vue project?

[@cdruc]

I use a build-watch command for vue and a custom valet driver. Might write a blogpost / make a video on this at some point

[@cdruc]

✍️ Wrote a blogpost: cdruc.com/valet-vue

[@lyricsremix7884]

the user gets logged out on brouser page refresh im using laravel api + react js any soltion ?

[@pedromartins5512]

You saved my project. Thanks 🙏

[@jervi_sir]

great video, is it same case with reactNative.

[@mibrahim4245]

thank you for the very clear video ! .. excuse me for the dumb questiion, but if I want to protect a route with the authentication .. should I set it to ->middleware('auth:sanctum') or ->middleware('auth:api') ? the second thing, is at login controller; when I want to return the access_token in a cookie, should I return it like this: return response()->json(whatever)->withCookie(cookie("access_token", $token, 60) for example? or is there a setting that will make the token be returned in a cookie out of the box ?

[@cdruc]

Hey, you should be using the "auth:sanctum" middleware. For the second thing, I don't know why you would want to return an access_token as a cookie - sounds like you're mixing token based authentication with session based authentication. Maybe these two videos are helpful: - kzbin.info/www/bejne/hIqcqqKnpLNqaNk - kzbin.info/www/bejne/fn2zoH6wbs9sgbs

[@mibrahim4245]

@@cdruc thank you for ur response, yea I think that too ;P .. I'll check out those vids .. thanks

[@coder236]

i know you said that the request must sit on the same domains, but can't you allow separate domains in the cors? so say i'm using laravel Herd, i have a domain of 'my_domain.test' but my react frontend is sitting on localhost:5173... if i put localhost:5173 into cors settings, can i not send requests?

[@cdruc]

cors has nothing to do with this. the problem are cookies - they cannot be shared across different domains. watch this: kzbin.info/www/bejne/nXymaKysodGmhqc

[@coder236]

@@cdruc ah awesome thanks for this

[@alimosbah]

Can you explain to deploy laravel vite inertia ssr

[@ihorrud5088]

Thank you bro!Very good explanation.

[@rafaelacioly3252]

Mine keep returning 303 followed by a 200, any idea how to fix it?

[@cdruc]

this is a weird one. Never got a 303 response - can you put up a reproduceable repo(s)? I'm always down to help if enough details are provided

[@adamshaibu3911]

@cdruc i install sanctum without breeze. Both domains have the same session and xsrf token, yet 401

[@cdruc]

check sanctum stateful domains list

[@ibilalkhilji]

Which font you are using in the IDE?

[@abdobouna]

Very nice video, thank you for the insight.

[@habeebmurtala7318]

Hi, thank you for this video. can I authenticate from a mobile app after configuring for spa?

[@cdruc]

Yes, watch this video: tallpad.com/series/laravel-misc/lessons/authenticate-mobile-applications-with-laravel-sanctum You don't have to follow all the steps there, though; since you've already configured for spa.

[@Samuel.Mwangi]

Thanks Constantin as always.

[@maiikkeerruu]

May i know what os you are using?

[@MuhammadYusuf-tr3xe]

Thanks for this wonderful video, however in my case, I set up the STATEFUL_DOMAINS correctly in my env yet I still have a 419 error

[@joemarpalting1469]

any solution?

[@bahacherni8776]

could you please explain it throw pinia state management

[@cdruc]

i have a couple of videos on this, look through the chanel

[@hashemim]

how can we connect local vue app to a laravel app that deployed on host ? thanks for good video btw :)

[@cdruc]

For dev-only, you can add token based auth and save it in localstorage 🤷‍♂️ - but this is a no-no for production apps.

[@hashemim]

yes i did so. after failure in use token-based auth on shared host i came for this video and it didn't work at first. CPanel delete Authorization Header BTW and my problem was about that ... thank you for content 🙏@@cdruc

[@moali6657]

Should we use session based authentication?? Or it is enough to use token based authentication with sanctum

[@cdruc]

session based for frontend apps, tokens for anything else

[@moali6657]

@@cdruc thank you so much for replying

[@moali6657]

@@cdruc sir, I have another question please, do you recommend using Breeze or Fortify, with Sanctum, as Laravel API

[@cdruc]

@@moali6657 Both are great but I usually go with breeze

[@moali6657]

thanks @@cdruc

[@waqaransari7274]

The post request giving 419 error how to fix it? I follow all steps according to the video.

[@joemarpalting1469]

same. any solution?

[@ya9_47]

@@joemarpalting1469 update Http/MiddlewareVerifyCsrfToken add /login and api/*

[@alejandrobonilla1142]

@@joemarpalting1469 add this "axios.defaults.withXSRFToken = true;" in App.vue file. =)

[@wahyunurarizky1911]

hello mr Druc, i'm your new subscriber. thanks for making great videos

[@cdruc]

Hello, Glad you find them useful!

[@AlexGower]

Do you have to set the session in the .env if you setup the sanctum stateful in .env?

[@cdruc]

Yes, you need to set both.

[@AlexGower]

@@cdruc why do you think the default .env file when install breeze api doesn't include SESSION_DOMAIN and SANCTUM_STATEFUL_DOMAINS? It seems like this should be a default?

[@nlveej]

how did you made your frontend url to be domain instead of localhost:port?

[@cdruc]

I use laravel valet. it does that automatically

[@yohanlopes1847]

marvelous video, taught me a lot

[@johnedmersonpizarra9750]

Thank you so much for this tutorial 😭😭

[@satishksharma]

How can we access this type API on mobile phone app.

[@cdruc]

You’ll need to use token based authentication. Still sanctum, but not with cookies

[@holakonoob]

pls what is the font your using in ide and in the terminal

[@cdruc]

I think this was Operator Mono (not sure, though) Now I'm using SF Mono

[@ross78it]

Great tutorial, very well done! I followed it .....but in laravel 10 i always get "csrf-token mismatch" error 419 :(....so frustrating. I think I will give up.

[@cdruc]

thanks! watch more of my videos 😄 maybe this one: kzbin.info/www/bejne/hIqcqqKnpLNqaNk and this one kzbin.info/www/bejne/fn2zoH6wbs9sgbs can help

[@vitaliipyrih6881]

Need to add axios.defaults.withXSRFToken = true;

[@jondoe79]

Awesome 😎 as it should be.

[@ZelaznyFarmer]

i make all steps same like you at video, i surf all internet and make everything i guess... i spent on this couple days and still getting message: "CSRF token mismatch." Please help :(

[@cdruc]

maybe this one will help: kzbin.info/www/bejne/povHq62Bm5Wbaac

[@ZelaznyFarmer]

@@cdruc damn! it helps, love you!

[@iam.masoudsamimi]

The "CSRF Missmatch" is mostly the combination of scripts and version problems. I have tested "axios" version 1.1.3 working with Laravel 9, 10, 11 all fine. I have tested "axios" vesrion 1.5.1 working with Laravel 9 & 10 but failing with 11. I have tested "axios" version above 1.6 and failing with Laravel 9, 10 & 11. Can anyone else test and report?

[@s.y.cofficial6322]

axios 1.7 vẫn không hoạt động.

[@ngounthengos]

thank you for your tips.

[@arkarchanmyae4575]

CSRF token mismatch. how can i solve it? I follow every instructions here

[@alejandrobonilla1142]

I have same problem , cookies are set right in the browser. but I get 419 code in login request. Any solution?

[@alejandrobonilla1142]

the solution is add this "axios.defaults.withXSRFToken = true;"

[@ushanmithma9716]

How to make virtual host server name for vue 3 dev server (vite)

[@hashemim]

what is seed user password ?? also thanks for big help

[@peterpardo4138]

Wow! Thank you for this!

[@ricknatanielwalker9669]

Hi, your tutorial helped me very much, mainly The article you wrote, is so clear. Congrats. Well, not everything is as easier as ti looks. Well, the truth is I am getting a CORS error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. I set everything up and one and only thing that is different is that I have a standard Laravel application installation. So, in this installation, the 'paths' variable in the cors.php config file remains 'paths' => ['api/*', 'sanctum/csrf-cookie']. When I accept all incoming requests ('paths' => ['*', 'sanctum/csrf-cookie']), I don't get any CORS error. I wouldn't like to mess with this because I don't know what will be the consequences, but I would appreciate help in this situation. What should I do to pass

[@cdruc]

Hey! Glad the video somewhat helped you move the ball further. Would've been great to have specified the request causing the CORS error but I'll guess it's the /login endpoint 😃 Now, CORS is a security feature that allows you to control what requests the application should accept, and more importantly, from where (who is allowed to talk to my app). The paths array is a list of endpoints that accept cross-origin requests (requests that don't originate/come from your application domain). Since the /login endpoint is not part of the paths array, it does not accept cross-origin requests, hence you get the CORS error. Same will be true for other endpoints that are not there - for example, /register. But what is even more important, is *who* is allowed to talk to your application. I'm referring to the allowed_origins setting. This should be a list of origins that are allowed to make requests to your laravel application - usually just your frontend app. I already made a couple of YT videos on this topic and I know sometimes things are not super clear or easy to follow - it's just hard to fit everything in a couple of videos. That's why I'm working on: masteringauth.com Let me know how it goes, and if you stumble upon other issues, please send an e-mail at [e-mail] . I plan on having a "common issues" section in my course that explains and helps people fix their auth issues. Just make sure to include repository links and the .env file so I can to reproduce the issue(s).

[@ricknatanielwalker9669]

@@cdruc I figured out that I had to include the endpoints that I want to hit in my path from the frontend. The confusion I was making is that in the official Laravel documentation site they say just for configuring sanctum to authenticate the SPA I would be able to hit endpoint from web.php. I'm excited about the course you're making and I was here thinking if I could give you a hand on it. Well, if it is in my domains

[@cba8228]

Muchas gracias, Great video!

[@salaheddineahansal]

Thank you very much ❤🙏

[@muhamadabdul9231]

Why get unauthenticated after reload page?

[@madie2659]

you need to set token in local storage so you dont get unauthenticated after reload page

[@МихаилМошков-ч3щ]

Ты лучший! You're the best!

[@milendimitrov6503]

Very nice video

[@godofbrowser]

Thanks for sharing

[@steevenjackson667]

Seriously. Thank you so much!!!

[@MsIlius]

what if sanctum-cookie not being set

[@cdruc]

most of the times that happens because your spa and laravel top level domain don’t match. open the network inspector, select the sanctum/csrf-cookie request, open the cookies tab for that request and make sure there are no domain-related warnings there