Skip to main content

Passkeys

@loginid/websdk3Docs


@loginid/websdk3 / Internal Modules / Passkeys

Class: Passkeys

Extends LoginIDBase to support creation and authentication of passkeys.

Extends

Extended by

Constructors

new Passkeys()

new Passkeys(config): Passkeys

Initializes a new Passkeys instance with the provided configuration.

Parameters

config: LoginIDConfig

Configuration object for LoginID.

Returns

Passkeys

Overrides

OTP.constructor

Properties

session

readonly session: SessionManager

Instance of SessionManager, providing access to the session management methods.

Inherited from

OTP.session

Methods

authenticateWithPasskey()

authenticateWithPasskey(username, options): Promise<AuthResult>

This method authenticates a user with a passkey and may trigger additional browser dialogs to guide the user through the process.

A short-lived authorization token is returned, allowing access to protected resources for the given user such as listing, renaming or deleting passkeys.

Parameters

username: string = ''

Username to authenticate. When empty, usernameless passkey authentication is performed.

options: AuthenticateWithPasskeysOptions = {}

Additional authentication options.

Returns

Promise<AuthResult>

Result of the passkey authentication operation.

Example

import { LoginIDWebSDK } from "@loginid/websdk3";

// Obtain credentials from LoginID
const BASE_URL = process.env.BASE_URL;

// Initialize the SDK with your configuration
const config = {
baseUrl: BASE_URL,
};

// Use the SDK components for signup and signin
const lid = new LoginIDWebSDK(config);

// Button click handler
async function handleSignupButtonClick() {
const username = "billy@loginid.io";

try {
// Sign in with a passkey
const signinResult = await lid.authenticateWithPasskey(username);
// Handle the signin result
console.log("Signin Result:", signinResult);
} catch (error) {
// Handle errors
console.error("Error during signin:", error);
}
}

// Attach the click handler to a button
const signinButton = document.getElementById("signinButton");
signinButton.addEventListener("click", handleSigninButtonClick);

authenticateWithPasskeyAutofill()

authenticateWithPasskeyAutofill(options): Promise<AuthResult>

Authenticates a user by utilizing the browser's passkey autofill capabilities.

A short-lived authorization token is returned, allowing access to protected resources for the given user such as listing, renaming or deleting passkeys.

Parameters

options: AuthenticateWithPasskeyAutofillOptions = {}

Additional authentication options.

Returns

Promise<AuthResult>

Result of the passkey authentication operation.

Example

* import { isConditionalUIAvailable, LoginIDWebSDK } from "@loginid/websdk3";

// Obtain credentials from LoginID
const BASE_URL = process.env.BASE_URL;

// Initialize the SDK with your configuration
const config = {
baseUrl: BASE_URL,
};

// Use the SDK components for signup and signin
const lid = new LoginIDWebSDK(config);

window.addEventListener("load", async (event) => {
try {
const result = await isConditionalUIAvailable();
if (!result) {
// If conditional UI is not supported then continue without it or handle what to do
// next here.
return;
}

const result = await lid.authenticateWithPasskeyAutofill(options);
console.log("Authentication Result:", result);
} catch (error) {
// Handle errors
console.error("Error during authentication:", error);
}
});

confirmTransaction()

confirmTransaction(username, txPayload, options): Promise<TxComplete>

This method initiates a non-repudiation signature process by generating a transaction-specific challenge and then expects the client to provide an assertion response using a passkey.

This method is useful for confirming actions such as payments or changes to sensitive account information, ensuring that the transaction is being authorized by the rightful owner of the passkey.

For a more detailed guide click here.

Parameters

username: string

The username of the user confirming the transaction.

txPayload: string

The transaction-specific payload, which could include details such as the transaction amount, recipient, and other metadata necessary for the transaction.

options: ConfirmTransactionOptions = {}

Optional parameters for transaction confirmation.

Returns

Promise<TxComplete>

A promise that resolves with the result of the transaction confirmation operation. The result includes details about the transaction's details and includes a new JWT access token.

Example

import { LoginIDWebSDK } from "@loginid/websdk3";

const config = {
baseUrl: BASE_URL,
};

const lid = new LoginIDWebSDK(config);

const username = "jane@securelogin.com";
const txPayload = JSON.stringify({
amount: 100,
recipient: "bob@securepay.com",
});
// Unique transaction nonce
const nonce = "f846bb01-492e-422b-944a-44b04adc441e";

async function handleTransactionConfirmation() {
try {
// Confirm the transaction
const confirmationResult = await lid.confirmTransaction(
username,
txPayload,
nonce
);
// Handle the transaction confirmation result
console.log("Transaction Confirmation Result:", confirmationResult);

// Check nonce
const { nonce: resultNonce } = confirmationResult;
if (nonce !== resultNonce) {
throw new Error("Nonce mismatch");
}
} catch (error) {
// Handle errors
console.error("Error during transaction confirmation:", error);
}
}

// Attach the click handler to a button for transaction confirmation
const confirmTransactionButton = document.getElementById(
"confirmTransactionButton"
);
confirmTransactionButton.addEventListener(
"click",
handleTransactionConfirmation
);

createPasskey()

createPasskey(username, authzToken, options): Promise<AuthResult>

This method helps to create a passkey. The only required parameter is the username, but additional attributes can be provided in the options parameter. Note: While the authorization token is optional, it must always be used in a production environment. You can skip it during development by adjusting the app configuration in the LoginID dashboard.

