Custom Authorization UI (auth.ui)

// src/auth/login.tsx — your component (default export)
import React from 'react';
import { useAuthFlow } from '@frontmcp/ui/auth';

export default function LoginPage(): React.ReactElement {
  const { clientName, scopes, error, submitFinish } = useAuthFlow();
  return (
    <div className="login">
      <h1>Sign in to {clientName}</h1>
      {error && <p className="error">{error}</p>}
      {/* <AuthPageWrapper> already renders the enclosing <form> with the
          pending_auth_id + csrf hidden fields; just add your visible fields. */}
      <label>
        Email
        <input type="email" name="email" required />
      </label>
      <button type="submit">Continue</button>
    </div>
  );
}

// src/server.ts — map the slot under `auth` (NOT a top-level field)
import { App } from '@frontmcp/sdk'; // or @FrontMcp

@App({
  auth: {
    mode: 'local',
    // slot → RELATIVE .tsx path, auto-anchored to THIS config file's directory.
    ui: { login: './auth/login.tsx' },
  },
})
export default class Server {}

auth: {
  mode: 'local',
  ui: {
    login: './auth/login.tsx',
    consent: './auth/consent.tsx',
    // incremental / federated / error keep their built-in pages
  },
}

// src/auth/extras.ts — a handler function (no class)
import { type AuthExtraContext } from '@frontmcp/sdk';

export async function addEnv(input: Record<string, unknown>, ctx: AuthExtraContext) {
  const key = typeof input['key'] === 'string' ? input['key'].trim() : '';
  if (!key) return { ok: false as const, error: 'key is required' };
  // ctx.current is the list already accepted for this extra in this flow.
  if (ctx.current.some((it) => (it as { key?: string }).key === key)) {
    return { ok: false as const, error: `"${key}" was already added` };
  }
  const value = typeof input['value'] === 'string' ? input['value'] : '';
  // Items in `addedItems` are APPENDED to the per-flow accumulator on success.
  return { ok: true as const, addedItems: [{ key, value }] };
}

import { addEnv } from './auth/extras';

@App({
  auth: {
    mode: 'local',
    ui: { login: './auth/login.tsx' },
    // extra name → handler fn. The page posts `action=<name>` to /oauth/ui/extra.
    extras: { 'envs:add': addEnv },
  },
})
export default class Server {}

npm install @frontmcp/ui react react-dom

import { useAuthFlow, useAddedItems, useExtraField, AuthPageWrapper } from '@frontmcp/ui/auth';

function LoginPage() {
  const { clientName, error, submitFinish } = useAuthFlow();
  const envs = useAddedItems<{ key: string; value: string }>('envs:add');
  const addEnv = useExtraField('envs:add');

  return (
    <AuthPageWrapper>
      <h1>Connect to {clientName}</h1>
      {error && <p className="error">{error}</p>}

      <ul>
        {envs.map((e) => (
          <li key={e.key}>{e.key}</li>
        ))}
      </ul>

      {/* validated extra — server-side auth.extras['envs:add'] */}
      <form onSubmit={addEnv.onSubmit}>
        <input name="key" placeholder="KEY" />
        <input name="value" placeholder="value" />
        <button disabled={addEnv.pending}>Add</button>
        {addEnv.result && !addEnv.result.ok && <span className="error">{addEnv.result.error}</span>}
      </form>

      {/* finish — posts pending_auth_id + csrf and follows the redirect */}
      <form onSubmit={submitFinish}>
        <input name="email" type="email" />
        <button>Authorize</button>
      </form>
    </AuthPageWrapper>
  );
}

// The SDK appends `mountAuthPage(LoginPage)` to the inlined module automatically,
// so a `file`-based component only needs a default export. (You may still call
// it explicitly if you mount the component yourself outside the auth.ui pipeline.)

import { getAuthFlow, submitExtra, submitFinish } from '@frontmcp/ui/auth/vanilla';

const flow = getAuthFlow(); // reads window.__FRONTMCP_AUTH__
console.log(flow.slot, flow.clientName);

document.querySelector('#add')!.addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await submitExtra('envs:add', e.target as HTMLFormElement);
  if (!res.ok) showError(res.error);
});

document.querySelector('#finish')!.addEventListener('submit', (e) => {
  e.preventDefault();
  void submitFinish(e.target as HTMLFormElement); // follows the OAuth redirect
});

@FrontMcp({
  ui: { cdnOverrides: { '@frontmcp/ui/auth': 'http://localhost:5173/ui-auth.mjs' } },
  auth: { mode: 'local', ui: { login: './auth/login.tsx' } },
})