Logto

// app/logto.ts - Configuration
import { LogtoNextConfig } from "@logto/next";

export const logtoConfig: LogtoNextConfig = {
  appId: "your-app-id",
  appSecret: "your-app-secret",
  endpoint: "https://your-tenant.logto.app",
  baseUrl: "https://yourapp.com",
  cookieSecret: "complex_password_at_least_32_characters_long",
  cookieSecure: process.env.NODE_ENV === "production",
};

// app/dashboard/page.tsx
import { getLogtoContext } from "@logto/next/server-actions";
import { logtoConfig } from "../logto";
import { redirect } from "next/navigation";
import { CharAgent } from "./char-agent";

async function getTicketAuth(idToken: string) {
  const response = await fetch("https://api.usechar.ai/api/auth/ticket", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${idToken}`,
      "Content-Type": "application/json",
    },
  });
  return response.json();
}

export default async function Dashboard() {
  const { isAuthenticated, claims } = await getLogtoContext(logtoConfig);

  if (!isAuthenticated || !claims) {
    redirect("/api/logto/sign-in");
  }

  // Get the raw ID token for ticket exchange
  const ticketAuth = await getTicketAuth(claims.__raw);

  return (
    <main>
      <CharAgent ticketAuth={ticketAuth} />
    </main>
  );
}

// app/dashboard/char-agent.tsx
"use client";
import { useEffect, useRef } from "react";
import "@mcp-b/char/web-component";
import type { WebMCPAgentElement, TicketAuth } from "@mcp-b/char/web-component";

export function CharAgent({ ticketAuth }: { ticketAuth: TicketAuth }) {
  const agentRef = useRef<WebMCPAgentElement>(null);

  useEffect(() => {
    agentRef.current?.connect({ ticketAuth });
  }, [ticketAuth]);

  return <char-agent ref={agentRef} />;
}

import LogtoClient from "@logto/browser";
import "@mcp-b/char/web-component";
import type { WebMCPAgentElement } from "@mcp-b/char/web-component";

const logtoClient = new LogtoClient({
  endpoint: "https://your-tenant.logto.app",
  appId: "your-app-id",
});

// After sign-in callback
async function handleCallback() {
  await logtoClient.handleSignInCallback(window.location.href);

  if (await logtoClient.isAuthenticated()) {
    const claims = await logtoClient.getIdTokenClaims();

    const agent = document.querySelector("char-agent") as WebMCPAgentElement
      ?? document.createElement("char-agent") as WebMCPAgentElement;

    if (!agent.isConnected) {
      document.body.appendChild(agent);
    }

    // Use connect() - keeps token out of DOM
    if (claims?.__raw) {
      agent.connect({ idToken: claims.__raw, clientId: "your-app-id" });
    }
  }
}

// Initiate sign-in
function signIn() {
  logtoClient.signIn("https://yourapp.com/callback");
}

<script setup lang="ts">
import { useLogto } from "@logto/vue";
import { ref, watchEffect } from "vue";
import "@mcp-b/char/web-component";
import type { WebMCPAgentElement } from "@mcp-b/char/web-component";

const { isAuthenticated, getIdTokenClaims } = useLogto();
const agentRef = ref<WebMCPAgentElement | null>(null);

watchEffect(async () => {
  if (isAuthenticated.value && agentRef.value) {
    const claims = await getIdTokenClaims();
    if (claims?.__raw) {
      agentRef.value.connect({ idToken: claims.__raw, clientId: "your-app-id" });
    }
  }
});
</script>

<template>
  <char-agent ref="agentRef" />
</template>