Vue quickstart

Add Wocha sign-in to a Vue 3 single-page application using @wocha/vue with the OAuth PKCE public client flow.

Prerequisites

Node.js 18+
Vue 3.4+ (Vite recommended)
A Wocha project with a public OAuth application
Redirect URI registered: http://localhost:5173/callback

What you'll build

A Vue 3 app with plugin-based auth, router guards, and PKCE sign-in.

your-app.local

Welcome back

After sign-in

✓ Session stored securely

✓ User profile available in your app

✓ Organisation context ready for multi-tenant features

Installation

pnpm add @wocha/vue vue-router

Or scaffold with the CLI

npx @wocha/cli init --framework vue

Environment variables

.env

VITE_WOCHA_ISSUER=https://your-tenant.auth.wocha.ai
VITE_WOCHA_CLIENT_ID=your-client-id
VITE_WOCHA_API_URL=https://your-tenant.api.wocha.ai/v1  # optional

Plugin setup

Install the Wocha plugin in src/main.ts:

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import { GreetPlugin } from "@wocha/vue";
import App from "./App.vue";
 
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: () => import("./views/HomeView.vue") },
    { path: "/callback", component: () => import("./views/CallbackView.vue") },
    {
      path: "/dashboard",
      component: () => import("./views/DashboardView.vue"),
      meta: { requiresAuth: true },
    },
  ],
});
 
const app = createApp(App);
 
app.use(GreetPlugin, {
  config: {
    issuer: import.meta.env.VITE_WOCHA_ISSUER,
    clientId: import.meta.env.VITE_WOCHA_CLIENT_ID,
    redirectUri: window.location.origin + "/callback",
    apiUrl: import.meta.env.VITE_WOCHA_API_URL,
    onRedirectCallback: (appState) => {
      const target =
        appState && typeof appState === "object" && "returnTo" in appState
          ? String((appState as { returnTo: string }).returnTo)
          : "/dashboard";
      router.push(target);
    },
  },
});
 
app.use(router);
app.mount("#app");

OAuth callback route

Create src/views/CallbackView.vue:

<script setup lang="ts">
import { useSession } from "@wocha/vue";
import { watch } from "vue";
import { useRouter } from "vue-router";
 
const { status } = useSession();
const router = useRouter();
 
watch(status, (value) => {
  if (value === "authenticated") router.push("/dashboard");
});
</script>
 
<template>
  <p>Completing sign-in…</p>
</template>

<script setup lang="ts">
import { useSession } from "@wocha/vue";
 
const { status, login, logout } = useSession();
</script>
 
<template>
  <button v-if="status === 'authenticated'" @click="logout()">Sign out</button>
  <button v-else @click="login()">Sign in</button>
</template>

Next steps

SDK reference — hooks, server helpers, and configuration options
Webhooks overview — receive user and session lifecycle events
Common patterns — protect routes, org switching, and role-based UI