WebAuthn Authentication Demo

WebAuthn (Web Authentication) API implementation showcasing biometric and security key authentication using React and TypeScript.

Features

• Passwordless authentication using WebAuthn
• Support for biometric authentication (TouchID, FaceID, Windows Hello)
• Security key support (USB, NFC)
• Responsive, mobile-first design
• Modern UI with Tailwind CSS
• Built with Vite for optimal performance
• Type-safe implementation with TypeScript
• Error handling and user feedback
• User guidance
• Industry use case examples

Prerequisites

• Modern browser with WebAuthn support
• Node.js 18 or higher
• npm or yarn package manager

Getting Started

1. Clone the repository:

   git clone [repository-url]
   cd webauthn-demo

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Project Structure

src/
├── lib/
│   └── webauthn.ts    # WebAuthn implementation
├── App.tsx            # Main application component
├── main.tsx          # Application entry point
└── index.css         # Global styles

Technical Implementation

WebAuthn Flow

1. Registration

   • Generate challenge
   • Create credentials with authenticator
   • Store public key on server (mock implementation)

2. Authentication

   • Generate challenge
   • Verify credentials with authenticator
   • Validate assertion

Security Considerations

• Challenge-based authentication
• Secure credential storage
• HTTPS requirement
• User verification preferences
• Resident key support
• Cross-platform compatibility

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Lint code

Technology Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Lucide React Icons

Browser Support

WebAuthn is supported in all modern browsers:

• Chrome 67+
• Firefox 60+
• Safari 13+
• Edge 18+

Best Practices

• Implements proper error handling
• Provides clear user feedback
• Follows WAI-ARIA accessibility guidelines
• Uses responsive design principles
• Implements proper TypeScript types

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Creator

Ed Bates (TECHBLIP LLC)

Acknowledgments

Some sections of this code were generated with the assistance of AI tools. These contributions were reviewed and integrated by the project creator(s).

License

Apache-2.0 license - see the LICENSE file for details