Vue

Use @authbound/vue for browser components and a backend route for verification creation.

Install

pnpm add @authbound/vue @authbound/server express cookie-parser

Environment

AUTHBOUND_SECRET_KEY=sk_test_...
AUTHBOUND_SESSION_SECRET=replace-with-a-random-32-byte-secret
AUTHBOUND_WEBHOOK_SECRET=whsec_...
AUTHBOUND_PUBLISHABLE_KEY=pk_test_...
VITE_AUTHBOUND_PK=pk_test_...
AUTHBOUND_POLICY_ID=YOUR_POLICY_ID
VITE_AUTHBOUND_POLICY_ID=YOUR_POLICY_ID
PUBLIC_APP_URL=http://localhost:5173
AUTHBOUND_API_URL=https://api.authbound.io

Copy YOUR_POLICY_ID from the Authbound dashboard.

Server route

Mount the SDK server router on the same origin as your Vue app. It creates verifications, stores the pending browser binding cookie, and finalizes the HttpOnly session after the browser observes a verified status by fetching the signed result with your secret key.

server.ts

import cookieParser from "cookie-parser";
import express from "express";
import { createAuthboundRouter, type AuthboundConfig } from "@authbound/server/express";

const app = express();

app.use(express.json({
  verify: (req, _res, buf) => {
    (req as express.Request & { rawBody?: Buffer }).rawBody = Buffer.from(buf);
  },
}));
app.use(cookieParser());

const authboundConfig: AuthboundConfig = {
  apiKey: process.env.AUTHBOUND_SECRET_KEY!,
  publishableKey: process.env.AUTHBOUND_PUBLISHABLE_KEY!,
  secret: process.env.AUTHBOUND_SESSION_SECRET!,
  webhookSecret: process.env.AUTHBOUND_WEBHOOK_SECRET!,
  allowedOrigins: [process.env.PUBLIC_APP_URL ?? "http://localhost:5173"],
  routes: {
    protected: [],
    verify: "/verify",
    callback: "/api/authbound/callback",
  },
};

app.use("/api/authbound", createAuthboundRouter(authboundConfig));

app.listen(3000);

The router provides POST /api/authbound/verification and POST /api/authbound/session, which are the default endpoints used by AuthboundPlugin. The session route validates the pending same-origin browser binding before it sets the SDK cookie. SDK-managed sessions require navigator.locks. Same-origin tabs serialize verification creation and session finalization under a lock keyed by the resolved endpoint origin. If you need to support a browser or embedded webview without Web Locks, use sessionMode: "manual" and create the trusted session on your server. Set allowedOrigins to your public app origin when the API runs behind a proxy or container URL. Set trustProxy: true only when Forwarded or X-Forwarded-* headers come from infrastructure you control.

If your backend only creates verifications and does not expose /api/authbound/session, set sessionMode: "manual" in AuthboundPlugin and persist trusted state with your own webhook or result flow.

For Vite local development, proxy /api to the backend:

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": "http://localhost:3000",
    },
  },
});

Plugin

src/main.ts

import "@authbound/vue/styles.css";
import { asPolicyId, AuthboundPlugin } from "@authbound/vue";
import { createApp } from "vue";
import App from "./App.vue";

const policyId = asPolicyId(import.meta.env.VITE_AUTHBOUND_POLICY_ID);

createApp(App)
  .use(AuthboundPlugin, {
    publishableKey: import.meta.env.VITE_AUTHBOUND_PK,
    policyId,
  })
  .mount("#app");

Verification page

src/App.vue

<script setup lang="ts">
import { VerificationWall } from "@authbound/vue";
</script>

<template>
  <VerificationWall
    title="Verify your age"
    subtitle="Use your EU Digital Identity Wallet to continue."
    start-button-text="Start verification"
    :on-verified="({ verificationId, status }) => {
      console.log('Verified', verificationId, status);
    }"
  >
    <main>
      <h1>Verified</h1>
      <p>You can now continue.</p>
    </main>
  </VerificationWall>
</template>

For production, use the SDK session cookie for same-origin route UX and store the trusted result from webhooks or authbound.verifications.getResult() before granting durable access.

Start here

Identity verification

Credential issuance

AI

Install

Environment

Server route

Plugin

Verification page

Next

​Install

​Environment

​Server route

​Plugin

​Verification page

​Next

Install

Environment

Server route

Plugin

Verification page

Next