> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# LoginId
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();
```
## Constructors
Creates an instance of LoginIdManager.
## Properties
BrandingMembers} />
ClientMembers} />
OrganizationMembers} />
PromptMembers} />
ScreenMembersOnLoginId} />
TenantMembers} />
TransactionMembersOnLoginId} />
UntrustedDataMembers} />
UserMembers} />
## Methods
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
// Check if alternateConnections is available and has at least one item
if (!loginIdManager.transaction.alternateConnections) {
console.error('No alternate connections available.');
}
// Select the first available connection (users can select any available connection)
const selectedConnection = alternateConnections[0];
// Log the chosen connection for debugging or informational purposes
console.log(`Selected connection: ${selectedConnection.name}`);
// Proceed with federated login using the selected connection
loginIdManager.federatedLogin({
connection: selectedConnection.name,
});
```
FederatedLoginOptions}>
**Properties**
Error[]}>
Retrieves the array of transaction errors from the context, or an empty array if none exist.
ScreenIdentifierType[]}>
**`Utility Feature`**
Gets the active identifier types for the login screen
```typescript Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();
```
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.login({
username:
});
```
LoginOptions}>
**Properties**
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
// It internally maps users available passkey config provided from auth0 server
loginIdManager.passkeyLogin();
```
CustomOptions} />
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.pickCountryCode();
```
CustomOptions} />
### Passkeys
**`Utility Feature`**
Registers the browser's Conditional UI for passkeys (autocomplete experience).
This method initializes a passive WebAuthn credential request using
`navigator.credentials.get()` with `mediation: "conditional"`. When supported,
this allows the browser to display stored passkeys directly within the username
field’s autocomplete dropdown.
Call this **once** when the login screen is initialized (for example, on page load).
After registration, focusing the username input will automatically display
matching passkeys as suggestions. Selecting a passkey completes authentication
without requiring additional user interaction.
### Input configuration
If an `inputId` is provided, the SDK will:
* Validate that the element exists and is an ``.
* Overwrite its `autocomplete` attribute with `"webauthn username"`.
This ensures full compatibility with the Conditional Mediation API.
If you do **not** provide an `inputId`, you are responsible for configuring
the input element manually with the correct attributes:
```html theme={null}
```
***
### Gotchas
* The `autocomplete` attribute **must exactly** contain `"webauthn username"`.
Including unrelated tokens such as `"email"` or `"text"` will prevent browsers
from showing the passkey dropdown.
* Overwriting the attribute is intentional and required for consistent behavior
across browsers. Do not rely on merging or extending existing autocomplete values.
* If Conditional Mediation is not supported by the browser, the SDK will safely no-op.
#### Parameters
`string`
Optional ID of the username `` element (without `#`). Example: `"username"`.
If omitted, the developer must manually ensure the correct `autocomplete` attributes.
```ts Example theme={null}
import LoginId from '@auth0/auth0-acul-js/login-id';
// Example: initializing passkey autocomplete inside an async setup block.
async function initializeLogin() {
const loginId = new LoginId();
// Make sure associated HTML input exists:
//
// Conditional UI registration.
await loginId.registerPasskeyAutofill('username');
}
initializeLogin().catch(console.error);
```
#### Remarks
This method delegates to the internal `registerPasskeyAutofill()` utility,
returning a background `AbortController` to manage request lifetime. It should
only be invoked once per page lifecycle.
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();
```
## Constructors