DEV Community

Discussion on: Laravel Sanctum Explained : SPA Authentication

Collapse
 
nicolus profile image
Nicolas Bailly • Edited

If front and back are on completely different domain, Sanctum is not usable in its Stateful (or "SPA") mode because it relies on sessions and you can't have a session cookie work over different domains.

You could use it in it Stateless (or "API") mode though, which I haven't covered in this article and haven't found time cover yet. It would then work as a mobile app (see description here : laravel.com/docs/7.x/sanctum#issui...) so you'd basically have to make an ajax request to exchange an e-mail and password for a Bearer token, and then pass this token in every subsequent request in the "Authorization" header like so :

Authorization: Bearer TheTokenIJusteGotFromTheApiThroughAnAjaxRequest
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nomikz profile image
nomikz

Thanks for a quick reply.
So it seems to me that sanctum is just another abstraction for passport which was an abstraction for jwt.

Thread Thread
 
nicolus profile image
Nicolas Bailly

Well, the way you use it in Stateless mode is very similar to Passport indeed, but it is definitely not an abstraction for Passport, and it doesn't use JWT etiher.

The token that's generated is just an 80 characters random token that's stored in the database and it doesn't contain any information in itself. The point of Sanctum is that it is much much simpler than Passport (which is a full blown Oauth2 server) and simpler than using JWT tokens (which are not inherently secure).

Collapse
 
barcodelllllll profile image
lllllllll

Thank you very much for the post, but could you do another one telling how it is done from another domain with Sanctum? I've been dealing with it for two days.

Thread Thread
 
nicolus profile image
Nicolas Bailly

No problem, I'll see what I can do over the week-end. It's actually long overdue.

Can you tell me a bit more about what you're trying to do so I can make sure to cover your usecase ? Like do you use a front-end framework ? Is there a particular reason you can't have both on the same domain ?

Thread Thread
 
barcodelllllll profile image
lllllllll • Edited

I made a game portal in a classic Laravel web (front and back together). When i finished it, boss tell me he want to separate back and front. So then, i made the classic web API and some copies of a "Client API" / SPA which have the classic web front and which consumes the resources of the classic web "API".

Everything went well until deploying Sanctum in production. In local it worked perfectly but of course, it used php artisan serve for the API and the API clients, both were localhost. Anyway, I was already using token authentication, so I think I'm on the right track (although I think Passport would have been the best for this...) Thanks

Thread Thread
 
nicolus profile image
Nicolas Bailly

Just to be sure we're on the same page : you can separate back and front by still using the same top level domain (for example "gameportal.com" for your front-end and api.gameportal.com for your backend. That's the recommended setup described in this article.

Also what does your "frontend" look like ? Is it an SPA built with something like Angular, Vue or React that makes ajax request to your API ? Or is it another Laravel app that makes requests to your API from the server using Curl or Guzzle ?

Either way, Passport is way overkill for what you're trying to do. According to Taylor Otwell himself, the only valid usecase for Passport is if you want a third party websites to allow their users to connect with their account on your site (Something like "Connect with Facebook" or "Connect with Google", except it would be "Connect with gameportal.com").

Thread Thread
 
barcodelllllll profile image
lllllllll

The SPA is another Laravel app that makes requests to my API from the server using Guzzle (Http::class).

API and SPA's have to be on different domains.

Yes, yes, i know Passport is, after all, to connect third party webs.

Thanks!!!

Thread Thread
 
nicolus profile image
Nicolas Bailly

OK... That sounds like a pretty weird and inefficient setup but if those are the requirements ¯\(ツ)

I've tested it out locally and thrown out a guide, I'm not publishing it yet because it's nowhere near as complete as I'd like, but let me know if this helps with your situation : dev.to/nicolus/laravel-sanctum-exp...

I've tested locally on two different domains and it works fine, there's no reason it shouldn't work in production unless you have some other issues like a firewall blocking requests between your apps or a DNS issue.

Thread Thread
 
barcodelllllll profile image
lllllllll

Thanks for the reply as always and sorry for my late answer (girl and kids are guilty)

The post you have shared is just like i did.

Why do you mean with inefficient?? ¬¬ Tell me plz.

May be its about a server config which refuses the login post request, but, before deploying Sancum I was making all the requests to serve the page with the GET method (there was no authentication in those days) and there was no problem, so it is possible that the changes I made in the API have made it always redirect with status 301 request to the POST type login endpoint, it may be that, as I say, it's something about .htaccess, something about CORS, I don't know why the hell it redirects it.

I also had to save the token in session variable XD.