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

# Ajoutez la connexion à votre application Flutter pour Windows

> Ce guide explique comment intégrer Auth0 à une application de bureau Flutter pour Windows à l’aide de l’Auth0 Flutter SDK (bêta).

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASQUÉ*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

export const envSnippet = `AUTH0_DOMAIN={yourDomain}
AUTH0_CLIENT_ID={yourClientId}`;

<Note>
  **Prérequis :**

  * Flutter SDK 3.24.0+ et Dart 3.5.0+.
  * Windows 10 ou version ultérieure.
  * Visual Studio 2022 avec la charge de travail **Desktop development with C++**.
  * Compte Auth0 — [inscrivez-vous gratuitement](https://auth0.com/signup).

  Cette fonctionnalité est en **bêta** (`auth0_flutter` 2.1.0-beta.1). L’API pourrait changer avant sa disponibilité générale.
</Note>

Ce guide vous montre comment ajouter la connexion, la déconnexion et l’affichage du profil utilisateur à une application de bureau Windows avec Flutter à l’aide du SDK `auth0_flutter` et d’OAuth 2.0 [Flux du code d’autorisation + PKCE](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

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

<Steps>
  <Step title="Créer un projet Flutter pour Windows" stepNumber={1}>
    Créez un nouveau projet Flutter compatible avec la plateforme Windows.

    ```shellscript theme={null}
    flutter create --platforms=windows my_app
    cd my_app
    ```

    Assurez-vous que Windows est disponible :

    ```shellscript theme={null}
    flutter devices
    ```

    Vous devriez voir un appareil Windows de bureau dans la liste.

    <Tip>
      Exécutez `flutter doctor` pour vérifier que votre environnement est correctement configuré et que Visual Studio 2022 avec les outils de développement d’applications de bureau en C++ est détecté.
    </Tip>
  </Step>

  <Step title="Installez le SDK Auth0 Flutter" stepNumber={2}>
    Ajoutez la version bêta du SDK qui prend en charge Windows :

    ```shellscript theme={null}
    flutter pub add auth0_flutter:2.1.0-beta.1
    flutter pub add flutter_dotenv
    ```

    Votre `pubspec.yaml` doit inclure :

    <Snippet file="quickstart/native/flutter-windows/pubspec.yaml.mdx" />

    <Tip>
      Le SDK Auth0 Flutter nécessite **Flutter 3.24.0+** et **Dart 3.5.0+**. La plateforme Windows nécessite également **Visual Studio 2022** avec la charge de travail de développement d’applications de bureau en C++.
    </Tip>
  </Step>

  <Step title="Configurer Auth0" stepNumber={3}>
    Créez ou configurez une application Auth0 avec les URL de rappel requises pour l’authentification d’une application de bureau Windows.

    <Tabs>
      <Tab title="Configuration rapide">
        Créez une application **Native** dans votre Auth0 Dashboard avec les paramètres suivants :

        | Champ                 | Valeur                    |
        | --------------------- | ------------------------- |
        | Allowed Callback URLs | `auth0flutter://callback` |
        | Allowed Logout URLs   | `auth0flutter://callback` |

        Vos identifiants :

        * **Domain:** `{yourDomain}`
        * **Client ID:** `{yourClientId}`
      </Tab>

      <Tab title="CLI">
        ```shellscript theme={null}
        auth0 apps create \
          --name "My Flutter Windows App" \
          --type native \
          --callbacks "auth0flutter://callback" \
          --logout-urls "auth0flutter://callback"
        ```
      </Tab>

      <Tab title="Dashboard">
        1. Accédez à [Auth0 Dashboard](https://manage.auth0.com/) → **Applications > Applications**.
        2. Sélectionnez **Create Application**.
        3. Donnez-lui le nom "My Flutter Windows App" et choisissez **Native** comme type d’application.
        4. Accédez à l’onglet **Settings** de votre nouvelle application.
        5. Définissez **Allowed Callback URLs** sur `auth0flutter://callback`.
        6. Définissez **Allowed Logout URLs** sur `auth0flutter://callback`.
        7. Faites défiler la page vers le bas et cliquez sur **Save Changes**.
        8. Copiez les valeurs **Domain** et **Client ID** en haut de la page Application Settings.
      </Tab>
    </Tabs>

    <Info>
      L’URL `auth0flutter://callback` est un schéma personnalisé qui redirige le callback du navigateur vers votre application de bureau une fois l’authentification terminée.
    </Info>
  </Step>

  <Step title="Configurer les variables d’environnement" stepNumber={4}>
    Créez un fichier `.env` à la racine de votre projet :

    <AuthCodeBlock children={envSnippet} language="shellscript" filename=".env" />

    Ajoutez le fichier `.env` à vos ressources Flutter dans `pubspec.yaml` :

    <Snippet file="quickstart/native/flutter-windows/pubspec-assets.yaml.mdx" />

    <Warning>
      Ne mettez jamais votre fichier `.env` dans le contrôle de version. Ajoutez-le à `.gitignore`.
    </Warning>
  </Step>

  <Step title="Configurer le runner Windows" stepNumber={5}>
    Le flux d’authentification Windows nécessite d’intégrer le callback au runner de votre application. Le plugin Flutter ne reçoit pas automatiquement les activations de schéma de protocole du système d’exploitation — vous devez donc ajouter la gestion d’une instance unique et la transmission des URI.

    Remplacez le contenu de `windows/runner/main.cpp` :

    <Snippet file="quickstart/native/flutter-windows/main.cpp.mdx" />

    Ce code :

    * Force l’exécution en instance unique à l’aide d’un mutex Windows.
    * Récupère les URI `auth0flutter://callback` passées en arguments de ligne de commande.
    * Transmet les URI des lancements secondaires à l’instance déjà en cours d’exécution au moyen d’un canal nommé.
    * Définit la variable d’environnement `PLUGIN_STARTUP_URL` pour que le plugin Auth0 puisse la lire.
  </Step>

  <Step title="Enregistrez le schéma d’URL personnalisé" stepNumber={6}>
    Enregistrez `auth0flutter` comme schéma d’URL personnalisé pour que Windows achemine les URI de rappel vers votre application.

    Créez un fichier `windows/url_scheme.reg` :

    <Snippet file="quickstart/native/flutter-windows/url_scheme.reg.mdx" />

    Remplacez `C:\path\to\your\app.exe` par le chemin réel de l’exécutable généré. En développement, il s’agit généralement de :

    ```text theme={null}
    build\windows\x64\runner\Debug\my_app.exe
    ```

    Double-cliquez sur le fichier `.reg` pour l’importer dans le Registre de Windows.

    <Info>
      Pour une version de production, enregistrez le schéma d’URL personnalisé par programmation dans le programme d’installation de votre application (MSIX, Inno Setup, etc.) au lieu de vous fier à un fichier `.reg`.
    </Info>

    **Vérifiez que le schéma fonctionne :**

    Ouvrez l’invite de commandes et exécutez :

    ```shellscript theme={null}
    start auth0flutter://test
    ```

    Votre application devrait s’ouvrir (ou revenir au premier plan si elle est déjà en cours d’exécution).
  </Step>

  <Step title="Implémenter la connexion et la déconnexion" stepNumber={7}>
    Créez `lib/auth_service.dart` pour gérer l’authentification Windows :

    <Snippet file="quickstart/native/flutter-windows/auth_service.dart.mdx" />

    <Info>
      Le SDK Flutter Windows d’Auth0 ne prend actuellement pas en charge la gestion des informations d’authentification. Vous devez enregistrer manuellement les informations d’authentification si vous voulez conserver les sessions après le redémarrage de l’application.
    </Info>
  </Step>

  <Step title="Afficher les renseignements du profil de l’utilisateur" stepNumber={8}>
    Créez l’interface principale de l’application dans `lib/main.dart` :

    <Snippet file="quickstart/native/flutter-windows/main.dart.mdx" />
  </Step>

  <Step title="Lancez votre application" stepNumber={9}>
    Compilez et exécutez l’application :

    ```shellscript theme={null}
    flutter run -d windows
    ```

    **Flux attendu :**

    1. L’application se lance avec un bouton **Se connecter**.
    2. Sélectionnez **Se connecter**. Le navigateur système ouvre la page Auth0 Universal Login.
    3. Terminez l’authentification dans le navigateur.
    4. Le navigateur redirige vers `auth0flutter://callback` → votre application revient à l’avant-plan.
    5. Le nom, l’adresse courriel et la photo de profil de l’utilisateur s’affichent.

    <Warning>
      Assurez-vous que le schéma d’URL personnalisé est enregistré (étape 6) avant de faire le test. Sans cela, l’URL de rappel du navigateur ne peut pas ouvrir votre application.
    </Warning>
  </Step>
</Steps>

<Check>
  **Checkpoint**

  Vous devriez maintenant avoir une expérience de connexion Auth0 entièrement fonctionnelle dans votre application Flutter pour Windows. L’application ouvre le navigateur du système pour Auth0 Universal Login, reçoit le callback au moyen du schéma d’URL personnalisé et affiche le profil de l’utilisateur authentifié.
</Check>

***

<div id="troubleshoot-advanced-use">
  ## Dépannage et utilisation avancée
</div>

<Accordion title="Problèmes courants et solutions">
  ### Le navigateur s’ouvre, mais l’application ne reçoit pas le callback

  **Symptôme** : la connexion Auth0 réussit dans le navigateur, mais l’application ne reçoit jamais les informations d’authentification.

  **Correctif :**

  1. Ouvrez l’Éditeur du Registre → `HKEY_CURRENT_USER\Software\Classes\auth0flutter\shell\open\command` et confirmez le chemin vers votre fichier `.exe`.
  2. Testez avec `start auth0flutter://test` dans l’invite de commande — votre application devrait se lancer.
  3. Assurez-vous que `windows/runner/main.cpp` inclut le code du serveur de pipe et du mutex.
  4. Vérifiez qu’aucune instance résiduelle n’est en cours d’exécution dans le Gestionnaire des tâches.
  5. Recompilez complètement : `flutter clean && flutter run -d windows`.

  ### L’authentication expire après 5 minutes

  **Symptôme** : la connexion semble figée et finit par échouer.

  **Correctif :** L’application n’a jamais reçu l’URI de callback. Vérifiez :

  1. Que l’entrée du registre pointe vers le bon chemin de l’exécutable.
  2. Que le nom du mutex `auth0flutter_single_instance_mutex` est identique dans `main.cpp`.
  3. Qu’aucun pare-feu ou antivirus ne bloque le pipe nommé.
  4. Fermez toutes les instances résiduelles et recompilez.

  ### Une deuxième instance de l’application se lance au lieu de transmettre l’URI

  **Symptôme** : une nouvelle fenêtre s’ouvre au lieu que l’application déjà ouverte reçoive le callback.

  **Correctif :**

  1. Fermez toutes les instances en cours d’exécution dans le Gestionnaire des tâches.
  2. Assurez-vous que le nom du mutex est identique dans `main.cpp`.
  3. Recompilez avec la commande suivante : `flutter clean && flutter run -d windows`.

  ### WindowsWebAuthentication est introuvable

  **Symptôme** : erreur de compilation mentionnant `windowsWebAuthentication`.

  **Correctif :** Assurez-vous que votre `pubspec.yaml` précise la version bêta :

  ```yaml theme={null}
  dependencies:
    auth0_flutter: 2.1.0-beta.1
  ```

  Exécutez `flutter pub get` pour mettre à jour.

  ### Erreur de non-correspondance de l’URL de callback

  **Symptôme** : Error "redirect\_uri\_mismatch" provenant d’Auth0.

  **Correctif :**

  1. Vérifiez que **Allowed Callback URLs** dans [Auth0 Dashboard](https://manage.auth0.com/) → Application Settings correspond exactement à `auth0flutter://callback`.
  2. Assurez-vous que le paramètre `appCustomURL` dans votre code correspond à : `'auth0flutter://callback'`.
  3. Vérifiez qu’il n’y a ni barre oblique finale ni espace.
</Accordion>

<Accordion title="Utiliser un serveur intermédiaire">
  Quand Auth0 redirige directement vers un schéma personnalisé, le navigateur peut afficher une invite ou laisser un onglet vide. Pour une expérience plus fluide, utilisez un serveur HTTPS intermédiaire :

  1. Configurez un endpoint sur le serveur (p. ex. `https://your-app.example.com/callback`) qui redirige vers `auth0flutter://callback?code=...&state=...`.
  2. Dans [Auth0 Dashboard](https://manage.auth0.com/) → Application Settings, définissez **Allowed Callback URLs** sur `https://your-app.example.com/callback`.
  3. Passez les deux URL à la méthode de connexion :

  ```dart theme={null}
  final result = await auth0.windowsWebAuthentication().login(
    appCustomURL: 'auth0flutter://callback',
    redirectUrl: 'https://your-app.example.com/callback',
  );
  ```

  La page du serveur peut afficher "Redirection..." et se fermer d’elle-même pour une expérience plus propre.
</Accordion>

<Accordion title="Scopes personnalisés et audience">
  Demandez des scopes supplémentaires ou une audience d’API :

  ```dart theme={null}
  final result = await auth0.windowsWebAuthentication().login(
    appCustomURL: 'auth0flutter://callback',
    scopes: {'openid', 'profile', 'email', 'read:messages'},
    audience: 'https://your-api.example.com',
  );
  ```

  Configurez l’API dans [Auth0 Dashboard](https://manage.auth0.com/) → **Applications > APIs** avant d’utiliser le paramètre `audience`.
</Accordion>

***

<div id="next-steps">
  ## Prochaines étapes
</div>

* [Auth0 Flutter SDK sur GitHub](https://github.com/auth0/auth0-flutter) — code source et suivi des problèmes.
* [Auth0 Flutter SDK sur pub.dev](https://pub.dev/packages/auth0_flutter) — référence de l’API.
* [Quickstart Flutter (Android, iOS, macOS, Web)](https://auth0.com/docs/quickstart/native/flutter) — guides pour d’autres plateformes.
* [Bonnes pratiques de stockage des jetons](https://auth0.com/docs/secure/tokens/token-storage) — gestion sécurisée des identifiants.
* [Auth0 Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) — personnaliser l’expérience de connexion.