> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-feat-init-gt-translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Découvrez comment configurer des étapes d’inscription supplémentaires à l’aide de Forms for Actions

# Cas d’utilisation : Configurer des étapes d’inscription supplémentaires à l’aide de Forms

<Card title="Avant de commencer">
  1. Créez une [Machine-to-Machine Application](/docs/fr-ca/get-started/auth0-overview/create-applications/machine-to-machine-apps) avec les scopes suivants activés :

  * `read:users`
  * `update:users`
  * `create:users`
  * `read:users_app_metadata`
  * `update:users_app_metadata`
  * `create:users_app_metadata`

  2. Ajoutez une [connexion Vault](/docs/fr-ca/customize/forms/vault) à l’aide des informations d’identification de l’application M2M.
</Card>

Forms for Actions vous permet d’ajouter des étapes supplémentaires à vos flux d’inscription ou de login, et de les rendre obligatoires avant que les utilisateurs puissent accéder à votre application.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/ZOQNi6SrEC9OREcBbdiJ3/d79f84fb61acd5473bdf932527e26d58/custom-signup-form.png" alt="Dashboard > Actions > Forms > Cas d’utilisation Formulaire d’inscription personnalisé" />
</Frame>

Les sections ci-dessous expliquent comment créer des formulaires pour ajouter des étapes d’inscription supplémentaires à l’aide de nœuds et de flux, ainsi que la marche à suivre pour ajouter votre formulaire à une Action [Post Login](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger).

<h2 id="create-a-form-from-scratch">
  Créer un formulaire à partir de zéro
</h2>

Suivez ces étapes pour créer un formulaire afin de recueillir des renseignements :

1. Ouvrez l’éditeur de formulaires en sélectionnant **Auth0 Dashboard > Actions > Forms.**
2. Sélectionnez **Create Form** > **Start from scratch**.

Par défaut, un nouveau formulaire contient un nœud Start, un nœud Step et un nœud Ending screen.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/2TZ9jSjgEcARFpULI6hz4R/a4319a1bd482f2ee5cc23100fdb2f42c/New-form-Forms-for-action-use-case.png" alt="Dashboard > Forms > Cas d’utilisation > Form" />
</Frame>

<h3 id="configure-the-step-node">
  Configurer le nœud Step
</h3>

Le nœud Step est l’interface graphique visible par les utilisateurs. Ajoutez des [champs](/docs/fr-ca/customize/forms/nodes-and-components) au nœud Step pour recueillir le nom complet et le titre du poste de l’utilisateur en suivant ces étapes :

1. Faites glisser un champ **Texte enrichi** du **menu Components** vers le nœud **Step**.

   * **Texte enrichi** : Saisissez un message personnalisé.
   * Sélectionnez **Enregistrer**.
2. Faites glisser un champ **Texte** vers le nœud **Step**.

   * **ID** : Saisissez `full_name`.
   * **Étiquette** : Saisissez `Full name`.
   * **Étiquette** : Cochez la case.
   * **Obligatoire** : Cochez la case.
   * Sélectionnez **Enregistrer**.
3. Faites glisser un champ **Texte** vers le nœud **Step**.

   * **ID** : Saisissez `job_title`.
   * **Étiquette** : Saisissez `Job title.`
   * **Étiquette** : Cochez la case.
   * **Obligatoire** : Cochez la case.
   * Sélectionnez **Enregistrer**.
4. Sélectionnez **Publier** pour enregistrer.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/6Kcn0ai9fsVsqHwZpTGByG/37cbf4ffee63a7010926b15f06dd20ac/custom-signup-step-node.png" alt="Dashboard > Actions > Forms > cas d’utilisation Custom Signup étapes nœud Step" />
</Frame>

<h3 id="configure-the-flow-node">
  Configurer le nœud Flow
</h3>

Ajoutez un nœud **Flow** après le nœud **Step** pour mettre à jour `user_metadata` et reprendre le flux d’authentification en suivant ces étapes :

1. Sélectionnez **Flow** au bas de l’éditeur de formulaires.
2. Supprimez le lien existant entre les nœuds **Step** et **Ending Screen**.
3. Sélectionnez le nouveau **Flow** > **Click to add a flow** > **Create a new flow.**

   * Entrez `Update user_metadata` dans le champ **Name**.
   * Sélectionnez **Create**.
   * Sélectionnez **Save**.
