mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-03 18:01:39 +00:00
159 lines
4.8 KiB
Markdown
159 lines
4.8 KiB
Markdown
# Auth Frontend
|
|
|
|
This is the Next.js authentication frontend for Highway WebAuthn gateway. It provides a modern, responsive interface for passwordless authentication using WebAuthn passkeys.
|
|
|
|
## Features
|
|
|
|
- **Passwordless Authentication**: WebAuthn registration and login with passkeys
|
|
- **Modern UI**: Clean, responsive design with Tailwind CSS
|
|
- **Session Management**: Persistent sessions with automatic validation
|
|
- **Browser Compatibility**: WebAuthn feature detection and fallback messaging
|
|
- **Accessibility**: ARIA labels, keyboard navigation, and screen reader support
|
|
- **TypeScript**: Full type safety with custom hooks and components
|
|
|
|
## Pages
|
|
|
|
### Home (`/`)
|
|
|
|
- Landing page with feature highlights
|
|
- Navigation to registration and login
|
|
- Automatic redirect to dashboard if authenticated
|
|
|
|
### Registration (`/register`)
|
|
|
|
- WebAuthn passkey registration flow
|
|
- Username and display name input
|
|
- Real-time validation and error handling
|
|
|
|
### Login (`/login`)
|
|
|
|
- WebAuthn passkey authentication
|
|
- Username input with passkey verification
|
|
- Remember me functionality
|
|
|
|
### Dashboard (`/dashboard`)
|
|
|
|
- User profile information
|
|
- Account security features
|
|
- Session management controls
|
|
|
|
## Components
|
|
|
|
### Custom Hooks
|
|
|
|
- `useWebAuthn`: WebAuthn registration and authentication logic
|
|
- `useSession`: Session management and user state
|
|
|
|
### UI Components (from `@sonr.io/ui`)
|
|
|
|
- `Button`: Configurable button with loading states
|
|
- `Input`: Form input with validation and help text
|
|
- `ErrorAlert`: Dismissible error notifications
|
|
|
|
## Development
|
|
|
|
To start the development server:
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
This will start the Next.js development server with hot reload at `http://localhost:3000`.
|
|
|
|
## Testing
|
|
|
|
```bash
|
|
# Run tests
|
|
pnpm test
|
|
|
|
# Test WebAuthn in browser
|
|
# Visit http://localhost:3000 and test registration/login flow
|
|
```
|
|
|
|
## Deployment
|
|
|
|
To deploy to Cloudflare Pages:
|
|
|
|
```bash
|
|
pnpm deploy
|
|
```
|
|
|
|
The app is configured for static export and optimized for Cloudflare Pages deployment.
|
|
|
|
## Configuration
|
|
|
|
### Environment Variables
|
|
|
|
```env
|
|
# API endpoint
|
|
NEXT_PUBLIC_API_URL=https://api.yourdomain.com
|
|
|
|
# Development
|
|
NEXT_PUBLIC_API_URL=http://localhost:8080
|
|
```
|
|
|
|
### Next.js Configuration
|
|
|
|
The app uses:
|
|
|
|
- Static export for Cloudflare Pages
|
|
- Unoptimized images for static hosting
|
|
- Trailing slash for proper routing
|
|
|
|
## Development Roadmap
|
|
|
|
### ✅ **Phase 3: WebAuthn Frontend Implementation** (Current)
|
|
|
|
- [x] **Next.js 14 Setup**: App directory with TypeScript configuration
|
|
- [x] **WebAuthn Integration**: Complete registration and authentication flows
|
|
- [x] **Custom Hooks**: useWebAuthn and useSession for state management
|
|
- [x] **UI Components**: Reusable Button, Input, and ErrorAlert components
|
|
- [x] **Authentication Pages**: Registration, login, and dashboard interfaces
|
|
- [x] **Session Management**: Persistent sessions with browser compatibility
|
|
- [x] **Responsive Design**: Mobile-first approach with Tailwind CSS
|
|
- [x] **Accessibility**: ARIA labels, keyboard navigation, and screen reader support
|
|
|
|
### 🚧 **Phase 5: Production Readiness** (Next)
|
|
|
|
- [ ] **Performance Optimization**: Code splitting and bundle optimization
|
|
- [ ] **Testing Suite**: Unit tests for components and hooks
|
|
- [ ] **E2E Testing**: Cypress or Playwright for full user flow testing
|
|
- [ ] **Error Boundaries**: React error boundaries for graceful error handling
|
|
- [ ] **Analytics**: User behavior tracking and conversion metrics
|
|
- [ ] **Internationalization**: Multi-language support
|
|
|
|
### 🔮 **Future Enhancements**
|
|
|
|
- [ ] **Advanced UI**: Dark mode, animations, and enhanced UX
|
|
- [ ] **Progressive Web App**: PWA features for mobile experience
|
|
- [ ] **Multi-factor Authentication**: Additional security options
|
|
- [ ] **Account Management**: Profile editing and security settings
|
|
- [ ] **Admin Dashboard**: User management and system monitoring
|
|
- [ ] **Mobile App**: React Native or native mobile applications
|
|
|
|
## Architecture
|
|
|
|
The frontend follows modern React patterns:
|
|
|
|
- **App Router**: Next.js 13+ app directory structure
|
|
- **Custom Hooks**: Reusable logic for WebAuthn and session management
|
|
- **Component Library**: Shared UI components with TypeScript
|
|
- **State Management**: React hooks for local state, no external state library
|
|
- **Styling**: Tailwind CSS with custom component styling
|
|
|
|
## Security
|
|
|
|
- **WebAuthn**: Cryptographic authentication without passwords
|
|
- **Session Validation**: Automatic session validation and renewal
|
|
- **Input Validation**: Client-side validation with server-side verification
|
|
- **HTTPS Only**: Secure connection required for WebAuthn
|
|
- **Content Security Policy**: CSP headers for XSS protection
|
|
|
|
## Browser Support
|
|
|
|
- **Chrome**: Full WebAuthn support
|
|
- **Firefox**: Full WebAuthn support
|
|
- **Safari**: Full WebAuthn support (iOS 14+)
|
|
- **Edge**: Full WebAuthn support
|
|
- **Mobile**: Android and iOS with platform authenticators
|