@drax/identity-vue 3.63.0 → 3.65.0

package/README.md

@@ -2,6 +2,76 @@
 
 This template should help get you started developing with Vue 3 in Vite.
 
+## Remember-me sessions
+
+Remember-me is disabled unless the consuming Vite app defines
+`VITE_DRAX_REMEMBER_ME_ENABLED=true` (exact string). `IdentityLogin` includes the
+exported `IdentityRememberMe` checkbox, localized in English/Spanish and initially
+unchecked. Custom login forms can use `<IdentityRememberMe v-model="rememberMe" />`
+and `useAuth().login(username, password, rememberMe)`. Ordinary logins still call
+`AuthSystem.login` with only two arguments and discard any previous refresh token.
+
+Install the persisted-state plugin on Pinia, then await `setupAuthSession()` after
+installing Pinia and **before** installing the router or starting API requests.
+The setup function does not require a component or router context. Enable the
+backend separately with `DRAX_REMEMBER_ME_ENABLED=true`; its optional
+`DRAX_REFRESH_TOKEN_TTL_SECONDS` defaults to 2592000 (30 days). Neither flag
+changes the normal JWT expiration.
+
+```ts
+import {setupAuthSession} from '@drax/identity-vue'
+
+app.use(pinia)
+await setupAuthSession()
+app.use(router)
+```
+
+Custom guards should await `refreshAuthSession()` before existing auth/permission
+checks, catch transient maintenance errors, retain recoverable
+credentials and cancel protected navigation until retry rather than treating
+network failure as logout. Zuite's `router/authGuard.ts` provides the complete
+example, including permission checks and login redirection. Publish/upgrade
+`common-front`, `identity-front`, `identity-share` and the identity backend/Vue
+packages together when enabling this feature.
+
+Integration contracts:
+
+- `AuthSystem.login(username, password, rememberMe?)`, `refresh(refreshToken)` and
+  `revokeSession(refreshToken)` must implement the identity-front contract. Login
+  and refresh return `{accessToken, refreshToken?, refreshExpiresAt?}`. Expiration
+  dates are ISO strings. Front providers must not persist session data.
+- The shared `HttpRestClientFactory.getInstance()` client may implement
+  `setBeforeRequest(handler)`. The handler must run **before** copying authorization
+  headers. Without this optional method, startup renewal works but automatic
+  renewal before subsequent REST requests is unavailable.
+- The hook excludes login/refresh/logout. Renewal uses a 30-second access-token
+  expiry margin, single-flight per store/tab, and Web Locks plus synchronous
+  `AuthStore` persistence/re-reading across tabs. Browsers without Web Locks only
+  have same-tab coordination; concurrent cross-tab rotation is not guaranteed.
+- Profile reload after renewal bypasses only its own `/api/auth/me` preflight to
+  avoid recursion. If the profile is absent after a transient failure, subsequent
+  session maintenance retries it single-flight even with a fresh JWT, without
+  rotating again. Startup does not immediately repeat a failed profile request.
+- `AuthStore.sessionVersion` is a persisted operation epoch changed by clearing
+  auth (including login/token-login start and logout). Pending login, refresh and
+  profile results check this epoch before committing, including cross-tab
+  null-to-null logout. Legacy stores without the field use the initial null epoch.
+  Late returned refresh credentials are revoked best-effort.
+- Transient refresh/profile errors retain recoverable credentials; rejected
+  credentials (HTTP 401/403, including common-front wrapped errors) clear auth.
+  Logout clears local state immediately, with best-effort server revocation even
+  when the feature has subsequently been disabled. Offline revocation cannot be
+  guaranteed; the backend expiration/revocation policy remains authoritative.
+- Normal sessions are never renewed. Remember-me renewal is REST-only, not a
+  GraphQL preflight. Tokens live in localStorage via `AuthStore`; protect the app
+  against XSS and do not log or expose refresh tokens.
+
+Focused tests:
+
+```sh
+npm exec --workspace @drax/identity-vue -- vitest run test/auth-session.spec.ts test/auth-session.integration.spec.ts test/components/__tests__/IdentityLogin.spec.ts
+```
+
 ## Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.63.0",
