OneLogin

import { AuthProvider, useAuth } from 'react-oidc-context';
import { useEffect } from 'react';
import "@mcp-b/embedded-agent/web-component";

const oidcConfig = {
  authority: 'https://acme.onelogin.com/oidc/2',
  client_id: 'your-client-id',
  redirect_uri: window.location.origin + '/callback',
  scope: 'openid profile email groups',
};

function App() {
  const auth = useAuth();

  useEffect(() => {
    if (auth.isAuthenticated && auth.user?.id_token) {
      const agent = document.querySelector("webmcp-agent");
      if (agent) {
        agent.setAttribute("auth-token", auth.user.id_token);
      }
    }
  }, [auth.isAuthenticated, auth.user]);

  return <webmcp-agent />;
}

function Root() {
  return (
    <AuthProvider {...oidcConfig}>
      <App />
    </AuthProvider>
  );
}

import "@mcp-b/embedded-agent/web-component";

// Parse ID token from URL hash (implicit flow)
function getIdTokenFromHash() {
  const hash = window.location.hash.substring(1);
  const params = new URLSearchParams(hash);
  return params.get('id_token');
}

const idToken = getIdTokenFromHash();

if (idToken) {
  const agent =
    document.querySelector("webmcp-agent") ?? document.createElement("webmcp-agent");

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

  agent.setAttribute("auth-token", idToken);

  // Clean URL
  history.replaceState(null, '', window.location.pathname);
}