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

better-auth-components skill

safe

This skill helps you implement production-ready authentication UI and pages with shadcn patterns for sign in, sign up, and reset flows.

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

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

Files (1)

SKILL.md

545 B

---
name: better-auth-components
description: Add UI components and pages for authentication flows including sign in, sign up, forgot password, reset password, and email verification.
---

# Better Auth Components

To set up Better Auth Components, refer to the fullstackrecipes MCP server resource:

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

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

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

Overview

This skill provides a collection of production-ready UI components and pages for common authentication flows: sign in, sign up, forgot password, reset password, and email verification. It packages Shadcn-style components and step-by-step recipes so you can drop in polished auth screens for full-stack TypeScript AI web apps. The focus is on usability, accessibility, and easy integration with typical backend auth flows.

How this skill works

The skill supplies prebuilt components and page templates that wire to standard auth endpoints and token flows. It includes form handling, validation patterns, and UX states (loading, error, success) so developers can integrate with their existing backend or follow the included recipe guidance. Installation can be bootstrapped from the recipe server or fetched directly if the registry service is unavailable.

When to use it

You need ready-made, consistent auth UI across a new or existing TypeScript web app.
You want accessible, production-ready sign in / sign up flows without designing forms from scratch.
You need a quick blueprint for forgot password, reset password, and email verification flows.
You want components that follow Shadcn design patterns and integrate with common backend auth.
You prefer step-by-step recipes to guide full-stack integration and deployment.

Best practices

Keep UI logic separate from backend API calls; pass service adapters or hooks for auth requests.
Validate inputs on both client and server; show clear, actionable form error messages.
Implement rate limiting and CAPTCHA where appropriate for public sign-up endpoints.
Use accessible markup and keyboard focus management for form fields and error states.
Test flows end-to-end (signup → verify → signin → forgot/reset) in staging before release.

Example use cases

Add a sign-up and email verification flow to a new AI web app with minimal styling work.
Replace inconsistent auth components across multiple pages with a single shared component library.
Follow the recipe to connect frontend forms to a custom authentication API or managed provider.
Rapidly prototype role-based onboarding by extending the provided sign-up form fields.
Provide consistent recovery UX by integrating the forgot-password and reset-password pages.

FAQ

How do I fetch the recipe if the MCP registry is not configured?

You can fetch the recipe directly from the provider's API endpoint to bootstrap the components and guides.

Are these components opinionated about backend auth implementation?

No. Components focus on UI and UX patterns and are designed to accept adapters or hooks to connect with your preferred backend or provider.