Practical Nuxt 3 & Vue 3 authentication: Logto, OAuth2/OIDC, and secure patterns

A compact, actionable guide for developers who want a secure login system in Nuxt 3/Vue 3 apps — with real-world choices, middleware patterns, and an example Logto integration.

Why authentication still feels messy (and how to avoid the usual mistakes)

Authentication is mostly protocol + storage decisions. You pick a flow (OIDC/OAuth2), where tokens live (cookies vs local storage), and how the server enforces session validity. The “mess” comes from mixing SPA convenience with security best practices — e.g., storing long-lived access tokens in localStorage or using the implicit flow (deprecated). Modern guidance pushes SPAs toward the Authorization Code Flow with PKCE and keeping sensitive tokens out of JS accessible storage.

For server-rendered or hybrid frameworks like Nuxt 3, you can offload state to the server: exchange codes on the server, set HttpOnly cookies, and rely on server-side session validation on protected routes. That reduces attack surface (XSS targeting tokens) and makes CSRF and cookie flags the primary concerns — which are manageable.

Finally: pick an identity provider or SDK that supports OIDC and good defaults. If you want a fast integration, consider providers with ready SDKs for Vue/Nuxt. For example, the Logto SDK offers dedicated docs and examples to get you started quickly — see the official docs at logto nuxt.

Core architecture options explained (short & practical)

Option A — Client-only SPA using OIDC code flow with PKCE: the SPA redirects to the IdP, receives an authorization code, exchanges it (client-side) for tokens — or better, exchanges server-side via a backend-to-backend call. This is simplest for pure frontend apps, but demands careful token storage and refresh handling.

Option B — Server-side session (recommended for Nuxt SSR): the app performs the code exchange on the server, the server creates a session and sets a secure HttpOnly cookie. The client only sees an opaque session cookie. This combines excellent security with simpler client code; it also makes middleware and route protection trivial because session checks happen server-side.

Option C — Hybrid token + session: short-lived access token in-memory for API calls plus a rotating refresh token kept in an HttpOnly cookie. This pattern is good for SPAs that need direct API access while still limiting token exposure. But implement refresh token rotation and detect reuse to prevent theft.

Implementation pattern for Nuxt 3 (code flow with server session)

A pragmatic pattern for Nuxt 3: use the Authorization Code Flow (OIDC) with server-side code exchange. Sequence: user clicks Login → app redirects to IdP → IdP redirects back to Nuxt callback → Nuxt server exchanges code for tokens → Nuxt sets an HttpOnly, Secure cookie containing a session id (or encrypted tokens) → subsequent SSR or API calls validate that session.

Middleware: create an authentication middleware (server and client aware) that verifies session server-side for SSR and falls back to client redirect for unauthenticated client-only routes. In Nuxt 3, middleware can run on server or client; prefer server validation for SSR pages and protect API routes with the same validation logic.

Edge-cases: handle login redirect flow with a return_to param (validate it against allowed origins), and implement logout both locally (clear cookie) and at the IdP (end-session endpoint) to avoid stale sessions at the provider.

Example using Logto with Nuxt 3 / Vue 3 (conceptual)

Logto provides SDKs for JavaScript that simplify OIDC flows and token management. Typical steps: register your app in Logto (client id, redirect URIs), install the Logto SDK in the Nuxt/Vue app, configure the SDK with your domain and client id, and implement login/logout handlers. For a hands-on example see this community tutorial: Add authentication to Nuxt 3 and Vue 3 — Dev.to, and the official docs at logto.dev docs.

When integrating Logto, decide whether your Nuxt server will handle the token exchange. If yes, configure the Logto client for server-side flows and store session ids in secure cookies. If you use client-only mode, prefer PKCE and keep tokens in memory; avoid localStorage.

Example (client-side usage snippet):

// pseudocode: initialize Logto client in a composable
import { createLogtoClient } from '@logto/browser'
const logto = createLogtoClient({ appId: 'YOUR_APP_ID', endpoint: 'https://your-logto-domain' })
await logto.signInWithRedirect({ scope: 'openid profile email' })

Security checklist (practical)

Implement these minimal security controls before going live:

• Use Authorization Code Flow with PKCE for SPAs; prefer server-side code exchange for Nuxt SSR apps.
• Store refresh tokens only in HttpOnly, Secure cookies with SameSite flags; access tokens kept short-lived and in-memory where possible.
• Rotate refresh tokens and detect reuse; implement logout at both client and IdP (OIDC end-session).
• Enforce CSRF protection on endpoints that mutate authentication state; use anti-CSRF tokens if you use cookies.
• Use HTTPS everywhere; set appropriate cookie attributes (Secure, HttpOnly, SameSite=strict/lax depending on flows).

Protecting routes and middleware patterns

Create a small reusable middleware that checks session/auth status early. On server side, verify session cookie or call a session validation API; on client side, redirect to login if unauthenticated. In Nuxt, leverage server middleware to validate requests for SSR pages and API endpoints.

If you need granular role-based access, store claims in the session or fetch them from a protected userinfo endpoint (OIDC). Cache claims server-side in a short-lived store to reduce IdP calls and keep validation fast.

Example middleware responsibilities:

• Validate session and refresh tokens if needed.
• Attach user object to request/response context for page-level access.
• Handle redirect back to intended route after login (return_to param).

Performance & UX considerations

SSR pages should perform auth checks quickly: keep session lookup in fast storage (in-memory cache, Redis). Avoid blocking rendering on extra IdP calls; validate session locally and refresh asynchronously when appropriate.

For SPAs prefer in-memory access token storage to prevent XSS leaks; still rely on short expiration times and refresh via HttpOnly cookies or silent renewal through a controlled backend route.

Make login flows obvious and predictable: show loading states during redirects and handle error cases (invalid_grant, expired_token) gracefully by redirecting users to the login page with a clear message.

Where to read next (authoritative links)

Official docs and specs you’ll need:

• Vue 3 documentation — general framework guidance.
• Nuxt 3 documentation — SSR and middleware patterns (search for authentication examples).
• Logto docs — SDKs and integration guides (useful for Logto integration).
• OpenID Connect — protocol spec and fundamentals.
• OAuth 2.0 — flow descriptions and security notes.
• MDN JavaScript — runtime patterns and secure storage techniques.