> ## 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.

# LoginPassword

<Frame>
  <img style={{maxHeight:"400px"}} src="https://mintcdn.com/generaltranslationinc/PZqXjqHIg9BH1QX1/docs/images/cdy7uua7fh8z/Em8VqaD4fPUx6FRevD8fh/a9133a19565d5d9ddc1454535a0a7a11/loginpassword.png?fit=max&auto=format&n=PZqXjqHIg9BH1QX1&q=85&s=cbd9a8f43a0b75e4bc6e8fdcd1f81fe6" alt="" width="480" height="852" data-path="docs/images/cdy7uua7fh8z/Em8VqaD4fPUx6FRevD8fh/a9133a19565d5d9ddc1454535a0a7a11/loginpassword.png" />
</Frame>

```jsx Import Example theme={null}
import React, { useState } from "react";
import { useScreen, useTransaction, login, useErrors } from "@auth0/auth0-acul-react/login-password";
import { Logo } from "../../components/Logo";
```

<div id="context-hooks">
  ## Hooks de contexte
</div>

<ParamField body="useBranding" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/BrandingMembers">BrandingMembers</a></span>}>
  Hook permettant d'accéder à la configuration de l'image de marque et du thème.

  ```jsx Example theme={null}
  import { useBranding } from '@auth0/auth0-acul-react/login-id';
  function CustomTheme() {
    const branding = useBranding();
  }
  ```
</ParamField>

<ParamField body="useClient" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ClientMembers">ClientMembers</a></span>}>
  Hook permettant d'accéder à la configuration de l'application Auth0 (client).

  ```jsx Example theme={null}
  import { useClient } from '@auth0/auth0-acul-react/login-id';
  function AppInfo() {
    const client = useClient();
  }
  ```
</ParamField>

<ParamField body="useOrganization" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/OrganizationMembers">OrganizationMembers</a></span>}>
  Hook permettant d'accéder au contexte et aux paramètres de l'organisation.

  ```jsx Example theme={null}
  import { useOrganization } from '@auth0/auth0-acul-react/login-id';
  function OrgSelector() {
    const organization = useOrganization();
    if (!organization) {
      return <p>Aucun contexte d'organisation</p>;
    }
  }
  ```
</ParamField>

<ParamField body="usePrompt" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/PromptMembers">PromptMembers</a></span>}>
  Hook permettant d'accéder à la configuration du prompt et aux paramètres du flux.

  ```jsx Example theme={null}
  import { usePrompt } from '@auth0/auth0-acul-react/login-id';
  function FlowInfo() {
    const prompt = usePrompt();
  }
  ```
</ParamField>

<ParamField body="useScreen" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ScreenMembersOnLoginPassword">ScreenMembersOnLoginPassword</a></span>}>
  Hook permettant d'accéder aux informations et aux métadonnées de l'écran actuel.

  Objet screen contenant le nom de l'écran actuel, sa configuration et les données propres à cet écran

  ```jsx Example theme={null}
  import { useScreen } from '@auth0/auth0-acul-react/login-id';
  function ScreenDebug() {
    const screen = useScreen();
  }
  ```
</ParamField>

<ParamField body="useTenant" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TenantMembers">TenantMembers</a></span>}>
  Hook permettant d'accéder à la configuration et aux paramètres du tenant.

  ```jsx Example theme={null}
  import { useTenant } from '@auth0/auth0-acul-react/login-id';
  function TenantInfo() {
    const tenant = useTenant();
  }
  ```
</ParamField>

<ParamField body="useTransaction" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TransactionMembersOnLoginPassword">TransactionMembersOnLoginPassword</a></span>}>
  Hook permettant d'accéder à l'état de la transaction et aux données du flux d'authentification.

  Objet de transaction contenant l'état du flux, les données de session et les informations propres à la transaction

  ```jsx Example theme={null}
  import { useTransaction } from '@auth0/auth0-acul-react/login-id';
  function TransactionInfo() {
    const transaction = useTransaction();
  }
  ```
</ParamField>

<ParamField body="useUntrustedData" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}>
  Hook permettant d'accéder aux données non fiables provenant des paramètres d'URL et des soumissions de formulaires.

  ```jsx Example theme={null}
  import { useUntrustedData } from '@auth0/auth0-acul-react/login-id';
  function PrefilledForm() {
    const untrustedData = useUntrustedData();
  }
  ```
</ParamField>

