---
title: "Implement passkeys on the Web Tutorial App"
slug: "dpo-authenticate-implement-passkeys-on-the-web-tutorial-app"
tags: ["S3 v9.5"]
updated: 2026-10-27T16:01:38Z
published: 2026-10-27T16:01:38Z
canonical: "docs.onespan.com/dpo-authenticate-implement-passkeys-on-the-web-tutorial-app"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onespan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Implement passkeys on the Web Tutorial App

| Requirements |
| --- |
| JDK | Supported versions: 17, 21, 25 |
| IDE | Eclipse IDE for Enterprise Java and Web Developers |
| Web server | - Apache Tomcat v11.0 - Apache Tomcat v10.1 |
| WebAuthn-compliant browsers | - Firefox - Chrome - Safari |

## Access and record the JWT issuer and signing key

To maintain security for all users, a unique **JWT issuer** and **signing key** is generated for each tenant. Your app will need this information to communicate with the DigipassONE Authenticate Cloud.

1. Login to the [DigipassONE Authenticate Cloud portal](https://staging.digipassone.com/).
2. Navigate to *Configuration* > *API Server* > *External Authentication Plugins* and click the **modify** icon in the **JWT Authentication Method** row. ![OneSpan API Server configuration showing authentication methods and their statuses.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-cloud-configuration-jwt-auth-method(1).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
3. You should see the code that enables the JWT Authentication. Look for the **k** and **issuer** keys and record their values. ![JWT authentication method configuration with highlighted issuer and key details.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-cloud-jwt-auth-method.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
4. You will use this information when you build the tutorial web app.

## Set up the Web Tutorial App

### Download the Web SDK

1. Locate the **Software Downloads** tile on the portal. ![List of software downloads including Cordova, Web, and iOS SDK options.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-cloud-software-downloads(2).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
2. Click **Web SDK** and download the zip file. ![Interface for downloading app SDKs with search and pagination options displayed.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-cloud-dowload-web-app-sdk.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
3. Extract the zip to a local directory.

### Import and build the Web Tutorial App

1. Launch **Eclipse** and open the workspace you will be using to build the tutorial app.
2. Go to **File > Import**.1
3. In the *Import wizard*, choose **Existing Projects into Workspace** under General. Click **Next**.
4. In the *Import Projects dialog*, choose **Select root directory** and **Browse** for the folder where you extracted the zip file in Step 3 of [Download the Web SDK](/dpoa/docs/implement-passkeys-on-the-web-tutorial-app#download-the-web-sdk1).
5. Any projects detected will be displayed in the *Projects pane*.
  1. If *TutorialWebApp* (or a similarly named project) is visible, check it.
  2. Leave **Copy projects into workspace** unchecked.
6. Click **Finish**.
7. Before you proceed, confirm that the project appears correctly in the **Project/Package Explorer**.2
8. Go to *src > com > noknok > tutorial* and open **JWTExternalAuthServlet.java**.
9. Update the following constants:
  - Set *TENANT* to your **tenant name**3
  - Set *KEY* to the JWT **signing key**4
  - Set *ISSUER* to the **JWT issuer**5
10. Export the WAR file.
  1. Right-click on your web project folder in the explorer and select **Export** from the pop-up menu.
  2. Select **WAR file** in the *Export* window and click **Next**.
  3. Select the project you wish to export and specify where the new file should be saved.
  4. Click **Finish**.

> 1 Do not use **File > Open Projects from File System(...)** or **File > New > Project(...)** as the existing project metadata will not be recognized and the project structure may be duplicated or broken.
> 
> 2 In case of errors, check if:
> 
> - The correct Java/Server runtime is correctly configured for the project in *Project > Properties > Java Build Path*.
> - No required libraries are missing in *Project > Properties > Java Build Path > Libraries.*
> 
> 3 Your tenant name appears in the portal header.
> 
> 4,5 See [Access and record the JWT Issuer and signing key](/dpoa/docs/implement-passkeys-on-the-web-tutorial-app#access-and-record-the-jwt-issuer-and-signing-key).

### Deploy the tutorial web app

1. Open the directory containing the WAR file.
2. Once you have verified that the values for TENANT, KEY and ISSUER are correct, you are ready to deploy the tutorial web app.
3. Use the command-line interface to copy **gwtutorial.war** to the *Tomcat home* directory.
  - Unix/Linux: `cp gwtutorial.war {{TOMCAT_HOME}}/webapps/`
  - Windows: `Copy-Item gwtutorial.war {{TOMCAT_HOME}}\webapps\`
4. Start **Tomcat**.

## Configure your Authentication Cloud tenant

1. Return to the portal and locate the **Authentication Cloud** tile. Click **Configure Server**. ![Authentication Cloud settings with options to configure server and UI.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-cloud-configure-server(4).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
2. Navigate to *Configuration* > *Authentication Methods*. ![OneSpan configuration page displaying various authentication methods with FIDO2/WebAuthn highlighted.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-s3-authentication-methods-fido2-webauthn(2).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
3. Click **FIDO2/WebAuthn** and update the **RP ID** to *localhost.*6 This will allow the tutorial web app to use a Local Identity Provider (IdP) for the initial sign in.7 ![FIDO2/WebAuthn settings showing RP ID and explanation of valid identifiers.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-methods-fido2-webauthn-localhost.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)

> 6 If you are planning to test a native mobile application via the Android and iOS Tutorial apps, you must restore the RP ID to its default: *staging.digipassone.com.*
> 
> 7 QR code and cross-device sign-in are supported by the Web Tutorial App provided that the RP ID is a public domain.

## Allow the tutorial web app to access your tenant

### Add to the web client origin allow list

1. Navigate to **Configuration > API Server** and click **Main.** ![OneSpan API Server configuration showing various authentication options and selected Main section.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-api-server(2).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
2. Click **Add an origin**, enter *http://localhost:8080* and **check**. ![Web Client origin allow list with multiple URLs and an option to add an origin.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-web-client-origin-allow-list(1).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)

### Add to the trusted facets list

1. Navigate to **Configuration > Apps**. Click **Add App**. ![OneSpan configuration page showing options to add, import, and export apps.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-trusted-facets(4).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
2. Choose **Browser** and click **Add**. ![Options to select platform: iOS, Android, or Browser with Add and Cancel buttons.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-trusted-facets-add-browser(1).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
3. In the **App** window, enter the following details:
  - Package Name/URL: http://localhost:8080/gwtutorial/
  - App Name: Tutorial Web App
  - Facet ID: FIDO2/WebAuthn
  - FIDO2 Facet ID: http://localhost:8080
  - Adaptive Ruleset: tutorial ![Configuration settings for a tutorial web application including package name and supported modes.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-trusted-facets-add-app.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
4. Click **Save**.
5. **Tutorial Web App** should now appear in the Apps page with the details you provided.

## Configure the tutorial web app

1. Go to *http://localhost:8080/gwtutorial/configure.* You will see the **Web App Configuration** dialog. ![Web app configuration settings including tenant, server host, and deployment options.](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/screenshot-S3-auth-cloud-web-app-config-dialog(1).png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A37%3A16Z&se=2026-10-29T02%3A37%3A16Z&sr=c&sp=r&sig=W%2B0CxWsDeCe%2FMn135uO7jXinZddb8f7eK0k1wxzkXRc%3D)
2. First, make sure that **Deployment** is set to *cloud*.
3. Next, fill in the following fields:
  - **Tenant**: [your tenant name]
  - **Server Host**: https://staging.digipassone.com
4. Click **Apply Configuration**.

> The configuration is stored in the browser. If you test the tutorial web app on a different browser or close the current one, the settings will be lost.

## Test the tutorial web app

1. Using the same browser, access the web tutorial app at *http://localhost:8080/gwtutorial.*
2. Feel free to enter any **Username** in the field provided, but make sure to enter *"noknok"* as the **Password**.
3. Follow the instructions for registering a passkey.
4. Log out and test your new passkey by:
  1. Logging in
  2. Completing a transaction
5. Once you have completed testing, delete the authentication method and verify that the passkey is no longer available.

> You can now proceed to [Adding your Web application to the DigipassONE Authentciate Cloud](/dpoa/docs/adding-your-web-application-to-the-digipass-s3-authentication-cloud).

Formerly Digipass S3 Cloud.