A comprehensive demonstration of modern authentication technologies including WebAuthn/passkeys, step-up authentication for banking, and conversion analytics tracking.
This project implements all three parts of the authentication assignment:
- ✅ Complete WebAuthn registration and authentication flow
- ✅ React frontend with passkey support
- ✅ Node.js backend with @simplewebauthn/server
- ✅ Phishing-resistant authentication
- ✅ Cross-device credential support
- ✅ PSD3 compliant transaction monitoring
- ✅ Automatic step-up for transactions > €150
- ✅ OTP-based verification system
- ✅ Risk-based authentication flow
- ✅ Password vs Passkey conversion tracking
- ✅ Real-time analytics dashboard
- ✅ Conversion rate calculations
- ✅ Visual charts and metrics
- WebAuthn/Passkeys: Modern, phishing-resistant authentication
- Password Fallback: Traditional password authentication (demo only)
- Biometric Support: Works with fingerprint, face ID, etc.
- Cross-Platform: Works on desktop and mobile devices
- Step-up Authentication: Automatic for high-value transactions
- PSD3 Compliance: EU banking regulation compliance
- Transaction Monitoring: Real-time transaction analysis
- OTP Verification: Secure one-time password system
- Conversion Tracking: Password vs Passkey comparison
- Real-time Metrics: Live dashboard updates
- Visual Charts: Bar charts and pie charts
- Performance Insights: Detailed conversion analysis
- Node.js with Express.js
- @simplewebauthn/server for WebAuthn implementation
- JWT for session management
- Rate limiting and security headers
- In-memory storage (demo purposes)
- React 18 with modern hooks
- @simplewebauthn/browser for WebAuthn client
- Recharts for data visualization
- Lucide React for icons
- React Hot Toast for notifications
- Modern CSS with dark theme
- Node.js 16+
- npm or yarn
- Modern browser with WebAuthn support
-
Clone the repository
git clone <repository-url> cd modern-auth
-
Install dependencies
# Install root dependencies npm install # Install server dependencies cd server && npm install # Install client dependencies cd ../client && npm install # Return to root cd ..
-
Start the development servers
# Start both server and client npm run dev # Or start them separately: npm run server # Backend on port 3001 npm run client # Frontend on port 3000
-
Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001
- Register: Click "Create Account" and choose "Passkey"
- Create Passkey: Follow browser prompts to create a passkey
- Login: Use your passkey to authenticate
- Dashboard: View your account and security status
- Navigate to Transactions: Use the navigation menu
- Create Transaction: Enter amount and description
- Test Step-up: Try amounts over €150 to trigger step-up auth
- Verify OTP: Check console for demo OTP codes
- View Analytics: Navigate to the Analytics page
- Monitor Conversions: See password vs passkey metrics
- Track Performance: Real-time conversion rates
- Step-up Metrics: Monitor authentication flows
Create a .env file in the server directory:
NODE_ENV=development
PORT=3001
JWT_SECRET=your-secret-key-hereThe system is configured for localhost development. For production:
- Update
rpIDinserver/index.js - Set proper origins and domains
- Use HTTPS (required for WebAuthn)
- Configure proper CORS settings
POST /api/auth/register/options- Generate registration optionsPOST /api/auth/register/verify- Verify registrationPOST /api/auth/login/options- Generate authentication optionsPOST /api/auth/login/verify- Verify authentication
POST /api/transactions- Create transactionPOST /api/transactions/stepup- Verify step-up authentication
GET /api/analytics/conversion- Get conversion metrics
- Helmet.js: Security headers
- Rate Limiting: API protection
- CORS: Cross-origin protection
- JWT: Secure session management
- WebAuthn: Phishing-resistant auth
- Input Validation: Server-side validation
- SIGNUP_STARTED: Tracks when users begin registration
- SIGNUP_COMPLETED: Tracks successful registrations
- Conversion Rate: (Completed / Started) × 100
- Delta Calculation: Passkey rate - Password rate
- Password authentication attempts
- Passkey authentication attempts
- Step-up authentication triggers
- Transaction success rates
- Real-time conversion data
- Dark Theme: Modern, eye-friendly interface
- Responsive Design: Works on all screen sizes
- Loading States: Smooth user experience
- Toast Notifications: User feedback
- Interactive Charts: Data visualization
- Accessibility: Keyboard navigation support
-
Passkey Registration
- Create new account with passkey
- Verify biometric authentication works
- Test cross-device functionality
-
Step-up Authentication
- Create transaction < €150 (should succeed)
- Create transaction > €150 (should trigger step-up)
- Verify OTP authentication
-
Analytics Tracking
- Register multiple users
- Monitor conversion rates
- Verify real-time updates
- In-memory Storage: Data is lost on server restart
- Demo OTP: Check console for OTP codes
- Localhost Only: WebAuthn requires HTTPS in production
- Password Auth: Not fully implemented (demo only)
- Use proper database (PostgreSQL, MongoDB)
- Implement proper OTP delivery (SMS/Email)
- Add comprehensive error handling
- Implement proper logging
- Add monitoring and alerting
- Use proper SSL certificates
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- FIDO Alliance for WebAuthn standards
- SimpleWebAuthn for the excellent library
- React and Node.js communities
- Modern authentication best practices
Note: This is a demonstration project for educational purposes. For production use, implement proper security measures, error handling, and follow industry best practices.