4. Liez le nœud **Flow** aux nœuds **Step** et **Ending Screen**, comme illustré ci-dessous.
5. Sélectionnez **Publish** pour enregistrer.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/4nTdYdA2Hu5vK65smkdvJg/db3294ebc25a7c2636be96362a3ea56e/custom-signup-step-flow.png" alt="Dashboard > Actions > Forms > Cas d’usage Custom Signup Step Update User metadata flow" />
</Frame>

Ajoutez une action Auth0 **Update user** au flux en suivant ces étapes :

1. Sélectionnez le **Flow** **Update user\_metadata** > **Edit flow** pour ouvrir l’éditeur de flux dans un nouvel onglet.
2. Sous StartAction, sélectionnez l’icône **+** pour ajouter une Action **Update user**. Remplissez les champs ci-dessous, puis sélectionnez **Save** pour continuer.

   * **Connection** : Dans la liste déroulante, sélectionnez la connexion Vault vers votre application M2M.

   * **User ID** : Entrez `{{context.user.user_id}}`.

   * **Body** : Copiez-collez le code suivant pour mettre à jour `user_metadata` avec les propriétés `full_name` et `job_title`.

     ```json lines theme={null}
     {
       "user_metadata": {
         "full_name": "{{fields.full_name}}",
         "job_title": "{{fields.job_title}}"
       }
     }
     ```

   * Sélectionnez **Save**.
3. Sélectionnez Publish pour enregistrer.

<h2 id="retrieve-your-form-render-code">
  Récupérez le code de rendu de votre formulaire
</h2>

Récupérez le code de rendu de votre formulaire pour afficher le formulaire visuellement à l’aide d’une Action Post Login personnalisée en suivant ces étapes :

* Dans l’éditeur de formulaires, sélectionnez **`<> Render`**.
* Sélectionnez **Copy**.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/2EIUzc539sq9lwoTKbjoJv/496a864c0fc44a782c9cadca119dbfb0/embed.png" alt="Dashboard > Actions > Forms > Form > Embed" />
</Frame>

<h2 id="create-a-post-login-action">
  Créer une Action Post Login
</h2>

Créez une Action post-login pour afficher votre formulaire en suivant ces étapes :

1. Accédez à **Auth0 Dashboard > Actions > Flows > Login.**
2. Sélectionnez l’icône **+**, puis **Build from scratch** :

   * **Name** : Entrez `Render Additional Signup Form`.
   * **Trigger** : Sélectionnez `Login / Post Login`.
   * **Runtime** : Sélectionnez la version recommandée.
3. Sélectionnez **Create**.

Pour configurer l’Action post-login :

1. Supprimez le code existant dans l’éditeur de code.
2. Collez le code de rendu du formulaire dans l’éditeur de code.
3. Modifiez le code pour définir la logique conditionnelle qui affichera le formulaire.

   ```javascript lines theme={null}
   /**
   * @param {Event} event - Détails sur l’utilisateur et le contexte dans lequel il se connecte.
   * @param {PostLoginAPI} api - Interface dont les méthodes peuvent être utilisées pour modifier le comportement du processus de connexion.
   */
   exports.onExecutePostLogin = async (event, api) => {
     const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';

     if (
       !event.user.user_metadata.full_name &&
       !event.user.user_metadata.job_title
     ) {
       api.prompt.render(FORM_ID);
     }
   }

   exports.onContinuePostLogin = async (event, api) => { }
   ```

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     L’exemple de code ci-dessus affichera le formulaire si les propriétés `full_name` et `job_title` sont absentes des métadonnées utilisateur.
   </Callout>
4. Sélectionnez **Deploy.**
5. Glissez-déposez l’Action **Render Additional Signup Form** dans le flux **Login**.

   <Frame>
     <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/1WBOicIOcH98hKj6Lq9HF2/4951e30a0cc08c7c5daa0116eaa17e11/Screenshot_2024-03-01_at_15.48.00.png" alt="Dashboard > Forms > Use Cases Custom Signup Steps Login Flow" />
   </Frame>
6. Sélectionnez **Apply**.

<h3 id="test-implementation">
  Tester la mise en œuvre
</h3>

Testez la mise en œuvre en suivant ces étapes :

* Inscrivez un nouvel utilisateur à une application.
* L’Action post-login dans le flux de Login affichera le formulaire et demandera ces renseignements.
* Sélectionnez **<Tooltip tip="Auth0 Dashboard : l’interface principale d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> > User Management > Users,** repérez le nouvel utilisateur et vérifiez que ses attributs `full_name` et `job_title` contiennent les renseignements saisis à l’étape d’inscription supplémentaire.
