Passkeys
@loginid/websdk3 • Docs
@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
Overrides
Properties
session
readonly
session:SessionManager
Instance of SessionManager, providing access to the session management methods.
Inherited from
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
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);