Auth Components

Production Integration

For production browser linking, use Configure.link() or Configure.personalizationButton() from https://configure.dev/js/configure.js. Raw components are available from import "configure/components" for local labs and advanced self-hosted UI.

Personalization Entry

Configure.personalizationButton() is the recommended chat-input entry point when an app wants Configure behind the same + button as images and files. It renders the + menu and Personalization row; pass linkEl so hosted Configure Link appears in a dismissible inline chat panel when the user still needs to link. The inline container should span the assistant message lane and stay out of the composer row.

<script src="https://configure.dev/js/configure.js"></script>
<style>
  #configure-link-host {
    width: min(100%, var(--chat-max, 640px));
    max-width: 100%;
  }
</style>
<div id="entry"></div>
<div id="configure-link-host"></div>

<script>
  Configure.personalizationButton({
    el: "#entry",
    linkEl: "#configure-link-host",
    publishableKey: "pk_...",
    agent: "your-agent",
    displayName: "Your Agent",
    font: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
    onImage: () => openImagePicker(),
    onFile: () => openFilePicker(),
  });
</script>

Raw self-hosted UI can import <configure-personalization-button> from configure/components. When the hosted script is present, the raw component calls Configure.link() from its Personalization row; otherwise it emits configure:personalization-open so your app can launch Link itself.

import "configure/components";

<configure-personalization-button
  api-key="pk_..."
  agent="your-agent">
</configure-personalization-button>

Attribute	Type	Default	Description
api-key	string	-	Configure publishable key.
agent	string	-	Agent handle receiving approved access.
font	string	app font	Font family override.
hide-images	boolean	false	Hide the Images row owned by your app. (Hosted JS uses showImages / data-hide-images.)
hide-files	boolean	false	Hide the Files row owned by your app.

Event	Detail	Description
configure:linked	{ token, userId, agent }	Hosted Link completed; dispatched on document (and the internal link host), not by the raw component: listen on document or via the hosted onEvent. Send token to your backend.
configure:personalization-open	{ agent, agentName }	Emitted on every press, before any hosted launch. Only launch Link yourself from this event when the hosted script is absent, or you will double-launch.
configure:personalization-toggle	{ enabled, agent }	Already-linked personalization changed locally.
configure:image-select	{}	Your app should open its image picker.
configure:file-select	{}	Your app should open its file picker.

Hosted Link

Use a simple Link trigger when you do not need the chat + menu.

<script src="https://configure.dev/js/configure.js"></script>
<button
  data-configure-link
  data-publishable-key="pk_..."
  data-agent="your-agent">
  Personalize
</button>

Listen for configure:linked and send the token to your backend. The model receives Configure tool results or formatted approved profile context, not the raw Link token.

Internal Primitives

<configure-phone-input>, <configure-otp-input>, and <configure-profile-editor> are raw UI primitives used by Configure-owned hosted UI and local labs. Production apps should use hosted Link unless they intentionally own the full self-hosted flow.

<configure-phone-input api-key="pk_..."></configure-phone-input>
<configure-otp-input api-key="pk_..." phone="+1 (555) 555-1234"></configure-otp-input>
<configure-profile-editor
  api-key="pk_..."
  auth-token="..."
  user-id="..."
  agent="your-agent">
</configure-profile-editor>

New integrations should listen for configure:linked from hosted Link rather than consuming internal OTP events directly.

Hosted Auth Flow (canonical orchestrator)

<configure-hosted-auth-flow> is the Configure-owned sign-in and connection flow. First-party surfaces mount it instead of recomposing phone, OTP, Gmail, and connection steps by hand: the hosted connect pages are built on it.

<configure-hosted-auth-flow
  api-key="pk_..."
  agent="your-agent"
  agent-name="Your Agent"
  intent="signin"
  auth-pattern="sso">
</configure-hosted-auth-flow>

Attribute	Type	Default	Description
api-key	string	-	Configure publishable key.
agent / agent-name / agent-logo	string	-	Agent identity shown through the flow.
intent	link | signin | reconnect	link	Copy and step routing.
auth-pattern	inline | sso	inline	sso renders the single-page sign-in treatment.
skip-connections	boolean	false	Complete sign-in immediately after verification (emits configure:linked) instead of routing through the Gmail/connections steps. Set when the page renders its own targeted connect UI afterward.
require-email	boolean	false	After phone verification, require an email (+ name) written to the profile identity, so relying parties always receive an owner email. A typed email arrives with email_verified: false; only connector-verified (Google-connected) emails are true.
capability	string	-	Scope-upgrade ask (for example gmail:send) forwarded to the Gmail connect row.

Event	Detail	Description
configure:linked	{ token, userId, tokenUse: "agent", agent, surface, completion? }	Sign-in (or connector completion) finished; token is the agent-scoped token.
configure:error	{ code, message, retryable }	The flow could not continue.