1. Sample application
Sample applications demonstrating WebAuthn4J Spring Security major functionalities are available in webauthn4j-spring-security-samples. Sample SPA is a demo of Single Page Application. Sample MPA is a demo of traditional Multi Page Application. Sample SPA is explained below.
1.1. Sample application execution
Sample application can be executed by following command.
./gradlew spa:bootRun
1.2. User and authenticator registration

The signup page can be accessed with http://localhost:8080/angular/signup
.
Please fill user information and register user and authentication device.

Click the "Add" button in the "Authenticators" table, it will show a pop-up asking you to give a gesture to the authenticator to acknowledge the registration. In case of an accident or device loss, Multiple authenticators can be registered for backup. If you would like to allow single-factor authentication, Please check "Allow password authentication".
1.3. User authentication
Login page can be accessed with http://localhost:8080/angular/login
.
Sample application supports three authentication flow.
-
Multi-factor authentication with password and authenticator
-
Password-less multi-factor authentication with a user-verifying authenticator
-
Single-factor authentication only with a password
Each of three authentication flows are explained below.
1.3.1. Multi-factor authentication with password and authenticator
If you register a non user-verifying authenticator like FIDO-U2F token, you can login with multi-factor authentication with password and authenticator.

Please fill the username (email address) and password on the login view and click the login button.

If the password authentication succeeds, an authenticator is asked in the next authenticator login view. When the pop-up opens, please give a gesture to the authenticator to finish the authentication. You will be automatically redirected to the dashboard.
1.3.2. Password-less multi-factor authentication with a user-verifying authenticator
If you register a user-verifying authenticator like that supports FIDO-CTAP2, you can login without password.

Click the "Password-less login" button on the login view and the pop-up asking an authenticator will be opened. Please give a gesture to the authenticator to finish the authentication. You will be automatically redirected to the dashboard.
1.3.3. Password authentication
If you checked "Allow password authentication" at user registration, standard password authentication is available.

Please fill the username (email address) and password on the login view and click the login button. If the authentication succeeds, you will be automatically redirected to the dashboard.