Vue.js integration

Vue.js + Olympus follows the same Backend-for-frontend pattern as React/Next.js. The Vue app calls your backend; the backend handles tokens.

With Nuxt

If you're using Nuxt (full-stack), it has API routes like Next.js. Use the same pattern as the Next.js integration.

Pure Vue + separate backend

For Vue + a separate backend (Node, Go, Python, etc.):

Backend exposes auth endpoints

GET /api/auth/login, redirects to Olympus.
GET /api/auth/callback, handles the OAuth2 callback.
POST /api/auth/logout, clears session.
GET /api/me, returns userinfo.

Vue side

// composables/useAuth.ts
import { ref } from "vue";

export const user = ref<{ sub: string; email: string } | null>(null);

export async function fetchMe() {
  const response = await fetch("/api/me", { credentials: "include" });
  if (!response.ok) {
    user.value = null;
    return;
  }
  user.value = await response.json();
}

export function login() {
  window.location.href = "/api/auth/login";
}

export async function logout() {
  await fetch("/api/auth/logout", { method: "POST" });
  user.value = null;
}

In your component:

<script setup lang="ts">
import { onMounted } from "vue";
import { user, fetchMe, login, logout } from "@/composables/useAuth";

onMounted(fetchMe);
</script>

<template>
  <div v-if="user">
    Logged in as {{ user.email }}
    <button @click="logout">Log out</button>
  </div>
  <button v-else @click="login">Log in</button>
</template>

CSRF and cookies

The session cookie is HttpOnly. Use credentials: "include" on fetch calls to send it.

If your backend is on a different origin than your Vue app, configure CORS carefully:

Backend: Access-Control-Allow-Origin: <vue-app-origin>, Access-Control-Allow-Credentials: true.
Same eTLD+1 makes things easier (avoid third-party cookie restrictions).