frontmcp-auth-ui

name	frontmcp-auth-ui
description	Use when customizing, branding, or replacing the built-in FrontMCP OAuth pages (the login, consent, federated-select, incremental-authorization, and error pages) with your own React components. Covers the auth.ui slot-to-file map and auth.extras name-to-handler map on the auth config (no decorator, no class); the @frontmcp/ui/auth React hooks, the AuthPageWrapper component, and mountAuthPage (client-rendered via an esm.sh import-map plus a per-file server-side transform, with no bundling and no SSR); and the framework-owned CSRF and CSP. Triggers: custom login page, brand the consent screen, replace the OAuth UI, custom authorization UI, style the auth pages, multi-step login. The skill for CUSTOM AUTHORIZATION UI (distinct from auth config in frontmcp-config and permissions in frontmcp-authorities).
tags	["auth","auth-ui","login","consent","custom-ui","react","oauth","guide"]
category	config
targets	["all"]
bundle	["full"]
priority	5
visibility	both
license	Apache-2.0
metadata	{"docs":"https://docs.agentfront.dev/frontmcp/authentication/custom-ui"}

FrontMCP Custom Authorization UI (auth.ui)

Entry point for replacing FrontMCP's built-in OAuth pages (login, consent, federated, incremental, error) with your own React components. Custom UI is a simple slot→file map (auth.ui) plus an extras name→handler map (auth.extras) on the auth config — there is no decorator and no class. The references/custom-auth-ui.md reference has the full API; the examples/ show a single login slot and a multi-step extras form.

When to Use This Skill

Must Use

• Branding or fully replacing the local/remote mode login page with a custom React component
• Building a custom consent screen, federated provider picker, incremental authorization, or error page
• Adding a server-validated multi-step field to an authorization page (e.g. "add another item") via auth.extras

Recommended

• Understanding which half is the server (auth.ui / auth.extras in @frontmcp/sdk) and which is the client (@frontmcp/ui/auth)
• Looking up the AuthFlowState fields a slot component receives, or the /oauth/ui/extra route
• Confirming that the framework (not your component) owns CSRF + CSP

Skip When

• You only need to add/rename fields on the built-in login page or run a custom verifier — use the declarative login / authenticate config in frontmcp-config → configure-auth instead (no React, no build step)
• You are customizing a tool widget (not an auth page) — use create-tool → ui-widgets
• You don't need a custom page at all — configuring no auth.ui keeps the built-in pages

Decision: Use this skill when you want to render your OWN component for an auth slot. Use configure-auth's declarative login config when tweaking the built-in page's fields is enough.

Prerequisites