What this prompt does
This prompt asks the AI to build a complete authentication system for a Vue 3 app using [router_version]. It centers on a Pinia auth store with login, logout, register, and refresh actions; JWT handling with access plus refresh tokens that auto-refresh before expiry; and an Axios or fetch interceptor that injects the Authorization header automatically. Route guards via beforeEach redirect unauthenticated users to login, and role-based access for [roles] is enforced with a v-permission directive on UI elements.
The structure works because authentication breaks in the gaps — the silent token refresh, the 401 retry, the persisted state across reload — and this prompt addresses each one explicitly. Persistent auth via [storage_strategy], OAuth login with [oauth_providers], a session-timeout warning at [timeout_warning], a useAuth() composable, and a protected API wrapper that does 401-then-refresh-then-retry automatically turn a login screen into a real session system, with TypeScript types and tests. Centralizing everything in a Pinia store keeps auth state in one place rather than scattered across components, so the route guards, the interceptor, and the v-permission directive all read from a single source of truth and stay consistent as the app grows.
When to use it
- You are standing up auth for a Vue 3 app that needs to be genuinely secure, not just a login form.
- You need access plus refresh tokens with automatic refresh before expiry.
- You want route guards redirecting unauthenticated users and role gating for
[roles]. - You need auth state to survive page reload via
[storage_strategy]. - You are adding OAuth social login with
[oauth_providers]. - You want a
useAuth()composable and a 401-refresh-retry API wrapper so sessions feel seamless.
Example output
Expect a Pinia auth store, JWT access/refresh handling with auto-refresh, a request interceptor injecting Authorization, beforeEach route guards, a v-permission directive for [roles], persistent auth via [storage_strategy], OAuth integration for [oauth_providers], a session-timeout warning at [timeout_warning], a useAuth() composable (isAuthenticated, hasRole, login, logout), and a protected API wrapper with automatic 401 refresh-and-retry, plus types and tests.
Pro tips
- Prefer httpOnly cookies for
[storage_strategy]where your backend supports them; localStorage is simpler but more exposed to XSS. - Make sure the auto-refresh fires before expiry, not on the 401 — proactive refresh avoids a failed request flicker.
- Define
[roles]to match your backend's actual role names sov-permissionchecks line up with server authorization. - Test the 401-refresh-retry path under concurrent requests; multiple simultaneous 401s can trigger duplicate refresh calls without a lock.
- Wire
[oauth_providers]callbacks carefully — redirect URIs and state handling are where social login most often breaks. - Treat the
[timeout_warning]modal as a real UX moment; give users a clear way to extend the session before it expires.
