Laravel Sanctum SPA Tutorial - React SPA Authentication With Sanctum

preview_player
Показать описание
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
Рекомендации по теме
Комментарии
Автор

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

Janiel
Автор

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) !

RiiPlay
Автор

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

dibbyo
Автор

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

thedavistheory
Автор

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

alaskim
Автор

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

MmdCC
Автор

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?

permanar_
Автор

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.

yeongjong
Автор

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.

jooeeee
Автор

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?

Dushan
Автор

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.

beberosak
Автор

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

sazalahamed
Автор

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?

MohdRusmanAriefARahman
Автор

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.

mariusguissou
Автор

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

usbjitc
Автор

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

gustavosantos
Автор

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.

jahadempire
Автор

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?

iceweex
Автор

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?

_ulghun
Автор

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?

madtin