LoginIDWebSDK
@loginid/websdk3 • Docs
@loginid/websdk3 / LoginIDWebSDK
Class: LoginIDWebSDK
Extends LoginIDBase to support creation and authentication of passkeys.
Extends
Constructors
new LoginIDWebSDK()
new LoginIDWebSDK(
config):LoginIDWebSDK
Parameters
• config: LoginIDConfig
Returns
Inherited from
Properties
session
readonlysession: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);
Inherited from
Passkeys.authenticateWithPasskey
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);
}
});
Inherited from
Passkeys.authenticateWithPasskeyAutofill
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
);
Inherited from
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);
Inherited from
deletePasskey()
deletePasskey(
id,options):Promise<void>
Delete a specified passkey by ID from LoginID. The user must be fully authorized for this call to succeed.
Parameters
• id: string
The ID of the passkey to delete.
• options: DeletePasskeyOptions = {}
Additional options for deleting the passkey.
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 passkeyId = "abc123";
// Delete the passkey user credential
try {
// Signin with passkey
const signinResult = await lid.authenticateWithPasskey(username);
// Find a way to retrieve passkey ID
await lid.deletePasskey(passkeyId);
// Passkey credential successfully deleted
} catch (error) {
// Handle errors
console.error("Error deleting passkey:", error);
}
Inherited from
getSessionInfo()
getSessionInfo():
null|SessionInfo
Check whether the user of the current browser session is authenticated and returns user info. This info is retrieved locally and no requests to backend are made.
Returns
null | SessionInfo
The currently authenticated user's information, including username and id.
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";
try {
// Retrieve session information
await lid.authenticateWithPasskey(username);
const sessionInfo = lid.getSessionInfo();
console.log("Session Information:", sessionInfo);
} catch (error) {
console.error("Error retrieving session information:", error);
}
Inherited from
listPasskeys()
listPasskeys(
options):Promise<PasskeyCollection>
This method returns list of passkeys associated with the current user. The user must be fully authorized for this call to succeed.
Parameters
• options: ListPasskeysOptions = {}
Additional options for listing passkeys.
Returns
Promise<PasskeyCollection>
A collection of passkeys.
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 for signing in
async function handleSigninButtonClick() {
const username = "billy@loginid.io";
try {
// Sign in with a passkey
await lid.authenticateWithPasskey(username);
// List all user credentials
const passkeys = await lid.listPasskeys();
// Handle the sign-in result
} catch (error) {
// Handle errors
console.error("Error during obtaining passkeys:", error);
}
}
// Attach the click handler to a button
const signinButton = document.getElementById("signinButton");
signinButton.addEventListener("click", handleSigninButtonClick);
Inherited from
logout()
logout():
void
Clears current user session. This method is executed locally and it just deletes authorization token from local Cookies.
Returns
void
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);
try {
// Retrieve user information
await lid.authenticateWithPasskey(username);
lid.logout();
const info = lid.getSessionInfo();
// false
console.log("Is user signed in?", info !== null);
} catch (error) {
console.error("Error:", error);
}
Inherited from
renamePasskey()
renamePasskey(
id,name,options):Promise<void>
Renames a specified passkey by ID. The user must be fully authorized for this call to succeed.
Parameters
• id: string
The ID of the passkey to rename.
• name: string
The new name for the passkey.
• options: RenamePasskeyOptions = {}
Additional options for renaming the passkey.
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 passkeyId = "abc123";
const newCredName = "New Passkey Credential Name";
// Rename the passkey user credential
try {
// Signin with passkey
await lid.authenticateWithPasskey(username);
// Find a way to retrieve passkey ID
await lid.renamePasskey(passkeyId, newCredName);
// Passkey credential successfully renamed
} catch (error) {
// Handle errors
console.error("Error during passkey credential renaming:", error);
}
Inherited from
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);
Inherited from
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
verifyConfigSettings()
verifyConfigSettings():
Promise<VerifyConfigResult>
Validates the application's configuration settings and provides a suggested correction if any issues are detected.
Returns
Promise<VerifyConfigResult>
The result of the verification process.
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,
};
const lid = new LoginIDWebSDK(config);
async function checkConfig() {
const result = await lid.verifyConfigSettings();
if (result.isValid) {
console.log("Configuration is valid");
} else {
console.error(`Error: ${result.message} (Code: ${result.code})`);
console.info(`Solution: ${result.solution}`);
}
}
checkConfig();
// Attach the click handler to a button
const checkConfigButton = document.getElementById("button");
checkConfigButton.addEventListener("click", checkConfig);