# 🔐 FIDO2 UI SDK - Modal Demo

Demonstrate how to use FIDO2 UI SDK to manage devices in a popup window

## 👤 Step1: Login

Click the button below to open the login modal:

## 📌 Step2: Device Management

Step1: Login first, then manage your FIDO2 devices

Please login first to access device management

## 📊 Event Log

## 💻 Code Examples

JS Import Examples:

`<script src="files/popper.js"></script>
<script src="files/bootstrap.js"></script>
<script src="files/dfido2-lib.js"></script>
<script src="files/fido2-ui-sdk.js"></script>
<script src="files/amipro_utils.js"></script>`

Login Default:

`// Login Default
Fido2UIManager.renderLogin({
container: '#login-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: CURRENT_LANG
});`

Login Custom:

`// Login with Custom Theme
Fido2UIManager.renderLogin({
container: '#login-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: 'ja',
theme: {
logo: 'files/favicon.ico',
primaryColor: '#ce59d9',
backgroundColor: '#faf5ff',
textColor: '#6b21a8',
borderRadius: '12px'
},
features: {
autoAuth: false,
enablePasswordLogin: true,
autoShowPassword: true,
maxPasswordAttempts: 3
},
callbacks: {
onFido2Success: function(username, session) {
// Handle login success
},
onFido2Error: function(error) {
// Handle error
}
}
});`

Device Manager Default:

`// Device Manager Default
Fido2UIManager.renderDeviceManager({
userId: currentUserId,
container: '#device-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: CURRENT_LANG
});`

Device Manager Custom:

`// Device Manager with Custom Style
Fido2UIManager.renderDeviceManager({
userId: currentUserId,
container: '#device-container',
mode: 'modal',
serverUrl: SERVER_URL,
language: 'ja',
theme: {
logo: 'files/favicon.ico',
primaryColor: '#ce59d9',
backgroundColor: '#faf5ff',
textColor: '#6b21a8',
borderRadius: '12px'
},
features: {
showAddButton: true,
showDeleteButton: true,
showUserInfo: true,
showSessionStatus: true
},
callbacks: {
onInit: function(manager) {
// Manager initialized
},
onDeviceAdded: function(device) {
// Device added
},
onDeviceDeleted: function(deviceId) {
// Device deleted
},
onClose: function() {
// Manager closed
}
}
});`

## ✨ Features

- Popup mode, stay on current page
- Auto FIDO2/Passkey authentication
- Password login fallback option
- Add/delete FIDO2 devices support
- Real-time device list display
- Session status monitoring
- Theme color and style customization
- Multi-language support (English/Japanese/Chinese)
- Event callback system

https://amipro.me/fido2_top.html