Auth0

import { useAuth0 } from '@auth0/auth0-react';
import { useEffect, useRef } from 'react';
import "@mcp-b/char/web-component";
import type { WebMCPAgentElement } from "@mcp-b/char/web-component";

// Your Auth0 Client ID (must be in your Char allowed_audiences list)
const CLIENT_ID = 'a1b2c3d4e5f6g7h8i9j0';

function App() {
  const { isAuthenticated, getIdTokenClaims } = useAuth0();
  const agentRef = useRef<WebMCPAgentElement>(null);

  useEffect(() => {
    if (isAuthenticated && agentRef.current) {
      getIdTokenClaims().then((claims) => {
        if (claims) {
          // Use connect() - keeps token out of DOM
          agentRef.current?.connect({ idToken: claims.__raw, clientId: CLIENT_ID });
        }
      });
    }
  }, [isAuthenticated, getIdTokenClaims]);

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

// app/dashboard/page.tsx (App Router)
import { getSession, getAccessToken } from '@auth0/nextjs-auth0';
import { redirect } from 'next/navigation';
import { CharAgent } from './char-agent';

// Your Char organization ID (from the dashboard)
const ORG_ID = 'org_abc123';
// Your Auth0 Client ID (must be in your Char allowed_audiences list)
const CLIENT_ID = 'a1b2c3d4e5f6g7h8i9j0';

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',
    },
    body: JSON.stringify({
      org_id: ORG_ID,      // Required for SSR (no Origin header)
      client_id: CLIENT_ID // Required for production
    }),
  });
  return response.json(); // { ticket, userId, orgId, expiresAt }
}

export default async function Dashboard() {
  const session = await getSession();
  if (!session?.idToken) redirect('/api/auth/login');

  const ticketAuth = await getTicketAuth(session.idToken);

  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} />;
}

// pages/api/token.ts - API route to get token server-side
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';
import type { NextApiRequest, NextApiResponse } from 'next';

export default withApiAuthRequired(async function token(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { accessToken } = await getAccessToken(req, res, {
    scopes: ['openid', 'profile', 'email'],
  });
  res.json({ accessToken });
});

// Client-side component
import { useUser } from '@auth0/nextjs-auth0/client';
import { useEffect, useRef } from 'react';
import "@mcp-b/char/web-component";
import type { WebMCPAgentElement } from "@mcp-b/char/web-component";

// Your Auth0 Client ID (must be in your Char allowed_audiences list)
const CLIENT_ID = 'a1b2c3d4e5f6g7h8i9j0';

export default function App() {
  const { user } = useUser();
  const agentRef = useRef<WebMCPAgentElement>(null);

  useEffect(() => {
    if (user) {
      fetch('/api/token')
        .then((res) => res.json())
        .then(({ accessToken }) => {
          agentRef.current?.connect({ idToken: accessToken, clientId: CLIENT_ID });
        });
    }
  }, [user]);

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