Why choose Logto with Nuxt 3 and Vue 3?

Logto is a modern identity provider and SDK that plays nicely with OIDC/OAuth2. If you build with Nuxt 3 or Vue 3, Logto gives you an SDK tailored for JavaScript/TypeScript apps, concise APIs for sign-in/sign-out and token management, and a developer-friendly dashboard. In short: less boilerplate, faster integration.

For Nuxt 3, the main win is integrating authentication across SSR and client side hydration without losing session continuity. For SPA-focused Vue 3 apps, Logto’s client SDK handles PKCE flows and access token lifecycle. The SDK abstracts the nitty-gritty so you can focus on route protection and user UX.

Also, Logto supports OIDC standards — that means you get ID tokens (user identity) on top of OAuth2 access tokens. If you care about security and standards compliance (you should), this is the baseline requirement.

Auth flows: OAuth2, OpenID Connect and PKCE — the essentials

OAuth2 is a framework for delegated authorization (I let an app access resources on my behalf). OpenID Connect (OIDC) is built on OAuth2 and adds an authentication layer: the ID token. While OAuth2 tells you “this app can access something”, OIDC tells you “this user is who they say they are”.

For single-page apps and native apps, use the Authorization Code Flow with PKCE (Proof Key for Code Exchange). PKCE prevents interception of the authorization code and is the recommended approach for public clients where a client secret cannot be safely stored.

Typical flow in short: user clicks login → browser redirected to provider (Logto) → user authenticates → provider returns authorization code → client exchanges code for tokens (with PKCE) → client uses access token to call APIs and ID token for identity. Keep the code exchange on a secure backend when possible for SSR apps.

Implementing Logto in Nuxt 3 — step-by-step (TypeScript-ready)

Overview: create a Logto app, install the SDK, add a Nuxt plugin that initializes the client on server and client, add auth middleware to protect routes, and implement login/logout UIs. The example below uses the official SDK patterns and Nuxt plugin hooks.

Install the SDK (example):

npm install @logto/js --save
# or with pnpm/yarn

Minimal plugin (nuxt/plugins/logto.client.ts and logto.server.ts pattern):

import { LogtoClient } from "@logto/js";

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  const client = new LogtoClient({
    endpoint: config.public.logtoEndpoint,
    appId: config.public.logtoAppId
  });
  return {
    provide: {
      logto: client
    }
  };
});

In components or pages you access it as const { $logto } = useNuxtApp(). For SSR you should initialize auth state on the server and attach session info to cookies or a server session store. See the official Logto tutorial for expanded patterns: Dev.to — Add authentication to your Nuxt 3 and Vue 3 applications with Logto.

Protecting routes, middleware and session strategies

Nuxt 3 middleware is the natural place to enforce auth. Create a middleware that checks for a valid session (server-validated cookie or token), redirect to the login route when missing, and refresh tokens when necessary. For SSR, prefer cookie-based sessions (HTTP-only, Secure, SameSite) and validate tokens server-side on every request or via a short-lived session.

For SPA or client-only routes, use the client SDK to check authentication state and guard routes via router guards. Avoid storing long-lived access tokens in localStorage; instead, store them in memory and use refresh tokens through secure channels (or rotate refresh tokens frequently).

Example middleware snippet (pseudo):

export default defineNuxtRouteMiddleware(async (to) => {
  const { $logto } = useNuxtApp();
  const isAuthenticated = await $logto.isAuthenticated();
  if (!isAuthenticated && to.meta.requiresAuth) {
    return navigateTo('/login?redirect=' + to.fullPath);
  }
});

Security checklist and common gotchas

Here’s a short checklist to keep your app secure. These items are practical and often neglected in tutorials:

• Use Authorization Code Flow with PKCE for public clients; always use OIDC for authentication.
• Prefer HTTP-only, Secure cookies for SSR session tokens; set SameSite properly.
• Validate ID and access tokens on the server for sensitive endpoints.
• Implement CSRF protection if you accept state-changing requests from browsers.
• Rotate and limit lifetime of refresh tokens; implement server-side revocation.

Common mistakes: storing tokens in localStorage (XSS risk), assuming implicit flow is safe (it isn’t for modern apps), or skipping token signature/expiry checks on the server. Another frequent issue: incorrect redirect URIs in your Logto app configuration — they must match exactly.

Finally, log auth events and failures carefully (do not log tokens). Monitoring sign-in errors, token refresh failures, and suspicious IP patterns can alert you to attack attempts early.

Example: login & logout implementation (simple)

Client-side (triggering the provider redirect):

const { $logto } = useNuxtApp();
function login() {
  $logto.signIn({ redirectUri: window.location.origin + '/auth/callback' });
}
function logout() {
  $logto.signOut({ redirectUri: window.location.origin + '/' });
}

Callback handling: exchange code for tokens (SDK does this) and persist session. For SSR, perform token exchange on the server and set an HTTP-only cookie containing a session ID. The session ID maps to server state with user info and tokens stored securely.

Protect API calls by attaching access tokens in Authorization headers (Bearer). If your API is same-origin, prefer cookie-based session checks on the server side to avoid sending tokens client-side at all.

Final recommendations & resources

If you’re deciding where to start: follow the official docs first (Nuxt and Logto). For patterns and working examples, community posts (Dev.to) and GitHub examples are invaluable. Practical order: get a working OIDC flow with Logto in a small demo; then integrate middleware and session persistence; finally, harden security settings and add user role checks if needed.

Quick links (useful): Logto, Nuxt 3 Docs, Vue 3 Guide, OAuth2 spec, OpenID Connect.

Pro tip (a touch of irony): if your auth logic feels like a game of whack-a-mole with edge cases, you’re probably doing it right — security is iterative, but standards (OIDC + PKCE) keep the playing field sane.