<ParamField body="useUser" type={<span>() =&gt; <a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UserMembers">UserMembers</a></span>}>
  Hook permettant d'accéder aux informations sur l'utilisateur et aux données de profil.

  ```jsx Example theme={null}
  import { useUser } from '@auth0/auth0-acul-react/login-id';
  function UserProfile() {
    const user = useUser();
  }
  ```
</ParamField>

<div id="methods">
  ## Méthodes
</div>

<ParamField body="federatedLogin" type={<span>void | Promise&lt;void&gt;</span>}>
  <Expandable title="Paramètres">
    <ParamField body="payload" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FederatedLoginPasswordOptions">FederatedLoginPasswordOptions</a></span>}>
      **Propriétés**

      <ParamField body="connection" type="string" />
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="login" type={<span>void | Promise&lt;void&gt;</span>}>
  <Expandable title="Paramètres">
    <ParamField body="payload" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/LoginPasswordOptions">LoginPasswordOptions</a></span>}>
      **Propriétés**

      <ParamField body="captcha?" type="string" />

      <ParamField body="password" type="string" />

      <ParamField body="username" type="string" />
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="useLoginPassword" type={<a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/LoginPasswordMembers">LoginPasswordMembers</a>}>
  <Expandable title="Paramètres">
    **Propriétés**

    <ParamField body="branding" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/BrandingMembers">BrandingMembers</a></span>}>
      **Propriétés**

      <ParamField body="settings" type={<span><a href="#BrandingSettings">BrandingSettings</a></span>} />

      <ParamField body="themes" type={<span><a href="#BrandingThemes">BrandingThemes</a></span>} />

      ## BrandingSettings

      ```ts theme={null}
      export interface BrandingSettings {
        colors?: {
          primary?: string;
          pageBackground?:
            | string
            | {
                type: string;
                start: string;
                end: string;
                angleDegree: number;
              };
        };
        faviconUrl?: string;
        logoUrl?: string;
        fontUrl?: string;
      }
      ```

      ### Propriétés

      <ParamField body="colors?" type="object">
        <Expandable title="Propriétés">
          <ParamField body="pageBackground?" type="string | { angleDegree: number; end: string; start: string; type: string; }" />

          <ParamField body="primary?" type="string" />
        </Expandable>
      </ParamField>

      <ParamField body="faviconUrl?" type="string" />

      <ParamField body="fontUrl?" type="string" />

      <ParamField body="logoUrl?" type="string" />

      ## BrandingThemes

      ```ts theme={null}
      export interface BrandingThemes {
        default: {
          borders: Record<string, string | boolean | number>;
          colors: Record<string, string>;
          displayName: string;
          fonts: Record<string, string | boolean | object>;
          pageBackground: Record<string, string>;
          widget: Record<string, string | number>;
        };
      }
      ```

      ### Propriétés

      <ParamField body="default" type="object">
        <Expandable title="properties">
          <ParamField body="borders" type="Record<string, string | boolean | number>" />

          <ParamField body="colors" type="Record<string, string>" />

          <ParamField body="displayName" type="string" />

          <ParamField body="fonts" type="Record<string, string | boolean | object>" />

          <ParamField body="pageBackground" type="Record<string, string>" />

          <ParamField body="widget" type="Record<string, string | number>" />
        </Expandable>
      </ParamField>
    </ParamField>

    <ParamField body="client" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ClientMembers">ClientMembers</a></span>}>
      **Propriétés**

      <ParamField body="description" type="string" />

      <ParamField body="id" type="string" />

      <ParamField body="logoUrl" type="string" />

      <ParamField body="metadata" type="{[key: string]: string; }" />

      <ParamField body="name" type="string" />
    </ParamField>

    <ParamField body="organization" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/OrganizationMembers">OrganizationMembers</a></span>}>
      **Propriétés**

      <ParamField body="branding" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/Branding">Branding</a></span>} />

      <ParamField body="displayName" type="string" />

      <ParamField body="id" type="string" />

      <ParamField body="metadata" type="{[key: string]: string; }" />

      <ParamField body="name" type="string" />

      <ParamField body="usage" type="string" />
    </ParamField>

    <ParamField body="prompt" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/PromptMembers">PromptMembers</a></span>}>
      **Propriétés**

      <ParamField body="name" type="string" />
    </ParamField>

    <ParamField body="screen" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ScreenMembersOnLoginPassword">ScreenMembersOnLoginPassword</a></span>}>
      **Propriétés**

      <ParamField body="captcha" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CaptchaContext">CaptchaContext</a></span>} />

      <ParamField body="captchaImage" type="string" />

      <ParamField body="captchaProvider" type="string" />

      <ParamField body="captchaSiteKey" type="string" />

      <ParamField body="data" type="username" />

      <ParamField body="editIdentifierLink" type="string" />

      <ParamField body="isCaptchaAvailable" type="boolean" />

      <ParamField body="links" type="Record" />

      <ParamField body="name" type="string" />

      <ParamField body="resetPasswordLink" type="string" />

      <ParamField body="signupLink" type="string" />

      <ParamField body="texts" type="Record" />
    </ParamField>

    <ParamField body="tenant" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TenantMembers">TenantMembers</a></span>}>
      **Propriétés**

      <ParamField body="enabledFactors" type="string[]" />

      <ParamField body="enabledLocales" type="string[]" />

      <ParamField body="friendlyName" type="string" />

      <ParamField body="name" type="string" />
    </ParamField>

    <ParamField body="transaction" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TransactionMembersOnLoginPassword">TransactionMembersOnLoginPassword</a></span>}>
      **Propriétés**

      <ParamField body="alternateConnections" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/Connection">Connection</a></span>} />

      <ParamField body="connectionStrategy" type="string" />

      <ParamField body="countryCode" type="string" />

      <ParamField body="countryPrefix" type="string" />

      <ParamField body="currentConnection" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/Connection">Connection</a></span>} />

      <ParamField body="errors" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/Error">Error</a></span>} />

      <ParamField body="hasErrors" type="boolean" />

      <ParamField body="isForgotPasswordEnabled" type="boolean" />

      <ParamField body="isPasskeyEnabled" type="boolean" />

      <ParamField body="isSignupEnabled" type="boolean" />

      <ParamField body="locale" type="string" />

      <ParamField body="state" type="string" />

      ## Méthodes

      <ParamField body="getAllowedIdentifiers" type={<span><a href="/docs-v2/main//docs/libraries/acul/react-sdkScreens/type-aliases/IdentifierType">IdentifierType</a>[]</span>} />

      <ParamField body="getPasswordPolicy" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/PasswordPolicy">PasswordPolicy</a></span>} />

      <ParamField body="getUsernamePolicy" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UsernamePolicy">UsernamePolicy</a></span>} />
    </ParamField>

    <ParamField body="untrustedData" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}>
      **Propriétés**

      <ParamField body="authorizationParams" type="{ [key:  ext-${string} ]: string; login_hint?: string; screen_hint?: string; ui_locales?: string; }" />

      <ParamField body="submittedFormData" type="{[key: string]: string | number | boolean | null | undefined; }" />
    </ParamField>

    <ParamField body="user" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UserMembers">UserMembers</a></span>}>
      **Propriétés**

      <ParamField body="appMetadata" type="{[key: string]: string; }" />

      <ParamField body="email" type="string" />

      <ParamField body="enrolledDevices" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/EnrolledDevice">EnrolledDevice</a></span>} />

      <ParamField body="enrolledEmails" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/EnrolledEmail">EnrolledEmail</a></span>} />

      <ParamField body="enrolledFactors" type="string[]" />

      <ParamField body="enrolledPhoneNumbers" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/EnrolledPhoneNumber">EnrolledPhoneNumber</a></span>} />

      <ParamField body="id" type="string" />

      <ParamField body="organizations" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/Organizations">Organizations</a></span>} />

      <ParamField body="phoneNumber" type="string" />

      <ParamField body="picture" type="string" />

      <ParamField body="userMetadata" type="{[key: string]: string; }" />

      <ParamField body="username" type="string" />
    </ParamField>

    **Méthodes**

    <ParamField body="federatedLogin" type="Promise<void>">
      <Expandable title="Paramètres">
        <ParamField body="payload" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FederatedLoginPasswordOptions">FederatedLoginPasswordOptions</a></span>}>
          **Propriétés**

          <ParamField body="connection" type="string" />
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="login" type="Promise<void>">
      <Expandable title="Paramètres">
        <ParamField body="payload" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/LoginPasswordOptions">LoginPasswordOptions</a></span>}>
          **Propriétés**

          <ParamField body="captcha?" type="string" />

          <ParamField body="password" type="string" />

          <ParamField body="username" type="string" />
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<div id="commonutility-hooks">
  ## Hooks utilitaires courants
</div>

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Hooks/useCurrentScreen">useCurrentScreen</a>} type="Hooks" />

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Hooks/useErrors">useErrors</a>} type="Hooks" />

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Hooks/useAuth0Themes">useAuth0Themes</a>} type="Hooks" />

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorOptions">UseErrorOptions</a>} type="Types" />

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult">UseErrorsResult</a>} type="Types" />

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ErrorsResult">ErrorsResult</a>} type="Types" />

<ParamField body={<a href="/docs/libraries/acul/react-sdk/API-Reference/Types/type-aliases/ErrorKind">ErrorKind</a>} type="Types" />
