by XentraNET
Quickstarts / Single Page App / Vue

Vue Quickstart

Plug X-Auth into Vue 3 with one app.use(). Use the useXAuth() composable from any setup script.

SDK: @xentranet/x-auth-vue Version: 1.x ยท Vue 3.4+ Time: ~5 min
1

Install the SDK

The Vue package ships a plugin and a useXAuth() composable.

terminal
npm install @xentranet/x-auth-vue
2

Register the plugin

Wire X-Auth into your app instance with your tenant id.

src/main.ts
import { createApp } from 'vue';
import { XAuthPlugin } from '@xentranet/x-auth-vue';
import App from './App.vue';

createApp(App)
  .use(XAuthPlugin, { tenantId: 'your-app' })
  .mount('#app');
3

Use useXAuth() in a component

Pull advice off the composable and bind it to a click handler.

src/components/Transfer.vue
<script setup lang="ts">
import { useXAuth } from '@xentranet/x-auth-vue';

const { advice } = useXAuth();

async function onTransfer() {
  const { decision, access_token } = await advice({
    action: 'transfer', amount: 2999, currency: 'USD',
  });
  if (decision !== 'ALLOW') return;

  await fetch('/api/transfer', {
    method: 'POST',
    headers: { Authorization: `Bearer ${access_token}` },
    body: JSON.stringify({ amount: 2999 }),
  });
}
</script>

<template>
  <button @click="onTransfer">Transfer $29.99</button>
</template>
4

Verify on your backend

Your API verifies the bearer matches the action; if not, it throws.

api/transfer.ts (Node example)
const { transaction_ctx } = await xauth.verify(bearer, {
  expect: { action: 'transfer', amount: req.body.amount },
});

Pair with a backend quickstart: Express, Go, Spring Boot, ASP.NET.

Next steps

Tune your risk policy, add step-up methods, and connect your IdP.