Sanctum Auth SPA Multiple Login Request Error

Hey y'all. I've setup an SPA with Vue/NuxtJS with the backend in Laraval 9. I'm using Sanctum for the web/session authentication/authorization. All my CORS configuration is working well, and in general I have no issues. The API requests all work successfully and data is returned.

My problem is that if I submit a login request which returns my user, everything works great unless another login request is issued before the session token expires. For example, a user has 2 tabs open both on the login page. User logs in on Tab A, site loads all good. User then attempts to login on Tab 2 immediately after. This request now generates a CORS 405 error, something gets inconsistent and I get network errors for all subsequent requests (including login) until the token expires, after which login works ok again.

Has anyone run into this before and could offer a suggested approach?

Ideally I would rather if Sanctum receives a second login it just works ok and doesn't error out. I'm not sure why it doesn't do that in the first place?

Thanks!

drehimself

3 years ago

Level 35

Try out the official scaffolding for Breeze and Next.js: https://github.com/laravel/breeze-next.

It's using a package named SWR which has a feature that's on by default. It automatically revalidates (like a refresh) your data as you focus on a new tab: https://swr.vercel.app/docs/revalidation. So if you have two tabs opened on the login page, once you login on one and click over to the other tab, you'll automatically be logged in there as well.

I think there's a Vue version of SWR if you're curious (I haven't used it): https://github.com/Kong/swrv.

Also check out vue-query as an alternative, which is a port of react-query. It has a similar feature for automatic revalidation as you focus tabs: https://github.com/DamianOsipiuk/vue-query

Please or to participate in this conversation.