A short-lived authorization token is returned, allowing access to protected resources for the given user such as listing, renaming or deleting passkeys.

Parameters

username: string

Username to register.

authzToken: string = ''

Authorization token for passkey creation.

options: CreatePasskeyOptions = {}

Additional passkey creation options.

Returns

Promise<AuthResult>

Result of the passkey creation operation.

Example

import { LoginIDWebSDK } from "@loginid/websdk3";

// Obtain credentials from LoginID
const BASE_URL = process.env.BASE_URL;

// Initialize the SDK with your configuration
const config = {
baseUrl: BASE_URL,
};

// Use the SDK components for signup and signin
const lid = new LoginIDWebSDK(config);

// Button click handler
async function handleSignupButtonClick() {
const username = "billy@loginid.io";

try {
// Sign up with a passkey
const signupResult = await lid.createPasskey(username);
// Handle the signup result
console.log("Signup Result:", signupResult);
} catch (error) {
// Handle errors
console.error("Error during signup:", error);
}
}

// Attach the click handler to a button
const signinButton = document.getElementById("signinButton");
signinButton.addEventListener("click", handleSigninButtonClick);

requestAndSendOtp()

requestAndSendOtp(username, method, options): Promise<void>

This method requests an OTP from the backend to be sent via the selected method. The method of delivery should be based on the user's choice from the list of available options. This can be found in the result of authenticateWithPasskey method as fallbackOptions.

Parameters

username: string

Username to request and send the OTP to.

method: Message = 'email'

Method to send the code, either 'email' or 'sms'. Default is 'email'.

options: RequestAndSendOtpOptions = {}

Additional options for sending the OTP.

Returns

Promise<void>

A promise that resolves when the operation completes successfully.

Example

import { LoginIDWebSDK } from "@loginid/websdk3";

// Obtain credentials from LoginID
const BASE_URL = process.env.BASE_URL;

// Initialize the SDK with your configuration
const config = {
baseUrl: BASE_URL,
};

// Use the SDK components for signup and signin
const lid = new LoginIDWebSDK(config);

const username = "billy@loginid.io";

async function sendUserOTPHandler() {
try {
// Send OTP to a user via email
await lid.requestAndSendOtp(username, "email");
console.log("OTP sent successfully.");
} catch (error) {
console.error("Error sending code:", error);
}
}

const sendOtpButton = document.getElementById("button");
sendOtpButton.addEventListener("click", sendUserOTPHandler);

Inherited from

OTP.requestAndSendOtp


requestOtp()

requestOtp(username, options): Promise<Otp>

This method returns a one-time OTP to be displayed on the current device. The user must be authenticated on this device. The OTP is meant for cross-authentication, where the user reads the OTP from the screen and enters it on the target device.

Parameters

username: string

The username used for passkey authentication and OTP request.

options: RequestOtpOptions = {}

Additional request OTP options.

Returns

Promise<Otp>

Result of the request OTP operation returning an OTP and expiry time.

Example

import { LoginIDWebSDK } from "@loginid/websdk3";

// Obtain credentials from LoginID
const BASE_URL = process.env.BASE_URL;

// Initialize the SDK with your configuration
const config = {
baseUrl: BASE_URL,
};

// Use the SDK components for signup and signin
const lid = new LoginIDWebSDK(config);

// Button click handler
async function handleRequestOTPButtonClick() {
const username = "billy@loginid.io";

try {
// Request OTP with passkey
const result = await lid.requestOtp(username);
const otp = result.code;
console.log("The OTP is: ", otp);
} catch (error) {
// Handle errors
console.error("Error during authentication:", error);
}
}

// Attach the click handler to a button
const requestOTPButton = document.getElementById("requestOTPButton");
requestOTPButton.addEventListener("click", handleRequestOTPButtonClick);

validateOtp()

validateOtp(username, otp, options): Promise<AuthResult>

This method verifies the OTP and returns an authorization token, which can be used with the passkeyCreate() method to create a new passkey. The authorization token has a short validity period and should be used immediately.

Parameters

username: string

Username to validate with.

otp: string

OTP to validate.

options: ValidateOtpOptions = {}

Additional authentication options.

Returns

Promise<AuthResult>

Result of the authentication operation.

Example

import { LoginIDWebSDK } from "@loginid/websdk3";

// Obtain credentials from LoginID
const BASE_URL = process.env.BASE_URL;

// Initialize the SDK with your configuration
const config = {
baseUrl: BASE_URL,
};

// Use the SDK components for signup and signin
const lid = new LoginIDWebSDK(config);

// Button click handler to generate a code with passkey
async function handleRequestOTPButtonClick() {
const username = "billy@loginid.io";

try {
// Request OTP with passkey
const result = await lid.requestOtp(username);
// Extract the OTP from the response
const otp = result.code;

// Authenticate with the OTP
// You can authenticate on another device with this OTP
const authenticateResult = await lid.validateOtp(username, otp);
// Handle the authentication result
console.log("Authentication Result:", authenticateResult);
} catch (error) {
// Handle errors
console.error("Error during authentication:", error);
}
}

// Attach the click handler to a button
const requestOtpButton = document.getElementById("requestOtpButton");
requestOtpButton.addEventListener("click", handleRequestOTPButtonClick);

Inherited from

OTP.validateOtp