Vue SDK

@wocha/vue provides Vue 3 composables and headless components for Wocha authentication in single-page applications. It implements OAuth 2.0 authorisation code with PKCE as a public client.

Installation

pnpm add @wocha/vue

Or scaffold with the CLI

npx @wocha/cli init --framework vue

Peer dependency: Vue 3.4+.

Setup

import { createApp } from "vue";
import { GreetPlugin } from "@wocha/vue";
 
const app = createApp(App);
 
app.use(GreetPlugin, {
  config: {
    issuer: "https://my-tenant.auth.wocha.ai",
    clientId: "your-client-id",
    redirectUri: window.location.origin + "/callback",
    apiUrl: "https://my-tenant.api.wocha.ai/v1", // optional, for permissions
  },
});

Authentication flow

User clicks sign in → signIn() redirects to the hosted login UI
After authentication, Hydra redirects to /callback
GreetPlugin exchanges the code for tokens and stores the refresh token
Composables reactively update with the authenticated user

Composables

`useSession()`

<script setup lang="ts">
import { useSession } from "@wocha/vue";
 
const { data, status, error, refresh } = useSession();
</script>

`useUser()`

const { user, status } = useUser();

`useOrg()`

<script setup lang="ts">
import { useOrg } from "@wocha/vue";
 
const { orgId, orgIds, switchOrg, isSwitching } = useOrg();
</script>

`usePermission(check)`

SpiceDB permission check against the Customer API (requires apiUrl):

<script setup lang="ts">
import { usePermission } from "@wocha/vue";
 
const { allowed, isLoading } = usePermission({
  resource: { type: "document", id: "doc_123" },
  permission: "read",
});
</script>

Components

<script setup lang="ts">
import { SignIn, SignUp, OrgSwitcher, Protect } from "@wocha/vue";
</script>