FeaturesAuthentication
PreviousNext

User Settings

Integrate auth-related controls into mobile settings pages.

What It Does

Mobile settings can render auth-specific blocks from @kit/auth/native/user inside @kit/settings pages:

  • provider management (AuthProviderZone),
  • active session controls (SessionZoneComponent),
  • destructive account actions (DangerZoneComponent).

When To Use

  • You want account/security controls inside settings.
  • You want auth management UI driven by shared settings architecture.

Prerequisites

  • settingsUI configured in apps/mobile/config/settings.ui.config.tsx.
  • clientTrpc and authConfig available.

How To Use

Import auth settings components.

apps/mobile/config/settings.ui.config.tsx
import { AuthProviderZone, DangerZoneComponent, SessionZoneComponent } from '@kit/auth/native/user';

Render auth zones in settings pages.

apps/mobile/config/settings.ui.config.tsx
{ slug: 'security', title: 'Security', icon: 'Lock', settings: [ { type: 'wrapper', settings: [ { type: 'ui', render: <AuthProviderZone authConfig={authConfig} />, }, ], }, { type: 'wrapper', settings: [ { type: 'ui', render: <SessionZoneComponent clientTrpc={clientTrpc} />, }, ], }, ], }, { slug: 'index', settings: [ { type: 'wrapper', settings: [ { type: 'ui', render: <DangerZoneComponent className="max-w-4xl" clientTrpc={clientTrpc} />, }, ], }, ], }

Expose pages through mobile settings routes.

Use:

  • apps/mobile/app/(app)/screens/settings-menu.tsx (SettingsNavigation)
  • apps/mobile/app/(app)/screens/settings/[...settings]/index.tsx (SettingsPages)

MCP Context

capability: auth_mobile_settings_ui
entrypoints:
  - apps/mobile/config/settings.ui.config.tsx
  - apps/mobile/app/(app)/screens/settings-menu.tsx
  - apps/mobile/app/(app)/screens/settings/[...settings]/index.tsx
inputs:
  - auth_config
  - client_trpc
outputs:
  - auth_management_sections_in_settings
constraints:
  - components must run under authenticated context
  - settings route params must match configured settings slugs
side_effects:
  - can terminate sessions or trigger account-destructive actions

Agent Recipe

  1. Add auth UI zones to settingsUI page definitions.
  2. Ensure clientTrpc and authConfig props are passed.
  3. Verify settings menu routes to security and profile pages.

Troubleshooting

  • If auth blocks do not render, verify they are wrapped in type: 'ui' settings nodes.
  • If session actions fail, check TRPC client wiring in settings route.
  • If navigation entry is missing, verify SettingsNavigation receives latest filtered UI config.

How is this guide?

Last updated on 3/23/2026