FeaturesAuthentication

User Settings

Expose auth-related account controls inside settings pages.

What It Does

@kit/auth/www/user provides settings-ready UI blocks such as provider linking, active sessions, MFA, and account danger-zone actions.

When To Use

Building profile/security pages in settings UI.

Prerequisites

Settings pages are powered by @kit/settings.
authConfig is available.

Important

This page describes the standard kit integration path; adapt app-specific paths and config names when your project differs.

How To Use

In settings UI config, render auth blocks in type: 'ui' sections.

import {
  AuthProviderZone,
  SessionZoneComponent,
  MultiFactorAuthList,
  DangerZoneComponent,
} from '@kit/auth/www/user';
 
// inside settings page config
authSection.settings.push({
  type: 'ui',
  render: <AuthProviderZone authConfig={authConfig} />,
});

Filter API

Auth settings UI is composed with settings and translation filters so account controls can be injected without editing app page components directly.

Filter	Parameters	Return	Registered By (package file)	Initialized In (app entrypoint)	Environment
`get_settings_ui_config`	`{ clientTrpc: TrpcClientWithQuery<Router<unknown>> }`	`ReturnType<typeof parseUISettingConfig>`	`kit/organization/src/www/filters/use-filters/use-settings-filters.tsx`	`apps/dashboard/hooks/use-filters.ts` (`useOrgFilters`)	`client`
`get_settings_extra_inputs`	`{}`	`SettingsInputsBase`	`kit/organization/src/www/filters/use-filters/use-settings-filters.tsx`	`apps/dashboard/hooks/use-filters.ts` (`useOrgFilters`)	`client`
`cross_env_get_translations`	`{ language: string; namespace: string }`	`Record<string, string> \| null`	`kit/auth/src/www/filters/cross-env-filters.ts`	`apps/dashboard/lib/init-cross-env-filters.ts`	`cross-env`
`cross_env_get_namespaces`	`{}`	`string[]`	`kit/auth/src/www/filters/cross-env-filters.ts`	`apps/dashboard/lib/init-cross-env-filters.ts`	`cross-env`

Init Checklist

Keep useOrgFilters({ orgConfig }) in apps/dashboard/hooks/use-filters.ts for settings UI injection.
Keep auth cross-env translation filters in apps/dashboard/lib/init-cross-env-filters.ts.

MCP Context


capability: auth_settings_ui
entrypoints:
  - @kit/auth/www/user
  - apps/dashboard/config/settings.ui.config.tsx
  - kit/organization/src/www/filters/use-filters/use-settings-filters.tsx
  - kit/auth/src/www/filters/cross-env-filters.ts
  - apps/dashboard/hooks/use-filters.ts
  - apps/dashboard/lib/init-cross-env-filters.ts
inputs:
  - auth_config
  - client_trpc
outputs:
  - interactive_auth_controls_in_settings
constraints:
  - components should be rendered inside authenticated context
side_effects:
  - can terminate sessions, modify auth factors, or trigger destructive actions

Agent Recipe

Add auth UI blocks inside settings page config.
Pass required authConfig and clientTrpc props.
Validate actions from the rendered settings page.

Troubleshooting

Empty auth panels usually indicate missing session/user context.
Session actions failing usually indicate missing TRPC wiring.

Retrieve User

Access authenticated user data on server and client.

Emails

Configure sending providers and email delivery flow.

How is this guide?

Last updated on 3/27/2026