Implement modern passkey login UI and organize authentication tools

[Copilot]

This PR transforms the existing developer-focused login page into a production-ready, user-friendly interface while properly organizing authentication tools and deprecated features.

Problem

The current login page had a basic, developer-oriented UI that wasn't suitable for end users. It displayed raw debugging information prominently, included deprecated Apple Sign-in functionality in the main flow, and showed error messages when users without existing accounts tried to sign in.

Solution

Created a modern, intuitive login interface with proper separation of concerns:

Enhanced User Experience

• Clean, centered layout with proper typography using the project's design system
• Seamless authentication flow - automatically switches to signup mode when passkey sign-in fails instead of showing errors
• Toggle between sign-in and sign-up modes with smooth transitions and contextual messaging
• Loading states and validation - buttons disable during authentication, name input required for signup
• Proper error handling with styled error messages using project theme colors

Visual Design

• Welcome header with clear app branding ("Welcome to Pinyinly")
• Descriptive subtitle explaining the secure authentication approach
• Emoji-enhanced buttons (🔐) for better visual hierarchy
• Consistent spacing and typography following existing design patterns
• Responsive layout with safe area handling

Development Tools Organization

• Moved all diagnostic/debug information from login page to dedicated /dev/auth page
• Relocated deprecated Apple Sign-in to development tools section for testing purposes
• Created organized dev tools navigation at /dev with cards for different tool categories
• Preserved all existing functionality - session management, direct session ID login, debug actions
• Clean separation of concerns - user-facing vs developer-facing interfaces

Technical Implementation

• Uses existing UI components (RectButton, TextInputSingle) for consistency
• Follows project's Tailwind CSS conventions and design tokens
• Maintains backward compatibility with all existing auth flows
• Preserves Apple Sign-in integration in development environment
• Includes conditional UI support for better passkey UX (webauthn autocomplete)

Code Quality

• All TypeScript errors resolved with proper type safety
• ESLint rules followed with nullish coalescing and proper error handling
• All existing tests continue to pass
• No breaking changes to existing auth infrastructure

The implementation successfully addresses the issue by providing a production-ready login interface while organizing development tools in their proper location within the existing dev tools structure.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[bradleyayers]

@copilot there's an existing dev tools page so it probably makes sense to move the diagnostic/dev information to that page, rather than keeping it on the login page

[bradleyayers]

@copilot the sign in with apple is deprecated, so it can move to the developer page as well. also id like in the "sign in" flow for it to automatically create an account if you don't have one, rather than giving an error.

[Copilot]

@copilot there's an existing dev tools page so it probably makes sense to move the diagnostic/dev information to that page, rather than keeping it on the login page

Done! I've moved all the diagnostic/dev information from the login page to a dedicated /dev/auth page. The login page now has a clean, user-focused interface while all development tools are properly organized in the dev tools section.

Changes made:

• Created /dev/auth page with all session management and authentication debugging tools
• Created /dev/index page for better dev tools navigation
• Removed the DeveloperDebugSection from login page entirely
• Added a small "Development Tools" link in the login page footer (only visible in dev mode)

The development tools are now properly separated from the user-facing login interface. Commit: 9eef817

[Copilot]

@copilot the sign in with apple is deprecated, so it can move to the developer page as well. also id like in the "sign in" flow for it to automatically create an account if you don't have one, rather ...

Done! I've implemented both requested changes:

1. Moved Apple Sign-in to developer page - Removed it from the main login UI and added it to /dev/auth in a "Deprecated Features" section for development/testing purposes.

2. Auto-create account flow - When passkey sign-in fails (user doesn't have an account), it now automatically switches to signup mode instead of showing an error message. Users get a seamless experience switching from sign-in to account creation.

The main login page now has a clean, production-ready interface focused on passkey authentication with smooth transitions between sign-in and signup modes. All development and deprecated features are properly organized in the dev tools section.

Commit: 43f0dce