> ## 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();
```
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
// Vérifiez si alternateConnections est disponible et contient au moins un élément
if (!loginIdManager.transaction.alternateConnections) {
console.error('No alternate connections available.');
}
// Sélectionnez la première connexion disponible (les utilisateurs peuvent sélectionner n'importe quelle connexion disponible)
const selectedConnection = alternateConnections[0];
// Consignez la connexion choisie à des fins de débogage ou d'information
console.log(`Selected connection: ${selectedConnection.name}`);
// Procédez à la connexion fédérée en utilisant la connexion sélectionnée
loginIdManager.federatedLogin({
connection: selectedConnection.name,
});
```
FederatedLoginOptions}>
**Propriétés**
Error[]}>
Renvoie le tableau des erreurs de transaction à partir du contexte, ou un tableau vide s'il n'en existe aucune.
ScreenIdentifierType[]}>
**`Fonction utilitaire`**
Renvoie les types d'identifiants actifs pour l'écran de connexion.
```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}>
**Propriétés**
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
// Cette méthode associe en interne la configuration de passkey disponible pour les utilisateurs, telle que fournie par le serveur Auth0
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`**
Enregistre l’interface utilisateur conditionnelle du navigateur pour les passkeys (expérience de saisie semi-automatique).
Cette méthode initialise une requête passive d’identifiants WebAuthn à l’aide de
`navigator.credentials.get()` avec `mediation: "conditional"`. Lorsque cette fonctionnalité est prise en charge,
elle permet au navigateur d’afficher les passkeys enregistrés directement dans la liste de
saisie semi-automatique du champ de nom d’utilisateur.
Appelez cette méthode **une seule fois** lorsque l’écran de connexion est initialisé (par exemple, au chargement de la page).
Après l’enregistrement, le fait de placer le curseur dans le champ de nom d’utilisateur affichera automatiquement
les passkeys correspondants comme suggestions. La sélection d’un passkey finalise l’authentification
sans nécessiter d’interaction supplémentaire de la part de l’utilisateur.
### Configuration de l’élément `input`
Si un `inputId` est fourni, la Trousse de développement logiciel (SDK) va :
* Valider que l’élément existe et qu’il s’agit d’un ``.
* Remplacer son attribut `autocomplete` par `"webauthn username"`.
Cela garantit une compatibilité complète avec l’API Conditional Mediation.
Si vous ne fournissez pas de `inputId`, vous êtes responsable de configurer
l’élément d’entrée manuellement avec les attributs appropriés :
```html theme={null}
```
***
### Pièges à éviter
* L’attribut `autocomplete` **doit contenir exactement** `"webauthn username"`.
L’ajout de jetons non liés comme `"email"` ou `"text"` empêchera les navigateurs
d’afficher la liste déroulante de passkeys.
* Le fait d’écraser l’attribut est intentionnel et nécessaire pour assurer un comportement cohérent
d’un navigateur à l’autre. Ne comptez pas sur la fusion ou l’extension des valeurs `autocomplete` existantes.
* Si la médiation conditionnelle n’est pas prise en charge par le navigateur, le SDK se contentera de ne rien faire (no-op) en toute sécurité.
#### Paramètres
`string`
ID facultatif de l’élément `` pour le nom d’utilisateur (sans `#`). Exemple : `"username"`.
S’il est omis, le développeur doit veiller manuellement à ce que les attributs `autocomplete` soient corrects.
```ts Example theme={null}
import LoginId from '@auth0/auth0-acul-js/login-id';
// Exemple : initialisation de la saisie automatique de clé d'accès dans un bloc de configuration asynchrone.
async function initializeLogin() {
const loginId = new LoginId();
// Assurez-vous que l'élément input HTML associé existe :
//
// Enregistrement conditionnel de l'IU.
await loginId.registerPasskeyAutofill('username');
}
initializeLogin().catch(console.error);
```
#### Remarques
Cette méthode délègue à l’utilitaire interne `registerPasskeyAutofill()`,
qui renvoie en arrière-plan un `AbortController` pour gérer la durée de vie de la requête. Elle ne doit
être appelée qu’une seule fois par cycle de vie de la page.
```ts Example theme={null}
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();
```