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

> Créez votre premier Action Module Auth0 dans le Dashboard Auth0 en créant le module, en ajoutant des secrets et des dépendances NPM, en publiant une version et en l’utilisant pour envoyer des logs à un service externe.

# Créez votre premier Action Module

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
              processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

<div id="get-started">
  ## Pour commencer
</div>

Suivez le Quickstart pour créer un Action Module et l’utiliser dans une Action afin d’envoyer des logs à un service externe.

<Steps>
  <Step title="Créer un module d’action" titleSize="h3" stepNumber={1}>
    Pour utiliser un Action Module dans une Action précise, vous devez d’abord créer l’Action Module, puis l’ajouter ou l’utiliser dans l’Action.

    <Tabs>
      <Tab title="Dashboard">
        1. Accédez à [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library), puis sélectionnez **Modules**.
        2. Sélectionnez **Create Module**.
        3. Entrez un **Name**.
        4. Sélectionnez **Create**.

        Auth0 affiche l’éditeur de code.

        <Frame>
          <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-new-module.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=67daedf547f0fc7311d40c080fb8b3fb" alt="Actions Modules - Nouvel Action Module" width="1414" height="669" data-path="docs/images/customize/actions/modules/actions-modules-new-module.png" />
        </Frame>
      </Tab>
    </Tabs>
  </Step>

  <Step title="Ajouter un secret" titleSize="h3" stepNumber={2}>
    Chaque module d’action peut contenir des paires clé-valeur secrètes. Utilisez-les pour stocker des renseignements sensibles, comme des clés API, des certificats et des valeurs qui peuvent varier d’un environnement à l’autre.

    <Tabs>
      <Tab title="Dashboard">
        Enregistrez l’URL du service externe comme Secret.

        1. Sélectionnez l’icône **<svg style={{ display: 'inline' }} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sc-kJNqSH"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.573 2.06l1.409 1.42-1.192 1.182L22.65 7.5l-4.756 4.72-2.86-2.838-2.783 2.764a6.196 6.196 0 011.196 3.63 6.172 6.172 0 01-1.832 4.41 6.277 6.277 0 01-8.853-.03l-.007-.008A6.183 6.183 0 011 15.782a6.184 6.184 0 011.831-4.335 6.271 6.271 0 017.987-.696l8.755-8.691zm-9.335 10.798l-.045-.043a4.264 4.264 0 00-2.987-1.182 4.262 4.262 0 00-2.966 1.233A4.184 4.184 0 003 15.8a4.183 4.183 0 001.185 2.95 4.276 4.276 0 006.022.016 4.2 4.2 0 001.24-2.984 4.171 4.171 0 00-1.21-2.924zm6.216-4.885l1.44 1.43L19.811 7.5l-1.44-1.43-1.917 1.903z" fill="inherit" /></svg>** dans la barre latérale gauche de l’éditeur de code.
        2. Sélectionnez **Add Secret**.
        3. Saisissez `SERVICE_URL` dans le champ **Name**.
        4. Saisissez l’URL du service externe dans le champ **Value**.
        5. Sélectionnez **Create**.

        <Frame>
          <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-secret.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=0575d00f98c2919bdb74252317b5e79a" alt="Modules d’action - Secret ajouté" width="1411" height="736" data-path="docs/images/customize/actions/modules/actions-modules-secret.png" />
        </Frame>

        Auth0 ajoute le Secret à la liste des Secrets du module d’action.
      </Tab>
    </Tabs>

    **Étape supplémentaire :** Répétez les étapes pour enregistrer un `API_KEY` comme Secret que vous enverrez dans les en-têtes au service externe avec chaque requête.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Une fois un Secret créé, Auth0 n’en révèle jamais la valeur. Auth0 chiffre tous les Secrets et les stocke de façon sécurisée.
    </Callout>

    <Warning>
      Chaque **Secret de module d’action** est indépendant des autres **Modules d’action** et des **Secrets des Actions**.
    </Warning>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Utilisez les **Secrets** dans le module d’action en saisissant `actions.secrets.[secret_key]`.
    </Callout>
  </Step>

  <Step title="Ajouter de la logique personnalisée" titleSize="h3" stepNumber={3}>
    Maintenant, ajoutez le code suivant à votre module d’action.

    <Tabs>
      <Tab title="Dashboard">
        Ajoutez le code suivant à votre module d’action :

        ```javascript lines theme={null}
        module.exports = {
          sendLog: async (code, message) => {
            try {
              await fetch(actions.secrets.SERVICE_URL, {
                method: 'POST',
                headers: {
                  'X-API-Key': actions.secrets.API_KEY,
                },
                body: JSON.stringify({
                  code,
                  message
                }),
              });

              console.log({
                code,
                message
              });
            } catch (err) {
              throw new Error('External service failure');
            }

            return;
          }
        };
        ```
      </Tab>
    </Tabs>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      À noter :

      * [Directives de codage](/docs/fr-ca/customize/actions/action-coding-guidelines#actions-modules)
      * [Limites](/docs/fr-ca/customize/actions/limitations#actions-modules)
    </Callout>
  </Step>

  <Step title="Enregistrer le brouillon" titleSize="h3" stepNumber={4}>
    Vous pouvez enregistrer un brouillon de votre Action Module.

    <Tabs>
      <Tab title="Dashboard">
        1. Sélectionnez **Save Draft**.

        <Frame>
          <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-draft.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=44d6d4a54d1c27138c3800b08235adea" alt="Actions Modules - Brouillon enregistré" width="1417" height="733" data-path="docs/images/customize/actions/modules/actions-modules-draft.png" />
        </Frame>
      </Tab>
    </Tabs>

    Cette opération enregistre votre Action Module sans publier de nouvelle version; elle n’aura donc aucun effet sur les Actions qui l’utilisent.
  </Step>

  <Step title="Publier le module Action" titleSize="h3" stepNumber={5}>
    Une fois que vous êtes satisfait du code de l’Action Module, il est temps de le **publier**.

    <Tabs>
      <Tab title="Dashboard">
        1. Sélectionnez **Publier**.

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          La publication d’un Action Module en crée un instantané à ce moment précis et l’enregistre comme une **version d’Action Module**.
        </Callout>

        2. Sélectionnez **Afficher l’historique des versions**.

        <Frame>
          <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-published-version.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=c5bd3cb6b2724ffc8b8054a21ae42f65" alt="Actions Modules - Historique des versions" width="1431" height="735" data-path="docs/images/customize/actions/modules/actions-modules-published-version.png" />
        </Frame>

        Auth0 affiche la liste des versions d’Action Module, y compris le brouillon.
      </Tab>
    </Tabs>

    Vous pouvez maintenant utiliser l’Action Module dans une Action.

    <Warning>
      Chaque **Action** doit faire explicitement référence à la **version d’Action Module**, ce qui empêche les mises à niveau automatiques susceptibles d’introduire des erreurs inattendues.
    </Warning>
  </Step>

  <Step title="Ajouter l’Action Module à une Action" titleSize="h3" stepNumber={6}>
    Ajoutons l'Action Module dans une Action.

    <Tabs>
      <Tab title="Dashboard">
        1. Accédez à [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library), puis sélectionnez une **Action** spécifique.
        2. Dans l’éditeur d’Action, sélectionnez l’icône **<svg style={{ display: 'inline' }} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sc-hQYogJ"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.388 4.07A3.717 3.717 0 0112 3c.977 0 1.917.383 2.612 1.07A3.65 3.65 0 0115.7 6.667a3.65 3.65 0 01-1.028 2.537l1.683 2.778-1.71 1.036-1.701-2.806a3.733 3.733 0 01-3.556-.948A3.65 3.65 0 018.3 6.667c0-.977.393-1.91 1.088-2.597zM12 5c-.455 0-.889.179-1.207.493a1.65 1.65 0 00-.493 1.174c0 .438.176.86.493 1.174.318.314.752.492 1.207.492.455 0 .889-.178 1.207-.492a1.65 1.65 0 00.493-1.174c0-.438-.176-.86-.493-1.174A1.717 1.717 0 0012 5zM6.697 13.802l1.98-2.87 1.646 1.136-1.911 2.77c.633.677.988 1.567.988 2.495a3.65 3.65 0 01-1.088 2.597A3.717 3.717 0 015.7 21a3.717 3.717 0 01-2.612-1.07A3.65 3.65 0 012 17.333c0-.976.393-1.91 1.088-2.597a3.717 3.717 0 013.61-.934zM5.7 15.667c-.455 0-.889.178-1.206.492A1.65 1.65 0 004 17.333c0 .438.176.86.494 1.175.317.313.751.492 1.206.492.455 0 .889-.179 1.206-.492a1.65 1.65 0 00.494-1.175c0-.438-.176-.86-.494-1.174a1.717 1.717 0 00-1.206-.492zM15.688 14.736a3.717 3.717 0 012.612-1.07c.977 0 1.917.384 2.612 1.07A3.65 3.65 0 0122 17.333a3.65 3.65 0 01-1.088 2.597A3.717 3.717 0 0118.3 21a3.717 3.717 0 01-2.612-1.07 3.66 3.66 0 01-.948-1.597H11v-2h3.74c.172-.6.496-1.15.948-1.597zm2.612.93c-.455 0-.889.18-1.207.493a1.65 1.65 0 00-.493 1.174c0 .438.176.86.493 1.175.318.313.752.492 1.207.492.455 0 .889-.179 1.206-.492A1.65 1.65 0 0020 17.332c0-.438-.176-.86-.494-1.174a1.717 1.717 0 00-1.206-.492z" fill="inherit" /></svg>** dans la barre latérale gauche.
        3. Sélectionnez **Ajouter un module**.
        4. Sélectionnez un **Nom** et une **Version** de module.
        5. Sélectionnez **Ajouter**.

        <Frame>
          <Frame>
            <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-add-module.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=edfe210217e6d875a10eacea0dd2d213" alt="Actions - Ajouter un module d'action" width="1418" height="716" data-path="docs/images/customize/actions/modules/actions-modules-add-module.png" />
          </Frame>
        </Frame>
      </Tab>
    </Tabs>
  </Step>

  <Step title="Utilisez le module d’action dans l’Action" titleSize="h3" stepNumber={7}>
    Maintenant, utilisons l’Action Module dans l’Action.

    <Tabs>
      <Tab title="Dashboard">
        1. Ajoutez l’instruction **require**.

        ```javascript lines theme={null}
        const logger = require('actions:logger');
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          L’instruction **require** fait référence à l’Action Module au format **actions:\[module-name]**.
        </Callout>

        2. Ajoutez l’appel à `logger.sendLog` dans la **fonction Action**, à l’endroit où vous souhaitez envoyer des logs.

        ```javascript lines theme={null}
        await logger.sendLog('logger_success', 'Your Action was able to use the Logger Action Module');
        ```

        3. Sélectionnez **Deploy** pour déployer l’Action.

        <Frame>
          <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-use-module.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=6b0d36fea2bfb8b4eeef8c46ec8b4b82" alt="Actions - Use Action Module" width="1418" height="674" data-path="docs/images/customize/actions/modules/actions-modules-use-module.png" />
        </Frame>
      </Tab>
    </Tabs>

    <Warning>
      N’oubliez pas d’associer l’Action à un Trigger.
    </Warning>
  </Step>
</Steps>

<Check>
  **Vérification**

  Vous devriez maintenant avoir un **Action Module** entièrement fonctionnel utilisé par une **Action**.
</Check>

***

<div id="advanced-usage">
  ## Utilisation avancée
</div>

<Accordion title="Dépendances NPM">
  Chaque **Action Module** peut ajouter et utiliser des **[dépendances NPM](https://www.npmjs.com/)**.

  <Tabs>
    <Tab title="Dashboard">
      1. Sélectionnez l’icône **<svg style={{ display: 'inline' }} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sc-lgWczb"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.543 5.02l7.197-3.715h.003a2.75 2.75 0 012.514 0h.003l7.197 3.715h.002A2.864 2.864 0 0122 7.573v8.853a2.866 2.866 0 01-1.543 2.553l-7.197 3.714a2.75 2.75 0 01-2.529 0l-7.2-3.715-.002-.002A2.865 2.865 0 012 16.413v-8.84A2.865 2.865 0 013.543 5.02zm8.113-1.937l-1.97 1.018L16.5 7.618l2.315-1.195-6.47-3.34h-.001a.75.75 0 00-.688 0zM20 8.063l-7 3.611v8.902l6.542-3.377h.003a.865.865 0 00.455-.774V8.062zM11 20.58v-8.905L4 8.062v8.36a.866.866 0 00.45.778h.001L11 20.58zM5.185 6.423L12 9.94l2.32-1.197-6.815-3.517-2.32 1.197z" fill="inherit" /></svg>** dans la barre latérale gauche de l’éditeur de code.
      2. Sélectionnez **Add Dependency**.
      3. Saisissez le **Name** du **package NPM**.
      4. Saisissez la **Version** du **package NPM**.
      5. Sélectionnez **Create**.

      <Frame>
        <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/customize/actions/modules/actions-modules-dependency.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=8446218fe5bd61de06e54c22d0d058a0" alt="Modules Action - Dépendance ajoutée" width="1414" height="730" data-path="docs/images/customize/actions/modules/actions-modules-dependency.png" />
      </Frame>

      Auth0 ajoute la dépendance à la liste des dépendances du Action Module.
    </Tab>
  </Tabs>

  <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
    Utilisez les **dépendances** répertoriées dans le Action Module en les important avec `require('[package-name]')`.
  </Callout>

  <Warning>
    Lorsque vous enregistrez cette Action, Auth0 résout la version la plus récente de votre dépendance et la remplace par un numéro de version précis afin d’éviter que de futures mises à jour du package ne brisent votre Action.

    Vous pouvez fournir une version précise au lieu de latest.
  </Warning>
</Accordion>
