FeaturesAuthentication
PreviousNext

User Settings

Display the authentication user settings UI.

At this stage, you have a fully working authentication system. But we can enhance the user experience by offering users to manage the following settings:

  • Authentication provider
  • Session management
  • Multi-factor authentication
  • User deletion

Authentication Provider

The AuthProviderZone component displays the current OAuth providers connected to the user account or shows a password update form if email/password authentication is used.

'use client'; import { AuthProviderZone } from '@kit/auth/ui/auth-provider-zone'; import { authConfig } from '~/config/auth.config'; export function AuthenticationSettings() { return ( <div className="space-y-6"> <div> <h2 className="text-2xl font-bold">Authentication</h2> <p className="text-muted-foreground"> Manage your password or login provider </p> </div> <AuthProviderZone authConfig={authConfig} /> </div> ); }

Features:

  • Shows connected OAuth providers (Google, GitHub, etc.) with last sign-in dates
  • Displays password update form for email/password users
  • Responsive design that works on all screen sizes
  • Proper loading states and error handling

Session Management

The SessionZoneComponent allows users to view and manage their active sessions across all devices.

'use client'; import { SessionZoneComponent } from '@kit/auth/ui/session-zone-component'; import { dashboardRoutes } from '~/config/routes'; export function SessionSettings() { return ( <div className="space-y-6"> <div> <h2 className="text-2xl font-bold">Session Management</h2> <p className="text-muted-foreground"> View and manage your active sessions </p> </div> <SessionZoneComponent redirectTo={dashboardRoutes.paths.auth.signIn} /> </div> ); }

Features:

  • Lists all active sessions with device information
  • Shows IP addresses with geolocation data
  • Identifies the current session
  • Allows revoking individual sessions or all other sessions
  • Mobile-responsive design with touch-friendly controls
  • Real-time location fetching with caching

Setup

You have to install the api/user-sessions routes to your application to use the SessionZoneComponent component.

Copy paste the following code in your app/api/user-sessions/[[...path]]/route.ts file:

app/api/user-sessions/[[...path]]/route.ts
import { userSessionHandler } from '@kit/auth/user/sessions/routes';
 
export const GET = userSessionHandler;
export const POST = userSessionHandler;
export const DELETE = userSessionHandler;
 

Multi-Factor Authentication

The MultiFactorAuthList component enables users to set up and manage multi-factor authentication (MFA) for their account.

'use client'; import { MultiFactorAuthList } from '@kit/auth/ui/multi-factor-auth-list'; export function MFASettings() { return ( <div className="space-y-6"> <div> <h2 className="text-2xl font-bold">Multi-Factor Authentication</h2> <p className="text-muted-foreground"> Add an extra layer of security to your account </p> </div> <MultiFactorAuthList /> </div> ); }

Features:

  • Lists all configured MFA factors
  • Allows setting up new MFA methods (TOTP, SMS, etc.)
  • Shows factor status and creation dates
  • Enables unenrolling from MFA factors
  • Comprehensive setup dialogs for different factor types

User Deletion

The DangerZoneComponent provides a clear interface for account deletion with proper confirmation dialogs.

'use client'; import { DangerZoneComponent } from '@kit/auth/ui/danger-zone-component'; export function AccountDeletionSettings() { return ( <div className="space-y-6"> <div> <h2 className="text-2xl font-bold">Danger Zone</h2> <p className="text-muted-foreground"> Irreversible account actions </p> </div> <DangerZoneComponent /> </div> ); }

Features:

  • Clear warning about irreversible actions
  • Confirmation dialogs to prevent accidental deletion
  • Proper error handling and loading states
  • Destructive styling to indicate danger

Conclusion

Congratulations! You've successfully integrated the user settings UI into your application.

Your users are now able to :

  • Create a new password
  • View and manage their active sessions
  • Add an extra layer of security to their account
  • Delete their account

In the next page, you will learn how to protect you application against bots and spam using captcha.

How is this guide?

Last updated on 10/17/2025