+  "version": "3.65.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -18,13 +18,13 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^3.57.4",
-    "@drax/common-vue": "^3.57.4",
+    "@drax/common-front": "^3.65.0",
+    "@drax/common-vue": "^3.65.0",
     "@drax/crud-front": "^3.58.0",
-    "@drax/crud-share": "^3.63.0",
-    "@drax/crud-vue": "^3.63.0",
-    "@drax/identity-front": "^3.63.0",
-    "@drax/identity-share": "^3.23.0"
+    "@drax/crud-share": "^3.65.0",
+    "@drax/crud-vue": "^3.65.0",
+    "@drax/identity-front": "^3.65.0",
+    "@drax/identity-share": "^3.65.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -49,5 +49,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "d966183a92b24b2aa5eafd317f64fb448ed89bb6"
+  "gitHead": "6e6b1827de6d9f0449d6381f5054fe3e8f00c2ef"
 }

package/src/components/IdentityLogin/IdentityLogin.vue

@@ -3,6 +3,8 @@ import {computed, ref} from 'vue'
 import {useAuth} from '../../composables/useAuth.js'
 import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
 import {useI18n} from "vue-i18n";
+import IdentityRememberMe from '../IdentityRememberMe.vue'
+import {isRememberMeEnabled} from '../../composables/setupAuthSession'
 const {t, te} = useI18n()
 
 const {login, isAuthenticated} = useAuth()
@@ -18,6 +20,7 @@ const username = ref('')
 const password = ref('')
 const authError = ref('')
 const loading = ref(false)
+const rememberMe = ref(false)
 
 const isFormValid = computed(() => username.value.trim() !== '' && password.value.trim() !== '')
 
