User Authentication State

Problem/Feature Description

A project management Vue 3 app currently manages the logged-in user's information by passing it as props down through three levels of components — from the top-level App.vue all the way down to the navigation bar, the sidebar, and the user settings panel. This prop-drilling has become painful to maintain, and a new requirement makes it worse: whenever the user's session expires and they are automatically logged out, the app needs to redirect them to /login and show a toast notification — but this logic is currently scattered across three different components.

The team wants to refactor authentication state into a centralized, reactive store so that any component can access the current user without prop drilling, and the logout side effect (redirect + notification) is handled in one consistent place. The solution should also leave room for a login form component that manages its own local field values without polluting the shared state.

Output Specification

Produce the following files:

• A state management module for authentication, holding the authenticated user's state (at minimum: a user object with id, name, email, and role fields, plus an isAuthenticated flag). Include at least one derived value and at least one action. The module should react to session expiry or logout by performing a side effect.
• NavBar.vue — a navigation component that reads from the auth store and displays the current user's name and role. It should have a logout button.
• LoginForm.vue — a login form component with email and password fields. Local form state should not go into the shared store.

Use TypeScript throughout. Place components under src/components/.