Auth Components
Phone Input
Phone number entry with country selector, format masking, and validation.
html
<configure-phone-input api-key="pk_live_xxxxx"></configure-phone-input>tsx
<PhoneInput onPhoneSubmit={(phone, success) => console.log(phone)} />| Attribute / Prop | Type | Default | Description |
|---|---|---|---|
api-key / apiKey | string | — | Configure API key |
loading | boolean | false | Show loading spinner |
error | string | '' | Error message to display |
disabled | boolean | false | Disable input after submission |
| Event / Callback | Detail | Description |
|---|---|---|
configure:phone-submit / onPhoneSubmit | { phone, success, error? } | Fired when user submits |
OTP Input
6-digit verification code entry with auto-submit and resend countdown.
html
<configure-otp-input api-key="pk_live_xxxxx" phone="+1 (555) 555-1234"></configure-otp-input>tsx
<OtpInput phone="+1 (555) 555-1234" onAuthenticated={(token, userId) => {}} />| Attribute / Prop | Type | Default | Description |
|---|---|---|---|
api-key / apiKey | string | — | Configure API key |
phone | string | '' | Phone number to display |
external-id / externalId | string | '' | External user ID to reconcile on verification (see Server-Side Users) |
loading | boolean | false | Show verifying state |
error | string | '' | Error message |
| Event / Callback | Detail | Description |
|---|---|---|
configure:otp-verify / onOtpVerify | { code, token, userId } | Auto-fires when 6 digits entered and verified |
configure:authenticated / onAuthenticated | { token, userId } | Auth completed — bubbles to all components |
configure:otp-resend / onOtpResend | {} | User clicked resend |
Profile Editor
Data access review shown after authentication. Displays what the current agent can see with per-category toggles. Automatically shown as the final step in <configure-auth> and <configure-auth-modal> — use standalone only for custom auth flows.
html
<configure-profile-editor
api-key="pk_live_xxxxx"
auth-token="eyJ..."
user-id="8ab21902-..."
agent="Atlas"
></configure-profile-editor>tsx
<ProfileEditor agent="Atlas" onProfileApproved={() => {}} />| Attribute / Prop | Type | Default | Description |
|---|---|---|---|
api-key / apiKey | string | — | Configure publishable key |
auth-token / authToken | string | — | User JWT from OTP verification |
user-id / userId | string | — | User ID from OTP verification |
agent | string | — | Agent display name shown in header |
| Event / Callback | Detail | Description |
|---|---|---|
configure:profile-approved / onProfileApproved | { userId, agent } | User approved agent access |
Categories shown:
- Your info — identity, summary, preferences
- Gmail / Calendar / Drive / Notion — only shown if connected
- Other agents' memories — cross-agent memory access
Each toggle controls the agent's permission to read that data category. Changes save automatically.