@@ -26,7 +29,9 @@ const emit = defineEmits(['loginSuccess'])
 async function submitLogin() {
   try {
     loading.value = true
-    await login(username.value, password.value)
+    authError.value = ''
+    if (isRememberMeEnabled() && rememberMe.value) await login(username.value, password.value, true)
+    else await login(username.value, password.value)
     emit('loginSuccess')
   } catch (e) {
     const error = e as Error
@@ -87,6 +92,7 @@ function togglePasswordVisibility() {
                   @click:append-inner="togglePasswordVisibility"
                   autocomplete="new-password"
               ></v-text-field>
+              <identity-remember-me v-model="rememberMe" :disabled="loading" />
             </v-card-text>
             <v-card-actions>
               <v-spacer></v-spacer>

package/src/components/IdentityRememberMe.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {useI18n} from 'vue-i18n'
+import {isRememberMeEnabled} from '../composables/setupAuthSession'
+
+defineProps<{disabled?: boolean}>()
+const model = defineModel<boolean>({default: false})
+const {t} = useI18n({
+  useScope: 'local',
+  messages: {
+    en: {rememberMe: 'Remember my session on this device'},
+    es: {rememberMe: 'Recordar mi sesión en este dispositivo'},
+  },
+})
+</script>
+
+<template>
+  <v-checkbox
+      v-if="isRememberMeEnabled()"
+      v-model="model"
+      :label="t('rememberMe')"
+      density="compact"
+      hide-details
+      :disabled="disabled"
+      data-testid="remember-me"
+  />
+</template>

package/src/composables/setupAuthSession.ts

@@ -0,0 +1,183 @@
+import {HttpClientFactory, HttpRestClientFactory} from '@drax/common-front'
+import {AuthSystemFactory} from '@drax/identity-front'
+import {useAuthStore} from '../stores/AuthStore'
+
+export const isRememberMeEnabled = () => import.meta.env.VITE_DRAX_REMEMBER_ME_ENABLED === 'true'
+
+type AuthStore = ReturnType<typeof useAuthStore>
+const flights = new WeakMap<AuthStore, Promise<void>>()
+const fetchingUser = new WeakSet<AuthStore>()
+const lockName = 'drax-auth-session'
+const revisions = new WeakMap<AuthStore, number>()
+export const authSessionRevision = (store = useAuthStore()) => revisions.get(store) ?? 0
+
+export function syncAuthHeaders(store = useAuthStore()) {
+    const clients = new Set([HttpClientFactory.getInstance(), HttpRestClientFactory.getInstance()])
+    for (const client of clients) {
+        if (store.accessToken) client.addHeader('Authorization', `Bearer ${store.accessToken}`)
+        else client.removeHeader('Authorization')
+    }
+}
+
+export function clearAuthSession(store = useAuthStore()) {
+    revisions.set(store, authSessionRevision(store) + 1)
+    store.clearAuth()
+    syncAuthHeaders(store)
+}
+
+export function isRejectedCredential(error: unknown): boolean {
+    const e = error as {statusCode?: number, status?: number, response?: {status?: number}, cause?: unknown, error?: unknown}
+    const status = e?.statusCode ?? e?.status ?? e?.response?.status
+    return status === 401 || status === 403 ||
+        (!!e?.error && e.error !== error && isRejectedCredential(e.error)) ||
+        (!!e?.cause && e.cause !== error && isRejectedCredential(e.cause))
+}
+
+function readPersisted() {
+    try {
+        const raw = localStorage.getItem('AuthStore')
+        return raw ? JSON.parse(raw) as AuthStore['$state'] : null
+    } catch { return null }
+}
+
+export function rereadSession(store: AuthStore) {
+    const persisted = readPersisted()
+    if (persisted) {
+        store.$patch({
+            accessToken: persisted.accessToken ?? null,
+            sessionVersion: persisted.sessionVersion ?? null,
+            refreshToken: persisted.refreshToken ?? null,
+            refreshExpiresAt: persisted.refreshExpiresAt ?? null,
+            authUser: persisted.authUser ?? null,
+        })
+        syncAuthHeaders(store)
+    }
+}
+
+export function isCurrentAuthOperation(store: AuthStore, version: string | null) {
+    if (store.sessionVersion !== version) return false
+    const persisted = readPersisted()
+    // Missing versions in legacy persisted stores represent the initial epoch.
+    if (persisted && (persisted.sessionVersion ?? null) !== version) {
+        rereadSession(store)
+        return false
+    }
+    return true
+}
+
+export function isCurrentAuthSession(store: AuthStore, token: string | null, version = store.sessionVersion) {
+    if (!isCurrentAuthOperation(store, version) || store.accessToken !== token) return false
+    const persisted = readPersisted()
+    if (persisted && (persisted.accessToken !== token || (persisted.refreshToken ?? null) !== store.refreshToken)) {
+        rereadSession(store)
+        return false
+    }
+    return true
+}
+
+function needsRefresh(token: string | null) {
+    try {
+        const payload = (token?.split('.')[1] ?? '').replace(/-/g, '+').replace(/_/g, '/')
+        const {exp} = JSON.parse(atob(payload))
+        return typeof exp !== 'number' || exp * 1000 <= Date.now() + 30_000
+    } catch { return true }
+}
+
+async function withSessionLock(action: () => Promise<void>) {
+    if (typeof navigator !== 'undefined' && navigator.locks?.request) {
+        await navigator.locks.request(lockName, action)
+    } else {
+        await action()
+    }
+}
+
+export async function revokeSessionToken(token: string) {
+    await AuthSystemFactory.getInstance().revokeSession(token)
+}
+
+async function fetchSessionUser(store: AuthStore) {
+    const token = store.accessToken
+    const revision = authSessionRevision(store)
+    const version = store.sessionVersion
+    fetchingUser.add(store)
+    try {
+        const user = await AuthSystemFactory.getInstance().me()
+        if (authSessionRevision(store) === revision && isCurrentAuthSession(store, token, version)) store.setAuthUser(user)
+    } catch (error) {
+        if (authSessionRevision(store) === revision && isCurrentAuthSession(store, token, version) && isRejectedCredential(error)) {
+            clearAuthSession(store)
+            throw error
+        }
+        // A profile fetch failing offline must not discard successfully rotated credentials.
+    } finally {
+        fetchingUser.delete(store)
+    }
+}
+
+export function refreshAuthSession(store = useAuthStore()): Promise<void> {
+    if (!isRememberMeEnabled()) return Promise.resolve()
+    const running = flights.get(store)
+    if (running) return running
+    const flight = withSessionLock(async () => {
+        rereadSession(store)
+        if (!store.refreshToken) return
+        if (!needsRefresh(store.accessToken)) {
+            if (!store.authUser) await fetchSessionUser(store)
+            return
+        }
+        const token = store.refreshToken
+        const accessToken = store.accessToken
+        const version = store.sessionVersion
+        if (store.refreshExpiresAt && Date.parse(store.refreshExpiresAt) <= Date.now()) {
+            clearAuthSession(store)
+            return
+        }
+        try {
+            const result = await AuthSystemFactory.getInstance().refresh(token)
+            // Logout or a new login may have happened while the request was in flight.
+            if (!isCurrentAuthSession(store, accessToken, version) || store.refreshToken !== token) {
+                syncAuthHeaders(store)
+                if (result.refreshToken) await revokeSessionToken(result.refreshToken).catch(() => {})
+                return
+            }
+            store.setSession(result)
+            syncAuthHeaders(store)
+            await fetchSessionUser(store)
+        } catch (error) {
+            if (isCurrentAuthSession(store, accessToken, version) && store.refreshToken === token && isRejectedCredential(error)) {
+                clearAuthSession(store)
+            }
+            throw error
+        }
+    }).finally(() => { flights.delete(store) })
+    flights.set(store, flight)
+    return flight
+}
+
+/** Call after installing Pinia, before installing the router. No component/router context required. */
+export async function setupAuthSession(): Promise<void> {
+    const store = useAuthStore()
+    const client = HttpRestClientFactory.getInstance() as ReturnType<typeof HttpRestClientFactory.getInstance> & {
+        setBeforeRequest?: (handler: (url: string) => Promise<void>) => void
+    }
+    syncAuthHeaders(store)
+    client.setBeforeRequest?.(async (url) => {
+        if (/\/api\/auth\/(login|refresh|logout)\/?(?:[?#]|$)/.test(url)) return
+        // The profile fetch uses the fresh JWT and must not await its own refresh promise.
+        if (fetchingUser.has(store) && /\/api\/auth\/me\/?(?:[?#]|$)/.test(url)) return
+        await refreshAuthSession(store)
+    })
+    try {
+        await refreshAuthSession(store)
+    } catch {
+        // Offline startup must not destroy a recoverable remembered session.
+        return
+    }
+    if (!store.accessToken || !store.tokenIsValid()) return
+    // Remembered maintenance already fetched (or attempted) the missing profile.
+    // Do not immediately retry a transient failure in this same setup invocation.
+    if (isRememberMeEnabled() && store.refreshToken) return
+    try {
+        await fetchSessionUser(store)
+    } catch { /* Rejected credentials have already been cleared. */ }
+}

package/src/composables/useAuth.ts

@@ -2,6 +2,7 @@ import {useAuthStore} from "../stores/AuthStore";
 import {AuthHelper, AuthSystemFactory} from "@drax/identity-front";
 import type {AuthSystem} from "@drax/identity-front";
 import {useRouter} from 'vue-router'
+import {authSessionRevision, clearAuthSession, isCurrentAuthOperation, isCurrentAuthSession, isRememberMeEnabled, rereadSession, revokeSessionToken, syncAuthHeaders} from './setupAuthSession'
 
 export function useAuth() {
 
@@ -10,26 +11,56 @@ export function useAuth() {
 
     const authSystem: AuthSystem = AuthSystemFactory.getInstance()
 
-    const login = async (username: string, password: string) => {
-        const {accessToken} = await authSystem.login(username, password)
-        authStore.setAccessToken(accessToken)
-        const authUser = await authSystem.me()
-        authStore.setAuthUser(authUser)
+    const login = async (username: string, password: string, rememberMe = false) => {
+        clearAuthSession(authStore)
+        const revision = authSessionRevision(authStore)
+        const version = authStore.sessionVersion
+        const remembered = isRememberMeEnabled() && rememberMe
+        const result = remembered
+            ? await authSystem.login(username, password, true)
+            : await authSystem.login(username, password)
+        if (authSessionRevision(authStore) !== revision || !isCurrentAuthOperation(authStore, version)) {
+            syncAuthHeaders(authStore)
+            if (result.refreshToken) await revokeSessionToken(result.refreshToken).catch(() => {})
+            throw new Error('Authentication cancelled')
+        }
+        if (remembered) authStore.setSession(result)
+        else authStore.setAccessToken(result.accessToken)
+        syncAuthHeaders(authStore)
+        try {
+            await fetchAuthUser()
+            if (authSessionRevision(authStore) !== revision || !isCurrentAuthOperation(authStore, version)) throw new Error('Authentication cancelled')
+        } catch (error) {
+            if (authSessionRevision(authStore) === revision && isCurrentAuthOperation(authStore, version)) {
+                const token = authStore.refreshToken
+                clearAuthSession(authStore)
+                if (token) await revokeSessionToken(token).catch(() => {})
+            }
+            throw error
+        }
     }
 
 
     const switchTenant = async (tenantId: string) => {
         const {accessToken} = await authSystem.switchTenant(tenantId)
-        authStore.setAccessToken(accessToken)
-        const authUser = await authSystem.me()
-        authStore.setAuthUser(authUser)
+        // Switching tenant replaces the JWT, but must not turn an ordinary session into a remembered one.
+        authStore.setSession({accessToken, refreshToken: authStore.refreshToken ?? undefined,
+            refreshExpiresAt: authStore.refreshExpiresAt ?? undefined})
+        syncAuthHeaders(authStore)
+        await fetchAuthUser()
     }
 
     const loginWithToken = async (token: string) => {
+        clearAuthSession(authStore)
         authStore.setAccessToken(token)
-        if(tokenIsValid()){
-            const authUser = await authSystem.me()
-            authStore.setAuthUser(authUser)
+        const version = authStore.sessionVersion
+        syncAuthHeaders(authStore)
+        try {
+            if(tokenIsValid()) await fetchAuthUser()
+            else clearAuthSession(authStore)
+        } catch (error) {
+            if (isCurrentAuthSession(authStore, token, version)) clearAuthSession(authStore)
+            throw error
         }
 
     }
@@ -64,19 +95,30 @@ export function useAuth() {
     }
 
     async function fetchAuthUser() {
+        const revision = authSessionRevision(authStore)
+        const token = authStore.accessToken
+        const version = authStore.sessionVersion
         const authUser = await authSystem.me()
-        authStore.setAuthUser(authUser)
+        if (authSessionRevision(authStore) === revision && isCurrentAuthSession(authStore, token, version)) {
+            authStore.setAuthUser(authUser)
+        }
         return authUser
     }
 
-    function logout() {
-        clearAuth()
-        router.push({name: 'Login'})
-    }
-
-    function clearAuth(){
+    async function logout() {
+        rereadSession(authStore)
+        const token = authStore.refreshToken
+        clearAuthSession(authStore)
         authSystem.logout()
-        authStore.clearAuth()
+        // Clear and navigate immediately, even offline or with a refresh in flight.
+        const navigation = router.push({name: 'Login'})
+        try {
+            if (token) await revokeSessionToken(token)
+        } catch {
+            // Local logout must succeed even when server revocation is unavailable.
+        } finally {
+            await navigation
+        }
     }
 
     function hasPermission(permission: string | undefined) {

package/src/cruds/UserSessionCrud.ts

@@ -46,7 +46,9 @@ class UserSessionCrud extends EntityCrud implements IEntityCrud {
             {title: 'user', key: 'user', align: 'start'},
             {title: 'userAgent', key: 'userAgent', align: 'start'},
             {title: 'ip', key: 'ip', align: 'start'},
-            {title: 'createdAt', key: 'createdAt', align: 'start'}
+            {title: 'createdAt', key: 'createdAt', align: 'start'},
+            {title: 'rememberMe', key: 'rememberMe', align: 'start'},
+            {title: 'refreshExpiresAt', key: 'refreshExpiresAt', align: 'start'}
         ]
     }
 
@@ -92,7 +94,9 @@ class UserSessionCrud extends EntityCrud implements IEntityCrud {
             {name: 'user', type: 'ref', label: 'user', default: null, ref: 'User', refDisplay: 'username'},
             {name: 'userAgent', type: 'string', label: 'userAgent', default: ''},
             {name: 'ip', type: 'string', label: 'ip', default: ''},
-            {name: 'createdAt', type: 'date', label: 'createdAt', default: null}
+            {name: 'createdAt', type: 'date', label: 'createdAt', default: null},
+            {name: 'rememberMe', type: 'boolean', label: 'rememberMe', default: null},
+            {name: 'refreshExpiresAt', type: 'date', label: 'refreshExpiresAt', default: null}
         ]
     }
 
@@ -136,7 +140,7 @@ class UserSessionCrud extends EntityCrud implements IEntityCrud {
     }
 
     get exportHeaders() {
-        return ['_id','user','createdAt','userAgent','ip']
+        return ['_id','user','createdAt','userAgent','ip','rememberMe','refreshExpiresAt']
     }
 
     get isImportable() {

package/src/i18n/UserSession-i18n.ts

@@ -11,7 +11,9 @@ const messages = {
            user:'user',
            agent:'agent',
            ip:'ip',
-           createdAt:'createdAt'
+           createdAt:'createdAt',
+           rememberMe: 'Remember me',
+           refreshExpiresAt: 'Remembered session expires at'
           }
       },
       permission: {
@@ -32,7 +34,9 @@ const messages = {
            user:'user',
            agent:'agent',
            ip:'ip',
-           createdAt:'createdAt'
+           createdAt:'createdAt',
+           rememberMe: 'Recordarme',
+           refreshExpiresAt: 'Vencimiento de sesión recordada'
           }
       },
      permission: {

package/src/index.ts

@@ -1,3 +1,6 @@
+export {setupAuthSession, refreshAuthSession, isRememberMeEnabled} from './composables/setupAuthSession'
+export {default as IdentityRememberMe} from './components/IdentityRememberMe.vue'
+
 import IdentityLogin from "./components/IdentityLogin/IdentityLogin.vue";
 import IdentityProfileAvatar from "./components/IdentityProfileAvatar/IdentityProfileAvatar.vue";
 import IdentityProfileDrawer from "./components/IdentityProfileDrawer/IdentityProfileDrawer.vue";

package/src/stores/AuthStore.ts

@@ -8,6 +8,9 @@ import {AuthHelper} from "@drax/identity-front";
 export const useAuthStore = defineStore('AuthStore', {
   state: () => ({
     accessToken: null as string | null,
+    sessionVersion: null as string | null,
+    refreshToken: null as string | null,
+    refreshExpiresAt: null as string | null,
     authUser: null as IAuthFullUser | null,
   }),
   getters:{
@@ -23,15 +26,35 @@ export const useAuthStore = defineStore('AuthStore', {
     },
   },
   actions:{
+    persistSession(){
+      // Persist synchronously so another tab holding the refresh lock sees rotation immediately.
+      try {
+        localStorage.setItem('AuthStore', JSON.stringify(this.$state))
+      } catch { /* Storage may be unavailable (private mode / quota). */ }
+    },
     setAccessToken(accessToken:string){
-      this.accessToken = accessToken
+      this.$patch({accessToken, refreshToken: null, refreshExpiresAt: null})
+      this.persistSession()
+    },
+    setSession(session: {accessToken: string, refreshToken?: string, refreshExpiresAt?: string}){
+      this.$patch({
+        accessToken: session.accessToken,
+        refreshToken: session.refreshToken ?? null,
+        refreshExpiresAt: session.refreshExpiresAt ?? null,
+      })
+      this.persistSession()
     },
     setAuthUser(authUser:IAuthFullUser){
       this.authUser = authUser
+      this.persistSession()
     },
     clearAuth(){
-      this.accessToken = null
-      this.authUser = null
+      this.$patch({
+        accessToken: null, refreshToken: null, refreshExpiresAt: null, authUser: null,
+        // A persisted epoch also invalidates pending work in other tabs, even null -> null.
+        sessionVersion: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`,
+      })
+      this.persistSession()
     }
   },