Vue 3 Pinia Store for Global User Authentication State

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,
    user: null, // { id: 1, name: 'John Doe', email: '[email protected]' }
    token: null,
  }),
  getters: {
    isAuthenticated: (state) => state.isLoggedIn && state.user !== null,
    getUserName: (state) => state.user ? state.user.name : 'Guest',
  },
  actions: {
    async login(credentials) {
      // Simulate API call
      return new Promise(resolve => {
        setTimeout(() => {
          if (credentials.username === 'test' && credentials.password === 'password') {
            this.isLoggedIn = true;
            this.user = { id: 1, name: 'Test User', email: '[email protected]' };
            this.token = 'mock_jwt_token';
            resolve(true);
          } else {
            resolve(false);
          }
        }, 500);
      });
    },
    logout() {
      this.isLoggedIn = false;
      this.user = null;
      this.token = null;
      localStorage.removeItem('authToken'); // Clear persisted token
      localStorage.removeItem('authUser');   // Clear persisted user
    },
    initializeAuth() {
        // Check localStorage or sessionStorage for persisted token/user data
        const storedToken = localStorage.getItem('authToken');
        const storedUser = localStorage.getItem('authUser');
        if (storedToken && storedUser) {
            try {
                this.token = storedToken;
                this.user = JSON.parse(storedUser);
                this.isLoggedIn = true;
            } catch (e) {
                console.error('Failed to parse stored user data:', e);
                this.logout(); // Clear corrupted data
            }
        }
    }
  },
});

// How to use in a component:
// <template>
//   <div>
//     <p v-if="authStore.isAuthenticated">Welcome, {{ authStore.getUserName }}!</p>
//     <button v-if="!authStore.isLoggedIn" @click="handleLogin">Login</button>
//     <button v-else @click="authStore.logout">Logout</button>
//   </div>
// </template>
// <script setup>
// import { useAuthStore } from './stores/auth';
// import { onMounted } from 'vue';
// const authStore = useAuthStore();
// onMounted(() => {
//   authStore.initializeAuth(); // Attempt to restore auth state on app load
// });
// const handleLogin = async () => {
//   const success = await authStore.login({ username: 'test', password: 'password' });
//   if (success) {
//     alert('Logged in!');
//     // Persist to local storage after successful login
//     localStorage.setItem('authToken', authStore.token);
//     localStorage.setItem('authUser', JSON.stringify(authStore.user));
//   } else {
//     alert('Login failed!');
//   }
// };
// </script>