Feature: Phone SMS Authentication Support

Overview

Add phone number authentication via SMS as an additional authentication method in the Settings page.

Parent Issue

Part of #37 - Add Settings Page with Authentication and User Management

Current Status

• Settings UI shows "Continue with Phone" but functionality is not implemented
• signInWithPhone function exists in useAuth.ts but is not implemented

Requirements

Phone Authentication Flow

• Phone number input with international formatting
• SMS verification code sending via Supabase
• Code verification and account creation/sign-in
• Phone number validation and formatting
• Resend code functionality with rate limiting

Settings Integration

• Add phone authentication option to Settings page
• Display linked phone number for authenticated users
• Option to change/update phone number
• Phone number verification status indicator

Technical Implementation

• Complete signInWithPhone function in useAuth.ts
• Integrate with Supabase phone authentication
• Add phone number validation utilities
• Implement SMS verification flow
• Update authentication modal to support phone flow

UI Components

• Phone number input with country code picker
• SMS verification code input component
• Phone number display in Settings
• Loading states and error handling
• Proper form validation and feedback

Acceptance Criteria

• Users can authenticate using phone number + SMS
• International phone number support with proper formatting
• SMS codes are sent and verified correctly
• Phone authentication integrates with existing auth flow
• Phone number is saved and displayed in Settings
• Proper error handling for invalid numbers/codes
• Mobile-responsive implementation
• Rate limiting for SMS requests

Technical Notes

• Use Supabase's phone authentication features
• Implement proper phone number validation (libphonenumber)
• Consider SMS costs and rate limiting
• Ensure phone numbers are stored securely
• Handle edge cases (invalid numbers, failed SMS delivery)

Priority

Medium - Additional authentication method, enhances accessibility

Related Issues

• Add Settings Page with Authentication and User Management #37 - Parent issue for Settings page
• Add Two-Factor Authentication (2FA) Support #39 - Two-Factor Authentication (different from phone auth)

Dependencies

• Supabase phone authentication must be enabled in project settings
• SMS provider configuration in Supabase

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com