BranchesTags

Repository files navigation

This project has moved

This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.

Securing a Website with Passwordless Authentication

In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.

TLDR

If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):

  1. Clone the repo 
    git clone https://github.com/elukewalker/PasswordlessWorkshop
  2. Build the docker image 
    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.
  3. Run the image 
    docker run -p 8443:8443 example/demo:latest
  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password

What you'll build:

You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.

What you'll need:

  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser
  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.

High Level Components

alt text

FIDO2 Authenticator: The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.

Client: The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.

Server: The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.

See the diagram below for a depiction of the server architecture alt text

Additional WebAuthn Resources

If you need more resources to understand WebAuthn and FIDO2 then

Modules

This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.

  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up

Getting Started

Before you begin, make sure you have completed the steps in the Getting Started Module

About

WebAuthn passwordless authentication with resident credentials

Resources

Readme
Apache-2.0 license
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
This project has moved
This project has moved to YubicoLabs/java-webauthn-passwordless-workshop. Please go to the YubicoLabs repository for the latest version.
Securing a Website with Passwordless Authentication
In this workshop you will build a simple web application that enables users to register a security key and then use the security key to sign in without typing in a username or password.
TLDR
If you'd rather see the end result without installing the dependencies and going through all the steps then do this (requires docker):
  1. Clone the repo

    git clone https://github.com/elukewalker/PasswordlessWorkshop

  2. Build the docker image

    build -t example/demo:latest PasswordlessWorkshop/4_Authentication/complete/.

  3. Run the image

    docker run -p 8443:8443 example/demo:latest

  4. Open https://localhost:8443/ in a CTAP2 compatible browser (Edge on Windows 10 1809+ or Safari Technology Preview on macOS)
  5. Sign in with username user and password password
  6. Register a security key
  7. Sign out
  8. Click Passwordless sign in to sign in without typing a username or password
What you'll build:
You'll start with a java web application that secures access to a page with a login form. Then you'll integrate Yubico's WebAuthn Server libraries to enable FIDO2 security key registration and passwordless authentication.
What you'll need:
  • Git
  • JDK 1.8 or later
  • Maven 3.2+
  • FIDO2 Compatible browser

  • A favorite text editor or IDE
  • A security key
  • [Optional] An Azure Subscription. If you already have a subscription you can use it or you can get a free trial here.
High Level Components
alt text
FIDO2 Authenticator:
The authenticator makes credentials, generates cryptographic proof of user authentication, and manages the PIN.
Client:
The client is the bridge between the authenticator and the server. It implements the FIDO2 Client to Authenticator Protocol (CTAP) and the WebAuthn API. The client could be a browser exposing the WebAuthn API to web applications, or an OS subsystem exposing a platform-specific FIDO2 API to native applications such as mobile or desktop apps.
Server:
The server, also know as Relying Party or RP, consists conceptually of at least a web server and the server-side portions of a web application, plus a WebAuthn server. The WebAuthn server has a trust store, containing the (public) trust anchors for the attestation of FIDO2 Authenticators. Note: a trust store is needed only if RP cares about attestation metadata.
See the diagram below for a depiction of the server architecture
alt text
Additional WebAuthn Resources
If you need more resources to understand WebAuthn and FIDO2 then
Modules
This workshop is split into multiple modules. Each module builds upon the previous module as you expand the application. You must complete each module before proceeding to the next.
  1. Getting Started
  2. Credential Repository
  3. Registration
  4. Authentication
  5. Clean Up
Getting Started
Before you begin, make sure you have completed the steps in the Getting Started Module
About
WebAuthn passwordless authentication with resident credentials
Resources
Readme
Apache-2.0 license
Activity
Stars
1 star
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages