React

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);

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

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

import "@authbound/react/styles.css";
import { asPolicyId, AuthboundProvider } from "@authbound/react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

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

createRoot(document.getElementById("root")!).render(
  <AuthboundProvider
    publishableKey={import.meta.env.VITE_AUTHBOUND_PK}
    policyId={policyId}
  >
    <App />
  </AuthboundProvider>
);

import { VerificationWall } from "@authbound/react";

export function App() {
  return (
    <VerificationWall
      title="Verify your age"
      description="Use your EU Digital Identity Wallet to continue."
      buttonText="Start verification"
      onVerified={({ verificationId, status }) => {
        console.log("Verified", verificationId, status);
      }}
    >
      <main>
        <h1>Verified</h1>
        <p>You can now continue.</p>
      </main>
    </VerificationWall>
  );
}