Laravel SPA Authentication - setup and common mistakes

Laravel & Nuxt 3 Authentication Guide: • Video

[@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!

[@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!

[@thisisroushan_1337]

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

[@kapa4208]

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

[@kirinyetbrian]

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

[@REZAZIMohamedabdessamed]

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

[@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 :)

[@ericksanabria5657]

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

[@IntiMaldonado]

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

[@mostafakhaled6680]

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

[@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

[@turdakhov]

Absolutly incredible tutorial. Thank you!

[@janmichaelbesinga3867]

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

[@laracrafts195]

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

[@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.

[@siyabdev]

Your exaplanation is just WOW

[@sinaahmadpour3180]

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

[@cdruc]

glad you found it useful! 👊

[@LadyMariYo]

Thank you for the thorough explanation!

[@twentyfirstmen]

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

[@azizmahon7013]

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

[@pedromartins5512]

You saved my project. Thanks 🙏

[@user-en4cj3dn9p]

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

[@israeliloba]

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

[@alexalex6163]

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

[@abdobouna]

Very nice video, thank you for the insight.

[@oketafred]

Thanks Constantin awesome content as always

[@cdruc]

Glad you enjoyed it👊

[@johnpaularcenal6516]

Saved my life! Thank You so much!!

[@juniordev4190]

Extremely useful. Thank you for sharing.

[@cdruc]

Glad you find it helpful 👊

[@ihorrud5088]

Thank you bro!Very good explanation.

[@yohanlopes1847]

marvelous video, taught me a lot

[@justinenemuadia9887]

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

[@muhammadumarsotvoldiev8768]

Brilliant job!

[@Samuel.Mwangi]

Thanks Constantin as always.

[@ersatztutor]

It took me an embarrassingly long time to figure this out. At the end it was something specific to angulars xsrfmodule. Still this video made things clearer!

[@banalexandru4393]

can you please explain what you did in Angular, my problem is that the xsrf cookie is not being set in the browser when I the request to the /api/csrf-token endpoint...

[@banalexandru4393]

@@ersatztutor sure, i will try tomorrow and will get back to you, thank you!

[@dibbyo456]

Finally something that actually works. Thank you so much.

[@cdruc]

Glad it helped 👊

[@steevenjackson667]

Seriously. Thank you so much!!!

[@johnedmersonpizarra9750]

Thank you so much for this tutorial 😭😭

[@ngounthengos]

thank you for your tips.

[@cirobastosarana8228]

Muchas gracias, Great video!

[@peterpardo4138]

Wow! Thank you for this!

[@yukngide]

Thank you for the tutorial

[@wahyunurarizky1911]

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

[@cdruc]

Hello, Glad you find them useful!

[@user-rw9tx8do5g]

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

[@milendimitrov6503]

Very nice video

[@Naixik]

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

[@cdruc]

Glad it helped!

[@jondoe79]

Awesome 😎 as it should be.

[@phenomenal3873]

you are a lifesaver

[@salaheddineahansal]

Thank you very much ❤🙏

[@user-dl6rc7vs8g]

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

[@godofbrowser]

Thanks for sharing

[@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?

[@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?

[@nicolairomanov9305]

Thank you!

[@ioccodeioccode6138]

Thank you!!

[@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.

[@jaytherbua-ay886]

THANK FUGGING GOOOD! I almost punched every classmate near me asking questions

[@nadjinmalade8738]

Thank a Lot.

[@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 ?

[@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 🤞

[@allaboutnaturesound6033]

save my day

[@ibilalkhilji]

Which font you are using in the IDE?

[@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?

[@azizmahon7013]

you saved my life

[@cdruc]

Lol 😂😂 glad u find it helpful 👊

[@MrAbdooo2008]

great

[@darkmode404]

Thanks!

[@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...

[@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.

[@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!

[@jervi_sir]

great video, is it same case with reactNative.

[@ajndlajjnl4175]

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

[@michaeljosephgelvez8519]

May i know what os you are using?

[@imtiazakidarmawan602]

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

[@7ala9at]

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

[@firassebai8592]

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

[@clebermartins3228]

Great!!!!!!

[@user-cp4oy2bs9v]

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

[@nabeelyousafpasha]

Respect from Pakistan

[@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.

[@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

[@lyricsremix7884]

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

[@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

[@bencumb7324]

Thankssss

[@alimosbah]

Can you explain to deploy laravel vite inertia ssr

[@adamshaibu3911]

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

[@cdruc]

check sanctum stateful domains list

[@user-ul9vj8zd7m]

cool bro

[@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

[@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!

[@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?

[@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

[@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.

[@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

[@nlveej]

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

[@cdruc]

I use laravel valet. it does that automatically

[@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

[@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?

[@catalina3873]

谢谢🙏 I hate the cros 😢😅

[@bahacherni8776]

could you please explain it throw pinia state management

[@cdruc]

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

[@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

[@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

[@ushanmithma9716]

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