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
settingsUIconfigured inapps/mobile/config/settings.ui.config.tsx.clientTrpcandauthConfigavailable.
How To Use
Import auth settings components.
import { AuthProviderZone, DangerZoneComponent, SessionZoneComponent } from '@kit/auth/native/user';Render auth zones in settings pages.
{ 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 actionsAgent Recipe
- Add auth UI zones to
settingsUIpage definitions. - Ensure
clientTrpcandauthConfigprops are passed. - Verify settings menu routes to
securityand 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
SettingsNavigationreceives latest filtered UI config.
Related
Retrieve User
Fetch and provide authenticated DB user data in native app flows.
Onboarding
Configure and extend the mobile onboarding flow with schema, step config, and filters.
How is this guide?
Last updated on 3/23/2026