Laravel Sanctum SPA Tutorial - React SPA Authentication With Sanctum

Authenticate your SPA with Laravel Sanctum where SPA & Laravel API are on two different repositories. In this video, you will learn how to authenticate your NextJS SPA, how to protect the dashboard from unauthorized access & how to configure cors for Laravel correctly.

🤝 You can support me by giving my videos a 👍 & by subscribing to the channel ✔️

--- Next.JS SPA Front-End Source Code ---

--- Laravel Sanctum API Back-End Source Code ---

--- Note ---

Also at 3:23, my SESSION_DRIVER is set to cookie. This is not important and it is up to you what session driver you want to use. There were a lot of devs who had issues authenticating their SPAs that were on different ports locally and changing file to cookie was the solution. I had the same issue which is why I have it set to 'cookie'. So if you are having such issues you can try setting driver to the cookie & see if that helps. Note that having SESSION_DRIVER set to a cookie will expose encrypted session to the browser. In production, I recommend using Redis as the session driver which is what I use on my apps.

--- Table of Contents ---
00:00 - Intro
00:42 - Install Laravel Sanctum
02:23 - CORS/Session Configuration
04:57 - CSRF Protection
08:02 - Client-Side Login (Keeping User Logged In Using Custom Cookie)
08:50 - Protection Against User Manually Creating Cookie (Axios Interceptors)
10:42 - Server Side Redirect To Prevent Flashing Of Unauthorized Page

[Janiel]

use 'then' for success response and 'catch' for error
example:

apiCallFunction(params)
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});

Good tutorial

[RiiPlay]

Hey! I was looking for this kind of thing for so long, thank you for sharing this, most helpful tutorial I found about the topic (especially the handling on the client-side) !

[dibbyo]

Exactly what I was looking, I will try implement this on my new vuejs project.

[thedavistheory]

Guys btw, there was a breaking change a few months ago and so if you are using the latest version of axios, you should include the
withXSRFToken: true
property as well

[alaskim]

best video and explanation ever love u bro you made my day easy 💖💖💖

[MmdCC]

Awesome tutorial 👍👍 Please make tutorial for nextjs Apollo client + laravel lighthouse graphql + sanctum

[permanar_]

Hello.

I'm kinda new to backend stuff so, how do we do if we want to it works also on different domains?
You previously mentioned that this (sanctum) only work within the same domain right?


Then is there any alternative? Should I go with Passport?

[yeongjong]

Hello! Thanks for the great tutorial!! I'm wondering, is there an alternative approach to getInitialProps in the higher-order component (withAuth) as I am using ReactJS (scaffolded from Laravel). Thanks.

[jooeeee]

Thank you for your video ! I haven't seen all the video but i will. We have React Front-end App and Laravel Back-end App, and we are wonder how to manage user's session. Maybe Sanctum can do the job, i have trying Passport but i wonder if it's the best choice.

[Dushan]

Nice video man! Can you please tell me one example of your login credentials, since all seeded data is encrypted and i can't login to see the dashboard?

[beberosak]

Hi, great video!... At 10:00 I was wondering if wouldn't be better to just throw error instead of rejecting it?, otherwise you won't be able to tap into 422 validation messages.

[sazalahamed]

hello, your laravel project & react project is different and independent. But I installed reactjs inside laravel project. that means URL+PORT is same for me. so what changes is needed there for .env... please give me an answer for it... I loved your style ## I didn't use NextJS

[MohdRusmanAriefARahman]

Why do we need to add login and logout tu cors.php? Is that referring to the POST login and POST logout? We are not using the GET request for both login and logout right?

[mariusguissou]

The subject that you broached is very very interesting but we do not see anything practical on your screen. For your next videos remember to zoom in to make things more visible. If you can take this video by improving the image, that would make us happy. Thank you, you do a good job.

[usbjitc]

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

[gustavosantos]

Hello! I'm facing some issues in auth part. I'm following the auth flow apparently right. I call the endpoit to set CSRF cookie then I call the endpoint to login, and it returns 200 code, but when I try to reach some protected endpoint it returns 401 Unauthorized. I checked the cookies and all are being sent correctly. Could you help me? Thanks

[jahadempire]

Can you include the logged-in user details in NextJS? where you will store it on Redux? Nuxt has auth-module where we can just access the user details of logged-in user.

[iceweex]

I think isLoggedIn condition is not secure, because if you use hoc withAuth on the page without any API request and you manually set cookie to true, you can get to the protected page on the FE, am I wrong?

[_ulghun]

hello, thank you for very helpful tutorial ✨
in the video 8:17 you didn't explain how do you store cookie to the server,
and what happen if I login success and then remove ticket_managment cookie from browser, goto then '/login' page and login second time ?
I tried my self this process and I got cors error, can you help me resolve this problem?

[madtin]

Hello! Im having trouble having my nextjs app in localhost:3000 and my laravel app in a vhost locally which is something like laravelapp.test Is it possible to set the cookie having this setup?