Scalekit

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

// Assuming you have a custom auth hook or context for Scalekit
function useScalekitAuth() {
  // Your Scalekit auth implementation
  // Returns { isAuthenticated, idToken, user }
}

const CLIENT_ID = "your-scalekit-client-id";

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

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

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

// app/dashboard/page.tsx (App Router)
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import { CharAgent } from './char-agent';

const CLIENT_ID = "your-scalekit-client-id";

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({
      client_id: CLIENT_ID,
    }),
  });
  return response.json(); // { ticket, userId, orgId, expiresAt }
}

export default async function Dashboard() {
  const cookieStore = await cookies();
  const idToken = cookieStore.get('scalekit_id_token')?.value;
  if (!idToken) redirect('/login');

  const ticketAuth = await getTicketAuth(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} />;
}

import express from 'express';
import { ScalekitClient } from '@scalekit-sdk/node';

const app = express();
const scalekit = new ScalekitClient(
  process.env.SCALEKIT_ENVIRONMENT_URL!,
  process.env.SCALEKIT_CLIENT_ID!,
  process.env.SCALEKIT_CLIENT_SECRET!
);

// OAuth callback handler
app.get('/callback', async (req, res) => {
  const { code } = req.query;

  try {
    const result = await scalekit.authenticateWithCode(
      code as string,
      `${process.env.APP_URL}/callback`
    );

    // Store tokens securely (e.g., in encrypted session)
    req.session.idToken = result.idToken;
    req.session.accessToken = result.accessToken;
    req.session.refreshToken = result.refreshToken;
    req.session.user = result.user;

    res.redirect('/dashboard');
  } catch (error) {
    console.error('Auth failed:', error);
    res.redirect('/login?error=auth_failed');
  }
});

// API endpoint to get token for agent
app.get('/api/token', (req, res) => {
  if (!req.session.idToken) {
    return res.status(401).json({ error: 'Not authenticated' });
  }
  res.json({ idToken: req.session.idToken });
});