Is it safe to share authentication state via reactive global store in Vue 3?

Question

I'm building a CMS with vue 3 and want to know if using global store store.store.auth = false/true is a secure way of rendering in/out components that are supposed to be seen only by authenticated users. It goes like this:

1. User enters credentials in login form
2. Credentials are sent via HTTP request to backend and checked by laravel sanctum
3. Response arrives in frontend which sets store.store.auth = true
4. Components and routes that are supposed to be seen only by authenticated users are rendered via v-if

Is this a secure approach or can it be improved?

Answer 1

The security, in this case, depends almost entirely on the backend.

Sanctum does not use tokens of any kind. Instead, Sanctum uses Laravel's built-in cookie based session authentication services. Typically, Sanctum utilizes Laravel's web authentication guard to accomplish this. This provides the benefits of CSRF protection, session authentication, as well as protects against leakage of the authentication credentials via XSS.

src

It seems like sanctum handles the authentication, so you should be fine as long as store.store.auth value is kept up to date, and the API does it's own authentication and authorization.

Because the entirety of the application is visible through the js source someone could potentially modify state and display options that they shouldn't see. This would be really-really difficult to prevent in SPA, that's why it is paramount that the backend handles this correctly. You may be able to use code splitting, to prevent loading parts of the application that require authentication, but this is not security measure.