Web JavaScript

Initial Setup

The LoginID Web SDK provides a set of functions and components that can be integrated into your web (browser) application. To use it, you'll need to configure the SDK with your LoginID credentials and then call the appropriate methods for signup and signin functionalities.

This SDK facilitates a smooth integration process, eliminating the need to redirect users to external pages outside of your application.

Required settings:

• Base URL
• Application ID

Add SDK to Existing Application

NPM

npm install --save @loginid/web-sdk

Create an SDK Instance

Javascript

NPM

import { LoginIDWebSDK } from "@loginid/web-sdk";

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

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

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

API Reference

LoginIDWebSDK Class

Effortlessly integrate passkey-based sign-in and sign-up functionalities along with passkey management into your front-end application using this class.

Constructor

Initializes a new instance of LoginIDWebSDK with the provided configuration.

Arguments

constructor(config: LoginIDConfig);

Parameter Type Details

Parameter	Type	Required	Details
config	LoginIDConfig	yes	The Login SDK configuration object.
config.baseUrl	LoginIDConfig	yes	The base URL of LoginID service.
config.appId	LoginIDConfig	yes	The application ID of your LoginID application.

Example

registerWithPasskey

Signs up with a passkey for the given username.

Arguments

async registerWithPasskey(
    username: string,
    options?: RegisterWithPasskeysOptions
): Promise<PasskeyResult>;

Parameter	Type	Required	Details
username	String	true	The username for the sign-up
options	RegisterWithPasskeysOptions	false	Additional options for the sign-up process.
options.displayName	string	false	A human-palatable name for the user account, intended only for display on your passkeys and modals.

Returns

Example

authenticateWithPasskey

Signs in with a passkey for the given username.

Arguments

async authenticateWithPasskey(
    username: string,
    options?: AuthenticateWithPasskeysOptions
): Promise<PasskeyResult>;

Parameter	Type	Required	Details
username	String	false	The username for the sign-in.
options	AuthenticateWithPasskeysOptions	false	Additional options for the sign-up process.
options.autoFill	boolean	false	When true will enable passkeys in the browser autofill suggestions if supported (conditional UI). username does not need to be set.
options.abortSignal	AbortSignal	false	This should be used with the options.autoFill option to trigger the cancellation of the passkey conditional UI. Pass this if additional passkeys API calls may be anticipated on the current context page.

Returns

Example

Utility Functions

Helpful utility functions that will aid with passkey integration.

doesDeviceSupportPasskeys

This asynchronous function checks if the current device supports passkeys, based on the availability of platform authenticators like Touch ID, Face ID, Windows Hello, or other device unlock features. It provides specific solutions if passkeys are not supported, guiding users towards enabling the necessary features or updating their browsers.

Returns

Example

isPlatformAuthenticatorAvailable

Checks if the user's device has a platform authenticator available that supports user verification. It is useful for determining if the device can participate in biometric-based or device PIN-based authentication flows. doesDeviceSupportPasskeys also uses this function to determine a result.

Returns

Example

isConditionalUIAvailable

Checks if the current browser supports autofill for passkeys.

Returns

Example