A React-based demonstration application for the lbuchs/WebAuthn PHP library, showcasing FIDO2/WebAuthn authentication capabilities.
This project provides a simple React frontend for testing and demonstrating WebAuthn (passkeys) functionality, including:
- Passwordless Registration: Create new WebAuthn credentials (passkey)
- Authentication: Login using registered credentials
The purpose of this app is to be integrated in other Apps that require passkey authentication.
- Node.js (v16 or higher)
- A WebAuthn-compatible browser (Chrome, Firefox, Safari, Edge)
- The lbuchs/WebAuthn PHP server
- HTTPS connection (required for WebAuthn to function)
This app expects a WebAuthn server running at:
https://localhost/webauthn/webauthn/server.php
When integrated into another app, the server can run anywhere as it supports CORS.
- Fill in the user details (token, email, display name)
- Configure the Relying Party ID if needed
- Click "🔔 new registration" to create a new WebAuthn credential
- Follow your browser's authentication prompts
- Ensure you have registered credentials
- Click "⚫ login" to authenticate
- Use your registered authenticator to complete login
- Store Credentials: credentials are stored in a mysql db.
- Challenge Store: challenges are stored on a per user basis as a temp file. This is to circunvent restrictions on CORS sessions
- Clear Credentials: Use "⬜ clear registrations for user" to remove all credentials for the current user
- Refresh Data: Click the "↻ reload" button to update the server preview
WebAuthn requires:
- HTTPS connection (or localhost for development)
- Modern browser with WebAuthn support
- Compatible authenticator (hardware token, platform authenticator, etc.)
- WebAuthn requires HTTPS in production environments
- User handles should not contain personally identifying information
Copyright © 2023 Lukas Buchs - License Terms