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 sessions tracking is handled in the database via the kit
schema set in the sql files.
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:
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.
Retrieve the current user in your application.
Protect your app from spam with Cloudflare Turnstile CAPTCHA
How is this guide?
Last updated on 10/17/2025