home / skills / andrelandgraf / fullstackrecipes / better-auth-profile

better-auth-profile skill

safe

This skill helps you implement a complete account settings page with profile editing, password changes, email updates, session management, and deletion.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill better-auth-profile

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

546 B

---
name: better-auth-profile
description: Add a complete account settings page with profile editing, password changes, email updates, session management, and account deletion.
---

# Better Auth Profile & Account

To set up Better Auth Profile & Account, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/better-auth-profile`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/better-auth-profile
```

Overview

This skill adds a complete account settings page for web applications, including profile editing, password changes, email updates, session management, and account deletion. It delivers production-ready UI patterns and step-by-step recipes tailored for full stack TypeScript apps using Shadcn design primitives. The goal is to provide a secure, user-friendly account management experience that integrates easily into existing auth flows.

How this skill works

The skill supplies modular UI components and guided recipes that wire into your authentication backend and session store. Components cover profile forms, secure password flow, email change verification, active session listing with revocation, and a safe account deletion flow. Each pattern includes TypeScript examples and integration notes so you can copy, adapt, and deploy the flows into your app.

When to use it

You need a ready-made account settings page for a production web app.
You want consistent, accessible UI patterns for profile and security management.
You need step-by-step guidance to integrate account flows with an auth backend.
You are building with TypeScript and prefer Shadcn-style component patterns.

Best practices

Validate all sensitive operations server-side and require current password for changes affecting security.
Use email verification or multi-factor steps when changing primary contact details.
Show active sessions with device and location info and provide an immediate revoke action.
Confirm destructive actions (account deletion) with explicit user intent and a grace period.
Keep UI components modular so backend logic can be swapped without changing front-end structure.

Example use cases

Add a user-facing Account > Settings page that supports profile edits and avatar updates.
Implement a secure password change flow that enforces strength rules and invalidates old sessions.
Provide email update workflow that requires verification before replacing the primary email.
Expose current sessions with the ability to sign out other devices remotely.
Offer an irreversible account deletion path with backup export or confirmation steps.

FAQ

Does this skill require a specific auth provider?

No—patterns are provider-agnostic. Recipes show common integrations, but you can adapt server-side hooks to your auth system.

Is this production-ready code?

Yes. The patterns and recipes are designed for production use but should be reviewed to match your security policies.