LoginPassKey for ProcessWire

This module enables users to log in to ProcessWire with a WebAuthn passkey rather than a password.

Table of Contents

• Passwords vs PassKeys
• Features
• How it works (Short version)
• How it works (Long version TLDR;)
• Installation
• Configuration
  • Activate module
  • Authentication options
  • ProcessWire user info
• Customising the frontend
• LoginPassKey in Admin
• Credit where it's due
• Like this module?

Passwords vs PassKeys

Passwords:

• Traditional security method using a combination of letters, numbers, and symbols.
• Vulnerable to hacking, phishing, and weak practices like reuse.
• Require users to remember and manage, which can lead to insecure behavior.
• Can be used to log in across multiple, disparate devices

Passkeys

• A more secure alternative based on public-key cryptography.
• Uses a private key on the user’s device and a public key on the service’s server.
• Eliminates the need to remember passwords, relying on biometric authentication or PINs.
• More resistant to attacks like phishing and keylogging.
• Tied to the user's device OR when used in conjunction with a federated passkey manager, eg Apple's Keychain, can be used to log into multiple devices using biometric fingerprint or face id

In short, passkeys offer improved security and convenience compared to traditional passwords.

Features

• Can be enabled for Frontend users only, Admin users only, or both
• Simply install, then configure the module and it's good to go
• The module does not require TFA and will probably conflict if TFA is installed
• The module does not make any changes to the user template

How it works (Short version)

The browser, server and device have a 3-way conversation answering the following two questions, then respond appropriately:

1. Who are you?
2. What do I do next?

The user must be logged in with a password to register a passkey.

The user must be logged out to verify an existing passkey.

How it works (Long version TLDR;)

The user clicks a button, then:

1. The button click triggers an api call to the server identifying the user by the input value of the username field.
2. The server then runs through a series of scenarios regarding the submitted username:
   1. Username field is empty
   2. User is not logged in but device does support WebAuthn
   3. User is not logged in, device supports WebAuthn but username not found
   4. User is logged in but device does not support WebAuthn
   5. User is logged, device does support WebAuthn but user does not have the WebAuthn challenge set
   6. User roles do not match supported roles
   7. User roles match supported roles, user is not logged in and has WebAuthn challenge set
   8. User is logged in but their username does not match username input
   9. User logged in with passkey
   10. The user is an admin who wants to add/remove passkeys

The match to these scenarios triggers one of three possible actions:

1. Back out now
2. Go through the passkey registration process
3. Verify the passkey and log in the user

Installation

During the installation process, the module creates:

• The Api template. The default name is lkp-api that includes attributes such as:
  • one page only,
  • no children,
  • urlSegments start, register, verify and end, and
  • disables appending of _main.php.
• A publicly accessible page which is assigned the lkp-api template and is hidden.
• It is then up to you to create a login page. See examples/loginpasskey-page-tpl.php for inspiration.
• An admin page under Access to view/add/delete passkeys depending on user permissions.

Configuration

The module configuration fields are:

Activate module

• Enable Frontend Passkey login - check to allow frontend users to login with a passkey.
• Enable Admin Passkey login - check to allow admins to login with a passkey.

Authentication options

• Application name - the shortname that some passkey authenticators will display to enable users to differentiate between passkeys.
• Host name - The Replying Party host name. Default is the current $config->host.

ProcessWire user info

• User template (required) - defaults to the system user template. After saving, any other user templates will display.
• Identify user by username or email (required) - defaults to the user template name field. After saving and the user template has email fields, those fields will become available. When choosing an email field, the user may login with their passkey with either their username OR email address in the input field.
• User roles permitted to use WebAuthn (required) - Select all roles for all users. Superuser role MUST be selected to enable Superusers to log in with a passkey. The permission is not set by default.
• Path to your API ENDPOINT (required) - The module will create a template and page for the api by default. Change this path should you prefer another endpoint.

Customising the frontend

Frontend page template - see loginpasskey-page-tpl.php in the examples folder. The script MUST be present but the layout can be whatever you choose. The id attribute of the button MUST match the getElementById selector.

LoginPassKey with LoginRegisterPro - Coming soon

Api template - see loginpasskey-api-tpl.php in the examples folder. Changing this template will almost certainly break the application and is unsupported!

LoginPassKey in Admin

When logged into the admin area, a user who is a superuser or has the passkeys permission, the page PassKeys appears as a child page of Access.

Users with this permission can view and/or delete existing passkeys. The list only shows id, user id, username and date created. It does not display any passkey authentication data.

If Enable Admin Passkey login is checked, users with this permission can also add their own new passkeys.

Credit where it's due

This module would not be possible without the help and support from:

• Ryan Cramer for ProcessWire and his comprehensive ProcessWire docs
• The ProcessWire Community Forum, with special mentions to:
  • Adrian for his TracyDebugger module and quick replies when I reached out for help
  • Bernhard for his knowledge and who is always willing to help
  • All forum members who posted solutions to problems I faced creating this module

Like this module?

Please show your appreciation by sending Clip Magic some financial love via PayPal.

Click to contribute to Clip Magic