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

> Découvrez comment afficher un formulaire pendant un flux de connexion ou d’inscription à l’aide d’une Action post-login ou pre-user-registration.

# Afficher des Forms à l’aide d’Actions

Après avoir créé un formulaire, vous pouvez l’afficher avec [Actions](/docs/fr-ca/customize/actions) à l’aide de la méthode `api.prompt.render()` :

```javascript lines theme={null}
// Exemple utilisant le déclencheur post-login

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

Remplacez form\_id par l’ID du formulaire. Vous pouvez trouver l’ID dans l’URL du formulaire, par exemple : `ap_pUMG...`, ou le sélectionner dans l’onglet **Rendu** de l’éditeur de formulaires.
Dans l’[éditeur de code Actions](/docs/fr-ca/customize/actions/write-your-first-action#create-an-action), vous pouvez définir la logique métier pour décider quand et comment afficher le formulaire.

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {

  // Afficher le formulaire uniquement si l'utilisateur n'a pas de métadonnées company_name
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

Pour en savoir plus sur ces objets, consultez :

* [Objet Event](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object): Découvrez les objets Event et leurs propriétés.
* [Objet API](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object): Découvrez les objets API et leurs méthodes.

<div id="populate-values-for-existing-fields-and-hidden-fields-client-side">
  ## Attribuer des valeurs aux champs existants et aux champs masqués (côté client)
</div>

Vous pouvez attribuer des valeurs aux champs existants et aux champs masqués à l’aide de la propriété `fields` comme deuxième argument de votre méthode render.

Dans l’exemple ci-dessous, la valeur `Jane` est attribuée au champ `first_name`.

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    fields: {
      first_name: 'Jane',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

<Warning>
  N’insérez pas de renseignements sensibles; les valeurs renseignées sont exposées dans le navigateur (côté client).
</Warning>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Assurez-vous que le `field` `ID` mentionné dans le deuxième argument est disponible côté client dans vos [nœuds et composants](/docs/fr-ca/customize/forms/nodes-and-components); sinon, la valeur ne sera pas renseignée.
</Callout>

<div id="inject-custom-data-with-shared-variables-server-side">
  ## Injecter des données personnalisées avec des variables partagées (côté serveur)
</div>

Vous pouvez injecter des variables côté serveur à l’aide de la propriété `vars` en tant que deuxième argument de votre méthode `render`. Cela permet d’injecter des données sensibles sans les exposer côté client.

Dans l’exemple ci-dessous, la valeur `123456789` renseigne la variable `external_user_id`.

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    vars: {
      external_user_id: '123456789',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Les variables partagées `{{vars.*}}` ne sont soumises à aucune restriction de type de données.

  Les variables partagées `{{vars.*}}` sont toujours masquées automatiquement.

  Contrairement aux variables `{{fields.*}}`, la propriété `{{vars.*}}` n’a pas besoin d’exister dans votre formulaire avant que vous y injectiez des valeurs.

  Vous pouvez utiliser la propriété `{{vars.*}}` pour faire référence à des variables partagées dans vos Forms et les Flows qui y sont liés. Pour en savoir plus, consultez [Variables](/docs/fr-ca/customize/forms/variables).
</Callout>

<div id="fields-and-shared-variables-data-in-actions">
  ## Données des champs et des variables partagées dans les Actions
</div>

Les données des champs et des variables partagées recueillies dans vos formulaires sont automatiquement disponibles dans `event.prompt`, dans la fonction de reprise de l’action en cours :

* La propriété `id`, qui contient l’ID du prompt que vous affichez.
* L’objet `fields`, qui contient les données de tous vos champs, y compris les champs masqués.
* L’objet `vars`, qui contient toutes les données de vos variables partagées.

<Accordion title="Exemple d’objet event.prompt">
  ```json lines theme={null}
  {
    "id": "ap_fuVuFiiQWN3mTEujWTy966",
    "fields": {
      "first_name": "Jane",
      "company_name": "Okta"
    },
    "vars": {
      "external_crm_uuid": "f8f32e6f-2329-49bd-bf21-fa8b0bea2652",
      "api_hostname": "api.example.com"
    }
  }
  ```
</Accordion>

Dans l’exemple ci-dessous, `api.user.setUserMetadata` renseigne l’attribut `company_name` de `user_metadata` avec la propriété `event.prompt.fields.company_name` recueillie dans votre formulaire.

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  api.user.setUserMetadata('company_name', event.prompt.fields.company_name);
}
```

<div id="restrictions-and-limitations">
  ## Restrictions et limites
</div>

* Vous ne pouvez pas [rediriger](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions) un utilisateur et afficher un formulaire dans la même Action. Si vous devez faire les deux, envisagez d’utiliser des Actions distinctes.
* Vous ne pouvez afficher qu’un seul formulaire par Action. Si vous devez afficher plus d’un formulaire, vous devez les afficher dans des Actions distinctes.
* La limite de taille de la propriété `fields` est de 24 KB.
* La méthode `api.prompt.render()` est offerte dans les déclencheurs suivants :

  * [post-login](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object)
  * [post-challenge](/docs/fr-ca/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object)