Authentication

With FIDO2 passwordless authentication users do not only register a username but also the used authenticator (i.e.: TouchID). After registering, a user can login to the website by using the registered authenticator, no password required.

Please note that device and authenticator are often used interchangeably in FIDO2!

This screen supports both features:

1. Registering a username with an authenticator (device)
2. Login with a username using a registered authenticator (device)

The Sign-In feature will figure out if the user is already known and will prompt for registration if needed!

Sign-In:

Enable a roaming key (i.e.: YubiKey) that takes advantage of a PIN:

---

NOTE:
If Sign-In and Register fail, please be sure you are using a registered device! If this is a new device, follow the instructions found in the top menu Additional Devices.

Manage Authenticators

In FIDO2 users may use more than one authenticator (device) to access an account. In those cases it is useful to provide an interface that enables users to get an overview of authenticators, name them, revoke them.

This page is simple but fully functional.

Note: Credential management is available native FIDO2 logins!

---

Choose one of the tasks from the list below:

List all credentials:

List Credentials

Update a credentials name:

Update

Revoke a credential:

Revoke (Disable)

Create Transaction Confirmation

LoginID provides a feature called Transaction Confirmation which is the process of signing a message using the users FIDO2 key.

This client takes a given payload and sends it to its backend which requests a transactionId from LoginID. Once that is received, it is passed back to this client. The client then prompts the user to confirm this transaction using their biometric as a digital signature. This creates a digital receipt for the transaction.

Important:
The relationship between Payload, TransactionId and Transaction Confirmation has to be managed by the client!

This also means that the client is responsible for maintaining the payload as long as verifications are supported!

---

Payload to be signed (replace the example content if desired) { "currency": "USD", "amount": "10.00", "fee": "0.01", "to": "recipient" }
Initiate Transaction

---

Confirm the transaction once the TransactionID has been received!

TransactionID:

Confirm Transaction

---

Transaction Verifications

There are two types of verifications a client can implement locally:

• Verifying the payload based hash: tx_hash == base64url(SHA256(payload + nonce + server_nonce))
• Verifying the jwt-signature

NOTE:
The Transaction Confirmation returns a token (JWT) and a success indicator. However, the below API response attaches the base64url decoded jwt_header and jwt_payload for convenience!

Request Adding Authenticator

Adding an authenticator (device) is the task of enabling an additional device to use with an user account.

It requires three steps:

1. generate an authorization code on the new device
2. grant the authorization code on the first device
3. complete the process on the new device

To use this feature on a MacBook, two different browsers can be used. Follow these steps:

1. Open this dialog in a different browser (and leave it open), provide the username, click Generate Code and copy the generated authorization code
2. Open Additional Devices - Grant Request in this browser, assuming this one has been used to create an account earlier
3. Come back to this dialog and click Add Authenticator

---

1. Your username as used on other devices:

Generate Code

2. Continue after granting the authorization code:

Add Authenticator

Request Temporary Access

Adding one-time access to an account from a temporary device or one that does not support FIDO2.

It requires two steps:

1. generate an authorization code on the new device
2. grant the authorization code on the first device

To use this feature on a MacBook, two different browsers can be used. Follow these steps:

1. Open this dialog in a different browser (and leave it open), provide the username, click Generate Code and copy the generated authorization code
2. Open Additional Devices - Grant Request in this browser, assuming this one has been used to create an account earlier
3. Come back to this dialog and simply wait to be logged in!

---

Your username as used on other devices:

Generate Code

The generated authorization code:

Info: The current timeout for authorizing the code is set to 30 seconds!

Grant Request

Adding an authenticator (device) or temporary access is the task of enabling a user to access an account from an additional device. Either permanently or once only.

This screen allows a user to grant an authorization code that was requested at one of these screens:

• Request Adding Authenticator: generates an authorization code to add an authenticator permanently
• Request Temporary Access: generates an authorization code to get once only access to an account

---

Use the dialog below after generating an authorization code in the other browser.

Paste the authorization code:

Authorize Authenticator

Grant Temporary Access

OpenID Connect

LoginID provides FIDO2 based services also via OpenID Connect (OIDC).

This means that any OIDC relying party may leverage the power of strong FIDO2 based authentication through the simplicity of an OIDC authorization code flow.

Initiate the authorization flow:

login_hint
(optional, forwarded to LoginID and used to pre-set the username)

---

The client in this demo uses the following configuration:

1. response_type: code
2. grant_type: authorization_code
3. client_type: public
4. nonce: generated per request
5. scope: openid
6. PKCE with S256: although the client supports PKCE, it is only simulated unless used with https (i.e. hosted version of this tutorial). This is due to the fact that browsers do not generate sha256 values with http!

---

Notes:

• Once the flow is completed, the username appears in the top right corner and the API response becomes visible!
• This flow is not usable for managing data via LoginIDs APIs. For that a native FIDO2 login is required!

Kong Plugin

LoginID provides a Kong plugin that enables developers to require FIDO2 based user authentication on any Kong protected API.

LoginID issues JSON Web Token (JWT) whenever users authenticate. These JWT have several claims which may be used for validation purposes.

This demo shows off how Kong fails any request if the current user has not authenticated beforehand.

---

Direct request:

https://catfact.ninja/fact

A direct request to the API

Protected request:

http://localhost:8090/fact

The same request but requiring a LoginID issued JWT at the Kong gateway

---

NOTES:

• By default the Kong plugin is configured to accept no JWT older than 5 minutes. Re-authenticate if requests fail!
• The call to Kong is currently only supported when running the tutorial locally!

FIDO Vault

The easiest and most secure way to create a blockchain account.

Utilize FIDO device based hardware security to secure your information, transact easier and give you a way to recover your account.

Stay tuned as this becomes available soon!

About

This tutorial is provided as an overview of features and tools that LoginID provides. It consists of a few docker images and used online services. It can be deployed on a local computer since it is available on GitHub.

The different components are built in java, javascript and take advantage of LoginID SDKs.

Tutorial layout

The image below gives an idea how the tutorial is laid out:

• The FrontEnd, BackEnd and Gateway are docker images
• The cloud services are public and are accessed via the demo
• The FrontEnd displays the web UI which is accessed via a browser
• The FrontEnd is configured with a Web App ClientID which it uses when registering/authenticating users
• The BackEnd exposes a simple management API and requires an authenticated user (valid JWT)
• The BackEnd is configured with a Backend / API Credential and is able to generate serviceToken that are required to access LoginID management APIs
• The Kong Gateway is configured with LoginIDs plugin to accept requests only if a valid LoginID issued JWT is included

Get in contact

To learn more about LoginID please visit: https://loginid.io

To view the developer documentation start here: Dev @ LoginID

Find this and more examples on GitHub: LoginID @ GitHub

Disclaimer: The hosted - online version of this tutorial is a shared environment and meant for evaluation purposes only.

Please find our privacy notice here!